ui: optimize category item style (#299)

XPoet · Feb 18, 2024 · 0943611 · 0943611
1 parent 5aa2cca
commit 0943611
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 16 deletions.
diff --git a/source/css/layout/category-list.styl b/source/css/layout/category-list.styl
@@ -1,7 +1,13 @@
+$left-gap = 1.6rem
+$spacing-padding = 0.6rem
+
 .category-list-container {
 
   keep-container(1, 2rem, 0)
 
+  padding-top 1.2rem
+  padding-bottom 1.2rem
+
   .category-list-content {
 
     ul.site-all-category-list {
@@ -17,32 +23,58 @@
           margin-bottom 0
         }
 
+
         .self-category-info {
-          position relative
           display flex
           align-items center
           justify-content space-between
-          box-sizing border-box
-          padding 0.5rem 0
+          height 2.6rem
 
           .left {
-            position relative
-            box-sizing border-box
+            display flex
+            align-items center
+            justify-content flex-start
+            width 100%
+            height 100%
+
 
             .icon {
-              padding-right 0.4rem
+              display flex
+              flex-shrink 0
+              align-items center
+              justify-content flex-start
+              width $left-gap
+              height 100%
               color var(--text-color-3)
-              font-size 0.8rem
+              font-size 1.06rem
               cursor pointer
             }
 
+
             .site-all-category-list-link {
+              position relative
+              display flex
+              align-items center
+              justify-content flex-start
+              box-sizing border-box
+              width 100%
+              height 100%
+              font-size 1.02rem
             }
           }
 
+
           .right {
+            display flex
+            flex-shrink 0
+            align-items center
+            justify-content flex-end
+            width 1.6rem
+            height 100%
+
             .site-all-category-list-count {
               color var(--text-color-3)
+              font-size 1.08rem
             }
           }
         }
@@ -52,7 +84,7 @@
           position relative
           box-sizing border-box
           height 0
-          margin-left 1.5rem
+          margin-left $left-gap
           overflow hidden
           visibility hidden
         }

diff --git a/source/js/page/category-page.js b/source/js/page/category-page.js
@@ -8,11 +8,13 @@ function resetCategoriesPage() {
       const childCategoryInfo = dom.querySelector('.site-all-category-list-child')
 
       let domTemplate = `
-            <div class="self-category-info">
-              <div class="left">${
-                childCategoryInfo ? '<i class="icon fa-solid fa-chevron-right"></i> ' : ''
+            <div class="self-category-info border-box">
+              <div class="left border-box">${
+                childCategoryInfo
+                  ? '<i class="icon border-box fa-regular fa-square-plus"></i> '
+                  : ''
               }${categoryNameDom.outerHTML}</div>
-              <div class="right">${categoryCountDom.outerHTML}</div>
+              <div class="right border-box">${categoryCountDom.outerHTML}</div>
             </div>
           `
 
@@ -39,13 +41,13 @@ function resetCategoriesPage() {
             if (isExpand) {
               childDom.style.height = 'auto'
               childDom.style.visibility = 'visible'
-              iconDom.classList.add('fa-chevron-down')
-              iconDom.classList.remove('fa-chevron-right')
+              iconDom.classList.add('fa-square-minus')
+              iconDom.classList.remove('fa-square-plus')
             } else {
               childDom.style.height = '0'
               childDom.style.visibility = 'hidden'
-              iconDom.classList.add('fa-chevron-right')
-              iconDom.classList.remove('fa-chevron-down')
+              iconDom.classList.add('fa-square-plus')
+              iconDom.classList.remove('fa-square-minus')
             }
           }
         })