Formatted CSS for Portrait (#287)

FritzAndFriends · Nov 7, 2023 · a5d3262 · a5d3262
1 parent 02816e4
commit a5d3262
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 23 deletions.
diff --git a/src/TagzApp.Web/Pages/PortraitOverlay.cshtml b/src/TagzApp.Web/Pages/PortraitOverlay.cshtml
@@ -60,10 +60,10 @@
 											<img class="ProfilePicture" src="${content.authorProfileImageUri}" alt="${content.authorDisplayName}" onerror="this.src='/img/user.jpg';" />
 								<div class="byline">
 									<div class="author">${content.authorDisplayName}</div>
-									<div class="authorUserName">${content.authorUserName}</div>
 								</div>
-											<i class="provider bi ${window.TagzApp.MapProviderToIconClass(content.provider)}"></i>
-								<span class="time">${new Date(content.timestamp).toLocaleString(undefined, { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
+								<i class="provider bi ${window.TagzApp.MapProviderToIconClass(content.provider)}"></i>
+								<div class="authorUserName">${content.authorUserName}</div>
+								<span class="time">${new Date(content.timestamp).toLocaleString(undefined, { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
 								<span class="content">${window.TagzApp.FormatContentWithEmotes(content)}</span>
 								`;
 

diff --git a/src/TagzApp.Web/wwwroot/css/site.css b/src/TagzApp.Web/wwwroot/css/site.css
@@ -79,8 +79,7 @@ body {
 }
 
 #taggedContent .provider,
-#overlayDisplay .provider,
-#portraitOverlayDisplay .provider {
+#overlayDisplay .provider {
 	grid-area: 1 / 3 / 2 / 4;
 	font-size: 20px;
 }
@@ -92,8 +91,7 @@ body {
 
 #taggedContent .time,
 #overlayDisplay .time,
-#overlayDisplay.showPreview .time,
-#portraitOverlayDisplay .time {
+#overlayDisplay.showPreview .time {
 	grid-area: 2 / 1 / 3 / 4;
 	color: var(--bs-body-color);
 	font-family: Helvetica;
@@ -106,8 +104,7 @@ body {
 
 #taggedContent .content,
 #overlayDisplay .content,
-#overlayDisplay.showPreview .content,
-#portraitOverlayDisplay .content {
+#overlayDisplay.showPreview .content {
 	grid-area: 3 / 1 / 4 / 4;
 	display: block;
 	width: 100%;
@@ -155,10 +152,10 @@ span.invisible {
 }
 
 #portraitOverlayDisplay .contentcard {
-	grid-area: 4 / 1 / 5 / 3;
+	grid-area: 5 / 1 / 6 / 3;
 	display: block;
-	max-width: 400px;
-	height: 282px;
+	max-width: 111px;
+	height: 0px; /*282px;*/
 	text-align: right;
 	overflow: hidden;
 	border-radius: 4px;
@@ -167,7 +164,7 @@ span.invisible {
 
 #portraitOverlayDisplay .contentcard img {
 	border-radius: 4px;
-	max-width: 375px;
+	max-width: 140px;
 	max-height: 282px;
 	position: absolute;
 	top: 50%;
@@ -177,16 +174,15 @@ span.invisible {
 
 #portraitOverlayDisplay .contentcard video {
 	border-radius: 4px;
-	max-width: 375px;
+	max-width: 140px;
 	max-height: 282px;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translateY(-50%) translateX(-50%);
 }
 
-#overlayDisplay .author,
-#portraitOverlayDisplay .author {
+#overlayDisplay .author {
 	font-family: Helvetica;
 	font-size: 16px;
 	font-style: normal;
@@ -196,6 +192,47 @@ span.invisible {
 	overflow: hidden;
 }
 
+#portraitOverlayDisplay .author {
+	font-family: Helvetica;
+	font-size: 0.7em;
+	font-style: normal;
+	font-weight: 700;
+	line-height: normal;
+	width: 75px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	margin-top: 10px;
+}
+
+#portraitOverlayDisplay .authorUserName {
+	grid-area: 2 / 1 / 3 / 4;
+	width: 115px;
+	font-size: 10px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+#portraitOverlayDisplay .time {
+	grid-area: 3 / 1 / 4 / 4;
+	color: var(--bs-body-color);
+	font-family: Helvetica;
+	font-size: 9px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: normal;
+	opacity: 0.7;
+}
+
+#portraitOverlayDisplay .content {
+	grid-area: 4 / 1 / 5 / 4;
+	display: block;
+	width: 100%;
+	line-height: 1.2em;
+	max-width: 110px;
+	font-size: 0.8em;
+	text-align: left;
+}
+
 #taggedContent .authorUserName {
 	font-family: Helvetica;
 	font-size: 14px;
@@ -269,7 +306,7 @@ span.invisible {
 	border: 1px solid #e2e8ed;
 	border-radius: 20px;
 	background-color: #fff;
-	padding: 8px 16px 16px 16px;
+	padding: 8px;
 	margin: 0 auto;
 	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
 	overflow: hidden;
@@ -279,18 +316,23 @@ span.invisible {
 #portraitOverlayDisplay.showPreview,
 #portraitOverlayDisplay.show {
 	display: grid;
-	grid-template-columns: 36px 1fr 16px;
-	grid-template-rows: 36px 14px 1fr auto;
-	grid-column-gap: 10px;
-	grid-row-gap: 15px;
-	width: 375px;
-	max-height: 690px;
+	grid-template-columns: 36px 80px 16px;
+	grid-template-rows: 36px 14px 14px 1fr auto;
+	grid-column-gap: 5px;
+	grid-row-gap: 10px;
+	width: 111px;
+	max-height: 748px;
 }
 
 #portraitOverlayDisplay * {
 	font-family: Arial, Helvetica, sans-serif;
 }
 
+#portraitOverlayDisplay .provider {
+	grid-area: 2 / 3 / 3 / 4;
+	font-size: 20px;
+}
+
 .modal-body .contentcard {
 	border-radius: 4px;
 	width: 100%;