chore: web UI polish

Amolith and Crush created 2 weeks ago

Fixes: bug-45aeed6
Co-authored-by: Crush <[e-mail]>

Change summary

pkg/web/static/overrides.css    |  7 ++++++-
pkg/web/templates/branches.html |  8 ++++----
pkg/web/templates/commit.html   | 22 ++++------------------
pkg/web/templates/commits.html  |  8 ++++----
pkg/web/templates/tags.html     |  8 ++++----
pkg/web/webui.go                |  9 +++++++++
6 files changed, 31 insertions(+), 31 deletions(-)

Detailed changes

pkg/web/static/overrides.css

@@ -108,6 +108,11 @@ article > header > h2,
 article > header > h3,
 article > header > h4,
 article > header > h5,
-article > header > h6 {
+article > header > h6,
+article > header > p {
+	margin-bottom: 0;
+}
+
+article > p:only-child {
 	margin-bottom: 0;
 }	

pkg/web/templates/branches.html

@@ -24,10 +24,10 @@
       <pre>{{$body}}</pre>
     </details>
     {{end}}
-    <p>
-      by <strong>{{.Commit.Author.Name}}</strong> on
-      <time datetime="{{.Commit.Author.When | rfc3339}}">{{.Commit.Author.When | formatDate}}</time>
-    </p>
+     <p>
+       <strong>{{.Commit.Author.Name}}</strong> created
+       <time datetime="{{.Commit.Author.When | rfc3339}}" data-tooltip="{{.Commit.Author.When | formatDate}}">{{.Commit.Author.When | relativeTime}}</time>
+     </p>
     {{end}}
     <div class="grid">
       <a href="/{{$.Repo.Name}}/tree/{{.Ref.Name.Short}}" role="button" class="secondary">Files</a>

pkg/web/templates/commit.html

@@ -7,28 +7,14 @@
 </nav>
 
 <header>
-  <h2 id="commit-heading">{{.Commit.Message | commitSubject}}</h2>
+  <hgroup>
+    <h2 id="commit-heading">{{.Commit.Message | commitSubject}}</h2>
+    <p><strong>{{.Commit.Author.Name}}</strong> created <time datetime="{{.Commit.Author.When | rfc3339}}" data-tooltip="{{.Commit.Author.When | formatDate}}">{{.Commit.Author.When | relativeTime}}</time></p>
+  </hgroup>
   {{$body := .Commit.Message | commitBody}}
   {{if $body}}
   <pre><code>{{$body}}</code></pre>
   {{end}}
-  <dl aria-label="Commit metadata">
-    <dt>Author</dt>
-    <dd>{{.Commit.Author.Name}} &lt;{{.Commit.Author.Email}}&gt;</dd>
-    
-    <dt>Date</dt>
-    <dd><time datetime="{{.Commit.Author.When | rfc3339}}">{{.Commit.Author.When | formatDate}}</time></dd>
-    
-    <dt>Commit</dt>
-    <dd><code>{{.Commit.ID}}</code></dd>
-    
-    {{if .ParentIDs}}
-    <dt>Parent{{if gt (len .ParentIDs) 1}}s{{end}}</dt>
-    <dd>
-      {{range $i, $parent := .ParentIDs}}{{if $i}}, {{end}}<code><a href="/{{$.Repo.Name}}/commit/{{$parent}}">{{$parent | shortHash}}</a></code>{{end}}
-    </dd>
-    {{end}}
-  </dl>
   
   <nav aria-label="Commit actions">
     <ul>

pkg/web/templates/commits.html

@@ -23,10 +23,10 @@
       <pre>{{$body}}</pre>
     </details>
     {{end}}
-    <p>
-      by <strong>{{.Author.Name}}</strong> on
-      <time datetime="{{.Author.When | rfc3339}}">{{.Author.When | formatDate}}</time>
-    </p>
+     <p>
+       <strong>{{.Author.Name}}</strong> created
+       <time datetime="{{.Author.When | rfc3339}}" data-tooltip="{{.Author.When | formatDate}}">{{.Author.When | relativeTime}}</time>
+     </p>
   </article>
   {{end}}
 

pkg/web/templates/tags.html

@@ -9,10 +9,10 @@
     <pre><code>{{.TagMessage}}</code></pre>
     {{end}}
     {{if .Commit}}
-    <p>
-      by <strong>{{.Commit.Author.Name}}</strong> on
-      <time datetime="{{.TagDate | rfc3339}}">{{.TagDate | formatDate}}</time>
-    </p>
+     <p>
+       <strong>{{.Commit.Author.Name}}</strong> created
+       <time datetime="{{.TagDate | rfc3339}}" data-tooltip="{{.TagDate | formatDate}}">{{.TagDate | relativeTime}}</time>
+     </p>
     {{end}}
     <div class="grid">
       <a href="/{{$.Repo.Name}}/tree/{{.Ref.Name.Short}}" role="button" class="secondary">Files</a>

pkg/web/webui.go

@@ -16,6 +16,7 @@ import (
 
 	"github.com/charmbracelet/log/v2"
 	"github.com/charmbracelet/soft-serve/pkg/proto"
+	"github.com/dustin/go-humanize"
 	"github.com/gorilla/mux"
 )
 
@@ -155,6 +156,14 @@ var templateFuncs = template.FuncMap{
 			return ""
 		}
 	},
+	"relativeTime": func(t interface{}) string {
+		switch v := t.(type) {
+		case time.Time:
+			return humanize.Time(v)
+		default:
+			return ""
+		}
+	},
 }
 
 // renderHTML renders an HTML template with the given data.