chore: web UI polish

Amolith and Crush created

Fixes: bug-45aeed6
Co-authored-by: Crush <crush@charm.land>

Change summary

pkg/web/templates/bug.html  | 114 ++++++++++++++++++++------------------
pkg/web/templates/bugs.html |  20 +++---
2 files changed, 68 insertions(+), 66 deletions(-)

Detailed changes

pkg/web/templates/bug.html 🔗

@@ -7,78 +7,82 @@
   </ul>
 </nav>
 
+<header>
+  <h2>
+    {{if eq .Status "open"}}
+    <svg class="bug-status-icon bug-status-icon-open" aria-label="Open bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke-width="2">
+      <circle cx="8" cy="8" r="6" />
+    </svg>
+    {{else if eq .Status "closed"}}
+    <svg class="bug-status-icon bug-status-icon-closed" aria-label="Closed bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke-width="2">
+      <circle cx="8" cy="8" r="6" />
+      <path d="M5 8 l2 2 l4 -4" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+    {{end}}
+    {{.Title}}
+  </h2>
+  {{if .Labels}}
+  <p>
+    {{range $i, $label := .Labels}}{{if $i}} {{end}}<code>{{$label.Name}}</code>{{end}}
+  </p>
+  {{end}}
+</header>
+
 <section aria-labelledby="timeline-heading">
   <h3 id="timeline-heading" class="visually-hidden">Timeline</h3>
   
   {{range .Timeline}}
-  <article id="{{.ID}}" aria-labelledby="timeline-item-{{.ID}}">
-    {{if eq .Type "create"}}
+  {{if eq .Type "create"}}
+  <article id="{{.ID}}">
     <header>
-      <h4 id="timeline-item-{{.ID}}">
-        {{if eq $.Status "open"}}
-        <svg class="bug-status-icon bug-status-icon-open" aria-label="Open bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke-width="2">
-          <circle cx="8" cy="8" r="6" />
-        </svg>
-        {{else if eq $.Status "closed"}}
-        <svg class="bug-status-icon bug-status-icon-closed" aria-label="Closed bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke-width="2">
-          <circle cx="8" cy="8" r="6" />
-          <path d="M5 8 l2 2 l4 -4" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-        {{end}}
-        {{$.Title}}
-      </h4>
+      <p><strong>{{.Author}}</strong> opened <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time>{{if $.Edited}} <em>(edited)</em>{{end}}</p>
     </header>
     {{if .Message}}
     {{.Message}}
     {{else}}
     <em class="muted">No description provided.</em>
     {{end}}
-    <footer>
-      <strong>{{.Author}}</strong> opened this bug on
-      <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
-      {{if $.Edited}}<em>(edited)</em>{{end}}
-    </footer>
-    
-    {{else if eq .Type "comment"}}
+  </article>
+  
+  {{else if eq .Type "comment"}}
+  <article id="{{.ID}}">
+    <header>
+      <p><strong>{{.Author}}</strong> commented <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time>{{if .Edited}} <em>(edited)</em>{{end}}</p>
+    </header>
     {{if .Message}}
     {{.Message}}
     {{else}}
     <em class="muted">No comment provided.</em>
     {{end}}
-    <footer>
-      <strong>{{.Author}}</strong> commented on
-      <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
-      {{if .Edited}}<em>(edited)</em>{{end}}
-    </footer>
-    
-    {{else if eq .Type "title"}}
-    <strong>{{.Author}}</strong> changed the title to <strong>{{.Title}}</strong>.
-    <footer>
-      <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
-    </footer>
-    
-    {{else if eq .Type "status"}}
-    <strong>{{.Author}}</strong> {{.Status}} the bug.
-    <footer>
-      <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
-    </footer>
-    
-    {{else if eq .Type "labels"}}
-    <strong>{{.Author}}</strong>
-    {{if .AddedLabels}}
-    added label{{if gt (len .AddedLabels) 1}}s{{end}}
-    {{range $i, $label := .AddedLabels}}{{if $i}}, {{end}}<code>{{$label}}</code>{{end}}
-    {{end}}
-    {{if and .AddedLabels .RemovedLabels}}and{{end}}
-    {{if .RemovedLabels}}
-    removed label{{if gt (len .RemovedLabels) 1}}s{{end}}
-    {{range $i, $label := .RemovedLabels}}{{if $i}}, {{end}}<code>{{$label}}</code>{{end}}
-    {{end}}
-    <footer>
-      <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
-    </footer>
-    {{end}}
   </article>
+  
+  {{else if eq .Type "title"}}
+  <article id="{{.ID}}">
+    <p><strong>{{.Author}}</strong> changed the title to <strong>{{.Title}}</strong> <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time></p>
+  </article>
+  
+  {{else if eq .Type "status"}}
+  <article id="{{.ID}}">
+    <p><strong>{{.Author}}</strong> {{.Status}} the bug <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time></p>
+  </article>
+  
+  {{else if eq .Type "labels"}}
+  <article id="{{.ID}}">
+    <p>
+      <strong>{{.Author}}</strong>
+      {{if .AddedLabels}}
+      added label{{if gt (len .AddedLabels) 1}}s{{end}}
+      {{range $i, $label := .AddedLabels}}{{if $i}}, {{end}}<code>{{$label}}</code>{{end}}
+      {{end}}
+      {{if and .AddedLabels .RemovedLabels}} and {{end}}
+      {{if .RemovedLabels}}
+      removed label{{if gt (len .RemovedLabels) 1}}s{{end}}
+      {{range $i, $label := .RemovedLabels}}{{if $i}}, {{end}}<code>{{$label}}</code>{{end}}
+      {{end}}
+      <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time>
+    </p>
+  </article>
+  {{end}}
   {{end}}
 </section>
 {{end}}

pkg/web/templates/bugs.html 🔗

@@ -29,17 +29,15 @@
       <code><a href="/{{$.Repo.Name}}/bug/{{.FullID}}">{{.ID}}</a></code>
       {{.Title}}
     </h3>
-    <footer>
-      by <strong>{{.Author}}</strong> on
-      <time datetime="{{.CreatedAt | rfc3339}}">{{.CreatedAt | formatDate}}</time>
-      {{if gt .CommentCount 0}}
-      • {{.CommentCount}} Comments
-      {{end}}
-      {{if .HasActivity}}
-      • Last activity:
-      <time datetime="{{.LastActivity | rfc3339}}">{{.LastActivity | formatDate}}</time>
-      {{end}}
-    </footer>
+     <footer>
+       Opened <time datetime="{{.CreatedAt | rfc3339}}" data-tooltip="{{.CreatedAt | formatDate}}">{{.CreatedAt | relativeTime}}</time> by <strong>{{.Author}}</strong>
+       {{if gt .CommentCount 0}}
+       • {{.CommentCount}} comments
+       {{end}}
+       {{if .HasActivity}}
+       • Updated <time datetime="{{.LastActivity | rfc3339}}" data-tooltip="{{.LastActivity | formatDate}}">{{.LastActivity | relativeTime}}</time>
+       {{end}}
+     </footer>
   </article>
   {{end}}