feat(html): improve the look for Review entries

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

Hide file tree

Showing 3 changed files with 41 additions and 42 deletions.
diff --git a/scss/components/box.scss b/scss/components/box.scss
@@ -0,0 +1,21 @@
+.Box {
+    padding: 1rem;
+    position: relative;
+    border-radius: var(--br-3);
+    border: 1px solid var(--bg-4);
+    background-color: var(--bg-2);
+
+    &:not(:last-child) {
+        margin-bottom: 1rem;
+
+        &::after {
+            content: '';
+            width: 2px;
+            height: 1rem;
+            bottom: -1.063rem;
+            position: absolute;
+            background-color: var(--bg-2);
+        }
+    }
+}
+
diff --git a/scss/main.scss b/scss/main.scss
@@ -12,3 +12,4 @@
 @import 'ui/footer';
 @import 'ui/tooltip';
 @import 'ui/checkbox';
+@import 'components/box';
diff --git a/views/style/view.html b/views/style/view.html
@@ -1,46 +1,5 @@
 <div class="wrapper py:l">
-    <style type="text/css" media="screen">
-        .reviews table { width: 100% }
-        .reviews table th { text-align: left }
-    </style>
-
-    <section class="reviews">
-        <h2 class="td:d">Reviews</h2>
-        <a href="/styles/review/{{ .Style.ID }}">Add your review</a>
-        {{ with .Reviews }}
-            {{/* range . }}<p>{{ printf "%#v" . }}</p><br>{{ end */}}
-            <table>
-                <thead>
-                    <tr>
-                        <th>ID</th>
-                        <th>StyleID</th>
-                        <th>Created</th>
-                        <th>Rating</th>
-                        <th>Comment</th>
-                        <th>UserID</th>
-                        <th>Name</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {{ range . }}
-                        <tr>
-                            <td>{{ .ID }}</td>
-                            <td>{{ .StyleID }}</td>
-                            <td>{{ .CreatedAt | Date }}</td>
-                            <td>{{ .Rating }}</td>
-                            <td>{{ .Comment }}</td>
-                            <td>{{ .UserID }}</td>
-                            <td>{{ .User.Name }}</td>
-                        </tr>
-                    {{ end }}
-                </tbody>
-            </table>
-        {{ else }}
-            <i>No reviews yet.</i>
-        {{ end }}
-    </section>
-
-    <section class="preview mt:l">
+    <section class="preview">
         <h1 class="mb:m">{{ .Style.Name -}}
             <span class="fg:4"> by {{ .Style.Username }}</span>
         </h1>
@@ -186,4 +145,22 @@ <h2 class="mt:0 mb:m td:d">Source code</h2>
             <textarea class="monospace" readonly>{{ $code }}</textarea>
         </div>
     </section>
+
+    <section class="reviews">
+        <h2 class="td:d">Reviews</h2>
+        <a href="/styles/review/{{ .Style.ID }}">Add your review</a>
+        {{ with .Reviews }}
+            {{ range . }}
+                <div class="Box mt:m">
+                    <div class="Box-header">
+                        <a class="username" href="/user/{{ .User.Username }}">{{ .User.Name }}</a>
+                        reviewed and gave {{ .Rating }}/5 ⭐ on {{ .CreatedAt | Date }}.
+                    </div>
+                    <div class="Box-body mt:m">{{- .Comment -}}</div>
+                </div>
+            {{ end }}
+        {{ else }}
+            <i>No reviews yet.</i>
+        {{ end }}
+    </section>
 </div>