webpacked the heck out of the build

This commit is contained in:
Danny Coates 2017-08-15 21:47:34 -07:00
parent 0ab8ddc894
commit 757ac14d1a
No known key found for this signature in database
GPG key ID: 4C442633C62E00CB
16 changed files with 838 additions and 97 deletions

43
webpack/download.hbs Normal file
View file

@ -0,0 +1,43 @@
<div id="download">
<div id="download-page-one">
<div class="title">
<span id="dl-file"
data-filename="{{filename}}"
data-size="{{sizeInBytes}}"
data-ttl="{{ttl}}"
data-l10n-id="downloadFileName"
data-l10n-args='{{filenameJson}}'></span>
<span id="dl-filesize"></span>
</div>
<div class="description" data-l10n-id="downloadMessage"></div>
<img src="../public/resources/illustration_download.svg" id="download-img" data-l10n-id="downloadAltText"/>
<div>
<button id="download-btn" class="btn" data-l10n-id="downloadButtonLabel"></button>
</div>
</div>
<div id="download-progress" hidden="true">
<div id="dl-title" class="title"></div>
<div class="description" data-l10n-id="downloadingPageMessage"></div>
<div class="progress-bar">
<svg id="progress" width="166" height="166" viewPort="0 0 166 166" version="1.1">
<circle r="73" cx="83" cy="83" fill="transparent"/>
<circle id="bar" r="73" cx="83" cy="83" fill="transparent" transform="rotate(-90 83 83)" stroke-dasharray="458.67" stroke-dashoffset="458.67"/>
</svg>
<div class="percentage">
<span class="percent-number"></span>
<span class="percent-sign">%</span>
</div>
</div>
<div class="upload">
<div class="progress-text">{{filename}}</div>
</div>
</div>
<div id="upload-error" hidden="true">
<div class="title" data-l10n-id="errorPageHeader"></div>
<img id="upload-error-img" data-l10n-id="errorAltText" src="../public/resources/illustration_error.svg"/>
</div>
<a class="send-new" data-state="completed" data-l10n-id="sendYourFilesLink" href="/"></a>
</div>

