working on single and events

_jegyzet.md

@@ -33,4 +33,4 @@ Nincs találat oldal, pl keresésnél
 
 Keresési találatok oldal
 
-
+Esemény oldalon a "Tovább az eseményre gomb" legyen kiütött?

_teendők.md

@@ -1,16 +1,11 @@
-# Single
+# Single - ✔
 
 og: tag: pluginnal!
 
-bal felső sarokban nem jó a sarok border!!
-
-lightbox: mobilon ott ahol van most
-	Asztalin menjen ki a képernyő szélére
-	galéria	jobb/bal nyilat a képernyő széléhez igazítani | X-et is
-
-
 # Esemény oldal
 
+megcsinálni!
+
 # Kezdőlap
 
 felgördülő szövegkivonat -> felülre igazítva
@@ -29,6 +24,7 @@ semmiképpen ne lógjon a cím elé a felgördölő cucc
 
 Max karakterszám alcímnél, hogy hova menjen
 
+scroll rossz a kiscímeknél
 
 ## mobil nézet 
 

category-esemeny.php

@@ -26,7 +26,8 @@
 				<div class="top-row">
 					<div class="ev-date">
 						<?php
-							echo $event_datum;
+							echo preg_replace('/^(\d{4}\.)(\d{2}\.)(\d{2}\.)$/','\1</br>\2 \3',$event_datum );
+							// echo $event_datum;
 						?>
 					</div>
 
@@ -44,6 +45,7 @@
 					<h2>
 						<?php the_title();?>
 					</h2>
+					<div class="vr"></div>
 					<!-- Tovább button -->
 					<a href="<?php echo $event_link; ?>" class="text-link" target="_blank">Tovább az eseményre</a>
 				</div>

css/base.css

