ui: add display format to tag page (#303)

XPoet · May 13, 2024 · 2d6bfb6 · 2d6bfb6
1 parent b758c89
commit 2d6bfb6
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 8 deletions.
diff --git a/layout/_page/tag.ejs b/layout/_page/tag.ejs
@@ -1,14 +1,20 @@
 <div class="fade-in-down-animation">
     <div class="tag-page-container">
         <% if (site.tags.length){ %>
-            <div class="tagcloud-content">
-                <%- tagcloud({
-                    min_font: 1,
-                    max_font: 1.6,
-                    unit: 'rem',
-                    amount: 100
-                }) %>
-            </div>
+            <% if (page?.tag_cloud === false){ %>
+                <div class="tag-list-content">
+                    <%- list_tags() %>
+                </div>
+            <% } else { %>
+                <div class="tagcloud-content">
+                    <%- tagcloud({
+                        min_font: 1,
+                        max_font: 1.6,
+                        unit: 'rem',
+                        amount: 100
+                    }) %>
+                </div>
+            <% } %>
         <% } else { %>
             <%- partial('_partial/common/empty-content') %>
         <% } %>

diff --git a/source/css/layout/_page/tag.styl b/source/css/layout/_page/tag.styl
@@ -12,4 +12,43 @@
       padding 0.68rem 0.5rem
     }
   }
+
+
+  .tag-list-content {
+    .tag-list {
+      position relative
+      display flex
+      flex-wrap wrap
+      gap 0.82rem
+      justify-content flex-start
+      box-sizing border-box
+
+      .tag-list-item {
+        position relative
+        box-sizing border-box
+        overflow hidden
+        border-radius 0.3rem
+
+
+        .tag-list-link {
+          display inline-block
+          padding 0.4rem 0.6rem
+          color var(--text-color-3)
+          background var(--background-color-2)
+
+          &:hover {
+            color var(--primary-color)
+          }
+        }
+
+
+        .tag-list-count {
+          display inline-block
+          padding 0.4rem 0.6rem
+          color var(--text-color-3)
+          background var(--background-color-3)
+        }
+      }
+    }
+  }
 }