web/settings: mobile layout, better padding & borders
This commit is contained in:
wukko
parent
6fdc63a6c2
commit
55515f0fb1
6 changed files with 141 additions and 17 deletions
|
|
@ -16,6 +16,6 @@
|
|||
.settings-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,4 +25,11 @@
|
|||
color: var(--gray);
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
#settings-section-categories {
|
||||
background: var(--button);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
|
||||
import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
|
||||
|
||||
export let tabName: string;
|
||||
export let tabLink: string;
|
||||
export let iconColor: "gray" | "blue" | "green" = "gray";
|
||||
|
|
@ -12,11 +14,15 @@
|
|||
class="settings-tab"
|
||||
href="/settings/{tabLink}"
|
||||
class:active={isActive}
|
||||
>
|
||||
<div class="tab-icon" style="background: var(--{iconColor})">
|
||||
<slot></slot>
|
||||
>
|
||||
<div class="settings-tab-left">
|
||||
<div class="tab-icon" style="background: var(--{iconColor})">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<span>{tabName}</span>
|
||||
</div>
|
||||
<span>{tabName}</span>
|
||||
|
||||
<IconChevronRight class="settings-tab-chevron" />
|
||||
</a>
|
||||
|
||||
<style>
|
||||
|
|
@ -25,6 +31,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: calc(var(--small-padding) * 2);
|
||||
padding: 7px;
|
||||
font-weight: 500;
|
||||
|
|
@ -33,14 +40,36 @@
|
|||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.settings-tab-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: calc(var(--small-padding) * 2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.settings-tab :global(svg) {
|
||||
stroke: var(--white);
|
||||
stroke-width: 1.5px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.settings-tab:hover {
|
||||
.settings-tab .tab-icon :global(svg) {
|
||||
stroke: var(--white);
|
||||
}
|
||||
|
||||
:global(.settings-tab-chevron) {
|
||||
display: none;
|
||||
stroke: var(--secondary);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.settings-tab:hover {
|
||||
background: var(--button-hover-transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-tab:active {
|
||||
background: var(--button-hover-transparent);
|
||||
}
|
||||
|
||||
|
|
@ -60,4 +89,20 @@
|
|||
padding: var(--small-padding);
|
||||
border-radius: var(--small-padding);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
.settings-tab {
|
||||
background: none;
|
||||
--small-padding: 5px;
|
||||
}
|
||||
|
||||
.settings-tab :global(svg) {
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
}
|
||||
|
||||
:global(.settings-tab-chevron) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
--button: #f4f4f4;
|
||||
--button-hover: #e8e8e8;
|
||||
--button-hover-transparent: rgba(0, 0, 0, 0.06);
|
||||
--button-stroke: rgba(0, 0, 0, 0.08);
|
||||
--button-stroke: rgba(0, 0, 0, 0.05);
|
||||
--button-text: #282828;
|
||||
|
||||
--sidebar-bg: #000000;
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
--button: #191919;
|
||||
--button-hover: #2a2a2a;
|
||||
--button-hover-transparent: rgba(225, 225, 225, 0.1);
|
||||
--button-stroke: rgba(255, 255, 255, 0.08);
|
||||
--button-stroke: rgba(255, 255, 255, 0.05);
|
||||
--button-text: #e1e1e1;
|
||||
|
||||
--sidebar-bg: #101010;
|
||||
|
|
@ -216,7 +216,6 @@
|
|||
#content {
|
||||
display: flex;
|
||||
overflow: scroll;
|
||||
padding: var(--padding);
|
||||
background-color: var(--primary);
|
||||
|
||||
border-top-left-radius: var(--border-radius);
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
#cobalt-save-container {
|
||||
padding: var(--padding);
|
||||
}
|
||||
|
||||
#cobalt-save {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
|
||||
import IconFileSettings from "@tabler/icons-svelte/IconFileSettings.svelte";
|
||||
|
||||
import IconChevronLeft from "@tabler/icons-svelte/IconChevronLeft.svelte";
|
||||
|
||||
let screenWidth: number;
|
||||
|
||||
$: isMobile = screenWidth <= 750;
|
||||
|
|
@ -19,9 +21,18 @@
|
|||
<svelte:window bind:innerWidth={screenWidth} />
|
||||
|
||||
<div id="settings-page">
|
||||
<div id="settings-sidebar" class:visible-mobile={isMobile && isHome}>
|
||||
<h2 id="settings-page-title">settings</h2>
|
||||
<nav id="settings-navigation">
|
||||
<div id="settings-sidebar">
|
||||
<div id="settings-header" class:back-visible={!isHome && isMobile}>
|
||||
{#if !isHome && isMobile}
|
||||
<a class="back-button" href="/settings">
|
||||
<IconChevronLeft />
|
||||
<h2 id="settings-page-title">settings</h2>
|
||||
</a>
|
||||
{:else}
|
||||
<h2 id="settings-page-title">settings</h2>
|
||||
{/if}
|
||||
</div>
|
||||
<nav id="settings-navigation" class:visible-mobile={isMobile && isHome}>
|
||||
<SettingsSection sectionTitle="general">
|
||||
<SettingsTab
|
||||
tabName="appearance"
|
||||
|
|
@ -66,12 +77,13 @@
|
|||
#settings-page {
|
||||
--settings-nav-width: 250px;
|
||||
--settings-padding: 30px;
|
||||
--settings-padding-small: calc(var(--settings-padding) - var(--padding));
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: var(--settings-nav-width) 1fr;
|
||||
overflow: hidden;
|
||||
padding-left: calc(var(--settings-padding) - var(--padding));
|
||||
padding-top: calc(var(--settings-padding) - var(--padding));
|
||||
padding-left: var(--settings-padding);
|
||||
padding-top: var(--settings-padding);
|
||||
}
|
||||
|
||||
#settings-page-content {
|
||||
|
|
@ -101,6 +113,30 @@
|
|||
gap: 12px;
|
||||
}
|
||||
|
||||
#settings-header {
|
||||
--back-padding: 6px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--secondary);
|
||||
gap: var(--back-padding);
|
||||
padding: var(--back-padding);
|
||||
padding-right: calc(var(--back-padding) * 2);
|
||||
}
|
||||
|
||||
.back-button:active {
|
||||
background: var(--button-hover-transparent);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.back-button :global(svg) {
|
||||
stroke-width: 2px;
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
}
|
||||
|
||||
.hidden-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -108,16 +144,49 @@
|
|||
@media screen and (max-width: 750px) {
|
||||
#settings-page {
|
||||
--settings-nav-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#settings-page-content,
|
||||
#settings-navigation {
|
||||
padding: var(--padding);
|
||||
}
|
||||
|
||||
#settings-page-content {
|
||||
max-width: unset;
|
||||
gap: calc(var(--padding) * 2);
|
||||
}
|
||||
|
||||
#settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
padding: var(--padding);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#settings-header.back-visible {
|
||||
padding: calc(var(--padding) - var(--back-padding));
|
||||
}
|
||||
|
||||
#settings-sidebar {
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
#settings-page-title {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#settings-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings-sidebar.visible-mobile {
|
||||
#settings-navigation.visible-mobile {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue