From 0aa72e51473ec492ff53f2f9dec703d9b4e01aed Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 16:16:03 +0000 Subject: [PATCH 1/6] Update upgrade button URL for cloud accounts --- .../builder/src/pages/builder/portal/_layout.svelte | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 99a140f16a..ad8330f52f 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -140,7 +140,16 @@ alt={$organisation?.company || "Budibase"} /> - {#if !$adminStore.cloud && $auth.isAdmin} + {#if $adminStore.cloud && $auth?.user?.accountPortalAccess} + + {:else if !$adminStore.cloud && $auth.isAdmin} From a38d1ec583ee031203c8f3885fdad357c6d99fdc Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 08:10:56 +0000 Subject: [PATCH 2/6] Update app list to use a more compact style --- packages/bbui/src/Layout/Page.svelte | 1 + .../src/components/common/AppLockModal.svelte | 3 +- .../src/components/start/AppRow.svelte | 84 ++++++++----------- .../src/pages/builder/portal/_layout.svelte | 33 ++++---- .../pages/builder/portal/apps/index.svelte | 13 +-- 5 files changed, 58 insertions(+), 76 deletions(-) diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 02f089b340..6a417d33d6 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -42,6 +42,7 @@ justify-content: flex-start; align-items: stretch; flex: 1 1 auto; + overflow-x: hidden; } .main { overflow: auto; diff --git a/packages/builder/src/components/common/AppLockModal.svelte b/packages/builder/src/components/common/AppLockModal.svelte index 74e1b12615..5e52ab269c 100644 --- a/packages/builder/src/components/common/AppLockModal.svelte +++ b/packages/builder/src/components/common/AppLockModal.svelte @@ -63,7 +63,8 @@ name="LockClosed" hoverable size={buttonSize} - on:click={() => { + on:click={e => { + e.stopPropagation() appLockModal.show() }} /> diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index a1a9cf69f7..6400891e15 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -8,41 +8,39 @@ export let appOverview -
-
-
-
- -
-
editApp(app)}> - - {app.name} - -
+
editApp(app)}> +
+
+
+
+ + {app.name} + +
+
-
- {#if app.updatedAt} - {processStringSync("Updated {{ duration time 'millisecond' }} ago", { - time: new Date().getTime() - new Date(app.updatedAt).getTime(), - })} - {:else} - Never updated - {/if} -
+
+ {#if app.updatedAt} + {processStringSync("Updated {{ duration time 'millisecond' }} ago", { + time: new Date().getTime() - new Date(app.updatedAt).getTime(), + })} + {:else} + Never updated + {/if}
- {`${window.origin}/app${app.url}`} + {app.deployed ? "Published" : "Unpublished"}
+ + - -
@@ -64,24 +58,26 @@ background: var(--background); padding: 24px 32px; border-radius: 8px; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: stretch; - gap: var(--spacing-m); - } - - .header { - display: flex; - flex-direction: row; - justify-content: space-between; + display: grid; + grid-template-columns: 35% 25% 15% auto; align-items: center; + gap: var(--spacing-m); + transition: border 130ms ease-out; + border: 1px solid transparent; + } + .app-row:hover { + cursor: pointer; + border-color: var(--spectrum-global-color-gray-300); } .updated { color: var(--spectrum-global-color-gray-700); } + .title, + .name { + flex: 1 1 auto; + } .title, .app-status { display: flex; @@ -106,9 +102,8 @@ gap: var(--spacing-m); display: flex; flex-direction: row; - justify-content: flex-start; + justify-content: flex-end; align-items: center; - margin-top: var(--spacing-m); } .name { @@ -120,11 +115,6 @@ white-space: nowrap; text-overflow: ellipsis; } - .title :global(h1:hover) { - color: var(--spectrum-global-color-blue-600); - cursor: pointer; - transition: color 130ms ease; - } @media (max-width: 640px) { .desktop { diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index ad8330f52f..56028117c9 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -134,12 +134,6 @@
- {#if $adminStore.cloud && $auth?.user?.accountPortalAccess}
-
+
{#each filteredApps as app (app.appId)} {/each} @@ -369,19 +367,14 @@ gap: var(--spacing-xl); } - .appTable { + .app-table { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; - gap: 24px; + gap: var(--spacing-xl); } - @media (max-width: 640px) { - .appTable { - grid-template-columns: 1fr auto !important; - } - } .empty-wrapper { flex: 1 1 auto; height: 100%; From 68711728223f3ede9cefbfbbfac806e82f705516 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 08:29:57 +0000 Subject: [PATCH 3/6] Make core page layout responsive and update apps list to be responsive --- packages/bbui/src/Layout/Page.svelte | 13 +++++++++-- .../src/components/start/AppRow.svelte | 23 +++++++++++++++++-- .../src/pages/builder/portal/_layout.svelte | 13 ++++------- .../pages/builder/portal/apps/index.svelte | 1 + 4 files changed, 38 insertions(+), 12 deletions(-) diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 6a417d33d6..6e3cc55c12 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -58,10 +58,10 @@ padding: 50px; z-index: 1; } - .wide { + .content.wide { max-width: none; } - .narrow { + .content.narrow { max-width: 840px; } #side-panel { @@ -82,4 +82,13 @@ #side-panel.visible { transform: translateX(0); } + + @media (max-width: 640px) { + .content { + padding: 24px; + max-width: calc(100vw - 48px) !important; + width: calc(100vw - 48px) !important; + overflow: auto; + } + } diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index 6400891e15..2868b7453b 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -78,6 +78,9 @@ .name { flex: 1 1 auto; } + .name { + width: 0; + } .title, .app-status { display: flex; @@ -116,9 +119,25 @@ text-overflow: ellipsis; } + @media (max-width: 1000px) { + .app-row { + grid-template-columns: 45% 30% auto; + } + .updated { + display: none; + } + } + @media (max-width: 800px) { + .app-row { + grid-template-columns: 1fr auto; + } + .app-status { + display: none; + } + } @media (max-width: 640px) { - .desktop { - display: none !important; + .app-row { + padding: 24px 20px; } } diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 56028117c9..958ffc180a 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -228,7 +228,7 @@ justify-content: flex-start; align-items: stretch; border-bottom: var(--border-light); - padding: 0 20px; + padding: 0 24px; gap: 24px; position: relative; } @@ -265,8 +265,7 @@ align-items: center; gap: 24px; } - .mobile-toggle, - .mobile-logo { + .mobile-toggle { display: none; } .user-dropdown { @@ -278,7 +277,6 @@ width: 30px; height: 30px; } - .main { flex: 1 1 auto; display: flex; @@ -289,14 +287,15 @@ } @media (max-width: 640px) { + .nav { + flex: 0 0 64px; + } .toolbar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; - padding: var(--spacing-m) calc(var(--spacing-xl) * 1.5); } - .branding { position: absolute; left: 50%; @@ -309,11 +308,9 @@ .toolbar :global(.spectrum-Button) { display: none; } - .mobile-toggle { display: block; } - .mobile-toggle, .user-dropdown { flex: 0 1 0; diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 953552be9b..3442d68aab 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -373,6 +373,7 @@ justify-content: flex-start; align-items: stretch; gap: var(--spacing-xl); + overflow: hidden; } .empty-wrapper { From db4714d69cb544afe15494cd1c20bebf9ebba048 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 08:37:38 +0000 Subject: [PATCH 4/6] Update mobile design of apps page --- .../src/components/start/AppRow.svelte | 2 +- .../src/pages/builder/portal/_layout.svelte | 2 +- .../pages/builder/portal/apps/index.svelte | 24 +++++++++++++++---- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index 2868b7453b..47cf2d20a4 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -137,7 +137,7 @@ } @media (max-width: 640px) { .app-row { - padding: 24px 20px; + padding: 20px; } } diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 958ffc180a..a43f294d0c 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -288,7 +288,7 @@ @media (max-width: 640px) { .nav { - flex: 0 0 64px; + flex: 0 0 52px; } .toolbar { display: flex; diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 3442d68aab..bcb95ab248 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -354,11 +354,6 @@ gap: var(--spacing-xl); flex-wrap: wrap; } - @media (max-width: 1000px) { - .img-logo { - display: none; - } - } .app-actions { display: flex; flex-direction: row; @@ -388,4 +383,23 @@ width: 160px; height: 160px; } + + @media (max-width: 1000px) { + .img-logo { + display: none; + } + } + @media (max-width: 640px) { + .app-actions { + margin-top: var(--spacing-xl); + margin-bottom: calc(-1 * var(--spacing-m)); + } + /* Hide download apps icon */ + .app-actions :global(> .spectrum-Icon) { + display: none; + } + .app-actions > :global(*) { + flex: 0 0 50%; + } + } From 34adcdcddf69f66eed70ff6ca4f48d882e96efbf Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 09:11:35 +0000 Subject: [PATCH 5/6] Update more pages to be responsive and add mobile specific components --- packages/bbui/src/Layout/Page.svelte | 1 + .../src/components/portal/page/Content.svelte | 12 +++- .../src/components/portal/page/Header.svelte | 17 ++++- .../src/components/portal/page/SideNav.svelte | 8 +++ .../portal/overview/[appId]/_layout.svelte | 70 +++++++++++++------ 5 files changed, 86 insertions(+), 22 deletions(-) diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 6e3cc55c12..15aabd2c61 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -72,6 +72,7 @@ background: var(--background); border-left: var(--border-light); width: 320px; + max-width: calc(100vw - 48px - 48px); overflow: auto; overflow-x: hidden; transform: translateX(100%); diff --git a/packages/builder/src/components/portal/page/Content.svelte b/packages/builder/src/components/portal/page/Content.svelte index e6ef93a179..083467b49b 100644 --- a/packages/builder/src/components/portal/page/Content.svelte +++ b/packages/builder/src/components/portal/page/Content.svelte @@ -1,9 +1,10 @@
-
+
@@ -28,4 +29,13 @@ .main.narrow { max-width: 600px; } + + @media (max-width: 640px) { + .content { + flex-direction: column; + } + .side-nav:not(.show-mobile) { + display: none; + } + } diff --git a/packages/builder/src/components/portal/page/Header.svelte b/packages/builder/src/components/portal/page/Header.svelte index be75c5271b..19a2cd59a8 100644 --- a/packages/builder/src/components/portal/page/Header.svelte +++ b/packages/builder/src/components/portal/page/Header.svelte @@ -2,9 +2,10 @@ import { Heading } from "@budibase/bbui" export let title + export let wrap = true -
+
{title}
@@ -20,10 +21,19 @@ align-items: center; gap: var(--spacing-xl); } + .header.wrap { + flex-wrap: wrap; + } .header :global(.spectrum-Heading) { flex: 1 1 auto; margin-top: -2px; } + .header:not(.wrap) :global(.spectrum-Heading) { + overflow: hidden; + width: 0; + white-space: nowrap; + text-overflow: ellipsis; + } .buttons { display: flex; flex-direction: row; @@ -34,4 +44,9 @@ .buttons :global(> div) { display: contents; } + @media (max-width: 640px) { + .wrap .buttons { + margin-bottom: var(--spacing-m); + } + } diff --git a/packages/builder/src/components/portal/page/SideNav.svelte b/packages/builder/src/components/portal/page/SideNav.svelte index fdd54b2182..e3e485fa30 100644 --- a/packages/builder/src/components/portal/page/SideNav.svelte +++ b/packages/builder/src/components/portal/page/SideNav.svelte @@ -23,4 +23,12 @@ color: var(--spectrum-global-color-gray-700); margin-bottom: var(--spacing-m); } + + @media (max-width: 640px) { + .side-nav { + border-bottom: var(--border-light); + margin: 0 -24px; + padding: 0 24px 32px 24px; + } + } diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte index ef571a1edf..c1165d8550 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte @@ -120,7 +120,7 @@ -
+
- - + + + + + + + + + View + + + + + Edit + + exportApp({ published: false })} icon="DownloadFromCloud" @@ -177,7 +195,7 @@
- + {/key} + + From e9d20a885b6c96e3f2313ba9b3e5451080750bf2 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 10:13:19 +0000 Subject: [PATCH 6/6] Refactor main portal page into multiple components --- .../src/components/portal/page/Content.svelte | 5 + .../src/components/portal/page/SideNav.svelte | 8 - .../builder/portal/_components/Logo.svelte | 13 ++ .../portal/_components/MobileMenu.svelte | 79 +++++++ .../portal/_components/UpgradeButton.svelte | 20 ++ .../portal/_components/UserDropdown.svelte | 78 +++++++ .../src/pages/builder/portal/_layout.svelte | 202 ++++-------------- 7 files changed, 236 insertions(+), 169 deletions(-) create mode 100644 packages/builder/src/pages/builder/portal/_components/Logo.svelte create mode 100644 packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte create mode 100644 packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte create mode 100644 packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte diff --git a/packages/builder/src/components/portal/page/Content.svelte b/packages/builder/src/components/portal/page/Content.svelte index 083467b49b..d542dfcf56 100644 --- a/packages/builder/src/components/portal/page/Content.svelte +++ b/packages/builder/src/components/portal/page/Content.svelte @@ -37,5 +37,10 @@ .side-nav:not(.show-mobile) { display: none; } + .side-nav.show-mobile :global(.side-nav) { + border-bottom: var(--border-light); + margin: 0 -24px; + padding: 0 24px 32px 24px; + } } diff --git a/packages/builder/src/components/portal/page/SideNav.svelte b/packages/builder/src/components/portal/page/SideNav.svelte index e3e485fa30..fdd54b2182 100644 --- a/packages/builder/src/components/portal/page/SideNav.svelte +++ b/packages/builder/src/components/portal/page/SideNav.svelte @@ -23,12 +23,4 @@ color: var(--spectrum-global-color-gray-700); margin-bottom: var(--spacing-m); } - - @media (max-width: 640px) { - .side-nav { - border-bottom: var(--border-light); - margin: 0 -24px; - padding: 0 24px 32px 24px; - } - } diff --git a/packages/builder/src/pages/builder/portal/_components/Logo.svelte b/packages/builder/src/pages/builder/portal/_components/Logo.svelte new file mode 100644 index 0000000000..8276510201 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/_components/Logo.svelte @@ -0,0 +1,13 @@ + + +Budibase Logo $goto("./apps")} /> + + diff --git a/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte b/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte new file mode 100644 index 0000000000..bfb08f9b36 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte @@ -0,0 +1,79 @@ + + +{#if visible} +
+{/if} +
+ +
+ +
+ + {#each menu as { title, href }} + + {/each} + +
+ +
+ +
+ + diff --git a/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte new file mode 100644 index 0000000000..29066b8117 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte @@ -0,0 +1,20 @@ + + +{#if $admin.cloud && $auth?.user?.accountPortalAccess} + +{:else if !$admin.cloud && $auth.isAdmin} + +{/if} diff --git a/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte b/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte new file mode 100644 index 0000000000..552e9247fc --- /dev/null +++ b/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte @@ -0,0 +1,78 @@ + + + +
+ + +
+ themeModal.show()} dataCy="theme"> + Theme + + profileModal.show()} + dataCy="user-info" + > + My profile + + updatePasswordModal.show()}> + Update password + + apiKeyModal.show()} dataCy="api-key"> + View API key + + $goto("../apps")}> + Close developer mode + + + Log out + + + + + + + + + + + + + + + + + diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index a43f294d0c..9048502550 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -1,30 +1,15 @@