MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add flex design property and fix existing default layout

This commit is contained in:
Andrew Kingston 2020-10-13 17:46:18 +01:00
parent bb997eaf26
commit 650ace2f9e
4 changed files with 44 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View File

@ -28,7 +28,9 @@
_id: "screenslot-placeholder", _id: "screenslot-placeholder",
_component: "@budibase/standard-components/container", _component: "@budibase/standard-components/container",
_styles: { _styles: {
normal: {}, normal: {
flex: "1 1 auto",
},
hover: {}, hover: {},
active: {}, active: {},
selected: {}, selected: {},
@ -46,6 +48,7 @@
display: "flex", display: "flex",
"flex-direction": "column", "flex-direction": "column",
"align-items": "center", "align-items": "center",
flex: "1 1 auto",
}, },
hover: {}, hover: {},
active: {}, active: {},

48
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View File

@ -11,38 +11,22 @@ export default `<html>
*, *:before, *:after { *, *:before, *:after {
box-sizing: border-box; box-sizing: border-box;
} }
.lay-__screenslot__text { .container-screenslot-placeholder {
width: 100%; display: flex;
height: 100%; align-items: center;
display: flex; justify-content: center;
justify-content: center; padding: 20px;
align-items: center; text-align: center;
padding: 20px 0; border-style: dashed !important;
border: dashed 2px #ccc; border-width: 1px;
font-family: sans-serif; color: #000000;
font-size: 1.2rem; background: #fafafa;
color: #999; flex: 1 1 auto;
text-transform: uppercase; }
font-weight: bold; .container-screenslot-placeholder span {
} display: block;
margin-bottom: 10px;
.container-screenslot-placeholder { }
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
border-style: dashed !important;
border-width: 1px;
color: #000000;
background: #fafafa;
height: 94%;
}
.container-screenslot-placeholder span {
display: block;
margin-bottom: 10px;
}
</style> </style>
<script src='/assets/budibase-client.js'></script> <script src='/assets/budibase-client.js'></script>
<script> <script>

10
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -261,6 +261,16 @@ export const padding = [
] ]
export const size = [ export const size = [
{
label: "Flex",
key: "flex",
control: OptionSelect,
defaultValue: "0 1 auto",
options: [
{ label: "Shrink", value: "0 1 auto" },
{ label: "Grow", value: "1 1 auto" },
],
},
{ {
label: "Width", label: "Width",
key: "width", key: "width",

28
packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
View File

@ -1,9 +1,9 @@
{ {
"title": "{{ name }}", "title": "{{ name }}",
"favicon": "./_shared/favicon.png", "favicon": "./_shared/favicon.png",
"stylesheets": [], "stylesheets": [],
"componentLibraries": ["@budibase/standard-components"], "componentLibraries": ["@budibase/standard-components"],
"props": { "props": {
"_id": "private-master-root", "_id": "private-master-root",
"_component": "@budibase/standard-components/container", "_component": "@budibase/standard-components/container",
"_children": [ "_children": [
@ -62,10 +62,11 @@
"_component": "##builtin/screenslot", "_component": "##builtin/screenslot",
"_styles": { "_styles": {
"normal": { "normal": {
"padding": "0px", "flex": "1 1 auto",
"align-items": "flex-start", "display": "flex",
"height": "100vh", "flex-direction": "column",
"background-image": "None" "justify-content": "flex-start",
"align-items": "stretch"
}, },
"hover": {}, "hover": {},
"active": {}, "active": {},
@ -84,10 +85,9 @@
"flex-direction": "column", "flex-direction": "column",
"align-items": "stretch", "align-items": "stretch",
"justify-content": "flex-start", "justify-content": "flex-start",
"height": "",
"max-width": "",
"margin-right": "auto", "margin-right": "auto",
"margin-left": "auto" "margin-left": "auto",
"min-height": "100%"
}, },
"selected": {} "selected": {}
}, },
@ -95,6 +95,6 @@
"className": "", "className": "",
"onLoad": [] "onLoad": []
}, },
"_css": "", "_css": "",
"uiFunctions": "" "uiFunctions": ""
} }