Fix file section scroll and width adjustment issues

StarLederer · Sep 11, 2021 · d03a4a5 · d03a4a5
1 parent 715d69e
commit d03a4a5
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 38 deletions.
diff --git a/src/assets/css/files.css → src/assets/css/files.scss b/src/assets/css/files.css → src/assets/css/files.scss
@@ -28,22 +28,19 @@
 
 /* file list */
 #right-section .table {
+  width: fit-content;
   height: calc(100% - 2rem);
 
   border: none;
-
-  overflow-x: hidden;
-  overflow-y: scroll;
 }
 
 /* row common */
 #right-section .row {
+  min-width: 100%;
   height: 2rem;
   padding: 0 1rem;
 
-  display: grid;
-  grid-template-columns: 400px 50px auto;
-  grid-gap: 1rem;
+  display: inline-flex;
 
   transition: 50ms ease-in-out;
 }
@@ -61,6 +58,16 @@
   overflow: hidden;
 
   pointer-events: none;
+
+  &:nth-child(1) {
+    width: 400px;
+    margin-right: 1rem;
+  }
+
+  &:nth-child(2) {
+    width: 50px;
+    margin-right: 1rem;
+  }
 }
 
 #right-section .section {
@@ -72,14 +79,10 @@
 }
 
 /* table head */
-#right-section .table-head {
-  padding: 0 1rem;
-}
-
 #right-section .table-head::before {
   content: '';
 
-  width: 100%;
+  width: calc(100% - 1rem);
   height: 4rem;
   position: absolute;
 
@@ -121,25 +124,26 @@
 /* file entries */
 #right-section .row.file-entry {
   cursor: pointer;
-}
 
-#right-section .row.file-entry div {
-  font-weight: 700;
-}
+  div {
+    font-weight: 700;
+  }
 
-#right-section .row.file-entry:hover div {
-  color: var(--accent-o50);
-}
+  &:hover {
+    background: #571be511;
 
-#right-section .row.file-entry.selected {
-  background: var(--accent-o05);
-}
-#right-section .row.file-entry.selected div {
-  color: var(--accent);
-}
+    div {
+      color: var(--accent-o50);
+    }
+  }
+
+  &.selected {
+    background: var(--accent-o05);
 
-#right-section .row.file-entry:hover {
-  background: #571be511;
+    div {
+      color: var(--accent);
+    }
+  }
 }
 
 /* bottom fade */

diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
@@ -3,7 +3,7 @@
 @import './common/section-layout.scss';
 
 @import './tags.css';
-@import './files.css';
+@import './files.scss';
 @import './assistant.scss';
 @import './context-menu.css';
 
@@ -102,20 +102,20 @@ header::after {
 /* scroll bars */
 ::-webkit-scrollbar {
   width: 0.25rem;
-  /* height: 0.25rem; */
+  height: 1rem;
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.05);
+  background: #eee;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
-
+  background: #ddd;
+  // border-radius: 0.5rem;
   transition: 300ms;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.5);
+  background: #888;
   transition: 150ms;
 }
diff --git a/src/assets/main.html b/src/assets/main.html
@@ -72,13 +72,13 @@ <h2>Tags</h2>
     <main>
       <!-- files tab -->
       <div id="files-tab">
-        <div class="row table-head afterline">
-          <div>Name</div>
-          <div>Type</div>
-          <div>Location</div>
-          <div class="hidden">Path</div>
-        </div>
         <div class="table">
+          <div class="row table-head afterline">
+            <div>Name</div>
+            <div>Type</div>
+            <div>Location</div>
+            <div class="hidden">Path</div>
+          </div>
           <div id="file-list" class="section"></div>
           <div id="readonly-list" class="section">
             <div class="row section-head afterline">Read only</div>