CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-08 07:46:10 +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>
<style>
.container {
padding: var(--spacing-xl);
display: grid;
grid-gap: var(--spacing-xl);
}
h5 {
margin-bottom: var(--spacing-l);
margin: 0;
font-weight: 500;
}
.container {
padding: var(--spacing-l);
margin: 0;
}
footer {
padding: 20px;
padding: var(--spacing-xl);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
gap: var(--spacing-m);
background: var(--grey-1);
border-bottom-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.button-margin-3 {

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

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

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

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

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

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

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

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