Completed spin animation and added .NET Conf background image (#252)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
FritzAndFriends · Oct 19, 2023 · a8b87de · a8b87de
1 parent 2624f4e
commit a8b87de
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 11 deletions.
diff --git a/src/TagzApp.Web/Pages/Waterfall.cshtml b/src/TagzApp.Web/Pages/Waterfall.cshtml
@@ -36,19 +36,30 @@
 
 <div class="modal fade show" id="contentModal" tabindex="-1" aria-labelledby="contentModalLabel" aria-hidden="true">
 	<div class="modal-dialog modal-dialog-centered">
-		<div class="modal-content">
-			<div class="modal-header">
-				<img class="ProfilePicture" src="" alt="" />
-				<div class="author"></div>
-				<div class="authorUserName" title=""></div>
-				<i class="provider bi"></i>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-				<div class="time"></div>
-			</div>
+			<div class="modal-inner">
+
+				<div class="modal-front modal-content">
+					<div class="modal-header">
+						<img class="ProfilePicture" src="" alt="" />
+						<div class="author"></div>
+						<div class="authorUserName" title=""></div>
+						<i class="provider bi"></i>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+						<div class="time"></div>
+					</div>
+
+					<div class="modal-body">
+					</div>
+				</div>
+
+				<div class="modal-back modal-content">
+					<div class="modal-back-content"> 
+						The back of the modal
+						</div>
+				</div>
 
-			<div class="modal-body">
 			</div>
-		</div>
+
 	</div>
 </div>
 
@@ -62,6 +73,8 @@
 		window.onload = window.Masonry.resizeAllGridItems();
 		window.addEventListener("resize", Masonry.resizeAllGridItems);
 
+		var mouseSpinDelay = 600;
+
 	</script>
 
 }
@@ -71,6 +84,16 @@
 
 	<style>
 		@Html.Raw(Model.WaterfallHeaderCss)
+
+		.modal-back {
+			background-color: #190649;
+			background-image: url('/img/dotnetconf-back.png');
+			background-repeat: no-repeat;
+			background-size: contain;
+			background-position: center;
+			color: #eeeeee;
+		}
+
 	</style>
 
 }

diff --git a/src/TagzApp.Web/wwwroot/css/site.css b/src/TagzApp.Web/wwwroot/css/site.css
@@ -377,6 +377,54 @@ span.invisible {
 	padding-right: 0 !important;
 }
 
+/** Modal Flip Animation */
+
+.modal-dialog {
+	background-color: transparent;
+	perspective: 1000px;
+}
+
+.modal-inner {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	/*text-align: center;*/
+	transition: transform 0.4s;
+	transform-style: preserve-3d;
+}
+
+.flip {
+	transform: rotateY(180deg);
+}
+
+.modal-front,
+.modal-back {
+	width: 100%;
+	height: 100%;
+	backface-visibility: hidden;
+}
+
+.modal-back {
+	position: absolute;
+	top: 0;
+}
+
+.modal-back-content {
+	width: 100%;
+	height: 100%;
+	display: none;
+	align-items: center;
+	justify-content: center;
+}
+
+.modal-front {
+	transform: rotateY(180deg);
+}
+
+/** End Modal Flip */
+
+/** Moderation UI ***/
+
 #moderationAction {
 	position: absolute;
 	top: 0;

diff --git a/src/TagzApp.Web/wwwroot/img/dotnetconf-back.png b/src/TagzApp.Web/wwwroot/img/dotnetconf-back.png
diff --git a/src/TagzApp.Web/wwwroot/js/site.js b/src/TagzApp.Web/wwwroot/js/site.js
@@ -139,6 +139,9 @@
 				paused = true;
 				FormatPauseButton();
 
+				// modal window is face down to start
+				document.querySelector('.modal-inner').classList.remove('flip');
+
 				// Format Modal
 				let modalProfilePic = document.querySelector('.modal-header img');
 				modalProfilePic.src = content.authorProfileImageUri;
@@ -201,6 +204,10 @@
 				//});
 
 				modalWindow.show();
+
+				window.setTimeout(() => {
+					document.querySelector('.modal-inner').classList.add('flip');
+				}, mouseSpinDelay);
 			});
 		}