From 650ace2f9e5eff2c5062754c2864ab8b8e7080bb Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 13 Oct 2020 17:46:18 +0100 Subject: [PATCH] Add flex design property and fix existing default layout --- .../AppPreview/CurrentItemPreview.svelte | 5 +- .../AppPreview/iframeTemplate.js | 48 +++++++------------ .../userInterface/propertyCategories.js | 10 ++++ .../appDirectoryTemplate/pages/main/page.json | 28 +++++------ 4 files changed, 44 insertions(+), 47 deletions(-) diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index c4cdae4bfa..85c50711ae 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -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: {}, diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js index edb35bb668..4ef5fbff8e 100644 --- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js +++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js @@ -11,38 +11,22 @@ export default ` *, *: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; + }