CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-05 12:34:50 +13:00
Code Issues Projects Releases Wiki Activity

Implement basic layout for frontend view.

Browse source
This commit is contained in:
pngwn 2020-01-20 14:12:29 +00:00
parent caf5ff6787
commit 6b4cdacc30
3 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/builder/src/PackageRoot.svelte
View file

@ -48,6 +48,7 @@ import { fade } from "svelte/transition";
width:100%; width:100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.top-nav { .top-nav {
@ -70,6 +71,7 @@ import { fade } from "svelte/transition";
.content > div { .content > div {
height:100%; height:100%;
width:100%; width:100%;
} }
.topnavitem { .topnavitem {

2
packages/builder/src/global.css
View file

@ -12,7 +12,7 @@
--secondary50: #162B4D80; --secondary50: #162B4D80;
--secondary25: #162B4D40; --secondary25: #162B4D40;
--secondary10: #162B4D1A; --secondary10: #162B4D1A;
--secondary5: rgba(22, 43, 77, 0.068); --secondary5:#fff;
--secondarydark: #3F448A; --secondarydark: #3F448A;
--tertiary: #F2F5F7; --tertiary: #F2F5F7;

10
packages/builder/src/userInterface/UserInterfaceRoot.svelte
View file

@ -83,19 +83,25 @@ const settings = () => {
.root { .root {
display: grid; display: grid;
grid-template-columns: 250px 1fr 300px; grid-template-columns: 290px 1fr 300px;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #fafafa;
} }
.ui-nav { .ui-nav {
grid-column: 1; grid-column: 1;
background-color: var(--secondary5); background-color: var(--secondary5);
height: 100%; height: 100%;
padding: 0 1.5rem 0rem 1.5rem
} }
.preview-pane { .preview-pane {
grid-column: 2; grid-column: 2;
margin: 80px 60px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0px 6px rgba(0,0,0,0.05)
} }
.components-pane { .components-pane {
@ -125,7 +131,7 @@ const settings = () => {
.nav-group-header { .nav-group-header {
display:grid; display:grid;
grid-template-columns: [icon] auto [title] 1fr [button] auto; grid-template-columns: [icon] auto [title] 1fr [button] auto;
padding: 2rem 1rem 0rem 1rem; padding: 2rem 0 0 0;
font-size: .9rem; font-size: .9rem;
font-weight: bold; font-weight: bold;
} }