Update more pages to be responsive and add mobile specific components
This commit is contained in:
parent
db4714d69c
commit
34adcdcddf
5 changed files with 86 additions and 22 deletions
|
@ -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%);
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
<script>
|
||||
export let narrow = false
|
||||
export let showMobileNav = false
|
||||
</script>
|
||||
|
||||
<div class="content">
|
||||
<div class="side-nav">
|
||||
<div class="side-nav" class:show-mobile={showMobileNav}>
|
||||
<slot name="side-nav" />
|
||||
</div>
|
||||
<div class="main" class:narrow>
|
||||
|
@ -28,4 +29,13 @@
|
|||
.main.narrow {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.side-nav:not(.show-mobile) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -2,9 +2,10 @@
|
|||
import { Heading } from "@budibase/bbui"
|
||||
|
||||
export let title
|
||||
export let wrap = true
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<div class="header" class:wrap>
|
||||
<slot name="icon" />
|
||||
<Heading size="L">{title}</Heading>
|
||||
<div class="buttons">
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -120,7 +120,7 @@
|
|||
<Breadcrumb url={$url("../")} text="Apps" />
|
||||
<Breadcrumb text={app?.name} />
|
||||
</Breadcrumbs>
|
||||
<Header title={app?.name}>
|
||||
<Header title={app?.name} wrap={false}>
|
||||
<div slot="icon">
|
||||
<EditableIcon
|
||||
{app}
|
||||
|
@ -132,28 +132,46 @@
|
|||
</div>
|
||||
<div slot="buttons">
|
||||
<AppLockModal {app} />
|
||||
<Button
|
||||
size="M"
|
||||
quiet
|
||||
secondary
|
||||
disabled={!isPublished}
|
||||
on:click={viewApp}
|
||||
dataCy="view-app"
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
<Button
|
||||
size="M"
|
||||
cta
|
||||
disabled={appLocked && !lockedByYou}
|
||||
on:click={editApp}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<span class="desktop">
|
||||
<Button
|
||||
size="M"
|
||||
quiet
|
||||
secondary
|
||||
disabled={!isPublished}
|
||||
on:click={viewApp}
|
||||
dataCy="view-app"
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
</span>
|
||||
<span class="desktop">
|
||||
<Button
|
||||
size="M"
|
||||
cta
|
||||
disabled={appLocked && !lockedByYou}
|
||||
on:click={editApp}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</span>
|
||||
<ActionMenu align="right" dataCy="app-overview-menu-popover">
|
||||
<span slot="control" class="app-overview-actions-icon">
|
||||
<Icon hoverable name="More" />
|
||||
</span>
|
||||
<span class="mobile">
|
||||
<MenuItem icon="Globe" disabled={!isPublished} on:click={viewApp}>
|
||||
View
|
||||
</MenuItem>
|
||||
</span>
|
||||
<span class="mobile">
|
||||
<MenuItem
|
||||
icon="Edit"
|
||||
disabled={appLocked && !lockedByYou}
|
||||
on:click={editApp}
|
||||
>
|
||||
Edit
|
||||
</MenuItem>
|
||||
</span>
|
||||
<MenuItem
|
||||
on:click={() => exportApp({ published: false })}
|
||||
icon="DownloadFromCloud"
|
||||
|
@ -177,7 +195,7 @@
|
|||
</ActionMenu>
|
||||
</div>
|
||||
</Header>
|
||||
<Content>
|
||||
<Content showMobileNav>
|
||||
<SideNav slot="side-nav">
|
||||
<SideNavItem
|
||||
text="Overview"
|
||||
|
@ -237,3 +255,15 @@
|
|||
/>
|
||||
</ConfirmDialog>
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
.desktop {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue