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",
_component: "@budibase/standard-components/container",
_styles: {
normal: {},
normal: {
flex: "1 1 auto",
},
hover: {},
active: {},
selected: {},
@ -46,6 +48,7 @@
display: "flex",
"flex-direction": "column",
"align-items": "center",
flex: "1 1 auto",
},
hover: {},
active: {},

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

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

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

@ -261,6 +261,16 @@ export const padding = [
]
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",
key: "width",

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

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