CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-06 15:00:49 +12: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;

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

@ -13,7 +13,7 @@ import SettingsView from "./SettingsView.svelte";
import PageView from "./PageView.svelte"; import PageView from "./PageView.svelte";
import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"; import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte";
let newComponentPicker; let newComponentPicker;
const newComponent = () => { const newComponent = () => {
newComponentPicker.show(); newComponentPicker.show();
} }
@ -26,7 +26,7 @@ const settings = () => {
</script> </script>
<div class="root"> <div class="root">
<div class="ui-nav"> <div class="ui-nav">
<div class="components-list-container"> <div class="components-list-container">
@ -34,10 +34,10 @@ const settings = () => {
<div>{@html getIcon("sidebar","18")}</div> <div>{@html getIcon("sidebar","18")}</div>
<span class="components-nav-header">Screens</span> <span class="components-nav-header">Screens</span>
<div> <div>
<IconButton icon="settings" <IconButton icon="settings"
size="14px" size="14px"
on:click={settings}/> on:click={settings}/>
<IconButton icon="plus" <IconButton icon="plus"
on:click={newComponent}/> on:click={newComponent}/>
</div> </div>
</div> </div>
@ -63,7 +63,7 @@ const settings = () => {
<CurrentItemPreview /> <CurrentItemPreview />
{:else if $store.currentFrontEndType === "page"} {:else if $store.currentFrontEndType === "page"}
<PageView /> <PageView />
{/if} {/if}
</div> </div>
{#if $store.currentFrontEndType === "screen"} {#if $store.currentFrontEndType === "screen"}
@ -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;
} }
@ -152,7 +158,7 @@ const settings = () => {
} }
.nav-group-header>div:nth-child(3):hover { .nav-group-header>div:nth-child(3):hover {
color: var(--primary75); color: var(--primary75);
} }
</style> </style>