CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-28 19:10:33 +12:00
Code Issues Projects Releases Wiki Activity

Minor reflow of the overview tab cards and layout

Browse source
This commit is contained in:
Dean 2022-05-19 09:56:47 +01:00
parent 45485f3653
commit 071e9c3421
2 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/builder/src/components/common/DashCard.svelte
View file

@ -33,13 +33,13 @@
min-height: 150px; min-height: 150px;
} }
.dash-card-header { .dash-card-header {
padding: var(--spacing-l); padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
border-bottom: 1px solid var(--spectrum-global-color-gray-300); border-bottom: 1px solid var(--spectrum-global-color-gray-300);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.dash-card-body { .dash-card-body {
padding: var(--spacing-l); padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
} }
.dash-card-title :global(.spectrum-Detail) { .dash-card-title :global(.spectrum-Detail) {
color: var( color: var(

27
packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
View file

@ -62,7 +62,7 @@
{/if} {/if}
</div> </div>
<p class="status-text"> <div class="status-text">
{#if deployments?.length} {#if deployments?.length}
{processStringSync( {processStringSync(
"Last published {{ duration time 'millisecond' }} ago", "Last published {{ duration time 'millisecond' }} ago",
@ -76,7 +76,7 @@
{#if !deployments?.length} {#if !deployments?.length}
- -
{/if} {/if}
</p> </div>
</div> </div>
</DashCard> </DashCard>
<DashCard title={"Last Edited"} dataCy={"edited-by"}> <DashCard title={"Last Edited"} dataCy={"edited-by"}>
@ -95,7 +95,7 @@
{:catch error} {:catch error}
<p>Could not fetch user: {error.message}</p> <p>Could not fetch user: {error.message}</p>
{/await} {/await}
<p class="last-edit-text"> <div class="last-edit-text">
{#if app} {#if app}
{processStringSync( {processStringSync(
"Last edited {{ duration time 'millisecond' }} ago", "Last edited {{ duration time 'millisecond' }} ago",
@ -105,7 +105,7 @@
} }
)} )}
{/if} {/if}
</p> </div>
</div> </div>
</DashCard> </DashCard>
<DashCard <DashCard
@ -119,7 +119,7 @@
<div class="version-content" data-cy={$store.version}> <div class="version-content" data-cy={$store.version}>
<Heading size="XS">{$store.version}</Heading> <Heading size="XS">{$store.version}</Heading>
{#if updateAvailable} {#if updateAvailable}
<p class="version-status"> <div class="version-status">
New version <strong>{clientPackage.version}</strong> is available New version <strong>{clientPackage.version}</strong> is available
- -
<Link <Link
@ -131,9 +131,9 @@
> >
Update Update
</Link> </Link>
</p> </div>
{:else} {:else}
<p class="version-status">You're running the latest!</p> <div class="version-status">You're running the latest!</div>
{/if} {/if}
</div> </div>
</DashCard> </DashCard>
@ -181,29 +181,25 @@
</div> </div>
<style> <style>
/* Add in size checks */
.overview-tab { .overview-tab {
display: grid; display: grid;
grid-gap: var(--spacing-xl); grid-gap: var(--spacing-xl);
} }
.overview-tab .top { .overview-tab .top {
display: grid; display: grid;
grid-gap: var(--spacing-xl); grid-gap: calc(var(--spacing-xl) * 2);
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.overview-tab .top { .overview-tab .top {
display: grid;
grid-gap: var(--spacing-xl);
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.overview-tab .top { .overview-tab .top {
display: grid;
grid-gap: var(--spacing-xl);
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@ -242,4 +238,9 @@
gap: var(--spacing-l); gap: var(--spacing-l);
margin-top: var(--spacing-s); margin-top: var(--spacing-s);
} }
.version-status,
.last-edit-text,
.status-text {
padding-top: var(--spacing-xl);
}
</style> </style>