From 86471e010a1c15b6621db2e6c11eea86d5f1baa1 Mon Sep 17 00:00:00 2001
From: f0x <f0x@cthu.lu>
Date: Wed, 10 May 2023 20:18:50 +0200
Subject: [PATCH] profile responsiveness, accessibility tweaks

---
 web/source/css/profile.css |  42 +++---------
 web/template/profile.tmpl  | 137 ++++++++++++++++++++-----------------
 2 files changed, 84 insertions(+), 95 deletions(-)

diff --git a/web/source/css/profile.css b/web/source/css/profile.css
index 44cf754d1..04c4d6cd1 100644
--- a/web/source/css/profile.css
+++ b/web/source/css/profile.css
@@ -27,22 +27,18 @@ main.profile {
 	padding: 0.5rem;
 	border-radius: $br;
 
-	display: grid;
-	grid-template-rows: auto auto;
-	grid-template-columns: 35fr 65fr;
-	grid-template-areas:
-		"header header"
-		"about toots";
-
-	gap: 1rem;
+	.column-split {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+	}
 }
 
 main.profile .header {
-	grid-area: header;
-
 	background: $bg-accent;
 	border-radius: $br;
 	overflow: hidden;
+	margin-bottom: 1rem;
 
 	.header-image {
 		position: relative;
@@ -165,7 +161,6 @@ main.profile {
 		}
 
 		&.pinned {
-			margin: 0 1rem;
 			display: grid;
 			grid-template-columns: auto 1fr;
 			gap: 1rem;
@@ -178,29 +173,12 @@ main.profile {
 }
 
 main.profile .toots {
-	grid-area: toots;
-
+	flex: 65 25rem; 
 	display: flex;
 	flex-direction: column;
 	gap: 0.4rem;
 
-	.col-header {
-		margin: 0;
-		background: $gray4;
-		border-top-left-radius: $br;
-		border-top-right-radius: $br;
-		padding: 0.75rem;
-	}
-
 	.toot {
-		padding-top: 0.75rem;
-		box-shadow: none;
-		border: none;
-
-		.contentgrid {
-			padding: 0 0.75rem;
-		}
-
 		.info {
 			padding: 0.3rem 0.75rem;
 		}
@@ -212,7 +190,7 @@ main.profile .toots {
 }
 
 main.profile .about-user {
-	grid-area: about;
+	flex: 35 14rem;
 	border-radius: $br;
 	overflow: hidden;
 
@@ -237,10 +215,6 @@ main.profile .about-user {
 			&:first-child {
 				border-top: 0.1rem solid $gray2;
 			}
-
-			b {
-				color: $fg-accent;
-			}
 		}
 	}
 
diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl
index 49ef3c054..5e4bd9c0f 100644
--- a/web/template/profile.tmpl
+++ b/web/template/profile.tmpl
@@ -26,7 +26,7 @@
             <img src="{{.account.Header}}" alt="" />
             {{ end }}
         </div>
-        <div class="basic-info">
+        <div class="basic-info" aria-hidden="true">
             <a class="avatar" href="{{.account.Avatar}}">
                 <img src="{{.account.Avatar}}" alt="">
             </a>
@@ -50,77 +50,92 @@
 				<i class="rss-icon fa fa-rss-square" aria-hidden="true"></i>
 			</a> -->
         </div>
+        <div class="sr-only">
+            Profile for
+            {{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}.
+            Username @{{.account.Username}}, {{acctInstance .account.Acct}}
+        </div>
     </div>
 
-    <div class="about-user">
-        <div class="col-header">
-            <h3>About</h3>
-        </div>
+    <div class="column-split">
 
-        <div class="fields">
-            {{ range .account.Fields }}
-            <div class="field">
-                <b>{{.Name}}</b>
-                <span>{{.Value}}</span>
+        <section class="about-user">
+            <div class="col-header">
+                <h3>About</h3>
             </div>
-            {{ end }}
-        </div>
 
-        <div class="bio">
-            {{ if .account.Note }}
-            {{emojify .account.Emojis (noescape .account.Note)}}
-            {{else}}
-            This GoToSocial user hasn't written a bio yet!
-            {{end}}
-        </div>
+            <div class="fields">
+                {{ range .account.Fields }}
+                <div class="field">
+                    <b>{{.Name}}</b>
+                    <span>{{.Value}}</span>
+                </div>
+                {{ end }}
+            </div>
 
-        <div class="accountstats">
-            <b>Joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
-            <b>Posts</b><span>{{.account.StatusesCount}}</span>
-            <b>Followed by</b><span>{{.account.FollowersCount}}</span>
-            <b>Following</b><span>{{.account.FollowingCount}}</span>
-        </div>
-    </div>
+            <div class="bio">
+                {{ if .account.Note }}
+                {{emojify .account.Emojis (noescape .account.Note)}}
+                {{else}}
+                This GoToSocial user hasn't written a bio yet!
+                {{end}}
+            </div>
 
-    <div class="toots">
-        {{ if .pinned_statuses }}
-        <div class="col-header pinned">
-            <h3>Pinned posts</h3>
-            <a href="#recent">jump to recent</a>
-        </div>
-        <section class="thread">
-            {{ range .pinned_statuses }}
-            <article class="toot expanded" id="{{.ID}}">
-                {{ template "status.tmpl" .}}
-            </article>
-            {{ end }}
-        </section>
-        {{ end }}
+            <div class="sr-only" role="group">
+                <span>Joined on {{.account.CreatedAt | timestampVague}}.</span>
+                <span>{{.account.StatusesCount}} post{{if .account.StatusesCount | eq 1 | not}}s{{end}}.</span>
+                <span>Followed by {{.account.FollowersCount}}.</span>
+                <span>Following {{.account.FollowingCount}}.</span>
+            </div>
 
-        <div class="col-header" id="recent">
-            <h3>Recent posts</h3>
-        </div>
-
-        <section class="thread">
-            {{ if not .statuses }}
-            <div data-nosnippet class="nothinghere">Nothing here!</div>
-            {{ else }}
-            {{ range .statuses }}
-            <article class="toot expanded" id="{{.ID}}">
-                {{ template "status.tmpl" .}}
-            </article>
-            {{ end }}
-            {{ end }}
+            <div class="accountstats" aria-hidden="true">
+                <b>Joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
+                <b>Posts</b><span>{{.account.StatusesCount}}</span>
+                <b>Followed by</b><span>{{.account.FollowersCount}}</span>
+                <b>Following</b><span>{{.account.FollowingCount}}</span>
+            </div>
         </section>
 
-        <div class="backnextlinks">
-            {{ if .show_back_to_top }}
-            <a href="/@{{ .account.Username }}">Back to top</a>
+        <section class="toots">
+            {{ if .pinned_statuses }}
+            <div class="col-header pinned">
+                <h3>Pinned posts</h3>
+                <a href="#recent">jump to recent</a>
+            </div>
+            <section class="thread">
+                {{ range .pinned_statuses }}
+                <article class="toot expanded" id="{{.ID}}">
+                    {{ template "status.tmpl" .}}
+                </article>
+                {{ end }}
+            </section>
             {{ end }}
-            {{ if .statuses_next }}
-            <a href="{{ .statuses_next }}" class="next">Show older</a>
-            {{ end }}
-        </div>
+
+            <div class="col-header">
+                <h3 id="recent" tabindex="-1">Recent posts</h3>
+            </div>
+
+            <section class="thread">
+                {{ if not .statuses }}
+                <div data-nosnippet class="nothinghere">Nothing here!</div>
+                {{ else }}
+                {{ range .statuses }}
+                <article class="toot expanded" id="{{.ID}}">
+                    {{ template "status.tmpl" .}}
+                </article>
+                {{ end }}
+                {{ end }}
+            </section>
+
+            <div class="backnextlinks">
+                {{ if .show_back_to_top }}
+                <a href="/@{{ .account.Username }}">Back to top</a>
+                {{ end }}
+                {{ if .statuses_next }}
+                <a href="{{ .statuses_next }}" class="next">Show older</a>
+                {{ end }}
+            </div>
+        </section>
     </div>
 </main>