diff --git a/src/TagzApp.Web/Pages/PortraitOverlay.cshtml b/src/TagzApp.Web/Pages/PortraitOverlay.cshtml
index 9d07135b..69081f99 100644
--- a/src/TagzApp.Web/Pages/PortraitOverlay.cshtml
+++ b/src/TagzApp.Web/Pages/PortraitOverlay.cshtml
@@ -60,10 +60,10 @@
${content.authorDisplayName}
-
${content.authorUserName}
-
- ${new Date(content.timestamp).toLocaleString(undefined, { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
+
+ ${content.authorUserName}
+ ${new Date(content.timestamp).toLocaleString(undefined, { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
${window.TagzApp.FormatContentWithEmotes(content)}
`;
diff --git a/src/TagzApp.Web/wwwroot/css/site.css b/src/TagzApp.Web/wwwroot/css/site.css
index 2b572eb7..223ff9c3 100644
--- 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,7 +174,7 @@ span.invisible {
#portraitOverlayDisplay .contentcard video {
border-radius: 4px;
- max-width: 375px;
+ max-width: 140px;
max-height: 282px;
position: absolute;
top: 50%;
@@ -185,8 +182,7 @@ span.invisible {
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%;