From 215a73a5b213ecf9b34748904f5d574adaf7ed22 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 11 Jan 2023 08:29:57 +0000
Subject: [PATCH] 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;
+ }
+ }
</style>
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;
}
}
</style>
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 {