diff --git a/web/source/css/status.css b/web/source/css/status.css index 91665cd45..a61810de5 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -260,22 +260,100 @@ display: flex; gap: 1rem; - .stats-grouping { + .stats-grouping, + .stats-more-info-content { display: flex; flex-wrap: wrap; column-gap: 1rem; - - .edited-at { - font-size: smaller; - } + row-gap: 0.25rem; } .stats-item { display: flex; gap: 0.4rem; + width: fit-content; } - .stats-item.published-at { + details.stats-more-info { + z-index: 2; + margin-left: auto; + + & > summary { + /* + Remove details/summary + arrow and use our own. + */ + list-style: none; + &::-webkit-details-marker { + display: none; /* Safari */ + } + + /* + Don't display the + "hide" button initially. + */ + i.hide { + display: none; + } + + /* + Normalize width and + alignment of fa icons. + */ + i.fa { + width: 2rem; + text-align: center; + } + display: flex; + height: 100%; + align-items: center; + + cursor: pointer; + border-radius: $br-inner; + &:focus-visible { + outline: $button-focus-outline; + } + + &:hover { + outline: 0.1rem solid $fg-reduced; + } + } + + @keyframes fade-in { + 0% {opacity: 0} + 100% {opacity: 1} + } + + &[open] { + .stats-more-info-content { + animation: fade-in .1s; + } + + & > summary i.show { + display: none; + } + + & > summary i.hide { + display: block; + } + } + } + + .stats-more-info-content { + position: absolute; + right: 0; + flex-direction: column; + max-width: 100%; + + background: $status-info-bg; + padding: 0.5rem 0.75rem; + border: $boxshadow-border; + box-shadow: $boxshadow; + + opacity: 1; + } + + .stats-item.published-at dd time.dt-published { text-decoration: underline; } @@ -283,10 +361,6 @@ z-index: 1; user-select: none; } - - .language { - margin-left: auto; - } } grid-column: span 3; @@ -327,7 +401,8 @@ &.expanded { background: $status-focus-bg; - .status-info { + .status-info, + .status-info .status-stats .stats-more-info-content { background: $status-focus-info-bg; } } diff --git a/web/template/status_info.tmpl b/web/template/status_info.tmpl index 5d26811d7..911ec5558 100644 --- a/web/template/status_info.tmpl +++ b/web/template/status_info.tmpl @@ -50,60 +50,75 @@
Published
- + {{- if .EditedAt }}*{{- end }}
- {{- if .EditedAt -}} -
-
Edited
-
- edited -
+ {{- if .Pinned }} +
+
+ Pinned + +
+
{{- .Pinned -}}
- {{ end }} -
-
-
- Replies - -
-
{{- .RepliesCount -}}
+ {{- else }} + {{- end }} +
+
+ + More info + + + +
+
+ {{- if .LanguageTag.DisplayStr }} +
+
+ Language + +
+
+ {{ .LanguageTag.DisplayStr }} + +
+
+ {{- else }} + {{- end }} +
+
+ Replies + +
+
{{- .RepliesCount -}}
+
+
+
+ Favourites + +
+
{{- .FavouritesCount -}}
+
+
+
+ Reblogs + +
+
{{- .ReblogsCount -}}
+
-
+ {{- if .EditedAt -}} +
- Favourites - + Edited +
-
{{- .FavouritesCount -}}
+
+ +
-
-
- Reblogs - -
-
{{- .ReblogsCount -}}
-
- {{- if .Pinned }} -
-
- Pinned - -
-
{{- .Pinned -}}
-
- {{- else }} - {{- end }} + {{ end }}
-
- {{- if .LanguageTag.DisplayStr }} -
-
Language
-
- {{ .LanguageTag.DisplayStr }} - -
-
- {{- else }} - {{- end }} +
{{- end }} \ No newline at end of file