mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: viewport issues with header banners.
This commit is contained in:
Darshan
@@ -357,7 +357,7 @@
|
||||
<div
|
||||
class="sub-navigation"
|
||||
class:icons={state === 'icons'}
|
||||
style:--banner-spacing={$isDesktopViewport && $bannerSpacing ? $bannerSpacing : undefined}>
|
||||
style:--banner-spacing={$bannerSpacing ? $bannerSpacing : undefined}>
|
||||
<svelte:component this={subNavigation} />
|
||||
</div>
|
||||
{/if}
|
||||
@@ -608,8 +608,19 @@
|
||||
transition: width 0.2s linear;
|
||||
|
||||
&.icons {
|
||||
width: 266px;
|
||||
transition: width 0.3s linear;
|
||||
width: var(--banner-spacing, 266px);
|
||||
|
||||
& :global(nav) {
|
||||
margin-top: var(--banner-spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* when in small or tablet viewport and there's a banner */
|
||||
@media (max-width: 1023px) {
|
||||
& :global(header) {
|
||||
margin-top: var(--banner-spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Layout } from '@appwrite.io/pink-svelte';
|
||||
import { isTabletViewport } from '$lib/stores/viewport';
|
||||
|
||||
export let size: 'small' | 'medium' | 'large' | 'xl' = null;
|
||||
export let blocksize = '152px';
|
||||
@@ -8,9 +9,15 @@
|
||||
$: style = size
|
||||
? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
|
||||
: '';
|
||||
|
||||
$: marginTop = expanded && $isTabletViewport ? '48px' : undefined;
|
||||
</script>
|
||||
|
||||
<div class="top-cover-console" style:block-size={blocksize}>
|
||||
<div
|
||||
class:expanded
|
||||
class="top-cover-console"
|
||||
style:block-size={blocksize}
|
||||
style:margin-top={marginTop}>
|
||||
<div class="cover-container" {style} class:expanded>
|
||||
<Layout.Stack direction="row" alignItems="baseline">
|
||||
<slot name="header" />
|
||||
|
||||
+63
-72
@@ -15,7 +15,6 @@
|
||||
import { BottomSheet } from '$lib/components';
|
||||
import Button from '$lib/elements/forms/button.svelte';
|
||||
import type { Models } from '@appwrite.io/console';
|
||||
import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
|
||||
|
||||
let data = $derived(page.data) as PageData;
|
||||
let region = $derived(page.params.region);
|
||||
@@ -45,76 +44,74 @@
|
||||
<svelte:window on:resize={onResize} />
|
||||
|
||||
{#if !$isTabletViewport}
|
||||
<div class="side-bar-base-wrapper" style:--banner-spacing={$bannerSpacing}>
|
||||
<Sidebar.Base state="open" resizable={false}>
|
||||
<section class="list-container" slot="top" style:width="100%">
|
||||
<a
|
||||
href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
|
||||
class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
|
||||
<Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
|
||||
{data.database?.name}
|
||||
</a>
|
||||
<div class="collection-content">
|
||||
{#if collections?.total}
|
||||
<ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
|
||||
{#each sortedCollections as collection}
|
||||
{@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
|
||||
{@const isSelected = collectionId === collection.$id}
|
||||
<Sidebar.Base state="open" resizable={false}>
|
||||
<section class="list-container" slot="top" style:width="100%">
|
||||
<a
|
||||
href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
|
||||
class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
|
||||
<Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
|
||||
{data.database?.name}
|
||||
</a>
|
||||
<div class="collection-content">
|
||||
{#if collections?.total}
|
||||
<ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
|
||||
{#each sortedCollections as collection}
|
||||
{@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
|
||||
{@const isSelected = collectionId === collection.$id}
|
||||
|
||||
<Layout.Stack gap="m" direction="row" alignItems="center">
|
||||
<div
|
||||
style:border-left="1px solid var(--border-neutral, #ededf0)"
|
||||
style:height="1rem">
|
||||
</div>
|
||||
|
||||
<li class:is-selected={isSelected} style:width="100%">
|
||||
<a
|
||||
class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
|
||||
{href}>
|
||||
<Icon
|
||||
icon={IconTable}
|
||||
size="s"
|
||||
color={isSelected
|
||||
? '--fgcolor-neutral-tertiary'
|
||||
: '--fgcolor-neutral-weak'} />
|
||||
<span class="text collection-name" data-private
|
||||
>{collection.name}</span>
|
||||
</a>
|
||||
</li>
|
||||
</Layout.Stack>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
<div style:padding-block="0.75rem">
|
||||
<Layout.Stack
|
||||
gap="m"
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
class="u-margin-inline-start-8 u-margin-block-start-8">
|
||||
<Layout.Stack gap="m" direction="row" alignItems="center">
|
||||
<div
|
||||
style:border-left="1px solid var(--border-neutral, #ededf0)"
|
||||
style:height="1rem">
|
||||
</div>
|
||||
No tables yet
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Layout.Stack alignItems="center" direction="row" style="gap: 3px;">
|
||||
<Icon icon={IconPlus} size="s" />
|
||||
<Button
|
||||
compact
|
||||
on:click={() => {
|
||||
$showCreate = true;
|
||||
$showSubNavigation = false;
|
||||
}}>
|
||||
Create collection
|
||||
</Button>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
</section>
|
||||
</Sidebar.Base>
|
||||
</div>
|
||||
<li class:is-selected={isSelected} style:width="100%">
|
||||
<a
|
||||
class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
|
||||
{href}>
|
||||
<Icon
|
||||
icon={IconTable}
|
||||
size="s"
|
||||
color={isSelected
|
||||
? '--fgcolor-neutral-tertiary'
|
||||
: '--fgcolor-neutral-weak'} />
|
||||
<span class="text collection-name" data-private
|
||||
>{collection.name}</span>
|
||||
</a>
|
||||
</li>
|
||||
</Layout.Stack>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
<div style:padding-block="0.75rem">
|
||||
<Layout.Stack
|
||||
gap="m"
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
class="u-margin-inline-start-8 u-margin-block-start-8">
|
||||
<div
|
||||
style:border-left="1px solid var(--border-neutral, #ededf0)"
|
||||
style:height="1rem">
|
||||
</div>
|
||||
No tables yet
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Layout.Stack alignItems="center" direction="row" style="gap: 3px;">
|
||||
<Icon icon={IconPlus} size="s" />
|
||||
<Button
|
||||
compact
|
||||
on:click={() => {
|
||||
$showCreate = true;
|
||||
$showSubNavigation = false;
|
||||
}}>
|
||||
Create collection
|
||||
</Button>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
</section>
|
||||
</Sidebar.Base>
|
||||
{:else}
|
||||
<Navbar.Base>
|
||||
<div slot="left">
|
||||
@@ -131,7 +128,7 @@
|
||||
onclick={() => {
|
||||
openBottomSheet = !openBottomSheet;
|
||||
}}>
|
||||
<span class="orgName">{selectedCollection.name}</span>
|
||||
<span class="orgName">{selectedCollection?.name}</span>
|
||||
<Icon icon={IconChevronDown} size="s" />
|
||||
</button>
|
||||
</Layout.Stack>
|
||||
@@ -167,12 +164,6 @@
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.side-bar-base-wrapper {
|
||||
& :global(nav) {
|
||||
margin-top: var(--banner-spacing);
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user