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

Make email template page somewhat mobile friendly

This commit is contained in:
Andrew Kingston 2021-09-13 16:42:07 +01:00
parent 3d9d00b0a3
commit 896e5c3b76
1 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/builder/src/pages/builder/portal/manage/email/[template].svelte
View File

@ -90,16 +90,17 @@
</header> </header>
<Detail>Description</Detail> <Detail>Description</Detail>
<Body>{description}</Body> <Body>{description}</Body>
<Body <Body>
>Change the email template here. Add dynamic content by using the bindings Change the email template here. Add dynamic content by using the bindings
menu on the right.</Body menu on the right.
> </Body>
</Layout> </Layout>
<Tabs selected="Edit" on:select={fixMountBug}> <Tabs selected="Edit" on:select={fixMountBug}>
<Tab title="Edit"> <Tab title="Edit">
<div class="template-editor"> <div class="template-editor">
<div class="template-text-editor">
<Editor <Editor
editorHeight={800} editorHeight={640}
bind:this={htmlEditor} bind:this={htmlEditor}
mode="handlebars" mode="handlebars"
on:change={e => { on:change={e => {
@ -107,6 +108,7 @@
}} }}
value={selectedTemplate?.contents} value={selectedTemplate?.contents}
/> />
</div>
<div class="bindings-editor"> <div class="bindings-editor">
<Detail size="L">Bindings</Detail> <Detail size="L">Bindings</Detail>
{#if mounted} {#if mounted}
@ -139,22 +141,35 @@
<style> <style>
.template-editor { .template-editor {
display: grid; display: flex;
grid-template-columns: 1fr minmax(250px, 20%); flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
grid-gap: var(--spacing-xl); grid-gap: var(--spacing-xl);
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
} }
.template-text-editor {
flex: 1 1 0;
min-width: 250px;
}
.bindings-editor {
margin-top: var(--spacing-s);
height: 640px;
overflow: auto;
flex: 0 0 300px;
}
header { header {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
margin-top: var(--spacing-l); align-items: flex-start;
} }
.preview { .preview {
height: 800px; height: 640px;
padding: var(--spacing-xl) 0; margin-top: calc(var(--spacing-xl) + var(--spacing-s));
position: relative; position: relative;
} }
iframe { iframe {