CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 02:27:06 +13:00
Code Issues Projects Releases Wiki Activity

Make email template page somewhat mobile friendly

Browse source
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> </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">
<Editor <div class="template-text-editor">
editorHeight={800} <Editor
bind:this={htmlEditor} editorHeight={640}
mode="handlebars" bind:this={htmlEditor}
on:change={e => { mode="handlebars"
selectedTemplate.contents = e.detail.value on:change={e => {
}} selectedTemplate.contents = e.detail.value
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 {