events page

This commit is contained in:
infeeeee
2019-08-10 01:05:05 +02:00
parent 911688225f
commit eb6fdf9388
7 changed files with 291 additions and 110 deletions

View File

@@ -27,10 +27,10 @@ nagy képek, metadata ipad: nem férnek be a rublikába ha hosszúak, mi legy, e
## További kérdések ## További kérdések
Nincs találat oldal, pl keresésnél
404 oldal
Keresési találatok oldal Keresési találatok oldal
Esemény oldalon a "Tovább az eseményre gomb" legyen kiütött? Esemény oldalon a "Tovább az eseményre gomb" legyen kiütött?
Hover a linkekre azt eseménynél? Nyílra?

View File

@@ -2,9 +2,7 @@
og: tag: pluginnal! og: tag: pluginnal!
# Esemény oldal # Esemény oldal - ✔
megcsinálni!
# Kezdőlap # Kezdőlap
@@ -28,6 +26,7 @@ scroll rossz a kiscímeknél
## mobil nézet ## mobil nézet
Kezdőlap:
képek magassága és maszk képek magassága és maszk
@@ -39,3 +38,7 @@ vonalak néhol túlvékonyodik, vastagodik - egyenletlen
# menü # menü
# Oldal # Oldal
!Nincs találat oldal, pl keresésnél
404 oldal

View File

