MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make core page layout responsive and update apps list to be responsive

This commit is contained in:
Andrew Kingston 2023-01-11 08:29:57 +00:00
parent fcde5fb3e9
commit 215a73a5b2
4 changed files with 38 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/bbui/src/Layout/Page.svelte
View File

@ -58,10 +58,10 @@
padding: 50px; padding: 50px;
z-index: 1; z-index: 1;
} }
.wide { .content.wide {
max-width: none; max-width: none;
} }
.narrow { .content.narrow {
max-width: 840px; max-width: 840px;
} }
#side-panel { #side-panel {
@ -82,4 +82,13 @@
#side-panel.visible { #side-panel.visible {
transform: translateX(0); transform: translateX(0);
} }
@media (max-width: 640px) {
.content {
padding: 24px;
max-width: calc(100vw - 48px) !important;
width: calc(100vw - 48px) !important;
overflow: auto;
}
}
</style> </style>

23
packages/builder/src/components/start/AppRow.svelte
View File

@ -78,6 +78,9 @@
.name { .name {
flex: 1 1 auto; flex: 1 1 auto;
} }
.name {
width: 0;
}
.title, .title,
.app-status { .app-status {
display: flex; display: flex;
@ -116,9 +119,25 @@
text-overflow: ellipsis; 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) { @media (max-width: 640px) {
.desktop { .app-row {
display: none !important; padding: 24px 20px;
} }
} }
</style> </style>

13
packages/builder/src/pages/builder/portal/_layout.svelte
View File

@ -228,7 +228,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
border-bottom: var(--border-light); border-bottom: var(--border-light);
padding: 0 20px; padding: 0 24px;
gap: 24px; gap: 24px;
position: relative; position: relative;
} }
@ -265,8 +265,7 @@
align-items: center; align-items: center;
gap: 24px; gap: 24px;
} }
.mobile-toggle, .mobile-toggle {
.mobile-logo {
display: none; display: none;
} }
.user-dropdown { .user-dropdown {
@ -278,7 +277,6 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.main { .main {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
@ -289,14 +287,15 @@
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.nav {
flex: 0 0 64px;
}
.toolbar { .toolbar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: var(--spacing-m) calc(var(--spacing-xl) * 1.5);
} }
.branding { .branding {
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -309,11 +308,9 @@
.toolbar :global(.spectrum-Button) { .toolbar :global(.spectrum-Button) {
display: none; display: none;
} }
.mobile-toggle { .mobile-toggle {
display: block; display: block;
} }
.mobile-toggle, .mobile-toggle,
.user-dropdown { .user-dropdown {
flex: 0 1 0; flex: 0 1 0;

1
packages/builder/src/pages/builder/portal/apps/index.svelte
View File

@ -373,6 +373,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-xl); gap: var(--spacing-xl);
overflow: hidden;
} }
.empty-wrapper { .empty-wrapper {