From 5cf6ba89cf79faf5d83aa2cfb13e34c5bf9ece73 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 11:58:27 +0000 Subject: [PATCH] Update multiple pages to be responsive and improve loading experience --- packages/bbui/src/Table/Table.svelte | 4 ++ .../src/components/start/AppRow.svelte | 53 ++++++++++++------- .../pages/builder/portal/apps/_layout.svelte | 3 +- .../pages/builder/portal/apps/index.svelte | 16 +----- .../pages/builder/portal/plugins/index.svelte | 13 +++++ .../builder/portal/users/groups/index.svelte | 2 +- .../builder/portal/users/users/index.svelte | 3 ++ 7 files changed, 58 insertions(+), 36 deletions(-) diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index 00ba5ab37c..5215a7ed8e 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -280,6 +280,9 @@ styles[field] += "border-right: 1px solid var(--spectrum-global-color-gray-200);" } + if (schema[field].minWidth) { + styles[field] += `min-width: ${schema[field].minWidth};` + } }) return styles } @@ -450,6 +453,7 @@ --table-bg: var(--spectrum-global-color-gray-50); --table-border: 1px solid var(--spectrum-alias-border-color-mid); --cell-padding: var(--spectrum-global-dimension-size-250); + overflow: auto; } .wrapper--quiet { --table-bg: var(--spectrum-alias-background-color-transparent); diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index 47cf2d20a4..0404bc6b05 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -1,14 +1,35 @@ -
editApp(app)}> +
@@ -35,21 +56,12 @@ {app.deployed ? "Published" : "Unpublished"}
-
-
- - - -
+
+ + +
@@ -139,5 +151,8 @@ .app-row { padding: 20px; } + .app-row-actions { + display: none; + } } diff --git a/packages/builder/src/pages/builder/portal/apps/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/_layout.svelte index 159daae608..fe10d4b08a 100644 --- a/packages/builder/src/pages/builder/portal/apps/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/apps/_layout.svelte @@ -4,7 +4,8 @@ import { onMount } from "svelte" import { goto } from "@roxi/routify" - let loaded = false + // Don't block loading if we've already hydrated state + let loaded = $apps.length > 0 onMount(async () => { try { diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index bcb95ab248..519fde7f23 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -178,20 +178,6 @@ creatingApp = false } - const appOverview = app => { - $goto(`../overview/${app.devId}`) - } - - const editApp = app => { - if (app.lockedOther) { - notifications.error( - `App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.` - ) - return - } - $goto(`../../app/${app.devId}`) - } - function createAppFromTemplateUrl(templateKey) { // validate the template key just to make sure const templateParts = templateKey.split("/") @@ -309,7 +295,7 @@
{#each filteredApps as app (app.appId)} - + {/each}
diff --git a/packages/builder/src/pages/builder/portal/plugins/index.svelte b/packages/builder/src/pages/builder/portal/plugins/index.svelte index 6c87661986..6e25944742 100644 --- a/packages/builder/src/pages/builder/portal/plugins/index.svelte +++ b/packages/builder/src/pages/builder/portal/plugins/index.svelte @@ -20,6 +20,7 @@ const schema = { name: { width: "2fr", + minWidth: "200px", }, version: { width: "1fr", @@ -28,6 +29,7 @@ width: "1fr", displayName: "Type", capitalise: true, + minWidth: "120px", }, edit: { width: "auto", @@ -119,8 +121,19 @@ display: flex; gap: var(--spacing-xl); justify-content: space-between; + flex-wrap: wrap; } .controls :global(.spectrum-Search) { width: 200px; } + + @media (max-width: 640px) { + .filters { + display: grid; + grid-template-columns: 1fr 1fr; + } + .controls :global(.spectrum-Search) { + width: auto; + } + } diff --git a/packages/builder/src/pages/builder/portal/users/groups/index.svelte b/packages/builder/src/pages/builder/portal/users/groups/index.svelte index 04b6030b16..25c8702f6b 100644 --- a/packages/builder/src/pages/builder/portal/users/groups/index.svelte +++ b/packages/builder/src/pages/builder/portal/users/groups/index.svelte @@ -40,7 +40,7 @@ ] $: schema = { - name: { displayName: "Group", width: "2fr" }, + name: { displayName: "Group", width: "2fr", minWidth: "200px" }, users: { sortable: false, width: "1fr" }, roles: { sortable: false, displayName: "Apps", width: "1fr" }, } diff --git a/packages/builder/src/pages/builder/portal/users/users/index.svelte b/packages/builder/src/pages/builder/portal/users/users/index.svelte index 384475e89e..ba49bb2946 100644 --- a/packages/builder/src/pages/builder/portal/users/users/index.svelte +++ b/packages/builder/src/pages/builder/portal/users/users/index.svelte @@ -57,6 +57,7 @@ email: { sortable: false, width: "2fr", + minWidth: "200px", }, role: { sortable: false, @@ -296,6 +297,8 @@ flex-direction: row; justify-content: space-between; align-items: center; + flex-wrap: wrap; + gap: var(--spacing-xl); } .controls-right {