CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-28 16:31:48 +12:00
Code Issues Projects Releases Wiki Activity

Tidy backend styles and improve consistency

Browse source
This commit is contained in:
Andrew Kingston 2020-09-24 15:31:29 +01:00
parent c9418aa572
commit 81d3c7d85d
5 changed files with 73 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte
View file

@ -50,24 +50,23 @@
</DropdownMenu> </DropdownMenu>
<style> <style>
.container {
padding: var(--spacing-xl);
display: grid;
grid-gap: var(--spacing-xl);
}
h5 { h5 {
margin-bottom: var(--spacing-l); margin: 0;
font-weight: 500; font-weight: 500;
} }
.container {
padding: var(--spacing-l);
margin: 0;
}
footer { footer {
padding: 20px; padding: var(--spacing-xl);
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px; gap: var(--spacing-m);
background: var(--grey-1); background: var(--grey-1);
border-bottom-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
} }
.button-margin-3 { .button-margin-3 {

43
packages/builder/src/components/nav/ModelNavigator/EditTable.svelte
View file

@ -41,13 +41,13 @@
} }
</script> </script>
<div bind:this={anchor} on:click={dropdown.show}> <div class="icon" bind:this={anchor} on:click={dropdown.show}>
<i class="ri-more-line" /> <i class="ri-more-line" />
</div> </div>
<DropdownMenu bind:this={dropdown} {anchor} align="left"> <DropdownMenu bind:this={dropdown} {anchor} align="left">
{#if editing} {#if editing}
<h5>Edit Table</h5>
<div class="container"> <div class="container">
<h5>Edit Table</h5>
<Input placeholder="Table Name" thin bind:value={table.name} /> <Input placeholder="Table Name" thin bind:value={table.name} />
</div> </div>
<footer> <footer>
@ -73,20 +73,37 @@
</DropdownMenu> </DropdownMenu>
<style> <style>
h5 { div.icon {
padding: var(--spacing-xl) 0 0 var(--spacing-xl); display: flex;
margin: 0; flex-direction: row;
font-weight: 500; justify-content: flex-end;
align-items: center;
}
div.icon i {
font-size: 16px;
} }
.container { .container {
padding: var(--spacing-xl); padding: var(--spacing-xl);
display: grid;
grid-gap: var(--spacing-xl);
}
h5 {
margin: 0;
font-weight: 500;
}
footer {
padding: var(--spacing-xl);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--spacing-m);
background: var(--grey-1);
} }
ul { ul {
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
list-style: none; list-style: none;
padding-left: 0;
margin: 0; margin: 0;
padding: var(--spacing-s) 0; padding: var(--spacing-s) 0;
} }
@ -110,16 +127,6 @@
color: var(--blue); color: var(--blue);
} }
footer {
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
background: var(--grey-1);
border-bottom-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.button-margin-1 { .button-margin-1 {
grid-column-start: 1; grid-column-start: 1;
display: grid; display: grid;

43
packages/builder/src/components/nav/ModelNavigator/EditView.svelte
View file

@ -47,13 +47,13 @@
} }
</script> </script>
<div bind:this={anchor} on:click={dropdown.show}> <div class="icon" bind:this={anchor} on:click={dropdown.show}>
<i class="ri-more-line" /> <i class="ri-more-line" />
</div> </div>
<DropdownMenu bind:this={dropdown} {anchor} align="left"> <DropdownMenu bind:this={dropdown} {anchor} align="left">
{#if editing} {#if editing}
<h5>Edit View</h5>
<div class="container"> <div class="container">
<h5>Edit View</h5>
<Input placeholder="View Name" thin bind:value={view.name} /> <Input placeholder="View Name" thin bind:value={view.name} />
</div> </div>
<footer> <footer>
@ -79,20 +79,37 @@
</DropdownMenu> </DropdownMenu>
<style> <style>
h5 { div.icon {
padding: var(--spacing-xl) 0 0 var(--spacing-xl); display: flex;
margin: 0; flex-direction: row;
font-weight: 500; justify-content: flex-end;
align-items: center;
}
div.icon i {
font-size: 16px;
} }
.container { .container {
padding: var(--spacing-xl); padding: var(--spacing-xl);
display: grid;
grid-gap: var(--spacing-xl);
}
h5 {
margin: 0;
font-weight: 500;
}
footer {
padding: var(--spacing-xl);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--spacing-m);
background: var(--grey-1);
} }
ul { ul {
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
list-style: none; list-style: none;
padding-left: 0;
margin: 0; margin: 0;
padding: var(--spacing-s) 0; padding: var(--spacing-s) 0;
} }
@ -116,16 +133,6 @@
color: var(--blue); color: var(--blue);
} }
footer {
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
background: var(--grey-1);
border-bottom-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.button-margin-1 { .button-margin-1 {
grid-column-start: 1; grid-column-start: 1;
display: grid; display: grid;

15
packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
View file

@ -19,26 +19,24 @@
<style> <style>
.indented { .indented {
grid-template-columns: 50px 1fr 20px; grid-template-columns: 46px 1fr 20px;
} }
.indented i { .indented i {
justify-self: end; justify-self: end;
} }
div { div {
padding: 0 10px 0 10px; padding: var(--spacing-s) var(--spacing-m);
height: 36px; border-radius: var(--border-radius-m);
border-radius: 5px;
display: grid; display: grid;
grid-template-columns: 30px 1fr 20px; grid-template-columns: 20px 1fr 20px;
align-items: center; align-items: center;
transition: 0.3s background-color; transition: 0.3s background-color;
color: var(--ink); color: var(--ink);
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
margin-top: 4px; margin-bottom: var(--spacing-xs);
margin-bottom: 4px; grid-gap: var(--spacing-s);
} }
.selected { .selected {
@ -53,6 +51,5 @@
i { i {
color: var(--grey-7); color: var(--grey-7);
font-size: 20px; font-size: 20px;
margin-right: 8px;
} }
</style> </style>

16
packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
View file

@ -30,7 +30,7 @@
{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id} {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
<div class="hierarchy"> <div class="hierarchy">
<div class="components-list-container"> <div class="components-list-container">
<h4>Tables</h4> <div class="title">Tables</div>
<CreateTablePopover /> <CreateTablePopover />
<div class="hierarchy-items-container"> <div class="hierarchy-items-container">
{#each $backendUiStore.models as model} {#each $backendUiStore.models as model}
@ -63,17 +63,17 @@
</div> </div>
<style> <style>
h4 { .title {
font-weight: 500; font-size: 18px;
font-weight: 600;
margin-bottom: var(--spacing-xl);
} }
.items-root { .items-root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 100%; justify-content: flex-start;
height: 100%; align-items: stretch;
background: var(--white);
padding: 20px;
} }
.hierarchy { .hierarchy {
@ -82,7 +82,7 @@
} }
.hierarchy-items-container { .hierarchy-items-container {
margin-top: 20px; margin-top: var(--spacing-xl);
flex: 1 1 auto; flex: 1 1 auto;
} }
</style> </style>