Update layouts to use new container props and be more responsive

This commit is contained in:
Andrew Kingston 2021-06-10 10:36:23 +01:00
parent 6b062c90c2
commit 18a175e87a
2 changed files with 22 additions and 50 deletions

View File

@ -23,9 +23,8 @@ const EMPTY_LAYOUT = {
"justify-content": "flex-start",
"align-items": "stretch",
"max-width": "100%",
"margin-left": "20px",
"margin-right": "20px",
width: "1400px",
padding: "20px",
},
hover: {},
active: {},
@ -34,24 +33,19 @@ const EMPTY_LAYOUT = {
_children: [],
},
],
type: "div",
_styles: {
active: {},
hover: {},
normal: {
display: "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "flex-start",
"margin-right": "auto",
"margin-left": "auto",
"min-height": "100%",
"background-image": "#f5f5f5",
},
selected: {},
},
className: "",
onLoad: [],
direction: "column",
hAlign: "center",
vAlign: "top",
size: "grow",
},
}
@ -72,10 +66,6 @@ const BASE_LAYOUTS = [
_component: "@budibase/standard-components/container",
_styles: {
normal: {
display: "flex",
"flex-direction": "row",
"justify-content": "flex-start",
"align-items": "flex-start",
background: "#fff",
width: "100%",
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
@ -84,9 +74,6 @@ const BASE_LAYOUTS = [
active: {},
selected: {},
},
className: "",
onLoad: [],
type: "div",
_instanceName: "Header",
_children: [
{
@ -95,8 +82,6 @@ const BASE_LAYOUTS = [
_styles: {
normal: {
"max-width": "1400px",
"margin-left": "auto",
"margin-right": "auto",
padding: "20px",
"font-weight": "400",
"font-size": "16px",
@ -143,6 +128,10 @@ const BASE_LAYOUTS = [
],
},
],
direction: "row",
hAlign: "center",
vAlign: "middle",
size: "shrink",
},
{
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
@ -155,8 +144,6 @@ const BASE_LAYOUTS = [
"justify-content": "flex-start",
"align-items": "stretch",
"max-width": "100%",
"margin-left": "20px",
"margin-right": "20px",
width: "1400px",
padding: "20px",
},
@ -167,24 +154,19 @@ const BASE_LAYOUTS = [
_children: [],
},
],
type: "div",
_styles: {
active: {},
hover: {},
normal: {
display: "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "flex-start",
"margin-right": "auto",
"margin-left": "auto",
"min-height": "100%",
background: "#f5f5f5",
},
selected: {},
},
className: "",
onLoad: [],
direction: "column",
hAlign: "center",
vAlign: "top",
size: "grow",
},
},
{
@ -209,8 +191,6 @@ const BASE_LAYOUTS = [
"justify-content": "flex-start",
"align-items": "stretch",
"max-width": "100%",
"margin-left": "20px",
"margin-right": "20px",
width: "1400px",
padding: "20px",
},
@ -221,24 +201,19 @@ const BASE_LAYOUTS = [
_children: [],
},
],
type: "div",
_styles: {
active: {},
hover: {},
normal: {
display: "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"margin-right": "auto",
"margin-left": "auto",
"min-height": "100%",
background: "#f5f5f5",
},
selected: {},
},
className: "",
onLoad: [],
direction: "column",
hAlign: "center",
vAlign: "top",
size: "grow",
},
},
]

View File

@ -9,19 +9,12 @@ exports.createHomeScreen = () => ({
_id: "d834fea2-1b3e-4320-ab34-f9009f5ecc59",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
flex: "1 1 auto",
display: "flex",
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch",
},
normal: {},
hover: {},
active: {},
selected: {},
},
_transition: "fade",
type: "div",
_children: [
{
_id: "ef60083f-4a02-4df3-80f3-a0d3d16847e7",
@ -41,6 +34,10 @@ exports.createHomeScreen = () => ({
},
],
_instanceName: "Home",
direction: "column",
hAlign: "stretch",
vAlign: "top",
size: "grow",
},
routing: {
route: "/",