Fix header

This commit is contained in:
ernstmul
2025-04-02 13:37:29 +02:00
parent c09eac3647
commit 1e2326b101
11 changed files with 45 additions and 25 deletions
+12 -7
View File
@@ -10,14 +10,19 @@
: '';
</script>
<div class="top-cover-console" class:no-padding={isStudio} style:block-size={blocksize}>
<div class="cover-container" {style}>
<Layout.Stack direction="row" alignItems="center">
<slot name="header" />
</Layout.Stack>
<slot />
{#if isStudio}
<slot name="header" />
<slot />
{:else}
<div class="top-cover-console" class:no-padding={isStudio} style:block-size={blocksize}>
<div class="cover-container" {style}>
<Layout.Stack direction="row" alignItems="center">
<slot name="header" />
</Layout.Stack>
<slot />
</div>
</div>
</div>
{/if}
<style lang="scss">
.top-cover-console {
+9 -6
View File
@@ -60,12 +60,15 @@
</Card.Base>
</section>
{/if}
<Layout.Stack>
{#if $page.data?.header}
<svelte:component this={$page.data.header} />
{/if}
<slot />
</Layout.Stack>
<Card.Base>
<Layout.Stack>
{#if $page.data?.header}
<svelte:component this={$page.data.header} />
{/if}
<slot />
</Layout.Stack>
</Card.Base>
</Layout.Stack>
</div>
{#if hasProjectSidebar}
@@ -6,6 +6,7 @@
import { Cover } from '$lib/layout';
import { canWriteProjects } from '$lib/stores/roles';
import { Typography } from '@appwrite.io/pink-svelte';
import { isStudio } from '$lib/system';
const projectId = page.params.project;
const path = `${base}/project-${projectId}/auth`;
@@ -52,7 +53,8 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Auth</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
>Auth</Typography.Title>
</svelte:fragment>
<Tabs>
{#each tabs as tab}
@@ -2,6 +2,4 @@
import { Layout, Card, Typography, Divider } from '@appwrite.io/pink-svelte';
</script>
<Layout.Stack direction="row">
<Card.Base>Iframe</Card.Base>
</Layout.Stack>
<Layout.Stack direction="row">Iframe</Layout.Stack>
@@ -5,6 +5,7 @@
import { isTabSelected } from '$lib/helpers/load';
import { Cover } from '$lib/layout';
import { Typography } from '@appwrite.io/pink-svelte';
import { isStudio } from '$lib/system';
const projectId = page.params.project;
const path = `${base}/project-${projectId}/databases`;
@@ -26,7 +27,8 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Databases</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
>Databases</Typography.Title>
</svelte:fragment>
<Tabs>
{#each tabs as tab}
@@ -5,6 +5,7 @@
import { isTabSelected } from '$lib/helpers/load';
import { Cover } from '$lib/layout';
import { Typography } from '@appwrite.io/pink-svelte';
import { isStudio } from '$lib/system';
$: projectId = page.params.project;
$: path = `${base}/project-${projectId}/functions`;
@@ -30,7 +31,8 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Functions</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
>Functions</Typography.Title>
</svelte:fragment>
<Tabs>
@@ -5,6 +5,7 @@
import { isTabSelected } from '$lib/helpers/load';
import { Cover } from '$lib/layout';
import { Typography } from '@appwrite.io/pink-svelte';
import { isStudio } from '$lib/system';
const projectId = page.params.project;
const path = `${base}/project-${projectId}/messaging`;
@@ -31,7 +32,8 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Messaging</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
>Messaging</Typography.Title>
</svelte:fragment>
<Tabs>
{#each tabs as tab}
@@ -11,12 +11,13 @@
import { isSmallViewport } from '$lib/stores/viewport';
import { Dependencies } from '$lib/constants';
import { trackEvent } from '$lib/actions/analytics';
import { isStudio } from '$lib/system';
</script>
{#if !page.url.pathname.includes('get-started')}
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--fgcolor-neutral-primary" size="xl">
<Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}>
{$project?.name}
</Typography.Title>
<Id value={$project.$id}>{$project.$id}</Id>
@@ -6,7 +6,7 @@
import type { TabElement } from '$lib/helpers/load';
import { Cover } from '$lib/layout';
import { canWriteProjects } from '$lib/stores/roles';
import { isCloud } from '$lib/system';
import { isCloud, isStudio } from '$lib/system';
import { Typography } from '@appwrite.io/pink-svelte';
const projectId = page.params.project;
@@ -51,7 +51,8 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Settings</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
>Settings</Typography.Title>
</svelte:fragment>
<Tabs>
@@ -5,6 +5,7 @@
import { isTabSelected } from '$lib/helpers/load';
import { Cover } from '$lib/layout';
import { Typography } from '@appwrite.io/pink-svelte';
import { isStudio } from '$lib/system';
$: projectId = page.params.project;
$: path = `${base}/project-${projectId}/sites`;
@@ -25,7 +26,8 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Sites</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
>Sites</Typography.Title>
</svelte:fragment>
<Tabs variant="primary" let:root>
@@ -5,6 +5,7 @@
import { isTabSelected } from '$lib/helpers/load';
import { Cover } from '$lib/layout';
import { Typography } from '@appwrite.io/pink-svelte';
import { isStudio } from '$lib/system';
const projectId = page.params.project;
const path = `${base}/project-${projectId}/storage`;
@@ -26,7 +27,8 @@
<Cover>
<svelte:fragment slot="header">
<Typography.Title color="--fgcolor-neutral-primary" size="xl">Storage</Typography.Title>
<Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
>Storage</Typography.Title>
</svelte:fragment>
<Tabs>
{#each tabs as tab}