feat(html): add anchors to Review entries

userstyles-world · Jul 16, 2021 · 03f531b · 03f531b
1 parent 67c0820
commit 03f531b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/models/review.go b/models/review.go
@@ -24,6 +24,7 @@ func (r Review) FindAllForStyle(id interface{}) (q []Review, err error) {
 		// Preload(clause.Associations).
 		Preload("User").
 		Model(Review{}).
+		Order("id DESC").
 		Find(&q, "style_id = ? ", id).
 		Error
 

diff --git a/modules/templates/templates.go b/modules/templates/templates.go
@@ -1,6 +1,7 @@
 package templates
 
 import (
+	"fmt"
 	"html/template"
 	"time"
 
@@ -45,6 +46,10 @@ func New() *html.Engine {
 		return template.HTML(time.Format("January 02, 2006 15:04"))
 	})
 
+	engine.AddFunc("subtract", func(a, b int) template.HTML {
+		return template.HTML(fmt.Sprintf("%d", a-b))
+	})
+
 	engine.AddFunc("unescape", func(s string) template.HTML {
 		return template.HTML(s)
 	})

diff --git a/scss/components/box.scss b/scss/components/box.scss
@@ -9,6 +9,7 @@
         margin-bottom: 1rem;
 
         &::after {
+            z-index: -1;
             content: '';
             width: 2px;
             height: 1rem;
@@ -17,5 +18,15 @@
             background-color: var(--bg-2);
         }
     }
-}
 
+    &:target {
+        border-color: var(--ac-2);
+        box-shadow: 0 0 0 0.25rem var(--ac-5);
+    }
+
+    &-header {
+        color: var(--fg-2);
+        .datetime { color: inherit }
+        a:hover { text-decoration: underline }
+    }
+}
diff --git a/views/style/view.html b/views/style/view.html
@@ -150,11 +150,13 @@ <h2 class="mt:0 mb:m td:d">Source code</h2>
         <h2 class="td:d">Reviews</h2>
         <a href="/styles/review/{{ .Style.ID }}">Add your review</a>
         {{ with .Reviews }}
-            {{ range . }}
-                <div class="Box mt:m">
+            {{ range $k, $v := . }}
+                {{ $id := subtract (len $.Reviews) $k }}
+                <div class="Box mt:m" id="id-{{ $id }}">
                     <div class="Box-header">
-                        <a class="username" href="/user/{{ .User.Username }}">{{ .User.Name }}</a>
-                        reviewed and gave {{ .Rating }}/5 ⭐ on {{ .CreatedAt | Date }}.
+                        <a class="username" href="/user/{{ $v.User.Username }}"><b>{{ $v.User.Name }}</b></a>
+                        reviewed and gave {{ $v.Rating }}/5 ⭐ on
+                        <a class="datetime" href="#id-{{ $id }}">{{ $v.CreatedAt.Format "January 02, 2006 at 15:04" }}</a>
                     </div>
                     <div class="Box-body mt:m">{{- .Comment -}}</div>
                 </div>