Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update viewport to store

Browse Source
This commit is contained in:
ernstmul
2025-01-29 16:01:47 +01:00
parent f9bd24e3af
commit ea3a76f77c
7 changed files with 33 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/breadcrumbs.svelte
+2 -46
View File
@@ -9,6 +9,7 @@
} from '@appwrite.io/pink-icons-svelte';
import { BottomSheet } from '$lib/components';
import { onMount } from 'svelte';
import { isSmallViewport } from '$lib/stores/viewport';
type Project = {
name: string;
@@ -60,7 +61,6 @@
$: selectedOrg = organizations.find((organization) => organization.isSelected);
$: selectedProject = selectedOrg?.projects.find((project) => project.isSelected);
let isSmallViewport = false;
let organisationBottomSheetOpen = false;
let projectsBottomSheetOpen = false;
@@ -162,19 +162,10 @@
}
: undefined
};
function updateViewport() {
isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
}
onMount(() => {
updateViewport();
});
</script>
<svelte:window on:resize={updateViewport} />
<div use:melt={$menubar}>
{#if !isSmallViewport}
{#if !$isSmallViewport}
<span class="breadcrumb-separator">/</span>
<button
type="button"
@@ -365,29 +356,6 @@
margin-block: -4px;
}
.item {
position: relative;
user-select: none;
border-radius: 0.125rem;
z-index: 20;
outline: none;
display: flex;
align-items: center;
cursor: pointer;
margin: 0 4px;
padding: var(--space-3, 6px) var(--space-4, 8px) var(--space-3, 6px) var(--space-5, 10px);
color: var(--color-fgcolor-neutral-secondary, #56565c);
/* Desktop/Body M 400 */
font-family: var(--font-family-sansserif, Inter);
font-size: var(--font-size-S, 14px);
font-style: normal;
font-weight: 400;
line-height: 140%; /* 19.6px */
letter-spacing: -0.063px;
}
.orgName,
.projectName {
white-space: nowrap;
@@ -472,18 +440,6 @@
height: 1px;
background-color: var(--color-border-neutral);
}
.rightSlot {
margin-left: auto;
padding-left: 1.25rem;
display: flex;
}
.leftSlot {
display: flex;
justify-content: center;
align-items: center;
margin-right: var(--space-4, 8px);
}
.breadcrumb-separator {
color: var(--color-fgcolor-neutral-tertiary, #97979b);
}
src/lib/components/navbar.svelte
+2 -8
View File
@@ -30,9 +30,9 @@
import { base } from '$app/paths';
import { logout } from '$lib/helpers/logout';
import { app } from '$lib/stores/app';
import { isSmallViewport } from '$lib/stores/viewport';
let showSupport = false;
let isSmallViewport = false;
type $$Props = BaseNavbarProps & {
links: Array<{ label: string; href: string }>;
@@ -45,11 +45,6 @@
}>;
showAccountMenu: boolean;
};
function updateViewport() {
isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
}
function updateTheme(theme: 'light' | 'dark' | 'system') {
const themeInUse =
theme === 'system'
@@ -79,7 +74,6 @@
export let showAccountMenu = false;
</script>
<svelte:window on:resize={updateViewport} />
<Navbar.Base {...$$props}>
<div slot="left" class="left">
<div class="only-mobile">
@@ -170,7 +164,7 @@
</div>
</div>
</Navbar.Base>
{#if showAccountMenu && isSmallViewport}
{#if showAccountMenu && $isSmallViewport}
<BottomSheet.Menu
bind:isOpen={showAccountMenu}
menu={{
src/lib/layout/shell.svelte
+2 -3
View File
@@ -15,6 +15,7 @@
import { type Models } from '@appwrite.io/console';
import { isCloud } from '$lib/system';
import SideNavigation from '$lib/layout/navigation.svelte';
import { isSmallViewport } from '$lib/stores/viewport';
export let showSideNavigation = false;
export let showHeader = true;
@@ -70,12 +71,10 @@
let showAccountMenu = false;
let subNavigation: undefined | ComponentType = undefined;
let state: undefined | 'open' | 'closed' | 'icons' = 'closed';
let isSmallViewport = false;
$: state = sideBarIsOpen ? 'open' : 'closed';
$: state = subNavigation && !isSmallViewport ? 'icons' : sideBarIsOpen ? 'open' : 'closed';
$: state = subNavigation && !$isSmallViewport ? 'icons' : sideBarIsOpen ? 'open' : 'closed';
function handleResize() {
isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
sideBarIsOpen = false;
showAccountMenu = false;
}
src/lib/stores/viewport.ts
+13
View File
@@ -0,0 +1,13 @@
import { writable } from 'svelte/store';
const isSmallViewport = writable(false);
function updateViewport() {
isSmallViewport.set(window.matchMedia('(max-width: 768px)').matches);
}
// Initialize on import
updateViewport();
window.addEventListener('resize', updateViewport);
export { isSmallViewport };
src/routes/(console)/project-[project]/get-started/header.svelte
+5 -16
View File
@@ -1,25 +1,14 @@
<script lang="ts">
import { Id } from '$lib/components';
import { Cover, CoverTitle } from '$lib/layout';
import { onboarding, project } from '../store';
import { project } from '../store';
import { hasOnboardingDismissed, setHasOnboardingDismissed } from '$lib/helpers/onboarding';
import { goto } from '$app/navigation';
import { base } from '$app/paths';
import { Layout, Button, Typography } from '@appwrite.io/pink-svelte';
import { onMount } from 'svelte';
let isSmallViewport = false;
function updateViewport() {
isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
}
onMount(() => {
updateViewport();
});
import { isSmallViewport } from '$lib/stores/viewport';
</script>
<svelte:window on:resize={updateViewport} on:load={updateViewport} />
{#if hasOnboardingDismissed($project.$id)}
<Cover>
<svelte:fragment slot="header">
@@ -33,11 +22,11 @@
<Cover>
<svelte:fragment slot="header">
<Layout.Stack
direction={isSmallViewport ? 'column' : 'row'}
direction={$isSmallViewport ? 'column' : 'row'}
justifyContent="space-between"
alignItems={isSmallViewport ? 'flex-start' : 'center'}
alignItems={$isSmallViewport ? 'flex-start' : 'center'}
gap="xl">
<Layout.Stack direction="column" gap={isSmallViewport ? 's' : 'xs'}>
<Layout.Stack direction="column" gap={$isSmallViewport ? 's' : 'xs'}>
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
>Welcome, hoi</Typography.Title>
<Typography.Text size="m" color="--color-fgcolor-neutral-secondary"
src/routes/(console)/project-[project]/overview/header.svelte
+6 -17
View File
@@ -1,26 +1,15 @@
<script lang="ts">
import { Id } from '$lib/components';
import { Cover, CoverTitle } from '$lib/layout';
import { onboarding, project } from '../store';
import { Cover } from '$lib/layout';
import { project } from '../store';
import { hasOnboardingDismissed, setHasOnboardingDismissed } from '$lib/helpers/onboarding';
import { goto } from '$app/navigation';
import { base } from '$app/paths';
import { Layout, Button, Typography } from '@appwrite.io/pink-svelte';
import { onMount } from 'svelte';
import { user } from '$lib/stores/user';
let isSmallViewport = false;
function updateViewport() {
isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
}
onMount(() => {
updateViewport();
});
import { isSmallViewport } from '$lib/stores/viewport';
</script>
<svelte:window on:resize={updateViewport} on:load={updateViewport} />
{#if hasOnboardingDismissed($project.$id)}
<Cover>
<svelte:fragment slot="header">
@@ -34,11 +23,11 @@
<Cover>
<svelte:fragment slot="header">
<Layout.Stack
direction={isSmallViewport ? 'column' : 'row'}
direction={$isSmallViewport ? 'column' : 'row'}
justifyContent="space-between"
alignItems={isSmallViewport ? 'flex-start' : 'center'}
alignItems={$isSmallViewport ? 'flex-start' : 'center'}
gap="xl">
<Layout.Stack direction="column" gap={isSmallViewport ? 's' : 'xs'}>
<Layout.Stack direction="column" gap={$isSmallViewport ? 's' : 'xs'}>
<Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
>Welcome, {$user.name}</Typography.Title>
<Typography.Text size="m" color="--color-fgcolor-neutral-secondary"
src/routes/(console)/project-[project]/overview/onboard.svelte
+3 -12
View File
@@ -23,6 +23,7 @@
import Wizard from './keys/wizard.svelte';
import { wizard } from '$lib/stores/wizard';
import { onMount } from 'svelte';
import { isSmallViewport } from '$lib/stores/viewport';
function createKey() {
wizard.start(Wizard);
@@ -30,18 +31,8 @@
export let projectId: string;
export let hasPlatforms: boolean;
let isSmallViewport = false;
function updateViewport() {
isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
}
onMount(() => {
updateViewport();
});
</script>
<svelte:window on:resize={updateViewport} on:load={updateViewport} />
<div style:container-type="inline-size">
<div class="console-container">
<div class="dashboard-content">
@@ -53,8 +44,8 @@
</div></Step.Item>
<Step.Item state="current"
><Layout.Stack
direction={isSmallViewport ? 'column' : 'row'}
gap={isSmallViewport ? 'xl' : 'xxl'}>
direction={$isSmallViewport ? 'column' : 'row'}
gap={$isSmallViewport ? 'xl' : 'xxl'}>
<Layout.Stack gap="m">
<h2>Add a platform</h2>
<div class="build-info">