Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/settings: change the layout on mobile screen

Browse source
This commit is contained in:
wukko 2024-06-25 00:11:04 +06:00
parent f8ade2bf08
commit dd1f9b512f
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
web/src/routes/settings/+layout.svelte
View file

@ -1,4 +1,6 @@
<script> <script lang="ts">
import { page } from "$app/stores";
import SettingsTab from "$components/settings/SettingsTab.svelte"; import SettingsTab from "$components/settings/SettingsTab.svelte";
import SettingsSection from "$components/settings/SettingsSection.svelte"; import SettingsSection from "$components/settings/SettingsSection.svelte";
@ -7,10 +9,17 @@
import IconMovie from "@tabler/icons-svelte/IconMovie.svelte"; import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
import IconMusic from "@tabler/icons-svelte/IconMusic.svelte"; import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
import IconFileSettings from "@tabler/icons-svelte/IconFileSettings.svelte"; import IconFileSettings from "@tabler/icons-svelte/IconFileSettings.svelte";
let screenWidth: number;
$: isMobile = screenWidth <= 750;
$: isHome = $page.url.pathname === `/settings`;
</script> </script>
<svelte:window bind:innerWidth={screenWidth} />
<div id="settings-page"> <div id="settings-page">
<div id="settings-sidebar"> <div id="settings-sidebar" class:visible-mobile={isMobile && isHome}>
<h2 id="settings-page-title">settings</h2> <h2 id="settings-page-title">settings</h2>
<nav id="settings-navigation"> <nav id="settings-navigation">
<SettingsSection sectionTitle="general"> <SettingsSection sectionTitle="general">
@ -48,7 +57,7 @@
</nav> </nav>
</div> </div>
<main id="settings-page-content"> <main id="settings-page-content" class:hidden-mobile={isMobile && isHome}>
<slot></slot> <slot></slot>
</main> </main>
</div> </div>
@ -91,4 +100,24 @@
#settings-navigation { #settings-navigation {
gap: 12px; gap: 12px;
} }
.hidden-mobile {
display: none !important;
}
@media screen and (max-width: 750px) {
#settings-page {
--settings-nav-width: 100%;
grid-template-columns: 1fr;
}
#settings-sidebar {
display: none;
}
#settings-sidebar.visible-mobile {
display: flex;
}
}
</style> </style>