fix: sidebar positioning, contrast

kiosion · Oct 6, 2023 · 9fc12bb · 9fc12bb
1 parent 91c917f
commit 9fc12bb
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 18 deletions.
diff --git a/svelte-app/src/components/document/content/common/header.svelte b/svelte-app/src/components/document/content/common/header.svelte
@@ -3,7 +3,7 @@
   import { getTotalWords } from '$helpers/pt';
   import { isDesktop } from '$helpers/responsive';
   import { currentLang, t } from '$i18n';
-  import { summaryContents, summaryVisible } from '$lib/summary';
+  import { summaryContents, summaryOffset, summaryVisible } from '$lib/summary';
 
   import BulletPoint from '$components/bullet-point.svelte';
   import ArrowButton from '$components/controls/arrow-button.svelte';
@@ -17,9 +17,12 @@
     model = data._type,
     headings: DocumentHeadings[] | undefined;
 
+  let titleRect: DOMRectReadOnly | undefined;
+
   const readingTime = getReadingTime(getTotalWords((data?.body ?? []) as PTBlock[]));
 
   $: date = formatDate(data.date, 'full', $currentLang);
+  $: titleRect?.height && summaryOffset.set(titleRect.height);
 </script>
 
 <div data-test-id="{model}-header">
@@ -28,6 +31,7 @@
       <svelte:fragment slot="title">
         <h1
           class="mb-4 mt-8 h-fit w-fit font-display text-4xl font-bold text-black transition-[color] dark:text-white lg:mt-10 lg:text-6xl lg:font-black"
+          bind:contentRect={titleRect}
         >
           {data.title}
         </h1>
@@ -48,10 +52,11 @@
           {#if $isDesktop && headings?.length}
             <ArrowButton
               class="focusOutline-sm -mb-1 flex-1 whitespace-nowrap rounded-sm text-right"
-              on:click={() =>
+              on:click={() => {
                 $isDesktop &&
-                $summaryContents?.length &&
-                summaryVisible.set(!$summaryVisible)}
+                  $summaryContents?.length &&
+                  summaryVisible.set(!$summaryVisible);
+              }}
             >
               <span class="flex items-center justify-end gap-2">
                 {#key $summaryVisible}

diff --git a/svelte-app/src/components/document/content/common/sidebar.svelte b/svelte-app/src/components/document/content/common/sidebar.svelte
@@ -3,28 +3,29 @@
   import { fade } from 'svelte/transition';
 
   import { t } from '$i18n';
-  import { summaryContents } from '$lib/summary';
+  import { summaryContents, summaryOffset } from '$lib/summary';
 
   import Summary from '$components/document/content/common/summary.svelte';
 
   export let element: HTMLDivElement;
 
-  $: console.log('scrolled down?', element?.offsetTop);
+  $: headings = $summaryContents?.length ? $summaryContents : [];
 </script>
 
 <div
   in:fade={{ duration: 300, delay: 50, easing: circOut }}
   out:fade={{ duration: 200, easing: circIn }}
   bind:this={element}
+  style="margin-top: {$summaryOffset + 27}px;"
 >
   <h1>{$t('Table of Contents')}</h1>
   <span />
-  <Summary headings={$summaryContents?.length ? $summaryContents : []} />
+  <Summary {headings} />
 </div>
 
 <style lang="scss">
   div {
-    @apply sticky left-0 top-0 mt-20 h-fit w-72 overflow-clip pl-8 pt-20;
+    @apply sticky left-0 top-0 h-fit w-72 overflow-clip pl-8 pt-20;
   }
 
   h1 {
@@ -42,7 +43,7 @@
 
   :global(.dark) {
     span {
-      @apply bg-dark/40;
+      @apply bg-light/40;
     }
   }
 </style>
diff --git a/svelte-app/src/components/layouts/scroll-container.svelte b/svelte-app/src/components/layouts/scroll-container.svelte
@@ -4,7 +4,7 @@
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { BASE_TRANSITION_DURATION } from '$lib/consts';
   import { isDesktop } from '$lib/helpers/responsive';
-  import { shouldShowSummary, summaryContents, summaryVisible } from '$lib/summary';
+  import { shouldShowSummary, summaryVisible } from '$lib/summary';
 
   import Sidebar from '$components/document/content/common/sidebar.svelte';
 
@@ -30,7 +30,6 @@
 
   beforeNavigate(() => {
     summaryVisible.set(false);
-    summaryContents.set(undefined);
   });
 
   afterNavigate(() => {

diff --git a/svelte-app/src/lib/store.ts b/svelte-app/src/lib/store.ts
@@ -1,3 +1,4 @@
+import { browser } from '$app/environment';
 import { API_URL } from '$lib/env';
 import Logger from '$lib/logger';
 import tryFetch from '$lib/try-fetch';
@@ -118,14 +119,16 @@ const find = async <T extends keyof DocumentRegistry>(
   params: PossibleParams = {}
 ): Promise<DocumentRegistry[T][] | Error> => {
   const cacheKey = JSON.stringify({ model, params, many: true });
-  const cachedData = cacheGet(cacheKey);
-  if (cachedData) {
-    return cachedData as DocumentRegistry[T][];
+  if (browser && params.preview !== 'true') {
+    const cachedData = cacheGet(cacheKey);
+    if (cachedData) {
+      return cachedData as DocumentRegistry[T][];
+    }
   }
 
   const url = constructUrl(model, params, true);
   const response = await fetchData<DocumentRegistry[T][]>(fetch, url, model);
-  if (response && !(response instanceof Error)) {
+  if (browser && params.preview !== 'true' && response && !(response instanceof Error)) {
     cacheSet(cacheKey, response);
   }
 
@@ -138,7 +141,7 @@ const findOne = async <T extends keyof DocumentRegistry>(
   params: PossibleParams = {}
 ): Promise<DocumentRegistry[T] | Error> => {
   const cacheKey = JSON.stringify({ model, params, many: false });
-  if (params.preview !== 'true') {
+  if (browser && params.preview !== 'true') {
     const cachedData = cacheGet(cacheKey);
     if (cachedData) {
       return cachedData as DocumentRegistry[T];
@@ -147,7 +150,7 @@ const findOne = async <T extends keyof DocumentRegistry>(
 
   const url = constructUrl(model, params);
   const response = await fetchData<DocumentRegistry[T]>(fetch, url, model);
-  if (params.preview !== 'true' && response && !(response instanceof Error)) {
+  if (browser && params.preview !== 'true' && response && !(response instanceof Error)) {
     cacheSet(cacheKey, response);
   }
 

diff --git a/svelte-app/src/lib/summary.ts b/svelte-app/src/lib/summary.ts
@@ -6,11 +6,12 @@ import type { DocumentHeadings } from '$types';
 
 const summaryVisible = writable(false),
   summaryContents = writable<DocumentHeadings[] | undefined>(undefined),
+  summaryOffset = writable(0),
   shouldShowSummary = derived(
     [isDesktop, summaryVisible, summaryContents],
     ([isDesktop, summaryVisible, summaryContents]) => {
       return isDesktop && summaryVisible && summaryContents?.length;
     }
   );
 
-export { shouldShowSummary, summaryContents, summaryVisible };
+export { shouldShowSummary, summaryContents, summaryOffset, summaryVisible };