fix: scroll padding is now consistent everywhere

Tormak9970 · Sep 9, 2023 · 4c2291d · 4c2291d
1 parent 23dac30
commit 4c2291d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 44 deletions.
diff --git a/src/components/core/games/Games.svelte b/src/components/core/games/Games.svelte
@@ -10,13 +10,9 @@
   import ListTabs from "../../layout/tabs/ListTabs.svelte";
   import { heights, widths } from "../imageDimensions";
   import Divider from "../Divider.svelte";
-  import { scrollShadow } from "../../directives/scrollShadow";
   import GridLoadingSkeleton from "../../layout/GridLoadingSkeleton.svelte";
-    import Spacer from "../../layout/Spacer.svelte";
-    import PaddedScrollContainer from "../../layout/PaddedScrollContainer.svelte";
-
-  let overflowContainer: HTMLDivElement;
-  let scrollTarget: HTMLDivElement;
+  import Spacer from "../../layout/Spacer.svelte";
+  import PaddedScrollContainer from "../../layout/PaddedScrollContainer.svelte";
 
   let steamGamesUnsub: Unsubscriber;
   let manualSteamGamesUnsub: Unsubscriber;
@@ -156,14 +152,14 @@
     <ListTabs tabs={Object.values(Platforms)} height="calc(100% - 45px)" bind:selected={$currentPlatform}>
       <PaddedScrollContainer height={"calc(100% - 7px)"} width={"100%"} background={"transparent"} loading={isLoading || $loadingGames} marginTop="0px">
         {#if isLoading || $loadingGames}
-          <div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;" bind:this={scrollTarget}>
+          <div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;">
             {#each new Array(100) as _}
               <GridLoadingSkeleton />
             {/each}
           </div>
         {:else}
           {#if games.length > 0}
-            <div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;" bind:this={scrollTarget}>
+            <div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;">
               {#each games as game (`${$currentPlatform}|${game.appid}|${game.name}`)}
                 <Game game={game} />
               {/each}

diff --git a/src/components/layout/Table.svelte b/src/components/layout/Table.svelte
@@ -1,25 +1,18 @@
 <script lang="ts">
-  import { scrollShadow } from "../directives/scrollShadow";
+  import PaddedScrollContainer from "./PaddedScrollContainer.svelte";
 
   export let height = "400px";
   export let marginLeft = "7px";
-
-  let overflowContainer: HTMLDivElement;
-  let scrollTarget: HTMLDivElement;
 </script>
 
 <div class="table" style="height: {height}; margin-left: {marginLeft};">
   <div class="header">
     <slot name="header" />
   </div>
   <div class="border" style="margin-top: 3px;"></div>
-  <div class="overflow-shadow-container" bind:this={overflowContainer} >
-    <div class="data-scroller" use:scrollShadow={{ target: scrollTarget, container: overflowContainer, heightBump: 8 }}>
-      <div class="data" bind:this={scrollTarget}>
-        <slot name="data" />
-      </div>
-    </div>
-  </div>
+  <PaddedScrollContainer height={"calc(100% - 20px)"} width={"100%"} background={"transparent"} padding={"5px 0px 0px 0px"} marginTop="0px">
+    <slot name="data" />
+  </PaddedScrollContainer>
 </div>
 
 <style>
@@ -49,27 +42,4 @@
     display: flex;
     justify-content: flex-start;
   }
-
-  .data {
-    margin-top: 3px;
-    width: 100%;
-
-    overflow: hidden;
-  }
-
-  .data-scroller {
-    padding: 3px;
-    width: calc(100% - 6px);
-    margin-right: 6px;
-
-    margin-top: 5px;
-
-    height: 100%;
-
-    overflow: scroll;
-  }
-
-  .overflow-shadow-container {
-    height: calc(100% - 20px);
-  }
 </style>
diff --git a/src/components/modals/modal-utils/game-filter/SelectedGameEntry.svelte b/src/components/modals/modal-utils/game-filter/SelectedGameEntry.svelte
@@ -13,12 +13,12 @@
     <Checkbox bind:value={isChecked} onChange={(checked) => { onChange(game.appid, checked); }} />
   </div>
   <div class="name">{game.name}</div>
-  <div class="platform" style="margin-left: auto; margin-right: {platform == Platforms.STEAM ? "47px" : "20px"};">{platform}</div>
+  <div class="platform" style="margin-left: auto; margin-right: {platform == Platforms.STEAM ? "45px" : "18px"};">{platform}</div>
 </div>
 
 <style>
   .selected-game-entry {
-    width: calc(100% - 20px);
+    width: calc(100% - 14px);
     
     padding: 3px 7px;
     margin-bottom: 7px;