diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-06-05 21:50:26 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-06-05 21:50:26 +0200 |
| commit | 44a95927edb532f8982cf24c03d9fdd129016bd6 (patch) | |
| tree | cd0efffc182f9429f8ec2bfe9622e6d36446f112 /apps/portal/src/app/pages/_layout.svelte | |
| parent | 54b63daf1b5cefb54a3c616a4fee3ef57a671936 (diff) | |
| download | greatoffice-44a95927edb532f8982cf24c03d9fdd129016bd6.tar.xz greatoffice-44a95927edb532f8982cf24c03d9fdd129016bd6.zip | |
feat: Implement new theme switcher component and backend
The theme is now shared between the domain returned by base_domain()
Diffstat (limited to 'apps/portal/src/app/pages/_layout.svelte')
| -rw-r--r-- | apps/portal/src/app/pages/_layout.svelte | 84 |
1 files changed, 25 insertions, 59 deletions
diff --git a/apps/portal/src/app/pages/_layout.svelte b/apps/portal/src/app/pages/_layout.svelte index ec4bd11..d5af444 100644 --- a/apps/portal/src/app/pages/_layout.svelte +++ b/apps/portal/src/app/pages/_layout.svelte @@ -1,7 +1,5 @@ <script> - import Button from "$shared/components/button.svelte"; - import Tile from "$shared/components/tile.svelte"; - import {switch_theme} from "$shared/lib/helpers"; + import ThemeSwitcher from "$shared/components/theme-switcher.svelte"; </script> <style> @@ -13,6 +11,7 @@ width: 100%; height: 100%; overflow: hidden; + z-index: 1; } #decoration svg { @@ -29,13 +28,13 @@ </style> <main class="container-fluid padding-x-xs padding-x-xxl@xs padding-y-md padding-y-lg@md max-width-sm"> - <slot/> - - <Tile class="margin-top-sm"> - <Button on:click={() => switch_theme()} - text="Switch theme" - variant="secondary"/> - </Tile> + <div class="z-index-2 position-relative"> + <slot/> + </div> + + <div class="position-fixed right-0 top-0 margin-md z-index-2"> + <ThemeSwitcher/> + </div> <figure id="decoration" aria-hidden="true"> @@ -43,55 +42,22 @@ viewBox="0 0 1920 450" fill="none"> <g stroke="currentColor" - stroke-width="2"> - <rect x="1286" - y="64" - width="128" - height="128"/> - <circle cx="1350" - cy="128" - r="64"/> - <path d="M1286 64L1414 192"/> - <circle cx="1478" - cy="128" - r="64"/> - <rect x="1414" - y="192" - width="128" - height="128"/> - <circle cx="1478" - cy="256" - r="64"/> - <path d="M1414 192L1542 320"/> - <circle cx="1606" - cy="256" - r="64"/> - <rect x="1542" - y="320" - width="128" - height="128"/> - <circle cx="1606" - cy="384" - r="64"/> - <path d="M1542 320L1670 448"/> - <rect x="1690" - y="192" - width="128" - height="128"/> - <circle cx="1754" - cy="256" - r="64"/> - <path d="M1690 192L1818 320"/> - <rect x="1542" - y="64" - width="128" - height="128"/> - <circle cx="1606" - cy="128" - r="64"/> - <path d="M1542 64L1670 192"/> - <circle cx="1478" - r="64"/> + stroke-width="2" + stroke-linejoin="round" + stroke-linecap="round"> + <path d="M1449 94.9993V3L1354 48.9995L1259 3V94.9993L1354 140.999L1449 94.9993Z"/> + <path d="M1639 94.9993V3L1544 48.9995L1449 3V94.9993L1544 140.999L1639 94.9993Z"/> + <path d="M1354 49.0002V141"/> + <path d="M1544 49.0002V141"/> + <path d="M1449 94.9995L1544 140.999L1449 186.999L1354 140.999L1449 94.9995Z"/> + <path d="M1544 141V232.999L1449 278.999L1354 232.999V141"/> + <path d="M1449 187V279"/> + <path d="M1544 264L1639 310L1544 355.999L1449 310L1544 264Z"/> + <path d="M1639 310V402L1544 447.999L1449 402V310"/> + <path d="M1544 356.001V448"/> + <path d="M1639 94.9995L1734 140.999L1639 186.999L1544 140.999L1639 94.9995Z"/> + <path d="M1734 141V232.999L1639 278.999L1544 232.999V141"/> + <path d="M1639 187V279"/> </g> </svg> </figure> |