Fixed portrait layout with no content card (#240)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
FritzAndFriends · Oct 13, 2023 · be9e0e6 · be9e0e6
1 parent d045b61
commit be9e0e6
Showing 1 changed file with 55 additions and 61 deletions.
diff --git a/src/TagzApp.Web/wwwroot/css/site.css b/src/TagzApp.Web/wwwroot/css/site.css
@@ -55,31 +55,31 @@ body {
 	grid-row-gap: 15px;
 }
 
-	#taggedContent .ProfilePicture,
-	#overlayDisplay .ProfilePicture,
-	#overlayDisplay.showPreview .ProfilePicture,
-	#portraitOverlayDisplay .ProfilePicture,
-	#portraitOverlayDisplay.showPreview .ProfilePicture {
-		grid-area: 1 / 1 / 2 / 2;
-		width: 36px;
-		height: 36px;
-		border-radius: 50%;
-	}
+#taggedContent .ProfilePicture,
+#overlayDisplay .ProfilePicture,
+#overlayDisplay.showPreview .ProfilePicture,
+#portraitOverlayDisplay .ProfilePicture,
+#portraitOverlayDisplay.showPreview .ProfilePicture {
+	grid-area: 1 / 1 / 2 / 2;
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+}
 
-	#taggedContent .byline,
-	#overlayDisplay .byline,
-	#overlayDisplay.showPreview .byline,
-	#portraitOverlayDisplay .byline,
-	#portraitOverlayDisplay.showPreview .byline {
-		grid-area: 1 / 2 / 2 / 3;
-		min-width: 170px;
-		overflow: hidden;
-		white-space: nowrap;
-		height: 2.5em;
-	}
+#taggedContent .byline,
+#overlayDisplay .byline,
+#overlayDisplay.showPreview .byline,
+#portraitOverlayDisplay .byline,
+#portraitOverlayDisplay.showPreview .byline {
+	grid-area: 1 / 2 / 2 / 3;
+	min-width: 170px;
+	overflow: hidden;
+	white-space: nowrap;
+	height: 2.5em;
+}
 
 #taggedContent .provider,
-#overlayDisplay .provider, 
+#overlayDisplay .provider,
 #portraitOverlayDisplay .provider {
 	grid-area: 1 / 3 / 2 / 4;
 	font-size: 20px;
@@ -93,7 +93,7 @@ body {
 #taggedContent .time,
 #overlayDisplay .time,
 #overlayDisplay.showPreview .time,
-#portraitOverlayDisplay.showPreview .time {
+#portraitOverlayDisplay .time {
 	grid-area: 2 / 1 / 3 / 4;
 	color: var(--bs-body-color);
 	font-family: Helvetica;
@@ -107,7 +107,7 @@ body {
 #taggedContent .content,
 #overlayDisplay .content,
 #overlayDisplay.showPreview .content,
-#portraitOverlayDisplay.showPreview .content {
+#portraitOverlayDisplay .content {
 	grid-area: 3 / 1 / 4 / 4;
 	display: block;
 	width: 100%;
@@ -133,8 +133,7 @@ span.invisible {
 	display: none;
 }
 
-#overlayDisplay .contentcard
-{
+#overlayDisplay .contentcard {
 	grid-area: 1 / 4 / 3 / 5;
 	display: block;
 	max-width: 400px;
@@ -145,18 +144,15 @@ span.invisible {
 	position: relative;
 }
 
-
-
-	#overlayDisplay .contentcard img
-	{
-		border-radius: 4px;
-		max-width: 400px;
-		max-height: 282px;
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translateY(-50%) translateX(-50%);
-	}
+#overlayDisplay .contentcard img {
+	border-radius: 4px;
+	max-width: 400px;
+	max-height: 282px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translateY(-50%) translateX(-50%);
+}
 
 #portraitOverlayDisplay .contentcard {
 	grid-area: 4 / 1 / 5 / 3;
@@ -169,30 +165,28 @@ span.invisible {
 	position: relative;
 }
 
-	#portraitOverlayDisplay .contentcard img {
-		border-radius: 4px;
-		max-width: 375px;
-		max-height: 282px;
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translateY(-50%) translateX(-50%);
-	}
-
-	#portraitOverlayDisplay .contentcard video {
-		border-radius: 4px;
-		max-width: 375px;
-		max-height: 282px;
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translateY(-50%) translateX(-50%);
-	}
+#portraitOverlayDisplay .contentcard img {
+	border-radius: 4px;
+	max-width: 375px;
+	max-height: 282px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translateY(-50%) translateX(-50%);
+}
 
+#portraitOverlayDisplay .contentcard video {
+	border-radius: 4px;
+	max-width: 375px;
+	max-height: 282px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translateY(-50%) translateX(-50%);
+}
 
 #overlayDisplay .author,
-#portraitOverlayDisplay .author
-{
+#portraitOverlayDisplay .author {
 	font-family: Helvetica;
 	font-size: 16px;
 	font-style: normal;
@@ -282,7 +276,8 @@ span.invisible {
 	position: relative;
 }
 
-#portraitOverlayDisplay.showPreview {
+#portraitOverlayDisplay.showPreview,
+#portraitOverlayDisplay.show {
 	display: grid;
 	grid-template-columns: 36px 1fr 16px;
 	grid-template-rows: 36px 14px 1fr auto;
@@ -296,7 +291,6 @@ span.invisible {
 	font-family: Arial, Helvetica, sans-serif;
 }
 
-
 .modal-body .contentcard {
 	border-radius: 4px;
 	width: 100%;