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 9d4029c347
commit f5c11295c2
1 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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