feat(client): improve UI for pagination component

userstyles-world · Jul 18, 2021 · d48d2b1 · d48d2b1
1 parent 17f78a9
commit d48d2b1
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 3 deletions.
diff --git a/scss/components/pagination.scss b/scss/components/pagination.scss
@@ -0,0 +1,48 @@
+.Pagination {
+    padding: 0.25rem;
+    border-radius: var(--br-2);
+    border: 1px solid var(--bg-4);
+    background-color: var(--bg-2);
+
+    &-button,
+    &-active {
+        padding: 0.5rem;
+        border-radius: var(--br-3);
+        color: var(--fg-1);
+    }
+
+    &-active {
+        background-color: var(--ac-4);
+    }
+
+    > * {
+        min-width: 40px;
+        position: relative;
+        text-align: center;
+        &:not(:last-child) {
+            margin-right: 0.5rem;
+            &::after {
+                content: '|';
+                right: -0.438rem;
+                font-size: 1rem;
+                position: absolute;
+                color: var(--bg-4);
+            }
+        }
+    }
+
+    &-button {
+        &:hover { background-color: var(--bg-3) }
+        &:focus {
+            border-color: var(--ac-2);
+            box-shadow: inset 0 0 0 1px var(--ac-3), 0 0 0 0.2rem var(--ac-5);
+        }
+        &:-moz-focusring {
+            outline: 1px solid transparent;
+        }
+    }
+
+    &-active {
+        background-color: var(--ac-4);
+    }
+}
diff --git a/scss/main.scss b/scss/main.scss
@@ -13,3 +13,4 @@
 @import 'ui/tooltip';
 @import 'ui/checkbox';
 @import 'components/box';
+@import 'components/pagination';
diff --git a/views/core/explore.html b/views/core/explore.html
@@ -28,9 +28,21 @@ <h1>Explore</h1>
         {{ end }}
     </section>
 
-    <section class="Pagination mt:m mb:m flex jc:c ai:c">
-        <div>
-            back: {{ .PageBack }} / now: {{ .PageNow }} next: {{ .PageNext }} / max: {{ .PageMax }}
+    <section class="Pagination-wrapper mt:l mb:m flex jc:c ai:c">
+        <div class="Pagination flex jc:c ai:c">
+            {{ if not (eq .PageNow 1) }}
+                <a class="Pagination-button min" href="/explore?page=1">First page</a>
+            {{ end }}
+            {{ if not (or (eq .PageNow 1) (eq .PageBack 1)) }}
+                <a class="Pagination-button back" href="/explore?page={{ .PageBack }}">{{ .PageBack }}</a>
+            {{ end }}
+            <div class="Pagination-active now">{{ .PageNow }}</div>
+            {{ if not (or (eq .PageNow .PageMax) (eq .PageNext .PageMax)) }}
+                <a class="Pagination-button next" href="/explore?page={{ .PageNext }}">{{ .PageNext }}</a>
+            {{ end }}
+            {{ if not (eq .PageNow .PageMax) }}
+                <a class="Pagination-button max" href="/explore?page={{ .PageMax }}">Last page</a>
+            {{ end }}
         </div>
     </section>
 </div>