redesign status template

internal/router/template.go

@@ -22,6 +22,7 @@
 	"html/template"
 	"os"
 	"path/filepath"
+	"strings"
 	"time"
 
 	"github.com/gin-gonic/gin"
@@ -158,6 +159,15 @@ func emojify(emojis []apimodel.Emoji, inputText template.HTML) template.HTML {
 	return template.HTML(out)
 }
 
+func acctInstance(acct string) string {
+	parts := strings.Split(acct, "@")
+	if len(parts) > 1 {
+		return "@" + parts[1]
+	}
+
+	return ""
+}
+
 func LoadTemplateFunctions(engine *gin.Engine) {
 	engine.SetFuncMap(template.FuncMap{
 		"escape":           escape,
@@ -169,5 +179,6 @@ func LoadTemplateFunctions(engine *gin.Engine) {
 		"timestampVague":   timestampVague,
 		"timestampPrecise": timestampPrecise,
 		"emojify":          emojify,
+		"acctInstance":     acctInstance,
 	})
 }

web/source/css/_colors.css

@@ -80,10 +80,12 @@ $button-danger-bg: $error3;
 $button-danger-fg: $white1;
 $button-danger-hover-bg: $error2;
 
-$toot-focus-bg: $gray5;
-$toot-unfocus-bg: $gray2;
 
-$toot-info-bg: $gray4;
+$toot-bg: $gray3;
+$toot-info-bg: $gray2;
+
+$toot-focus-bg: $gray5;
+$toot-focus-info-bg: $gray4;
 
 $no-img-desc-bg: $orange1;
 $no-img-desc-fg: $gray1;

web/source/css/status.css

@@ -31,13 +31,13 @@ main {
 }
 
 .toot {
-	background: $toot-unfocus-bg;
+	background: $toot-bg;
 	box-shadow: $boxshadow;
 	border: $boxshadow-border;
+	border-radius: $br;
 	position: relative;
 	margin-bottom: $br;
-	padding-top: 1.5rem;
+	padding-top: 0.75rem;
-	padding-bottom: 0.7rem;
 
 	a {
 		position: relative;
@@ -46,26 +46,24 @@ main {
 		text-decoration: none;
 	}
 
-	.contentgrid {
+	.author > a {
-		padding: 0 1.5rem;
+		padding: 0 0.75rem;
 		display: grid;
-		grid-template-columns: 4rem 1fr auto;
+		grid-template-columns: 3.5rem 1fr auto;
-		grid-template-rows: 1.5rem auto auto auto;
+		grid-template-rows: auto auto;
-		column-gap: 0.5rem;
+		grid-template-areas:
-	}
+			"avatar display date"
-
+			"avatar user .";
-	.not-expanded {
+		gap: 0 0.5rem;
-		color: $fg-reduced;
-		grid-column: 3;
-		grid-row: 1;
-	}
 
 		.avatar {
-		grid-row: span 3;
+			grid-area: avatar;
-		aspect-ratio: 1/1;
+			height: 3.5rem;
-		display: flex;
+			width: 3.5rem;
-		border: 0.2rem solid $avatar-border;
+			object-fit: cover;
-		border-radius: 0.4rem;
+
+			border: 0.15rem solid $avatar-border;
+			border-radius: $br;
 			overflow: hidden; /* hides corners from img overflowing */
 
 			img {
@@ -87,41 +85,40 @@ main {
 		}
 	
 		.displayname {
+			grid-area: display;
 			font-weight: bold;
-		font-size: 1.5rem;
+			font-size: 1rem;
-		line-height: 2rem;
+			line-height: 1.3rem;
-		margin-top: -0.5rem;
+			/* margin-top: -0.5rem; */
 		}
 
 		.username {
+			grid-area: user;
 			color: $link-fg;
 			font-size: 1rem;
 			line-height: 1.3rem;
 		}
 
-	input.spoiler:checked ~ .content {
+		.timestamp {
-		display: none;
+			grid-area: date;
+			color: $fg-reduced;
+		}
 	}
 
-	.spoiler {
+	.body {
+		padding: 0 0.75rem;
+	}
+
+	details > summary {
+		list-style: none;
 		padding-bottom: 0.5rem;
+		display: inline-block;
 
-		display: flex;
+		.button {
-		align-items: center;
-		flex-wrap: wrap;
-		gap: 0.4rem;
-
-		.spoiler-text {
-			word-break: break-word;
-		}
-
-		label {
 			padding: 0.2rem 0.3rem;
 			cursor: pointer;
 			font-size: 1rem;
 		}
-		label:hover {
-		}
 	}
 
 	.text {
@@ -358,14 +355,14 @@ main {
 	}
 
 	.info {
+		display: flex;
 		background: $toot-info-bg;
 		color: $fg-reduced;
-		display: none;
 		border-top: 0.15rem solid $toot-info-border;
-		padding: 0.5rem 1.5rem;
+		padding: 0.5rem 0.75rem;
 
-		div {
+		div, time {
-			padding-right: 1.3rem;
+			padding-right: 1rem;
 		}
 
 		.stats {
@@ -406,39 +403,16 @@ main {
 		background: $toot-focus-bg;
 		padding-bottom: 0;
 
-		.contentgrid {
+		.info {
-			.displayname {
+			background: $toot-focus-info-bg;
-				grid-column: span 2;
 		}
 
 		.not-expanded {
 			display: none;
 		}
-		}
-
-		.info {
-			display: flex;
-		}
 
 		.media {
 			margin-bottom: 0.5rem;
 		}
 	}
 }
-
-footer + div { /* something weird from the devstack.. */
-	display: none;
-}
-
-@media screen and (max-width: 89ch) {
-	.toot {
-		.contentgrid {
-			grid-template-rows: 1.5rem 1.3rem 1.3rem auto;
-		}
-
-		.username, .not-expanded {
-			grid-column: 2;
-			grid-row: auto;
-		}
-	}
-}

web/template/status.tmpl

@@ -17,40 +17,59 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */ -}}
 
-<div data-nosnippet class="contentgrid">
+<section class="author">
-	<a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}" alt=""></a>
+	<a href="{{.Account.URL}}">
-	<a href="{{.Account.URL}}" class="displayname">{{if .Account.DisplayName}}{{emojify .Account.Emojis (escape .Account.DisplayName)}}{{else}}{{.Account.Username}}{{end}}</a>
+		<img class="avatar" src="{{.Account.Avatar}}" alt="">
-	<a href="{{.Account.URL}}" class="username">@{{.Account.Acct}}</a>
+		<span class="displayname">
-	<div class="not-expanded">
+			{{if .Account.DisplayName}}
-		<span class="date">{{.CreatedAt | timestamp}}</span>
+			{{emojify .Account.Emojis (escape .Account.DisplayName)}}
-	</div>
+			{{else}}
+			{{.Account.Username}}
+			{{end}}
+			<span class="sr-only">.</span>
+		</span>
+		<span class="username">@{{.Account.Username}}<span class="sr-only">, </span>{{acctInstance .Account.Acct}}</span>
+		<!-- <div class="not-expanded timestamp">
+			<time datetime="{{.CreatedAt}}">{{.CreatedAt | timestamp}}</time>
+		</div> -->
+	</a>
+</section>
+<section class="body">
 	<div class="text">
 		{{if .SpoilerText}}
-		<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />
+		<details class="spoiler-details">
-		<div class="spoiler">
+			<summary>
 				<span class="spoiler-text">{{emojify .Emojis (escape .SpoilerText)}}</span>
-			<label class="button spoiler-label" for="hideSpoiler-{{.ID}}" tabindex="0">Toggle visibility</label>
+				<span class="button" role="button" tabindex="0">Toggle visibility</span>
-		</div>
+			</summary>
-		{{end}}
 			<div class="content">
 				{{emojify .Emojis (noescape .Content)}}
 			</div>
+		</details>
+		{{else}}
+		<div class="content">
+			{{emojify .Emojis (noescape .Content)}}
+		</div>
+		{{end}}
 	</div>
 	{{with .MediaAttachments}}
-	<div class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
+	<div
+		class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
 		{{range .}}
 		<div class="media-wrapper">
 			{{if not .Description}}
-			<div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing media description</span></div>
+			<div class="no-image-desc" aria-hidden="true"><i class="fa fa-info-circle"></i><span>Missing media
+					description</span></div>
 			{{end}}
-			<input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden" {{if not $.Sensitive}}checked{{end}}/>
+			<input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden"
+				{{if not $.Sensitive}}checked{{end}} />
 			<div class="sensitive">
 				<div class="open">
 					<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">
 						<i class="fa fa-eye-slash" title="Hide sensitive media"></i>
 					</label>
 				</div>
-				<div class="closed" {{if .Description}}title="{{.Description}}"{{end}}>
+				<div class="closed" {{if .Description}}title="{{.Description}}" {{end}}>
 					<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">Show sensitive media</label>
 				</div>
 			</div>
@@ -62,26 +81,44 @@
 				</span>
 			</div>
 			{{ end }}
-			<a href="{{.URL}}"
+			<a href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}" {{end}}
-				 target="_blank"
+				data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"
-				 {{if .Description}}title="{{.Description}}"{{end}}
+				{{if eq .Type "video"}}data-pswp-type="video" {{end}} data-cropped="true">
-				 data-pswp-width="{{.Meta.Original.Width}}px"
+				<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}" {{end}} data-blurhash="{{.Blurhash}}" />
-				 data-pswp-height="{{.Meta.Original.Height}}px"
-				 {{if eq .Type "video"}}data-pswp-type="video"{{end}}
-				 data-cropped="true">
-				<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}"{{end}} data-blurhash="{{.Blurhash}}"/>
 			</a>
 		</div>
 		{{end}}
 	</div>
 	{{end}}
-</div>
+</section>
-<div class="info">
+<aside class="info">
-	<div id="date">{{.CreatedAt | timestampPrecise}}</div>
+	<time id="date" datetime="{{.CreatedAt}}">{{.CreatedAt | timestampPrecise}}</time>
-	<div class="stats">
+	<div class="stats" role="group">
-		<div id="replies"><i aria-label="Replies" class="fa fa-reply-all"></i> {{.RepliesCount}}</div>
+		<div id="replies">
-		<div id="boosts"><i aria-label="Boosts" class="fa fa-retweet"></i> {{.ReblogsCount}}</div>
+			<span aria-hidden="true">
-		<div id="favorites"><i aria-label="Favorites" class="fa fa-star"></i> {{.FavouritesCount}}</div>
+				<i class="fa fa-reply-all"></i> {{.RepliesCount}}
+			</span>
+			<span class="sr-only">{{.RepliesCount}} replies</span>
 		</div>
-</div>
+		<div id="favorites">
-<a data-nosnippet href="{{.URL}}" class="toot-link">View toot</a>
+			<span aria-hidden="true">
+				<i class="fa fa-star"></i> {{.FavouritesCount}}
+			</span>
+			<span class="sr-only">{{.FavouritesCount}} favourite{{if .FavouritesCount | eq 1 | not}}s{{end}}</span>
+		</div>
+		<div id="boosts">
+			<span aria-hidden="true">
+				<i class="fa fa-retweet"></i> 2
+			</span>
+			<span class="sr-only">{{.ReblogsCount}} boost{{if .ReblogsCount | eq 1 | not}}s{{end}}</span>
+		</div>
+		{{if .Pinned}}
+		<div>
+			<i class="fa fa-thumb-tack" aria-hidden="true"></i>
+			<span class="sr-only">pinned</span>
+		</div>
+		{{end}}
+	</div>
+</aside>
+<a data-nosnippet href="{{.URL}}" class="toot-link">Open
+	thread</a>

web/template/thread.tmpl

@@ -19,20 +19,20 @@
 
 {{ template "header.tmpl" .}}
 <main>
-	<div data-nosnippet class="thread">
+	<section data-nosnippet class="thread">
 		{{range .context.Ancestors}}
-		<div class="toot" id="{{.ID}}">
+		<article class="toot" id="{{.ID}}">
 			{{ template "status.tmpl" .}}
-		</div>
+		</article>
 		{{end}}
-		<div class="toot expanded" id="{{.status.ID}}">
+		<article class="toot expanded" id="{{.status.ID}}">
 			{{ template "status.tmpl" .status}}
-		</div>
+		</article>
 		{{range .context.Descendants}}
-		<div class="toot" id="{{.ID}}">
+		<article class="toot" id="{{.ID}}">
 			{{ template "status.tmpl" .}}
-		</div>
+		</article>
 		{{end}}
-	</div>
+	</section>
 </main>
 {{ template "footer.tmpl" .}}