feat: scrollbar looks nice, is not cut off

every-day-things · Jan 18, 2024 · b8e5deb · b8e5deb
1 parent 6739ada
commit b8e5deb
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 70 deletions.
diff --git a/src/components/atoms/BookAsCover.svelte b/src/components/atoms/BookAsCover.svelte
@@ -19,7 +19,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <!-- svelte-ignore a11y-missing-attribute -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="container">
+<div class="container p-4">
   {#if isSelected}
     {#if isSendingToDevice}
       <div class="controls">

diff --git a/src/components/molecules/BookTable.svelte b/src/components/molecules/BookTable.svelte
@@ -2,27 +2,46 @@
   import { List } from "svelte-virtual";
   import type { LibraryBook } from "../../bindings";
   import BookTableRow from "../atoms/BookTableRow.svelte";
+  import { writable, type Writable } from "svelte/store";
+  import { onMount } from "svelte";
 
   export let bookList: LibraryBook[];
 
-  const scrollableDivHeight = "80vh";
+  const scrollableDivHeight: Writable<string> = writable("80vh");
   const itemHeightPx = 220;
+
+  onMount(() => {
+    const listContainerDiv = document.getElementById("list-container");
+
+    if (listContainerDiv) {
+      const containerTop = listContainerDiv.getBoundingClientRect().top;
+      scrollableDivHeight.set(`calc(100vh - ${containerTop}px)`);
+    }
+
+    window.addEventListener("resize", () => {
+      if (!listContainerDiv) return;
+      const coverViewTop = listContainerDiv.getBoundingClientRect().top;
+      scrollableDivHeight.set(`calc(100vh - ${coverViewTop}px)`);
+    });
+  });
 </script>
 
 <div class="book header">
   <p class="cover">Cover</p>
   <p class="title">Title</p>
   <p class="title">Authors</p>
 </div>
-<List
-  itemCount={bookList.length}
-  itemSize={itemHeightPx}
-  height={scrollableDivHeight}
->
-  <div slot="item" let:index let:style {style}>
-    <BookTableRow book={bookList[index]} />
-  </div>
-</List>
+<div id="list-container">
+  <List
+    itemCount={bookList.length}
+    itemSize={itemHeightPx}
+    height={$scrollableDivHeight}
+  >
+    <div slot="item" let:index let:style {style}>
+      <BookTableRow book={bookList[index]} />
+    </div>
+  </List>
+</div>
 
 <style>
   .book {

diff --git a/src/components/molecules/CoverView.svelte b/src/components/molecules/CoverView.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import VirtualRowList from "$lib/components/ui/virtual-list/VirtualRowList.svelte";
-  import { writable } from "svelte/store";
+  import { writable, type Writable } from "svelte/store";
   import type { LibraryBook } from "../../bindings";
   import BookAsCover from "../atoms/BookAsCover.svelte";
   import { onMount } from "svelte";
@@ -12,7 +12,8 @@
   const itemHeight = 320;
   const itemMarginTotal = 40;
   const totalHeight = itemHeight + itemMarginTotal;
-  const scrollableDivHeight = "80vh";
+
+  let scrollableDivHeight: Writable<string> = writable("80vh");
 
   let groupSize = writable(5);
 
@@ -21,6 +22,19 @@
     window.addEventListener("resize", () => {
       groupSize.set(window.innerWidth < 1200 ? 4 : 6);
     });
+
+    const coverViewDiv = document.getElementById("cover-view");
+
+    if (coverViewDiv) {
+      const coverViewTop = coverViewDiv.getBoundingClientRect().top;
+      scrollableDivHeight.set(`calc(100vh - ${coverViewTop}px)`);
+    }
+
+    window.addEventListener("resize", () => {
+      if (!coverViewDiv) return;
+      const coverViewTop = coverViewDiv.getBoundingClientRect().top;
+      scrollableDivHeight.set(`calc(100vh - ${coverViewTop}px)`);
+    });
   });
 
   const renderFn = (bookListIndex: number) => ({
@@ -36,10 +50,12 @@
   });
 </script>
 
-<VirtualRowList
-  {scrollableDivHeight}
-  items={bookList.map((_, index) => index)}
-  {groupSize}
-  groupHeight={totalHeight}
-  {renderFn}
-/>
+<div id="cover-view">
+  <VirtualRowList
+    scrollableDivHeight={$scrollableDivHeight}
+    items={bookList.map((_, index) => index)}
+    {groupSize}
+    groupHeight={totalHeight}
+    {renderFn}
+  />
+</div>
diff --git a/src/lib/components/ui/virtual-list/VirtualRowList.svelte b/src/lib/components/ui/virtual-list/VirtualRowList.svelte
@@ -9,7 +9,7 @@
   export let groupSize: Writable<number> = writable(5)
   export let groupHeight: number = 320;
   export let renderFn: Function;
-  export let scrollableDivHeight = "80vh";
+  export let scrollableDivHeight: string | number;
 
   const groupBySize = <T,>(groupSize: number, array: Array<T>) => {
     const groups: T[][] = [];

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -152,52 +152,56 @@
   <title>Library</title>
 </svelte:head>
 
-<section class="scrollable-section">
+<section class="scrollable-section safe-area">
   <div class="books">
-    <div class="controls">
-      <Input
-        class="searchBox"
-        type="text"
-        bind:value={$search}
-        placeholder="Search book titles and authors"
-      />
-      <Select.Root bind:selected={sortOrderElement}>
-        <Select.Trigger class="w-[180px]">
-          <Select.Value placeholder="Sort Order" />
-        </Select.Trigger>
-        <Select.Content>
-          {#each LBSOSEntries as [sortOrderKey, sortOrderItem]}
-            <Select.Item value={sortOrderItem}>
-              {LibraryBookSortOrderStrings[sortOrderKey]}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-      <SwitchIcon
-        bind:value={view}
-        optionList={[
-          {
-            label: "cover",
-            icon: GridIcon,
-          },
-          {
-            label: "table",
-            icon: ListIcon,
-          },
-        ]}
-      />
+    <div class="pg-header">
+      <div class="controls">
+        <Input
+          class="searchBox"
+          type="text"
+          bind:value={$search}
+          placeholder="Search book titles and authors"
+        />
+        <Select.Root bind:selected={sortOrderElement}>
+          <Select.Trigger class="w-[180px]">
+            <Select.Value placeholder="Sort Order" />
+          </Select.Trigger>
+          <Select.Content>
+            {#each LBSOSEntries as [sortOrderKey, sortOrderItem]}
+              <Select.Item value={sortOrderItem}>
+                {LibraryBookSortOrderStrings[sortOrderKey]}
+              </Select.Item>
+            {/each}
+          </Select.Content>
+        </Select.Root>
+        <SwitchIcon
+          bind:value={view}
+          optionList={[
+            {
+              label: "cover",
+              icon: GridIcon,
+            },
+            {
+              label: "table",
+              icon: ListIcon,
+            },
+          ]}
+        />
+      </div>
+      <span class="num_items"
+        >Showing {$range} of {$selectedBooks.length} items</span
+      >
     </div>
-    <span class="num_items"
-      >Showing {$range} of {$selectedBooks.length} items</span
-    >
     {#await waitForBooksPromise()}
       <p>Loading books...</p>
     {:then _}
+      <div class="view-container">
       {#if view === "cover"}
         <CoverView bookList={$selectedBooks} dragHandler={x} />
       {:else if view === "table"}
         <BookTable bookList={$selectedBooks} />
       {/if}
+      </div>
     {/await}
   </div>
 </section>
@@ -217,26 +221,31 @@
     margin-right: 8px;
   }
 
-  section {
+  .pg-header {
+    padding: 16px;
+    box-shadow: 0 var(--shadow-height) 0 var(--shadow-color);
+  }
+  .safe-area {
     margin-top: 16px;
+  }
+
+  section {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     overscroll-behavior: contain;
-    padding: 16px;
-    width: calc(100% - 32px);
   }
 
   .num_items {
+    display: block;
     color: var(--text-secondary);
-    margin-bottom: 8px;
+    margin: 8px 0;
   }
 
   .books {
     display: flex;
     flex-direction: column;
-    gap: 16px;
     width: 100%;
   }
 </style>
diff --git a/src/routes/semantic.css b/src/routes/semantic.css
@@ -217,6 +217,9 @@
 
   --background-gradient-image: var(--gradient--back-2);
   --focus-ring: var(--ctp-macchiato-blue);
+
+  --shadow-color: rgba(255,255,255,0.17);
+  --shadow-height: 0.5px;
 }
 /* #endregion darkmode */
 

diff --git a/src/routes/styles.css b/src/routes/styles.css
@@ -30,16 +30,27 @@ body {
   overflow: hidden;
 }
 
-/* #region disable-scrollbars */
-/* Disable default scrollbars for Webkit & Gecko browsers */
-html::-webkit-scrollbar {
+/* #region style-scrollbars */
+/* Themed scrollbars */
+*::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+*::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+*::-webkit-scrollbar-thumb {
+  /* Style the control for scrolling up and down */
+  background: var(--text-onprimary);
+  border: 3px solid transparent;
+  border-radius: 8px;
+  box-shadow: inset 0 0 0 7px var(--text-onprimary);
+}
+*::-webkit-scrollbar-button {
+  /* Hide buttons that appear at the top and bottom of scrollbars */
   display: none;
 }
-html,
-body {
-  scrollbar-width: none; /* Firefox */
-}
-/* #endregion disable-scrollbars */
+/* #endregion style-scrollbars */
 
 h1,
 h2,