home-big-thumbnal on mobile

js/scripts.js

@@ -862,33 +862,36 @@
 			if (!isMobile) {
 				// let cc = $(this)
 				let cArticle = cc.parents("article")
+				let cH2 = cc.parent('h2')
 				let cMetadata = cArticle.children(".metadata")
 				let cBevezetoWrapper = cMetadata.children(".bevezetoWrapper")
 				let cBevezeto = cBevezetoWrapper.children(".bevezeto")
+				let cAlcimWrapper = cMetadata.children(".alcimWrapper")
+				let cAlcim = cAlcimWrapper.children('.alcim')
 
 				// calculate default metadata height
-
 				metadataHeights.collapsedHeight = cMetadata[0].getBoundingClientRect().height
 
+				// check calculated metadata opened height
+				if (!cc.attr('data-metadataOpenedHeight')) {
+					// calculate opened metadata height:
+					let h2H = cH2[0].getBoundingClientRect().height
 
-				//calculate opened metadata height
-
-				let h2H = 0
-				$(".home-big h2").each(function () {
-					if ($(this)[0].getBoundingClientRect().height > h2H) {
-						h2H = $(this)[0].getBoundingClientRect().height
-					}
-				})
 
 					let artH = cArticle[0].getBoundingClientRect().height
-				metadataHeights.openedHeight = artH - bottomScrollHeight - h2H
+					// metadataHeights.openedHeight = artH - bottomScrollHeight - h2H
+					let metadataMaxheight = artH - bottomScrollHeight - h2H
+					let metadataOpenedHeight = (metadataMaxheight < metadataHeights.collapsedHeight) ? metadataHeights.collapsedHeight : metadataMaxheight
+					cc.attr('data-metadataOpenedHeight', metadataOpenedHeight)
+					// console.log('h2h', h2H, artH)
+				}
 
-				console.log('h2h', h2H, artH)
+				let metadataOpenedHeight = cc.attr('data-metadataOpenedHeight')
 
 				//add height to bevezetoWrapper
-				$('.bevezetoWrapper').css({ height: metadataHeights.openedHeight })
+				cBevezetoWrapper.css({ height: metadataOpenedHeight })
 
-				$('.alcimWrapper').css({ height: metadataHeights.openedHeight })
+				cAlcimWrapper.css({ height: metadataOpenedHeight })
 
 
 				//add hovered class
@@ -903,31 +906,34 @@
 				cMetadata.children(".categories, .postedon").addClass("transparent")
 
 				//animate border
-				cMetadata.stop().animate({ height: metadataHeights.openedHeight }, 400, _ => {
+				cMetadata.stop().animate({ height: metadataOpenedHeight }, 400, _ => {
 
 					//hide metadata
 					cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
-					cMetadata.children(".bevezetoWrapper").show()
+					cBevezetoWrapper.show()
-					cMetadata.children(".alcimWrapper").css({ display: 'flex' })
+					cAlcimWrapper.css({ display: 'flex' }).addClass("transparent")
 
 					//set height for ellipsis
-					if (!metadataHeights.bevezetoHeight) {
+					if (!cc.attr('data-metadataBevezetoHeight')) {
-						metadataHeights.bevezetoHeight = cBevezetoWrapper.height()
+						let metadataBevezetoHeight = cBevezetoWrapper.height()
 						let bWidth = cBevezetoWrapper.width()
-						// let bWidth = cBevezetoWrapper[0].getBoundingClientRect().width
+						cBevezetoWrapper.children('.bevezeto').css({
-						$('.bevezeto').css({
+							height: metadataBevezetoHeight,
-							height: metadataHeights.bevezetoHeight,
 							width: bWidth + 'px'
 						})
-						$('.alcim').css({
+						cAlcim.css({
-							height: metadataHeights.bevezetoHeight,
+							height: metadataBevezetoHeight,
 						})
-
+						cc.attr('data-metadataBevezetoHeight', metadataBevezetoHeight)
 					}
 
 					//show bev+alcim
-					cMetadata.children(".bevezetoWrapper, .alcimWrapper").removeClass("transparent")
+					cBevezetoWrapper.removeClass("transparent")
 
+					//only show alcim, if enough space
+					if (!(cAlcim.children('.alcimInner').height() > cAlcim.height())) {
+						cAlcimWrapper.removeClass("transparent")
+					}
 
 					//clamp bevezető
 					let ellipsis = new Ellipsis(cBevezeto[0]);
@@ -940,7 +946,7 @@
 		// Uncomment for debugging hover
 		// if (!isMobile && isHome) {
 		// 	setTimeout(() => {
-		// 		bigArticleHoverShow($(".home_wrapper-1 .home-big h2 a"))
+		// 		bigArticleHoverShow($(".home_wrapper-2 .home-big h2 a"))
 		// 	}, 2000);
 		// }
 

sass/base.scss

@@ -1871,6 +1871,11 @@ $padd: 2rem;
       padding: 0;
 
       img.attachment-single-thumbnail {
+        //use home-big-thumbnail on mobile
+        display: none;
+      }
+
+      img.attachment-home-big-thumbnail {
         // post thumbnail on home
         height: 75vh;
         width: 100vw;
@@ -1972,9 +1977,13 @@ $padd: 2rem;
         bottom: 0;
         width: 100%;
 
+        img.attachment-home-big-thumbnail {
+          display: none;
+        }
+
         img.attachment-single-thumbnail {
           // post thumbnail on home
-
+          display: block;
           object-fit: cover;
           padding: 0;
 

singular.php

@@ -13,6 +13,7 @@
 				<?php if (has_post_thumbnail()): // Check if Thumbnail exists ?>
 					<div class="thumbnailwrapper">
 						<?php the_post_thumbnail('single-thumbnail'); ?>
+						<?php the_post_thumbnail('home-big-thumbnail'); ?>
 					</div>
 
 				<?php endif;?>