@@ -125,7 +125,8 @@ object {
     .wrapper .header .header-2 {
       display: flex;
       flex-direction: row;
-      align-items: center; }
+      align-items: center;
+      line-height: 0; }
       @media (min-width: 769px) {
         .wrapper .header .header-1,
         .wrapper .header .header-2 {
@@ -1178,7 +1179,7 @@ object {
         border-top: #000 1px solid;
         background-color: transparent;
         left: calc(4rem);
-        margin-left: -0; }
+        margin-left: calc((0) * -1); }
       .archive main section .home_wrapper-big.home_wrapper-1 article .metadata::before,
       .home main section .home_wrapper-big.home_wrapper-1 article .metadata::before,
       .search-results main section .home_wrapper-big.home_wrapper-1 article .metadata::before {
@@ -1190,7 +1191,7 @@ object {
         top: 0;
         background-color: transparent;
         z-index: 9;
-        left: -0;
+        left: calc((0) * -1);
         border-left: #000 solid 1px;
         -moz-transform: skewX(-45deg);
         -o-transform: skewX(-45deg);
@@ -1227,7 +1228,7 @@ object {
             border-top: #000 1px solid;
             background-color: transparent;
             right: calc(4rem);
-            margin-right: -0; }
+            margin-right: calc((0) * -1); }
           .archive main section .home_wrapper-big.home_wrapper-2 article .metadata::before,
           .home main section .home_wrapper-big.home_wrapper-2 article .metadata::before,
           .search-results main section .home_wrapper-big.home_wrapper-2 article .metadata::before {
@@ -1239,7 +1240,7 @@ object {
             top: 0;
             background-color: transparent;
             z-index: 9;
-            right: -0;
+            right: calc((0) * -1);
             border-right: #000 solid 1px;
             -moz-transform: skewX(45deg);
             -o-transform: skewX(45deg);
@@ -1356,7 +1357,7 @@ object {
             border-top: #000 1px solid;
             background-color: transparent;
             left: calc(5rem);
-            margin-left: -0; }
+            margin-left: calc((0) * -1); }
           .archive main section .home_wrapper-small article .metadata::before,
           .archive main section .home_wrapper-small .archivetitle .metadata::before,
           .archive main section .home_wrapper-small .archivedescription .metadata::before,
@@ -1374,7 +1375,7 @@ object {
             top: 0;
             background-color: transparent;
             z-index: 9;
-            left: -0;
+            left: calc((0) * -1);
             border-left: #000 solid 1px;
             -moz-transform: skewX(-45deg);
             -o-transform: skewX(-45deg);
@@ -1584,7 +1585,7 @@ object {
           border-top: #000 1px solid;
           background-color: transparent;
           left: calc(5rem);
-          margin-left: -0; }
+          margin-left: calc((0) * -1); }
         .archive main section .home_wrapper-small .archivetitle::before,
         .home main section .home_wrapper-small .archivetitle::before,
         .search-results main section .home_wrapper-small .archivetitle::before {
@@ -1596,7 +1597,7 @@ object {
           top: 0;
           background-color: transparent;
           z-index: 9;
-          left: -0;
+          left: calc((0) * -1);
           border-left: #000 solid 1px;
           -moz-transform: skewX(-45deg);
           -o-transform: skewX(-45deg);
@@ -1710,7 +1711,8 @@ body.category.category-esemeny header {
 body.category.category-esemeny main {
   padding-top: 9rem; }
   body.category.category-esemeny main article {
-    height: 50vh; }
+    height: 85vw;
+    max-height: calc(50vw + 180px); }
     body.category.category-esemeny main article .thumbnailwrapper {
       height: 50vw; }
       body.category.category-esemeny main article .thumbnailwrapper img {
@@ -1719,7 +1721,11 @@ body.category.category-esemeny main {
     body.category.category-esemeny main article .event-metadata {
       display: flex;
       flex-direction: column;
-      padding: 2rem; }
+      justify-content: space-between;
+      align-content: stretch;
+      padding: 2rem;
+      height: 35vw;
+      max-height: 180px; }
       body.category.category-esemeny main article .event-metadata .top-row,
       body.category.category-esemeny main article .event-metadata .bottom-row {
         display: flex;
@@ -1727,9 +1733,48 @@ body.category.category-esemeny main {
         justify-content: space-between;
         height: 50%;
         flex: 0 0 auto; }
-        body.category.category-esemeny main article .event-metadata .top-row h2,
+      body.category.category-esemeny main article .event-metadata .top-row {
+        align-items: center; }
+        body.category.category-esemeny main article .event-metadata .top-row .ev-date {
+          font: 800 1.8rem "Butler";
+          color: #000;
+          color: #00f; }
+          @media (min-width: 512px) {
+            body.category.category-esemeny main article .event-metadata .top-row .ev-date {
+              font-size: 2.2rem; } }
+        body.category.category-esemeny main article .event-metadata .top-row a {
+          -moz-transform: rotate(225deg);
+          -o-transform: rotate(225deg);
+          -ms-transform: rotate(225deg);
+          -webkit-transform: rotate(225deg);
+          transform: rotate(225deg);
+          font-size: 2.8rem; }
+      body.category.category-esemeny main article .event-metadata .bottom-row {
+        align-items: flex-end; }
         body.category.category-esemeny main article .event-metadata .bottom-row h2 {
-          height: unset; }
+          flex: 1 0.9 auto;
+          height: unset;
+          padding: 0;
+          font: 800 1.8rem "Butler";
+          color: #000; }
+          @media (min-width: 512px) {
+            body.category.category-esemeny main article .event-metadata .bottom-row h2 {
+              font-size: 2.2rem; } }
+        body.category.category-esemeny main article .event-metadata .bottom-row .vr {
+          flex: 0 0 auto;
+          width: 1px;
+          height: 100%;
+          background-color: #000; }
+        body.category.category-esemeny main article .event-metadata .bottom-row a.text-link {
+          flex: 1 1 auto;
+          font: 800 1.8rem "Butler";
+          color: #000;
+          font: 500 1.8rem "Westeinde Caption";
+          color: #00f;
+          text-align: right; }
+          @media (min-width: 512px) {
+            body.category.category-esemeny main article .event-metadata .bottom-row a.text-link {
+              font-size: 2.2rem; } }
       body.category.category-esemeny main article .event-metadata .hr {
         flex: 0 0 auto;
         height: 1px;
@@ -1883,11 +1928,11 @@ body.category.category-esemeny main {
               display: block;
               top: 0;
               border: none;
-              width: calc(100% - 5rem + 5rem);
+              width: calc(100% - 5rem + (5rem + 1px));
               border-top: #000 1px solid;
               background-color: white;
               left: calc(5rem);
-              margin-left: -5rem; }
+              margin-left: calc((5rem + 1px) * -1); }
             .single article .titlewrapper .metadata::before,
             .page article .titlewrapper .metadata::before {
               display: block;
@@ -1898,7 +1943,7 @@ body.category.category-esemeny main {
               top: 0;
               background-color: white;
               z-index: 9;
-              left: -5rem;
+              left: calc((5rem + 1px) * -1);
               border-left: #000 solid 1px;
               -moz-transform: skewX(-45deg);
               -o-transform: skewX(-45deg);
@@ -2464,7 +2509,7 @@ body.category.category-esemeny main {
                 border-top: #000 1px solid;
                 background-color: transparent;
                 left: calc(5rem);
-                margin-left: -0; }
+                margin-left: calc((0) * -1); }
               .single #related_posts ul li .metadata::before,
               .page #related_posts ul li .metadata::before {
                 display: block;
@@ -2475,7 +2520,7 @@ body.category.category-esemeny main {
                 top: 0;
                 background-color: transparent;
                 z-index: 9;
-                left: -0;
+                left: calc((0) * -1);
                 border-left: #000 solid 1px;
                 -moz-transform: skewX(-45deg);
                 -o-transform: skewX(-45deg);

js/scripts.js

@@ -49,7 +49,7 @@
 		/* --------------------------- css values to vars --------------------------- */
 		//isMobile
 		const isMobile = (_ => {
-			if (wow < 769) {
+			if (wow < 769 || wiw < 769) {
 				//mobile settings
 				$('.social-link, .events-link').addClass('hidden')
 				return true
@@ -720,10 +720,10 @@
 		if (isEsemeny) {
 
 			//add spaces to date
-			$(".event-metadata .ev-date").each(function () {
+			// $(".event-metadata .ev-date").each(function () {
-				let repl = $(this).html().replace(/\.\b/g, ". ")
+			// 	let repl = $(this).html().replace(/\.\b/g, ". ")
-				$(this).html(repl)
+			// 	$(this).html(repl)
-			})
+			// })
 		}
 
 
@@ -798,13 +798,22 @@
 
 			//hide caption on desktop
 			if (!isMobile) {
-				$('.wp-block-gallery img, .wp-block-image img').hover(function () {
+				// $('.wp-block-gallery img, .wp-block-image img, .vis').hover(function () {
-					$(this).parent('a').next("figcaption").addClass("vis")
+				// 	$(this).parent('a').next("figcaption").addClass("vis")
-				}, function () {
+				// }, function () {
-					$('.wp-block-gallery .vis, .wp-block-image .vis')
+				// 	$('.wp-block-gallery .vis, .wp-block-image .vis')
-						.removeClass("vis")
+				// 		.removeClass("vis")
+				// })
 
+				$('.wp-block-gallery .blocks-gallery-item, .wp-block-image').hover(function(){
+					$(this).find("figcaption").addClass("vis")
+					
+				},function(){
+					$('.wp-block-gallery .vis, .wp-block-image .vis').removeClass("vis")
 				})
+
+
+
 			}
 
 
@@ -823,7 +832,7 @@
 
 			//http://www.jacklmoore.com/colorbox/
 			const colorboxSettings = {
-				transition: 'fade',
+				transition: 'none',
 				rel: 'cb-ballery',
 				maxWidth: '90%',
 				maxHeight: '80%',
@@ -833,6 +842,8 @@
 				previous: '',
 				next: '',
 				close: '',
+				xhrError: 'A tartalom betöltése nem sikerült. Kérlek próbáld meg később.',
+				imgError: 'A kép betöltése nem sikerült. Kérlek próbáld meg később.'
 
 			}
 

sass/_font-mixins.scss

@@ -191,3 +191,23 @@
   font: 500 2rem "Westeinde Caption";
   line-height: 1.3;
 }
+
+@mixin event-title{
+  font: 800 1.8rem "Butler";
+  color: #000;
+  @media #{$tablet} {
+    font-size: 2.2rem;
+  }
+}
+
+@mixin event-date{
+  @include event-title();
+  color: #00f;
+}
+
+@mixin event-link{
+  @include event-title();
+  font: 500 1.8rem "Westeinde Caption";
+  color: #00f;
+}
+

sass/base.scss

@@ -89,6 +89,10 @@ $only-mobile: only screen and
     max-width: 768px
   );
 
+$tablet: only screen and
+  (
+    min-width: 512px
+  );
 $smalldesktop: only screen and
   (
     min-width: 769px
@@ -236,7 +240,7 @@ $v-unit-6: 24rem;
     @if $offset==0 {
       width: calc(100% - #{$radius});
     } @else {
-      width: calc(100% - #{$radius} + #{$offset});
+      width: calc(100% - #{$radius} + (#{$offset}));
     }
 
     border-top: $bordercolor 1px solid;
@@ -244,11 +248,11 @@ $v-unit-6: 24rem;
 
     @if $side==left {
       left: calc(#{$radius});
-      margin-left: -#{$offset};
+      margin-left: calc((#{$offset}) * -1);
     }
     @if $side==right {
       right: calc(#{$radius});
-      margin-right: -#{$offset};
+      margin-right: calc((#{$offset}) * -1);
     }
   }
   &::before {
@@ -263,14 +267,14 @@ $v-unit-6: 24rem;
     z-index: 9;
 
     @if $side==left {
-      left: -#{$offset};
+      left: calc((#{$offset}) * -1);
       border-left: $bordercolor solid 1px;
       @include transform(skewX(-45deg));
       transform-origin: left bottom;
       border-top: $bordercolor solid 1px;
     }
     @if $side==right {
-      right: -#{$offset};
+      right: calc((#{$offset}) * -1);
       border-right: $bordercolor solid 1px;
       @include transform(skewX(45deg));
       transform-origin: right bottom;
@@ -316,6 +320,7 @@ $v-unit-6: 24rem;
       display: flex;
       flex-direction: row;
       align-items: center;
+      line-height: 0;
       @media #{$smalldesktop} {
         width: $h-unit-2;
         position: fixed;
@@ -1277,7 +1282,8 @@ body.category.category-esemeny {
   main {
     padding-top: 5rem + (2rem * 2);
     article {
-      height: 50vh;
+      height: 85vw;
+      max-height: calc(50vw + 180px);
       .thumbnailwrapper {
         height: 50vw;
         img {
@@ -1289,7 +1295,11 @@ body.category.category-esemeny {
       .event-metadata {
         display: flex;
         flex-direction: column;
+        justify-content: space-between;
+        align-content: stretch;
         padding: 2rem;
+        height: 35vw;
+        max-height: 180px;
 
         .top-row,
         .bottom-row {
@@ -1298,14 +1308,41 @@ body.category.category-esemeny {
           justify-content: space-between;
           height: 50%;
           flex: 0 0 auto;
-          // & > * {
+        }
-          // }
+
-          // .ev-date {
+        .top-row {
-          // }
+          align-items: center;
+          .ev-date {
+            @include event-date();
+          }
+          a {
+            @include transform(rotate(225deg));
+            font-size: 2.8rem;
+          }
+        }
+
+        .bottom-row {
+          align-items: flex-end;
+
           h2 {
+            flex: 1 0.9 auto;
             height: unset;
+            padding: 0;
+            @include event-title;
+          }
+          .vr {
+            flex: 0 0 auto;
+            width: 1px;
+            height: 100%;
+            background-color: #000;
+          }
+          a.text-link {
+            flex: 1 1 auto;
+            @include event-link;
+            text-align: right;
           }
         }
+
         .hr {
           flex: 0 0 auto;
           height: 1px;
@@ -1471,7 +1508,7 @@ body.category.category-esemeny {
           padding-left: 0;
           padding-right: 0;
 
-          @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
+          @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);
 
           .metaWrapper {
             @include singlDesktopLayout();