[chore] Refactor HTML templates and CSS (#2480)

* [chore] Refactor HTML templates and CSS

* eslint

* ignore "Local"

* rss tests

* fiddle with OG just a tiny bit

* dick around with polls a bit more so SR stops saying "clickable"

* remove break

* oh lord

* don't lazy load avatar

* fix ogmeta tests

* clean up some cruft

* catch remaining calls to c.HTML

* fix error rendering + stack overflow in tag

* allow templating attributes

* fix indent

* set aria-hidden on status complementary content, since it's already present in the label anyway

* tidy up templating calls a little

* try to make styling a bit more consistent + readable

* fix up some remaining CSS issues

* fix up reports

1 files changed, 74 insertions, 0 deletions

diff --git a/web/template/status_info.tmpl b/web/template/status_info.tmpl
new file mode 100644
index 000000000..c5ba3ef35
--- /dev/null
+++ b/web/template/status_info.tmpl
@@ -0,0 +1,74 @@
+{{- /*
+// GoToSocial
+// Copyright (C) GoToSocial Authors admin@gotosocial.org
+// SPDX-License-Identifier: AGPL-3.0-or-later
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/ -}}
+
+{{- with . }}
+<dl class="status-stats">
+    <div class="stats-grouping">
+        <div class="stats-item published-at text-cutoff">
+            <dt class="sr-only">Published</dt>
+            <dd>
+                <time datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>
+            </dd>
+        </div>
+        <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>
+            {{- if .Pinned }}
+            <div class="stats-item" title="Pinned">
+                <dt>
+                    <span class="sr-only">Pinned</span>
+                    <i class="fa fa-thumb-tack" aria-hidden="true"></i>
+                </dt>
+                <dd class="sr-only">{{- .Pinned -}}</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>
+{{- end }}
\ No newline at end of file