Tuned portrait orientation layout with .NET Conf production team (#289)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
FritzAndFriends · Nov 7, 2023 · 9332789 · 9332789
1 parent 114fab7
commit 9332789
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/src/TagzApp.Web/Pages/PortraitOverlay.cshtml b/src/TagzApp.Web/Pages/PortraitOverlay.cshtml
@@ -60,10 +60,12 @@
 											<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>
-								<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="time">
+									${new Date(content.timestamp).toLocaleString(undefined, { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
+									<i class="provider bi ${window.TagzApp.MapProviderToIconClass(content.provider)}"></i>
+								</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
@@ -198,39 +198,43 @@ span.invisible {
 	font-style: normal;
 	font-weight: 700;
 	line-height: normal;
-	width: 75px;
+	width: 135px;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	margin-top: 10px;
 }
 
 #portraitOverlayDisplay .authorUserName {
 	grid-area: 2 / 1 / 3 / 4;
-	width: 115px;
+	width: 135px;
 	font-size: 10px;
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
 #portraitOverlayDisplay .time {
-	grid-area: 3 / 1 / 4 / 4;
+	grid-area: 2 / 1 / 3 / 4;
 	color: var(--bs-body-color);
 	font-family: Helvetica;
 	font-size: 9px;
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 	opacity: 0.7;
+	width: 180px;
+	position: relative;
 }
 
 #portraitOverlayDisplay .content {
-	grid-area: 4 / 1 / 5 / 4;
+	grid-area: 3 / 1 / 5 / 4;
 	display: block;
 	width: 100%;
 	line-height: 1.2em;
-	max-width: 110px;
+	max-width: 184px;
 	font-size: 0.8em;
 	text-align: left;
+	height: 200px;
+	overflow: hidden;
 }
 
 #taggedContent .authorUserName {
@@ -316,21 +320,24 @@ span.invisible {
 #portraitOverlayDisplay.showPreview,
 #portraitOverlayDisplay.show {
 	display: grid;
-	grid-template-columns: 36px 80px 16px;
-	grid-template-rows: 36px 14px 14px 1fr auto;
+	grid-template-columns: 36px 160px 16px;
+	grid-template-rows: 36px 10px 1fr auto;
 	grid-column-gap: 5px;
 	grid-row-gap: 10px;
-	width: 111px;
-	max-height: 748px;
+	width: 184px;
+	height: 334px;
+	/*	height: 334px;*/
 }
 
 #portraitOverlayDisplay * {
 	font-family: Arial, Helvetica, sans-serif;
 }
 
 #portraitOverlayDisplay .provider {
-	grid-area: 2 / 3 / 3 / 4;
-	font-size: 20px;
+	position: absolute;
+	right: 3px;
+	top: -3px;
+	font-size: 15px;
 }
 
 .modal-body .contentcard {