Update multiple pages to be responsive and improve loading experience
This commit is contained in:
Andrew Kingston
parent
e9d20a885b
commit
5cf6ba89cf
7 changed files with 58 additions and 36 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,35 @@
|
|||
<script>
|
||||
import { Heading, Body, Button, Icon } from "@budibase/bbui"
|
||||
import { Heading, Body, Button, Icon, notifications } from "@budibase/bbui"
|
||||
import AppLockModal from "../common/AppLockModal.svelte"
|
||||
import { processStringSync } from "@budibase/string-templates"
|
||||
import { goto } from "@roxi/routify"
|
||||
|
||||
export let app
|
||||
export let editApp
|
||||
export let appOverview
|
||||
|
||||
const handleDefaultClick = () => {
|
||||
if (window.innerWidth < 640) {
|
||||
goToOverview()
|
||||
} else {
|
||||
goToBuilder()
|
||||
}
|
||||
}
|
||||
|
||||
const goToBuilder = () => {
|
||||
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}`)
|
||||
}
|
||||
|
||||
const goToOverview = () => {
|
||||
$goto(`../overview/${app.devId}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="app-row" on:click={() => editApp(app)}>
|
||||
<div class="app-row" on:click={handleDefaultClick}>
|
||||
<div class="title" data-cy={`${app.devId}`}>
|
||||
<div class="app-icon">
|
||||
<Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
|
||||
|
|
@ -35,21 +56,12 @@
|
|||
<Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
|
||||
</div>
|
||||
|
||||
<div data-cy={`row_actions_${app.appId}`}>
|
||||
<div class="app-row-actions">
|
||||
<AppLockModal {app} buttonSize="M" />
|
||||
<Button size="S" secondary on:click={() => appOverview(app)}>
|
||||
Manage
|
||||
</Button>
|
||||
<Button
|
||||
size="S"
|
||||
primary
|
||||
disabled={app.lockedOther}
|
||||
on:click={() => editApp(app)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
<div class="app-row-actions" data-cy={`row_actions_${app.appId}`}>
|
||||
<AppLockModal {app} buttonSize="M" />
|
||||
<Button size="S" secondary on:click={goToOverview}>Manage</Button>
|
||||
<Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -139,5 +151,8 @@
|
|||
.app-row {
|
||||
padding: 20px;
|
||||
}
|
||||
.app-row-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
|
||||
<div class="app-table">
|
||||
{#each filteredApps as app (app.appId)}
|
||||
<AppRow {app} {editApp} {appOverview} />
|
||||
<AppRow {app} />
|
||||
{/each}
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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" },
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue