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

Merge pull request #2644 from appwrite/push-page-down

Browse Source
This commit is contained in:
Darshan
2025-11-26 18:13:44 +05:30
committed by GitHub
parent 1f78040032 e4a63b5e63
commit cb397f2adb
7 changed files with 62 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/billing/gradientBanner.svelte
+12 -4
View File
@@ -5,8 +5,9 @@
import { IconX } from '@appwrite.io/pink-icons-svelte';
import { isTabletViewport } from '$lib/stores/viewport';
import PinkBackground from '$lib/images/pink-background.svg';
import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
import { headerAlert } from '$lib/stores/headerAlert';
import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
export let variant: 'gradient' | 'image' = 'gradient';
@@ -16,12 +17,13 @@
const queryLayoutElements = () => ({
header: document.querySelector<HTMLElement>('main > header'),
sidebar: document.querySelector<HTMLElement>('main > div > nav'),
content: document.querySelector<HTMLElement>('main > div > section')
content: document.querySelector<HTMLElement>('main > div > section'),
contentDiv: document.querySelector<HTMLElement>('main > .content')
});
const setNavigationHeight = () => {
const alertHeight = container?.getBoundingClientRect()?.height || 0;
const { header, sidebar, content } = queryLayoutElements();
const { header, sidebar, content, contentDiv } = queryLayoutElements();
const headerHeight = header?.getBoundingClientRect().height || 0;
const offset = alertHeight + (!$isTabletViewport && header ? headerHeight : 0);
@@ -34,12 +36,18 @@
sidebar.style.height = `calc(100vh - ${offset}px)`;
// for sidebar and sub-navigation!
bannerSpacing.set(`${alertHeight}px`);
headerAlert.setTopSpacing(alertHeight);
}
if (content) {
content.style.paddingBlockStart = `${alertHeight}px`;
}
if (contentDiv && resolvedProfile.id === ProfileMode.STUDIO) {
const headerHeight = header?.getBoundingClientRect().height ?? 48;
// push the content enough to show the borders of the content view!
contentDiv.style.marginBlockStart = `${alertHeight + headerHeight}px`;
}
};
onMount(setNavigationHeight);
src/lib/components/navbar.svelte
+2 -1
View File
@@ -57,6 +57,7 @@
import type { Models } from '@appwrite.io/console';
import { organization } from '$lib/stores/organization';
import { resolvedProfile } from '$lib/profiles/index.svelte';
import { headerAlert } from '$lib/stores/headerAlert';
let showSupport = false;
@@ -120,7 +121,7 @@
beforeNavigate(() => (showAccountMenu = false));
</script>
<Navbar.Base --border-width-s="none">
<Navbar.Base --border-width-s="none" style="top: {$headerAlert.top}px; z-index: 100;">
<div slot="left" class="left">
<div class="only-mobile-tablet">
<button
src/lib/components/sidebar.svelte
+7 -6
View File
@@ -37,12 +37,12 @@
import { getSidebarState, isInDatabasesRoute, updateSidebarState } from '$lib/helpers/sidebar';
import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
import { Click, trackEvent } from '$lib/actions/analytics';
import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
import type { HTMLAttributes } from 'svelte/elements';
import type { Models } from '@appwrite.io/console';
import { noWidthTransition } from '$lib/stores/sidebar';
import { base } from '$app/paths';
import type { Models } from '@appwrite.io/console';
import type { HTMLAttributes } from 'svelte/elements';
import { headerAlert } from '$lib/stores/headerAlert';
import { noWidthTransition } from '$lib/stores/sidebar';
import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
type Props = HTMLAttributes<HTMLElement> & {
@@ -127,7 +127,8 @@
{...rest}
bind:state
on:resize={(event) => updateSidebarState(event.detail)}
resizable={resolvedProfile.id !== ProfileMode.STUDIO}>
resizable={resolvedProfile.id !== ProfileMode.STUDIO}
style="padding-block-start: {$headerAlert.top}px">
<div slot="top">
<div class="only-mobile-tablet top">
<div class="icons search-icon">
@@ -399,7 +400,7 @@
</Sidebar.Base>
</div>
<div style:--banner-spacing={$bannerSpacing ? $bannerSpacing : undefined}>
<div style:--banner-spacing={$headerAlert.top ? `${$headerAlert.top}px` : undefined}>
{#if subNavigation}
{@const SubNavigation = subNavigation}
<div
src/lib/layout/headerAlert.svelte
+11 -8
View File
@@ -1,9 +1,3 @@
<script module lang="ts">
import { writable } from 'svelte/store';
export const bannerSpacing = writable<string | null>(null);
</script>
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import { isTabletViewport } from '$lib/stores/viewport';
@@ -12,6 +6,8 @@
import { Icon } from '@appwrite.io/pink-svelte';
import { IconX } from '@appwrite.io/pink-icons-svelte';
import { afterNavigate } from '$app/navigation';
import { headerAlert } from '$lib/stores/headerAlert';
import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
export let title: string;
export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
@@ -31,12 +27,13 @@
const header: HTMLHeadingElement = document.querySelector('main > header');
const sidebar: HTMLElement = document.querySelector('main > div > nav');
const contentSection: HTMLElement = document.querySelector('main > div > section');
const contentDiv: HTMLElement = document.querySelector('main > .content');
if (alertHeight) {
// for sidebar and sub-navigation!
bannerSpacing.set(`${alertHeight}px`);
headerAlert.setTopSpacing(alertHeight);
} else {
bannerSpacing.set(undefined);
headerAlert.setTopSpacing(0);
}
if (header) {
@@ -54,6 +51,12 @@
if (contentSection) {
contentSection.style.paddingBlockStart = `${alertHeight}px`;
}
if (contentDiv && resolvedProfile.id === ProfileMode.STUDIO) {
const headerHeight = header?.getBoundingClientRect().height ?? 48;
// push the content enough to show the borders of the content view!
contentDiv.style.marginBlockStart = `${alertHeight + headerHeight}px`;
}
}
onMount(() => {
src/lib/stores/headerAlert.ts
+26 -7
View File
@@ -1,5 +1,5 @@
import type { Component } from 'svelte';
import { writable } from 'svelte/store';
import { writable, type Readable } from 'svelte/store';
export type HeaderAlert = {
id: string;
@@ -9,11 +9,21 @@ export type HeaderAlert = {
};
export type HeaderAlertStore = {
top: number;
components: HeaderAlert[];
};
function createHeaderAlertStore() {
const { subscribe, update, set } = writable<HeaderAlertStore>({
export type HeaderAlertStoreType = Readable<HeaderAlertStore> & {
set: (value: HeaderAlertStore) => void;
add: (component: HeaderAlert) => void;
get: () => HeaderAlert;
setTopSpacing: (value: number) => void;
getTopSpacing: () => number;
};
function createHeaderAlertStore(): HeaderAlertStoreType {
const { set, update, subscribe } = writable<HeaderAlertStore>({
top: 0,
components: []
});
@@ -48,14 +58,23 @@ function createHeaderAlertStore() {
});
return component as HeaderAlert;
},
isShowing: (): boolean => {
let showing = false;
setTopSpacing: (value: number) => {
update((n) => {
return {
...n,
top: value
};
});
},
getTopSpacing: (): number => {
let top = 0;
update((n) => {
if (n.components.length === 0) return n;
showing = n.components.some((c) => c.show);
top = n.top;
return n;
});
return showing;
return top;
}
};
}
src/lib/studio/studio-widget.ts
+1 -2
View File
@@ -12,7 +12,6 @@ import { headerAlert } from '$lib/stores/headerAlert';
const COMPONENT_SELECTOR = 'imagine-web-components-wrapper[data-appwrite-studio]';
const STYLE_ATTRIBUTE = 'data-appwrite-studio-style';
const BLOCK_BANNER_OFFSET = 24;
const BLOCK_START_BASE_OFFSET = 48;
export const CDN_URL = env?.PUBLIC_IMAGINE_CDN_URL + '/web-components.js';
export const CDN_CSS_URL = env?.PUBLIC_IMAGINE_CDN_URL + '/web-components.css';
@@ -196,7 +195,7 @@ function updatePosition() {
return;
}
const bannerOffset = headerAlert.isShowing() ? BLOCK_BANNER_OFFSET : 0;
const bannerOffset = headerAlert.getTopSpacing();
const rect = anchorElement.getBoundingClientRect();
const { offsetX, offsetY } = currentOptions;
src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+3 -3
View File
@@ -3,7 +3,6 @@
import { page } from '$app/state';
import type { PageData } from './$types';
import { showSubNavigation } from '$lib/stores/layout';
import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
import { showCreateTable, databaseSubNavigationItems } from './store';
import {
@@ -28,6 +27,7 @@
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { subNavigation } from '$lib/stores/database';
import { headerAlert } from '$lib/stores/headerAlert';
const data = $derived(page.data) as PageData;
@@ -58,8 +58,8 @@
// If banner open, adjust bottom position to account for banner container.
// 70.5px is the size of the container of the banner holder and not just the banner!
// Needed because things vary a bit much on how different browsers treat bottom layouts.
const bottomNavOffset = $derived($bannerSpacing ? '70.5px' : '0px');
const tableContentPadding = $derived($bannerSpacing ? '210px' : '140px');
const bottomNavOffset = $derived($headerAlert.top !== 0 ? '70.5px' : '0px');
const tableContentPadding = $derived($headerAlert.top !== 0 ? '210px' : '140px');
async function loadTables() {
tables = await sdk.forProject(region, project).tablesDB.listTables({