CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-10 22:46:09 +12:00
Code Issues Projects Releases Wiki Activity

Minor update to overview page spacing

Browse source
This commit is contained in:
Dean 2022-05-19 14:51:33 +01:00
parent 939c014c0d
commit 1df325c7d3
3 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/bbui/src/Layout/Layout.svelte
View file

@ -41,8 +41,8 @@
padding-right: var(--spacing-xl); padding-right: var(--spacing-xl);
} }
.paddingX-XXL { .paddingX-XXL {
padding-left: calc(var(--spacing-xl) * 2); padding-left: var(--spectrum-alias-grid-gutter-large);
padding-right: calc(var(--spacing-xl) * 2); padding-right: var(--spectrum-alias-grid-gutter-large);
} }
.paddingY-S { .paddingY-S {
padding-top: var(--spacing-s); padding-top: var(--spacing-s);
@ -61,8 +61,8 @@
padding-bottom: var(--spacing-xl); padding-bottom: var(--spacing-xl);
} }
.paddingY-XXL { .paddingY-XXL {
padding-top: calc(var(--spacing-xl) * 2); padding-top: var(--spectrum-alias-grid-gutter-large);
padding-bottom: calc(var(--spacing-xl) * 2); padding-bottom: var(--spectrum-alias-grid-gutter-large);
} }
.gap-XXS { .gap-XXS {
grid-gap: var(--spacing-xs); grid-gap: var(--spacing-xs);

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

@ -33,7 +33,7 @@
min-height: 150px; min-height: 150px;
} }
.dash-card-header { .dash-card-header {
padding: var(--spacing-xl) calc(var(--spacing-xl) * 2); padding: var(--spacing-xl) var(--spectrum-global-dimension-static-size-400);
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;

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

@ -48,7 +48,7 @@
</script> </script>
<div class="overview-tab"> <div class="overview-tab">
<Layout paddingX="XXL" paddingY="XXL"> <Layout paddingX="XXL" paddingY="XXL" gap="XL">
<div class="top"> <div class="top">
<DashCard title={"App Status"} dataCy={"app-status"}> <DashCard title={"App Status"} dataCy={"app-status"}>
<div class="status-content"> <div class="status-content">
@ -183,33 +183,37 @@
<style> <style>
.overview-tab { .overview-tab {
display: grid; display: grid;
grid-gap: var(--spacing-xl);
} }
.overview-tab .top { .overview-tab .top {
display: grid; display: grid;
grid-gap: calc(var(--spacing-xl) * 2); grid-gap: var(--spectrum-alias-grid-gutter-medium);
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
} }
.overview-tab .bottom,
.automation-metrics {
display: grid;
grid-gap: var(--spectrum-alias-grid-gutter-large);
grid-template-columns: 1fr 1fr;
}
@media (max-width: 1000px) { @media (max-width: 1000px) {
.overview-tab .top { .overview-tab .top {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
} .overview-tab .bottom {
@media (max-width: 800px) {
.overview-tab .top {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
.overview-tab .bottom, @media (max-width: 800px) {
.automation-metrics { .overview-tab .top,
display: grid; .overview-tab .bottom {
grid-gap: var(--spacing-xl); grid-template-columns: 1fr;
grid-template-columns: 1fr 1fr; }
} }
.status-display { .status-display {
display: flex; display: flex;
align-items: center; align-items: center;