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

Make usage stats responsive and fix layout issues

This commit is contained in:
Andrew Kingston 2023-01-13 12:11:14 +00:00
parent ae74f34cb9
commit 715fc0413e
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/builder/src/components/usage/Usage.svelte
View File

@ -39,15 +39,21 @@
{#if showWarning} {#if showWarning}
<Icon name="Alert" /> <Icon name="Alert" />
{/if} {/if}
<div class="heading header-item"> <Heading size="XS" weight="light">
<Heading size="XS" weight="light">{usage.name}</Heading> <span class="nowrap">
</div> {usage.name}
</span>
</Heading>
</div> </div>
{#if unlimited} <Body size="S">
<Body size="S">{usage.used} / Unlimited</Body> <span class="nowrap">
{:else} {#if unlimited}
<Body size="S">{usage.used} / {usage.total}</Body> {usage.used} / Unlimited
{/if} {:else}
{usage.used} / {usage.total}
{/if}
</span>
</Body>
</div> </div>
<div> <div>
{#if unlimited} {#if unlimited}
@ -89,13 +95,14 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: flex-end;
margin-bottom: 12px; margin-bottom: 12px;
gap: var(--spacing-m);
} }
.header-container { .header-container {
display: flex; display: flex;
} }
.heading { .nowrap {
margin-top: 3px; white-space: nowrap;
margin-left: 5px;
} }
</style> </style>

1
packages/builder/src/pages/builder/portal/account/usage.svelte
View File

@ -249,6 +249,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
gap: 40px; gap: 40px;
flex-wrap: wrap;
} }
.column { .column {
flex: 1 1 0; flex: 1 1 0;