[feature/frontend] Hide "engagement" stats, edits, and other info under a little drop down to unclutter status info bar (#4021)

* dick about with stats a bit

* more dicking abuot

* lil tweaks

* more about-dicking

* weee

* comments

* fixie uppie

1 files changed, 110 insertions, 51 deletions

diff --git a/web/template/status_info.tmpl b/web/template/status_info.tmpl
index 5d26811d7..2a3e6cac2 100644
--- a/web/template/status_info.tmpl
+++ b/web/template/status_info.tmpl
@@ -38,50 +38,40 @@
 {{- end -}}
 
 {{- with . }}
-<dl class="status-stats">
-    <div class="stats-grouping">
-        <div class="stats-item visibility-level" title="{{- template "visibility_title" . -}}">
-            <dt class="sr-only">Visibility</dt>
-            <dd>
-                <i class="fa fa-{{- template "visibility_icon" . -}}" aria-hidden="true"></i>
-                <span class="sr-only">{{- template "visibility_title" . -}}</span>
-            </dd>
-        </div>
+<div class="status-stats">
+    <dl class="stats-grouping text-cutoff">
         <div class="stats-item published-at text-cutoff">
             <dt class="sr-only">Published</dt>
-            <dd>
-                <time class="dt-published" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>
-            </dd>
-        </div>
-        {{- if .EditedAt -}}
-        <div class="stats-item edited-at text-cutoff">
-            <dt class="sr-only">Edited</dt>
-            <dd>
-                edited <time class="dt-updated" datetime="{{- .EditedAt -}}">{{- .EditedAt | timestampPrecise -}}</time>
+            <dd class="text-cutoff">
+                {{- if .Local }}
+                <a
+                    href="{{- .URL -}}"
+                    class="u-url text-cutoff"
+                    data-nosnippet
+                    title="Open thread at this post"
+                >
+                    <time class="dt-published text-cutoff" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>{{- if .EditedAt }}*{{- end }}
+                </a>
+                {{- else }}
+                <a
+                    href="{{- .URL -}}"
+                    class="u-url text-cutoff"
+                    data-nosnippet
+                    rel="nofollow noreferrer noopener" target="_blank"
+                    title="Open remote post (opens in a new window)"
+                >
+                    <time class="dt-published text-cutoff" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>{{- if .EditedAt }}*{{- end }}
+                </a>
+                {{- end }}
             </dd>
         </div>
-        {{ end }}
         <div class="stats-grouping">
-            <div class="stats-item" title="Replies">
-                <dt>
-                    <span class="sr-only">Replies</span>
-                    <i class="fa fa-reply-all" aria-hidden="true"></i>
-                </dt>
-                <dd>{{- .RepliesCount -}}</dd>
-            </div>
-            <div class="stats-item" title="Faves">
-                <dt>
-                    <span class="sr-only">Favourites</span>
-                    <i class="fa fa-star" aria-hidden="true"></i>
-                </dt>
-                <dd>{{- .FavouritesCount -}}</dd>
-            </div>
-            <div class="stats-item" title="Boosts">
-                <dt>
-                    <span class="sr-only">Reblogs</span>
-                    <i class="fa fa-retweet" aria-hidden="true"></i>
-                </dt>
-                <dd>{{- .ReblogsCount -}}</dd>
+            <div class="stats-item visibility-level" title="{{- template "visibility_title" . -}}">
+                <dt class="sr-only">Visibility</dt>
+                <dd>
+                    <i class="fa fa-{{- template "visibility_icon" . -}}" aria-hidden="true"></i>
+                    <span class="sr-only">{{- template "visibility_title" . -}}</span>
+                </dd>
             </div>
             {{- if .Pinned }}
             <div class="stats-item" title="Pinned">
@@ -93,17 +83,86 @@
             </div>
             {{- else }}
             {{- end }}
+            {{- if .RepliesCount }}
+            <div class="stats-item" title="Replies">
+                <dt>
+                    <span class="sr-only">Replies</span>
+                    <i class="fa fa-reply-all" aria-hidden="true"></i>
+                </dt>
+                <dd>{{- .RepliesCount -}}</dd>
+            </div>
+            {{- else }}
+            {{- end }}
         </div>
-    </div>
-    {{- if .LanguageTag.DisplayStr }}
-    <div class="stats-item language" title="{{ .LanguageTag.DisplayStr }}">
-        <dt class="sr-only">Language</dt>
-        <dd>
-            <span class="sr-only">{{ .LanguageTag.DisplayStr }}</span>
-            <span aria-hidden="true">{{- .LanguageTag.TagStr -}}</span>
-        </dd>
-    </div>
-    {{- else }}
-    {{- end }}
-</dl>
+    </dl>
+    <details class="stats-more-info" name="stats-more-info">
+        <summary title="More info">
+            <i class="fa fa-fw fa-info" aria-hidden="true"></i>
+            <span class="sr-only">More info</span>
+            <i class="fa fa-fw fa-chevron-right show" aria-hidden="true"></i>
+            <i class="fa fa-fw fa-chevron-down hide" aria-hidden="true"></i>
+        </summary>
+        <dl class="stats-more-info-content">
+            <div class="stats-grouping">
+                {{- if .LanguageTag.DisplayStr }}
+                <div class="stats-item" title="Language">
+                    <dt>
+                        <span class="sr-only">Language</span>
+                        <i class="fa fa-language" aria-hidden="true"></i>
+                    </dt>
+                    <dd>
+                        <span class="sr-only">{{ .LanguageTag.DisplayStr -}}</span>
+                        <span aria-hidden="true" title="{{- .LanguageTag.DisplayStr -}}">{{- .LanguageTag.TagStr -}}</span>
+                    </dd>
+                </div>
+                {{- else }}
+                {{- end }}
+                {{- if not .RepliesCount }}
+                <div class="stats-item" title="Replies">
+                    <dt>
+                        <span class="sr-only">Replies</span>
+                        <i class="fa fa-reply-all" aria-hidden="true"></i>
+                    </dt>
+                    <dd>{{- .RepliesCount -}}</dd>
+                </div>
+                {{- else }}
+                {{- end }}
+                <div class="stats-item" title="Faves">
+                    <dt>
+                        <span class="sr-only">Favourites</span>
+                        <i class="fa fa-star" aria-hidden="true"></i>
+                    </dt>
+                    <dd>{{- .FavouritesCount -}}</dd>
+                </div>
+                <div class="stats-item" title="Boosts">
+                    <dt>
+                        <span class="sr-only">Reblogs</span>
+                        <i class="fa fa-retweet" aria-hidden="true"></i>
+                    </dt>
+                    <dd>{{- .ReblogsCount -}}</dd>
+                </div>
+            </div>
+            {{- if and .EditedAt (gt (len .EditTimeline) 1) -}}
+            <div class="stats-item edit-timeline text-cutoff">
+                <dt>Edit timeline:</dt>
+                {{- range $index, $edited := .EditTimeline }}
+                {{- if not (eq $index (add (len $.EditTimeline) -1)) }}
+                <dd class="text-cutoff" title="Edited {{ $edited -}}">
+                    <span class="sr-only">Edited</span>
+                    <i class="fa fa-asterisk" aria-hidden="true"></i>
+                    <time datetime="{{- $edited -}}">{{- $edited | timestampPrecise -}}</time>
+                </dd>
+                {{- else }}
+                <dd class="text-cutoff" title="Published {{ $.CreatedAt -}}">
+                    <span class="sr-only">Published</span>
+                    <i class="fa fa-pencil" aria-hidden="true"></i>
+                    <time datetime="{{- $.CreatedAt -}}">{{- $.CreatedAt | timestampPrecise -}}</time>
+                </dd>
+                {{- end }}
+                {{- end }}
+            </div>
+            {{ end }}
+        </dl>
+    </details>
+</div>
 {{- end }}
\ No newline at end of file