69
webpack/layout.hbs Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="defaultLanguage" content="en-US">
<meta name="availableLanguages" content="{{availableLanguages}}">
<meta property="og:title" content="{{title}}"/>
<meta name="twitter:title" content="{{title}}"/>
<meta name="description" content="{{description}}"/>
<meta property="og:description" content="{{description}}"/>
<meta name="twitter:description" content="{{description}}"/>
<meta name="twitter:card" content="summary"/>
<meta property="og:image" content="{{baseUrl}}${require('../public/resources/send-fb.jpg')}"/>
<meta name="twitter:image" content="{{baseUrl}}${require('../public/resources/send-twitter.jpg')}"/>
<meta property="og:url" content="{{baseUrl}}"/>
<title>{{title}}</title>
<link rel="stylesheet" type="text/css" href="${require('../frontend/src/main.css')}" />
{{#if fira}}
<link rel="stylesheet" type="text/css" href="https://code.cdn.mozilla.net/fonts/fira.css" />
{{/if}}
<link rel="icon" type="image/png" href="${require('../public/resources/favicon-32x32.png')}" sizes="32x32" />
<link rel="localization" href="/locales/{locale}/send.ftl">
<script src="/jsconfig.js"></script>
<script defer src="/l20n.min.js"></script>
</head>
<body>
<header class="header">
<div class="send-logo">
<a href="/">
<img src="../public/resources/send_logo.svg" alt="Send"/><h1 class="site-title">Send</h1>
</a>
<div class="site-subtitle">
<a href="https://testpilot.firefox.com">Firefox Test Pilot</a>
<div data-l10n-id="siteSubtitle">web experiment</div>
</div>
</div>
<a href="https://qsurvey.mozilla.com/s3/txp-firefox-send" rel="noreferrer noopener" class="feedback" target="_blank" data-l10n-id="siteFeedback">Feedback</a>
</header>
<div class="all">
<noscript>
<h2>Firefox Send requires JavaScript</h2>
<p><a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">Why does Firefox Send require JavaScript?</a></p>
<p>Please enable JavaScript and try again.</p>
</noscript>
{{{body}}}
</div>
<div class="footer">
<div class="legal-links">
<a href="https://www.mozilla.org" role="presentation"><img class="mozilla-logo" src="../public/resources/mozilla-logo.svg" alt="mozilla"/></a>
<a href="https://www.mozilla.org/about/legal" data-l10n-id="footerLinkLegal">Legal</a>
<a href="https://testpilot.firefox.com/about" data-l10n-id="footerLinkAbout">About Test Pilot</a>
<a href="/legal" data-l10n-id="footerLinkPrivacy">Privacy</a>
<a href="/legal" data-l10n-id="footerLinkTerms">Terms</a>
<a href="https://www.mozilla.org/privacy/websites/#cookies" data-l10n-id="footerLinkCookies">Cookies</a>
</div>
<div class="social-links">
<a href="https://github.com/mozilla/send" role="presentation"><img class="github" src="../public/resources/github-icon.svg" alt="github"/></a>
<a href="https://twitter.com/FxTestPilot" role="presentation"><img class="twitter" src="../public/resources/twitter-icon.svg" alt="twitter"/></a>
</div>
</div>
</body>
</html>

12
webpack/legal.hbs Normal file
View file

@ -0,0 +1,12 @@
<div id="legal">
<div class="title" data-l10n-id="legalHeader"></div>
<div class="description" data-l10n-id="legalNoticeTestPilot">
<a href="https://testpilot.firefox.com/terms"></a>
<a href="https://testpilot.firefox.com/privacy"></a>
<a href="https://testpilot.firefox.com/experiments/send"></a>
</div>
<div class="description" data-l10n-id="legalNoticeMozilla">
<a href="https://www.mozilla.org/privacy/websites/"></a>
<a href="https://www.mozilla.org/about/legal/terms/mozilla/"></a>
</div>
</div>

8
webpack/notfound.hbs Normal file
View file

@ -0,0 +1,8 @@
<div id="download">
<div class="title" data-l10n-id="expiredPageHeader"></div>
<div class="share-window">
<img src="../public/resources/illustration_expired.svg" id="expired-img" data-l10n-id="linkExpiredAlt"/>
</div>
<div class="expired-description" data-l10n-id="uploadPageExplainer"></div>
<a class="send-new" href="/" data-state="notfound" data-l10n-id="sendYourFilesLink"></a>
</div>

20
webpack/unsupported.hbs Normal file
View file

@ -0,0 +1,20 @@
<div id="unsupported-browser">
<div class="title" data-l10n-id="notSupportedHeader">Your browser is not supported.</div>
{{#if outdated}}
<div class="description" data-l10n-id="notSupportedOutdatedDetail">Unfortunately this version of Firefox does not support the web technology that powers Firefox Send. Youll need to update your browser.</div>
<a id="update-firefox" href="https://support.mozilla.org/kb/update-firefox-latest-version">
<img src="../public/resources/firefox_logo-only.svg" class="firefox-logo" alt="Firefox"/>
<div class="unsupported-button-text" data-l10n-id="updateFirefox">Update Firefox</div>
</a>
{{else}}
<div class="description" data-l10n-id="notSupportedDetail">Unfortunately this browser does not support the web technology that powers Firefox Send. Youll need to try another browser. We recommend Firefox!</div>
<div class="description"><a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported" data-l10n-id="notSupportedLink">Why is my browser not supported?</a></div>
<a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2">
<img src="../public/resources/firefox_logo-only.svg" class="firefox-logo" alt="Firefox"/>
<div class="unsupported-button-text">Firefox<br>
<span data-l10n-id="downloadFirefoxButtonSub">Free Download</span>
</div>
</a>
{{/if}}
<div class="unsupported-description" data-l10n-id="uploadPageExplainer">Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.</div>
</div>

75
webpack/upload.hbs Normal file
View file

@ -0,0 +1,75 @@
<div id="page-one" hidden>
<div class="title" data-l10n-id="uploadPageHeader"></div>
<div class="description">
<div data-l10n-id="uploadPageExplainer"></div>
<a href="https://testpilot.firefox.com/experiments/send" class="link" data-l10n-id="uploadPageLearnMore"></a>
</div>
<div class="upload-window" >
<div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="../public/resources/upload.svg"/></div>
<div id="upload-text" data-l10n-id="uploadPageDropMessage"></div>
<span id="file-size-msg"><em data-l10n-id="uploadPageSizeMessage"></em></span>
<form method="post" action="upload" enctype="multipart/form-data">
<label for="file-upload" id="browse"
data-l10n-id="uploadPageBrowseButton1" class="btn"></label>
<input id="file-upload" type="file" name="fileUploaded" />
</form>
</div>
<div id="file-list">
<table id="uploaded-files">
<thead>
<tr>
<!-- htmllint attr-bans="false" -->
<th id="uploaded-file" data-l10n-id="uploadedFile"></th>
<th id="copy-file-list" data-l10n-id="copyFileList"></th>
<th id="expiry-file-list" data-l10n-id="expiryFileList"></th>
<th id="delete-file-list" data-l10n-id="deleteFileList"></th>
<!-- htmllint tag-bans="$previous" -->
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div id="upload-progress" hidden="true">
<div class="title" id="upload-filename"></div>
<div class="description"></div>
<div class="progress-bar">
<svg id="progress" width="166" height="166" viewPort="0 0 166 166" version="1.1">
<circle r="73" cx="83" cy="83" fill="transparent"/>
<circle id="bar" r="73" cx="83" cy="83" fill="transparent" transform="rotate(-90 83 83)" stroke-dasharray="458.67" stroke-dashoffset="458.67"/>
</svg>
<div class="percentage">
<span class="percent-number">0</span>
<span class="percent-sign">%</span>
</div>
</div>
<div class="upload">
<div class="progress-text"></div>
<div id="cancel-upload"
data-l10n-id="uploadingPageCancel"></div>
</div>
</div>
<div id="share-link" hidden="true">
<div class="title" data-l10n-id="uploadSuccessTimingHeader"></div>
<div id="share-window">
<div id="copy-text"></div>
<div id="copy">
<input id="link" type="url" value="" readonly/>
<button id="copy-btn" class="btn" data-l10n-id="copyUrlFormButton"></button>
</div>
<button id="delete-file" class="btn" data-l10n-id="deleteFileButton"></button>
<a class="send-new" data-state="completed" data-l10n-id="sendAnotherFileLink" href="/"></a>
</div>
</div>
<div id="upload-error" hidden="true">
<div class="title" data-l10n-id="errorPageHeader"></div>
<div class="expired-description" data-l10n-id="errorPageMessage"></div>
<img id="upload-error-img" data-l10n-id="errorAltText" src="../public/resources/illustration_error.svg"/>
<a class="send-new" href="/" data-state="errored" data-l10n-id="sendAnotherFileLink"></a>
</div>