diff --git a/src/routes/(console)/project-[region]-[project]/databases/(assets)/dark/documents-db.svg b/src/routes/(console)/project-[region]-[project]/databases/(assets)/dark/documents-db.svg new file mode 100644 index 000000000..87cbe9afb --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/databases/(assets)/dark/documents-db.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/databases/(assets)/dark/tables-db.svg b/src/routes/(console)/project-[region]-[project]/databases/(assets)/dark/tables-db.svg new file mode 100644 index 000000000..6b2739c52 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/databases/(assets)/dark/tables-db.svg @@ -0,0 +1,164 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/databases/(assets)/documents-db.svg b/src/routes/(console)/project-[region]-[project]/databases/(assets)/documents-db.svg index 0acf91cae..a5de23149 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/(assets)/documents-db.svg +++ b/src/routes/(console)/project-[region]-[project]/databases/(assets)/documents-db.svg @@ -1,102 +1,97 @@ - - - - - - + + - + - - + + - - + + - - + + - - + + - - - + + + - - + + - - + + - - + + - - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - + + - + - + diff --git a/src/routes/(console)/project-[region]-[project]/databases/(assets)/tables-db.svg b/src/routes/(console)/project-[region]-[project]/databases/(assets)/tables-db.svg index 59c64a58e..32519e9ab 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/(assets)/tables-db.svg +++ b/src/routes/(console)/project-[region]-[project]/databases/(assets)/tables-db.svg @@ -1,184 +1,166 @@ - - - - - - + + - + - + - - - + + + - + - - + + - - + + - + - - - - - - - + + + + + + + - - + + - - - - + + + + - - - - + + + + + - - - -
 +
 - + - + - + - - + + - - + + - + - + - - + + - - + + - + - - - - + + + + + + + + + + - - - - - - - - - - + - + - - - - - - - + + - + - + - + - + - + - - - - - + + + + + + + + + - + - + - + - - - - - - - - - - + + - + - + - + diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte index 761178f79..a3d574b29 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte @@ -36,8 +36,9 @@ IconSortDescending, IconTrash } from '@appwrite.io/pink-icons-svelte'; - import { type Columns, databaseColumnSheetOptions } from './store'; + import { databaseColumnSheetOptions } from './store'; import { isRelationship } from './rows/store'; + import { type Columns } from '../store'; interface MenuItem { label?: string; diff --git a/src/routes/(console)/project-[region]-[project]/databases/empty.svelte b/src/routes/(console)/project-[region]-[project]/databases/empty.svelte index d0daf3dcc..c7a3ab274 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/empty.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/empty.svelte @@ -3,16 +3,19 @@ import { Card } from '$lib/components'; import { IconArrowRight } from '@appwrite.io/pink-icons-svelte'; - import { Layout, Typography, Icon } from '@appwrite.io/pink-svelte'; + import { Layout, Typography, Icon, Divider } from '@appwrite.io/pink-svelte'; - // TODO: the images have bottom rounded borders. import MongoDB from './(assets)/mongo-db.svg'; import MongoDBDark from './(assets)/dark/mongo-db.svg'; import TablesDB from './(assets)/tables-db.svg'; + import TablesDBDark from './(assets)/dark/tables-db.svg'; + import DocumentsDB from './(assets)/documents-db.svg'; + import DocumentsDBDark from './(assets)/dark/documents-db.svg'; + + import { isSmallViewport } from '$lib/stores/viewport'; import type { DatabaseType } from '$database/(entity)'; - import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport'; const { disabled, @@ -24,6 +27,8 @@ const isDark = $derived($app.themeInUse === 'dark'); const mongoDbImage = $derived(isDark ? MongoDBDark : MongoDB); + const tablesDbImage = $derived(isDark ? TablesDBDark : TablesDB); + const documentsDbImage = $derived(isDark ? DocumentsDBDark : DocumentsDB); {#if $isSmallViewport} @@ -51,7 +56,7 @@ title: 'TablesDB', subtitle: 'Structure your data in rows and columns. Best for relational data and advanced querying.', - image: TablesDB + image: tablesDbImage })} @@ -60,7 +65,7 @@ title: 'DocumentsDB', subtitle: 'Store flexible data without a fixed schema. Best for unstructured data and simple querying.', - image: DocumentsDB, + image: documentsDbImage, footer: true })} @@ -73,9 +78,14 @@ padding="none" {disabled} on:click={() => onDatabaseTypeSelected?.(type)}> - + {@const direction = $isSmallViewport ? 'column' : 'row'} + database type artwork + {#if $isSmallViewport} + + {/if} + - @media (max-width: 768px) { - .database-image { + .database-image { + border-radius: var(--border-radius-s) 0 0 var(--border-radius-s); + + @media (max-width: 768px) { + max-height: 236px; + object-fit: cover; + object-position: center 10%; + border-radius: var(--border-radius-s) var(--border-radius-s) 0 0; + } + + @media (min-width: 768px) and (max-width: 1023px) { + max-height: 236px; object-fit: cover; - background: white; /* because images have rounded borders atm */ - object-position: center 20%; border-radius: var(--border-radius-s) var(--border-radius-s) 0 0; } }