scss 具有活动状态的博客卡视图

Posted 2021-05-17

$("body.bible-study form:not([action*='&beslug=']) .bible-study .blog-entry").each(function () {
			
	var length = 150,
			myString = $(this).find(".post-body h4 ~ p:not(:contains('this transcript has been'))").text(),
			myTruncatedString = myString.substring(0,length),
			postLink = $(this).find(".post-title a").attr("href"),
			pdfBtn = $(this).find(".post-body a.btn"),
			theVideo = $(this).find(".post-body iframe[src*='vimeo']").first().parents(".embed-container"),
			theSoundcloud = $(this).find(".post-body iframe[src*='soundcloud']");
				

		$("<div class='post-snippet' /><div class='the-video' /><div class='transcript-btn' /><div class='soundcloud' />").appendTo($(this));
		$("<span class='expand' />").appendTo($(this));

		// truncate and move
		$(this).find(".post-snippet").html(myTruncatedString + '...').append("<a href='" + postLink + "'>Read More</a>");
		$(this).find(".post-body h4 ~ p").remove();

		//move the other things
		theVideo.appendTo($(this).find(".the-video"));
		pdfBtn.appendTo($(this).find(".transcript-btn"));
		theSoundcloud.appendTo($(this).find(".soundcloud"));


		$(this).find("span.expand").click(function() {
			$(this).parent().toggleClass("active");
		})
});

body.bible-study {
	
	
	//main blog page 
	form:not([action*="&beslug="]) {
		.default-main .bible-study {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			
			// normal state
			.blog-entry {
				position: relative;
				border-radius: 5px;
				padding: 0 0 40px 0;
				box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.1);
				overflow: hidden;
				margin: 10px;
				flex-basis: 45%;
				min-width: 250px;
        height: 100%;
        border: none;
				transition: height .33s ease;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				@media (max-width: 1000px) {
					flex-basis: 100%;
				}
				.post-body,
				.post-tags { display: none; }
				.the-video {
					order: 1;
				}
				.post-title {
					margin-top: 15px;
					padding: 0 20px;
					order: 2;
					font-family: 'proxima-nova', "Helvetica Neue", Helvetica, serif;
					font-size: 16px;
					line-height: 1.2em;
					margin-bottom: 0;
				}
				.post-date {
					font-weight: normal;
					font-size: 14px;
					margin-top: 5px;
					padding: 0 20px;
					order: 3;
				}
				.post-snippet {
					order: 4;
					color: rgba(#333333, .5);
					padding: 0 20px;
					font-size: 14px;
					margin-bottom: 10px;
				}
				.soundcloud {
					padding: 0 20px;
					margin-bottom: 0;
					order: 5;
					opacity: 0;
					height: 0;
					transition: all .33s ease;
				}
				.transcript-btn {
					order: 6;
					padding: 0 20px;
					max-width: 100%;
					opacity: 0;
					height: 0;
					z-index: -1;
					visibility: hidden;
					transition: all .33s ease;
					a {
						width: 100%!important;
						max-width: 100%;
						font-size: 14px;
						white-space: normal;
					}
				}
				.expand {
					display: block;
					position: absolute;
					left: 50%;
					bottom: 5px;
					transform: translatex(-50%) rotate(0deg);
					color: #333;
					cursor: pointer;
					&:before {
						content: "\f078";
						position: relative;
						transform: rotate(0deg);
						font-family: fontawesome;
					}
				}
				
				
				
				// active state
				&.active {
					box-shadow: 0 25px 25px -14px rgba(0, 0, 0, 0.5);
					height: 100%;

					.soundcloud {
						height: 100%;
						opacity: 1;
						z-index: 1;
						visibility: visible;
						margin-bottom: 10px;
						margin-top: 20px;
					}
					.transcript-btn {
						margin-bottom: 10px;
						height: 100%;
						opacity: 1;
						z-index: 1;
						visibility: visible;
					}
					.expand{
						transform: translatex(-50%) rotate(180deg);
					}
				}
      }
		}

	}

	//blog entry
	form[action*="&beslug="] {
		
	}

}