@@ -917,7 +917,7 @@ object {
/* --------------------------- home article mobile/default -------------------------- */ /* --------------------------- home article mobile/default -------------------------- */
/* ------------------------ home article desktop big ------------------------ */ /* ------------------------ home article desktop big ------------------------ */
/* ------------------------------------ - ----------------------------------- */ /* ------------------------------------ - ----------------------------------- */
/* ----------------------- articles desktop small ----------------------- */ } /* ----------------------- home articles desktop small ----------------------- */ }
@media (min-width: 769px) { @media (min-width: 769px) {
.archive main section, .archive main section,
.home main section, .home main section,
@@ -1705,9 +1705,10 @@ object {
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* Events */ /* Events */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
body.category.category-esemeny {
/* ---------------------------- Events on desktop --------------------------- */ }
body.category.category-esemeny header { body.category.category-esemeny header {
background-color: #000; } background-color: #000; }
body.category.category-esemeny main { body.category.category-esemeny main {
padding-top: 9rem; } padding-top: 9rem; }
body.category.category-esemeny main article { body.category.category-esemeny main article {
@@ -1742,13 +1743,35 @@ body.category.category-esemeny main {
@media (min-width: 512px) { @media (min-width: 512px) {
body.category.category-esemeny main article .event-metadata .top-row .ev-date { body.category.category-esemeny main article .event-metadata .top-row .ev-date {
font-size: 2.2rem; } } font-size: 2.2rem; } }
@media (min-width: 769px) {
body.category.category-esemeny main article .event-metadata .top-row .ev-date {
font-size: 3rem; } }
@media (min-width: 1279px) {
body.category.category-esemeny main article .event-metadata .top-row .ev-date {
font-size: 3.2rem; } }
@media (min-width: 1919px) {
body.category.category-esemeny main article .event-metadata .top-row .ev-date {
font-size: 4.5rem; } }
body.category.category-esemeny main article .event-metadata .top-row a { body.category.category-esemeny main article .event-metadata .top-row a {
-moz-transform: rotate(225deg); -moz-transform: rotate(225deg);
-o-transform: rotate(225deg); -o-transform: rotate(225deg);
-ms-transform: rotate(225deg); -ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg); -webkit-transform: rotate(225deg);
transform: rotate(225deg); transform: rotate(225deg);
font-size: 2.8rem; } font: normal 2.8rem "Westeinde Caption";
color: #000; }
@media (min-width: 512px) {
body.category.category-esemeny main article .event-metadata .top-row a {
font-size: 3rem; } }
@media (min-width: 769px) {
body.category.category-esemeny main article .event-metadata .top-row a {
font-size: 4rem; } }
@media (min-width: 1279px) {
body.category.category-esemeny main article .event-metadata .top-row a {
font-size: 5rem; } }
@media (min-width: 1919px) {
body.category.category-esemeny main article .event-metadata .top-row a {
font-size: 7rem; } }
body.category.category-esemeny main article .event-metadata .bottom-row { body.category.category-esemeny main article .event-metadata .bottom-row {
align-items: flex-end; } align-items: flex-end; }
body.category.category-esemeny main article .event-metadata .bottom-row h2 { body.category.category-esemeny main article .event-metadata .bottom-row h2 {
@@ -1760,6 +1783,15 @@ body.category.category-esemeny main {
@media (min-width: 512px) { @media (min-width: 512px) {
body.category.category-esemeny main article .event-metadata .bottom-row h2 { body.category.category-esemeny main article .event-metadata .bottom-row h2 {
font-size: 2.2rem; } } font-size: 2.2rem; } }
@media (min-width: 769px) {
body.category.category-esemeny main article .event-metadata .bottom-row h2 {
font-size: 3rem; } }
@media (min-width: 1279px) {
body.category.category-esemeny main article .event-metadata .bottom-row h2 {
font-size: 3.2rem; } }
@media (min-width: 1919px) {
body.category.category-esemeny main article .event-metadata .bottom-row h2 {
font-size: 4.5rem; } }
body.category.category-esemeny main article .event-metadata .bottom-row .vr { body.category.category-esemeny main article .event-metadata .bottom-row .vr {
flex: 0 0 auto; flex: 0 0 auto;
width: 1px; width: 1px;
@@ -1775,11 +1807,57 @@ body.category.category-esemeny main {
@media (min-width: 512px) { @media (min-width: 512px) {
body.category.category-esemeny main article .event-metadata .bottom-row a.text-link { body.category.category-esemeny main article .event-metadata .bottom-row a.text-link {
font-size: 2.2rem; } } font-size: 2.2rem; } }
@media (min-width: 769px) {
body.category.category-esemeny main article .event-metadata .bottom-row a.text-link {
font-size: 3rem; } }
@media (min-width: 1279px) {
body.category.category-esemeny main article .event-metadata .bottom-row a.text-link {
font-size: 3.2rem; } }
@media (min-width: 1919px) {
body.category.category-esemeny main article .event-metadata .bottom-row a.text-link {
font-size: 4.5rem; } }
body.category.category-esemeny main article .event-metadata .hr { body.category.category-esemeny main article .event-metadata .hr {
flex: 0 0 auto; flex: 0 0 auto;
height: 1px; height: 1px;
width: 100%; width: 100%;
background-color: #000; } background-color: #000; }
@media (min-width: 769px) {
body.category.category-esemeny main {
padding-top: 0; }
body.category.category-esemeny main section {
height: 100%;
padding-left: 10rem;
display: flex;
flex-direction: row; }
body.category.category-esemeny main section article {
width: calc(50vw - 10rem);
height: calc(50vw - 10rem);
max-width: calc(100vh - 5rem);
max-height: calc(100vh - 5rem);
min-width: 80vh;
min-height: 80vh;
margin: auto 10rem auto 0;
display: flex;
flex-direction: column;
justify-content: space-between; }
body.category.category-esemeny main section article .thumbnailwrapper {
height: unset;
flex: 0 0 auto; }
body.category.category-esemeny main section article .event-metadata {
height: unset;
max-height: 25rem;
flex: 1 1 auto;
padding: 0; } }
@media (min-width: 769px) and (min-width: 1919px) {
body.category.category-esemeny main section article .event-metadata {
max-height: 35rem; } }
@media (min-width: 769px) {
body.category.category-esemeny main section article .event-metadata .bottom-row h2 {
padding-bottom: 2rem; }
body.category.category-esemeny main section article .event-metadata .bottom-row .vr {
margin: 0 2rem; }
body.category.category-esemeny main section article .event-metadata .bottom-row .text-link {
padding-bottom: 2rem; } }
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* single */ /* single */

View File

@@ -331,6 +331,10 @@
/** /**
* scroll to next or previous section * scroll to next or previous section
* Ex:
* currElem = homeScroll(currElem, "prev")
* currElem = homeScroll(currElem, "next")
*
* @param {jQuery} target put here currElem * @param {jQuery} target put here currElem
* @param {String} direction "next" of "prev" * @param {String} direction "next" of "prev"
*/ */
@@ -353,9 +357,12 @@
if (nextelem.attr("class") == "misha_loadmore") { if (nextelem.attr("class") == "misha_loadmore") {
loadmore() loadmore()
return target return target
} else if (isEsemeny) {
offset = offset - (desktophomemargin)
} else { } else {
//from the third wrap modify the offset //from the third wrap modify the offset
var wNum = parseInt($(nextelem).attr("class").split(" ")[1].split("-")[2]) var wNum = parseInt($(nextelem).attr("class").split(" ")[1].split("-")[1])
console.log(wNum)
if (wNum == 3 || !isHome) { if (wNum == 3 || !isHome) {
offset = offset - (desktophomemargin /2 ) offset = offset - (desktophomemargin /2 )
} else if (wNum > 4 || !isHome) { } else if (wNum > 4 || !isHome) {
@@ -363,9 +370,13 @@
} }
} }
console.log("scrolling to: " + nextelem.attr("class") + " - offset: " + offset) console.log("scrolling to: " + nextelem.attr("class") + " - offset: " + offset)
$('html, body, .wrapper').stop().animate({ scrollLeft: offset }, 800, function () {
const scrollspeed = isEsemeny ? 500 : 800
$('html, body, .wrapper').stop().animate({ scrollLeft: offset }, scrollspeed, function () {
//hide the left arrow if on start //hide the left arrow if on start
if (nextelem.hasClass("home_wrapper-1")) { if (nextelem.is(selector + ':first-child')) {
$(".header-scroll-left").hide() $(".header-scroll-left").hide()
} else { } else {
$(".header-scroll-left").show() $(".header-scroll-left").show()
@@ -393,13 +404,13 @@
} }
} }
const selector = 'main>#content>div' const selector = isEsemeny ? 'main>section>article' : 'main>#content>div'
var currElem = $(selector + ':first-child') var currElem = $(selector + ':first-child')
//checking the current scroll location for refresh: //checking the current scroll location for refresh:
if (!isMobile) { if (!isMobile) {
if (isMasonryPage) { if (isMasonryPage || isEsemeny) {
const homeDivWidths = [] const homeDivWidths = []
const homeFullWidths = [] const homeFullWidths = []
homeDivWidths[0] = 0 homeDivWidths[0] = 0
@@ -426,7 +437,8 @@
currElem = $(selector + ':nth-child(' + scrollnr + ')') currElem = $(selector + ':nth-child(' + scrollnr + ')')
if (currElem.hasClass("home_wrapper-1")) {
if (scrollnr == 1) {
$(".header-scroll-left").hide() $(".header-scroll-left").hide()
} }
@@ -443,7 +455,7 @@
$(window).on('wheel DOMMouseScroll', function (e) { $(window).on('wheel DOMMouseScroll', function (e) {
//e.preventDefault(); //e.preventDefault();
if (!isMobile) { if (!isMobile) {
if (isMasonryPage) { if (isMasonryPage || isEsemeny) {
if (scrolltimer) { if (scrolltimer) {
return false; return false;
} }
@@ -718,12 +730,9 @@
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
if (isEsemeny) { if (isEsemeny) {
if (!isMobile) {
//add spaces to date $('html').css({ overflowY: "hidden" })
// $(".event-metadata .ev-date").each(function () { }
// let repl = $(this).html().replace(/\.\b/g, ". ")
// $(this).html(repl)
// })
} }

View File

@@ -1,7 +1,5 @@
<!-- post thumbnail --> <!-- post thumbnail -->
<?php if (has_post_thumbnail()): // Check if thumbnail exists <?php if (has_post_thumbnail()): // Check if thumbnail exists
console_debug('relatedloop: ' . $relatedloop);
console_debug('qc: ' . $qc);
if ($relatedloop === true): ?> if ($relatedloop === true): ?>
<a class="related_thumbnailwrapper" href="<?php the_permalink();?>" title="<?php the_title();?>"> <a class="related_thumbnailwrapper" href="<?php the_permalink();?>" title="<?php the_title();?>">
<?php the_post_thumbnail('home-square-thumbnail');?> <?php the_post_thumbnail('home-square-thumbnail');?>

View File

@@ -198,6 +198,16 @@
@media #{$tablet} { @media #{$tablet} {
font-size: 2.2rem; font-size: 2.2rem;
} }
@media #{$smalldesktop} {
font-size: 3rem;
}
@media #{$bigdesktop} {
font-size: 3.2rem;
}
@media #{$verybigdesktop} {
font-size: 4.5rem;
}
} }
@mixin event-date { @mixin event-date {
@@ -211,3 +221,20 @@
color: #00f; color: #00f;
} }
@mixin event-arrow {
font: normal 2.8rem "Westeinde Caption";
color: #000;
@media #{$tablet} {
font-size: 3rem;
}
@media #{$smalldesktop} {
font-size: 4rem;
}
@media #{$bigdesktop} {
font-size: 5rem;
}
@media #{$verybigdesktop} {
font-size: 7rem;
}
}

View File

@@ -1078,7 +1078,7 @@ $v-unit-6: 24rem;
} }
} //smalldesktop end } //smalldesktop end
/* ----------------------- articles desktop small ----------------------- */ /* ----------------------- home articles desktop small ----------------------- */
@media #{$smalldesktop} { @media #{$smalldesktop} {
.home_wrapper-small { .home_wrapper-small {
@@ -1317,7 +1317,7 @@ body.category.category-esemeny {
} }
a { a {
@include transform(rotate(225deg)); @include transform(rotate(225deg));
font-size: 2.8rem; @include event-arrow();
} }
} }
@@ -1352,13 +1352,79 @@ body.category.category-esemeny {
} }
} }
} }
/* ---------------------------- Events on desktop --------------------------- */
@media #{$smalldesktop} {
main {
padding-top: 0;
section {
height: 100%;
// padding-top:
padding-left: $h-unit-2;
display: flex;
flex-direction: row;
article {
width: calc(50vw - #{$h-unit-2});
height: calc(50vw - #{$h-unit-2});
max-width: calc(100vh - #{$h-unit-1});
max-height: calc(100vh - #{$h-unit-1});
min-width: 80vh;
min-height: 80vh;
// margin: auto;
margin: auto $h-unit-2 auto 0;
display: flex;
flex-direction: column;
justify-content: space-between;
.thumbnailwrapper {
height: unset;
flex: 0 0 auto;
} }
.event-metadata {
height: unset;
max-height: $h-unit-5;
@media #{$verybigdesktop} {
max-height: $h-unit-5 + $h-unit-2
}
flex: 1 1 auto;
padding: 0;
// .top-row{
// .ev-date{
// padding-left: 2rem;
// }
// padding-right: 2rem;
// }
.bottom-row{
h2{
// padding-left: 2rem;
padding-bottom: 2rem;
}
.vr{
margin: 0 2rem;
}
.text-link{
// padding-right: 2rem;
padding-bottom: 2rem;
}
}
}
}
}
}
}
} //body.category.category-esemeny end
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* single */ /* single */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@mixin singlDesktopLayout() { @mixin singleDesktopLayout() {
padding-right: $h-unit-4; padding-right: $h-unit-4;
padding-left: 0; padding-left: 0;
max-width: calc(1024px + #{$h-unit-4}); max-width: calc(1024px + #{$h-unit-4});
@@ -1511,7 +1577,7 @@ body.category.category-esemeny {
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left); @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);
.metaWrapper { .metaWrapper {
@include singlDesktopLayout(); @include singleDesktopLayout();
} }
// .time-cat { // .time-cat {
@@ -1522,7 +1588,7 @@ body.category.category-esemeny {
min-height: unset; min-height: unset;
top: -#{$h-unit-1}; top: -#{$h-unit-1};
position: relative; position: relative;
@include singlDesktopLayout(); @include singleDesktopLayout();
} }
} }
} }
@@ -1569,7 +1635,7 @@ body.category.category-esemeny {
padding: $padd; padding: $padd;
@media #{$smalldesktop} { @media #{$smalldesktop} {
top: -#{$h-unit-1}; top: -#{$h-unit-1};
@include singlDesktopLayout(); @include singleDesktopLayout();
} }
h2 { h2 {
@@ -1849,7 +1915,7 @@ body.category.category-esemeny {
padding-top: $padd * 2; padding-top: $padd * 2;
top: -#{$h-unit-1}; top: -#{$h-unit-1};
margin: 0; margin: 0;
@include singlDesktopLayout(); @include singleDesktopLayout();
a { a {
margin-bottom: $padd * 2; margin-bottom: $padd * 2;
@@ -1929,7 +1995,7 @@ body.category.category-esemeny {
top: -#{$h-unit-1}; top: -#{$h-unit-1};
position: relative; position: relative;
padding-top: $padd * 2; padding-top: $padd * 2;
@include singlDesktopLayout(); @include singleDesktopLayout();
& > h3 { & > h3 {
display: block; display: block;