From 585a403a6cd25e31b661c2d18161fea386e44a32 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 28 Dec 2021 22:00:47 +0300
Subject: [PATCH] auto-fill folder list using css grid

---
 src/components/FolderView/FolderList.vue |  6 +--
 src/components/RightSideBar/Search.vue   | 48 +++++++++---------------
 2 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index ea2cc9b0..0d9e0676 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -41,8 +41,9 @@ export default {
 }
 
 #f-items {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-gap: 1rem;
   border-top: 1px solid var(--separator);
   gap: 1rem;
   padding-top: 1rem;
@@ -56,7 +57,6 @@ export default {
 }
 
 .f-container .f-item {
-  min-width: 13rem;
   min-height: 5rem;
   display: flex;
   align-items: center;
diff --git a/src/components/RightSideBar/Search.vue b/src/components/RightSideBar/Search.vue
index 032709fc..4b20c148 100644
--- a/src/components/RightSideBar/Search.vue
+++ b/src/components/RightSideBar/Search.vue
@@ -123,7 +123,7 @@ export default {
         icon: "📁",
       },
       {
-        title: "🈁 this page",
+        title: "🈁 ここ",
         icon: "🈁",
       },
     ];
@@ -198,6 +198,21 @@ export default {
   background-color: #131313b2;
   overflow: hidden;
 
+  .item {
+    position: relative;
+    background-color: rgb(39, 37, 37);
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    margin: 0 $small 0 0;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background-color: rgb(170, 50, 50);
+    }
+  }
+
   .input {
     display: flex;
     align-items: center;
@@ -208,17 +223,7 @@ export default {
       margin-left: 3rem;
 
       .item {
-        position: relative;
-        background-color: rgb(39, 37, 37);
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-        cursor: pointer;
-        margin: 0 $small 0 0;
-        display: flex;
-        align-items: center;
-
         &:hover {
-          background-color: rgb(170, 50, 50);
           width: 4rem;
 
           .cancel {
@@ -250,7 +255,6 @@ export default {
 
   .v00 {
     opacity: 1;
-    max-height: 3rem;
     transition: all 0.2s ease-in;
   }
 
@@ -261,17 +265,6 @@ export default {
     position: absolute;
     right: 0;
 
-    .item {
-      cursor: pointer;
-      background-color: rgb(75, 70, 70);
-      padding: $small;
-      border-radius: $small;
-
-      &:hover {
-        background-color: rgb(170, 50, 50);
-      }
-    }
-
     .item::before {
       content: "#";
       color: grey;
@@ -283,17 +276,10 @@ export default {
   display: flex;
 
   .item {
-    background-color: rgb(39, 37, 37);
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-    cursor: pointer;
     margin: $small;
-
-    &:hover {
-      background-color: rgb(170, 50, 50);
-    }
   }
 }
+
 .right-search .scrollable {
   height: 26rem;
   overflow-y: scroll;