mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
2d0f33f369
* add to-html-email * email-preview * add build-html-email script, update .gitignore * email preview and email-templates pages, update routes, importer and policies * add newsletter email layout, build-html-email script, to-html-email updates * Update .gitignore * add newsletter emails section to growth handbook * update scripts * update fonts in emails * Update README.md * Update build-html-email.js * update comments, add page scripts to layouts * revert change to build-static-content * update script * update email layout and helper * update handbook entry * update template data and helper * update email layout * update fake data and unsubscribe link * move added handbook section to the marketing handbook * rename script * update colors in unused email template * update capitalization in helper * view-email-preview » view-email-template-preview * Hide emails generated from markdown if they don't exist * update preview page * update markdown email directory, create sample article email * lint fixes, add target="_blank" to links in emails * update page layouts & styles * update sample newsletter email, code font, newsletter layout * Update README.md * Update view-email-template-preview.js Co-authored-by: Tim Kern <tim@fleetdm.com> Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com> Co-authored-by: Mike McNeil <mikermcneil@users.noreply.github.com>
82 lines
3.5 KiB
Text
Vendored
82 lines
3.5 KiB
Text
Vendored
<div id="email-preview" v-cloak>
|
|
<div class="container flex-column d-flex align-items-start">
|
|
<h2>Previewing {{template}}</h2>
|
|
<div purpose="form-factors" class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start">
|
|
<p class="mr-3 mb-0">Form factor</p>
|
|
<div purpose="preview-selector" class="mt-2 mt-sm-0 d-flex flex-row justify-content-between align-items-center"
|
|
id="dropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{preview}} <img class="d-flex ml-3" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
|
|
</div>
|
|
<div purpose="preview-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurpose">
|
|
<div class="dropdown-item d-block"
|
|
@click="preview = 'Responsive'">Responsive</div>
|
|
<div class="dropdown-item d-block"
|
|
@click="preview = 'Mobile (portrait)'">Mobile (portrait)</div>
|
|
<div class="dropdown-item d-block"
|
|
@click="preview = 'Mobile (landscape)'">Mobile (landscape)</div>
|
|
<div class="dropdown-item d-block"
|
|
@click="preview = 'Tablet (portait)'">Tablet (portrait)</div>
|
|
<div class="dropdown-item d-block"
|
|
@click="preview = 'Tablet (landscape)'">Tablet (landscape)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="preview === 'Mobile (portrait)'">
|
|
<div class="container">
|
|
<h3>Mobile (320px width)</h3>
|
|
</div>
|
|
<div class="simulate-320px-width pretend-inbox-wrapper-for-sample-email">
|
|
<iframe class="preview-iframe" frameborder="0" border="0" cellspacing="0" :src="'/admin/email-preview/'+template+'?raw=true'">
|
|
<%- sampleHtml %>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="preview === 'Mobile (landscape)'">
|
|
<div class="container">
|
|
<h3>Mobile (480px width)</h3>
|
|
</div>
|
|
<div class="simulate-480px-width pretend-inbox-wrapper-for-sample-email" >
|
|
<iframe class="preview-iframe" frameborder="0" border="0" cellspacing="0" :src="'/admin/email-preview/'+template+'?raw=true'">
|
|
<%- sampleHtml %>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="preview === 'Tablet (portait)'">
|
|
<div class="container">
|
|
<h3>Tablet (768px width)</h3>
|
|
</div>
|
|
<div class="simulate-768px-width pretend-inbox-wrapper-for-sample-email" >
|
|
<iframe class="preview-iframe" frameborder="0" border="0" cellspacing="0" :src="'/admin/email-preview/'+template+'?raw=true'">
|
|
<%- sampleHtml %>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="preview === 'Tablet (landscape)'">
|
|
<div class="container">
|
|
<h3>Tablet (1024px width)</h3>
|
|
</div>
|
|
<div class="simulate-1024px-width pretend-inbox-wrapper-for-sample-email" >
|
|
<iframe class="preview-iframe" frameborder="0" border="0" cellspacing="0" :src="'/admin/email-preview/'+template+'?raw=true'">
|
|
<%- sampleHtml %>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-100" v-if="preview === 'Responsive'">
|
|
<div class="container">
|
|
<h3 class="mb-0">Responsive:</h3>
|
|
<p>Resize the browser to preview different widths</p>
|
|
</div>
|
|
<div class="pretend-inbox-wrapper-for-sample-email w-100 px-3 px-lg-5">
|
|
<iframe class="preview-iframe" frameborder="0" border="0" cellspacing="0" :src="'/admin/email-preview/'+template+'?raw=true'">
|
|
<%- sampleHtml %>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
|
|
|