formatting update
This commit is contained in:
Danny Coates
parent
91a8c66e0c
commit
fbad1ab55a
18 changed files with 387 additions and 279 deletions
|
|
@ -1,5 +1,7 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function() {
|
||||
return html`<main class="main container"></main>`;
|
||||
return html`
|
||||
<main class="main container"></main>
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,20 +4,29 @@ const { copyToClipboard } = require('../utils');
|
|||
module.exports = function(name, url) {
|
||||
return function(state, emit, close) {
|
||||
return html`
|
||||
<div class="flex flex-col items-center text-center p-4 max-w-sm">
|
||||
<h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
|
||||
<p class="font-normal leading-normal text-grey-darker word-break-all">${state.translate(
|
||||
'copyUrlFormLabelWithName',
|
||||
{ filename: name }
|
||||
)}</p>
|
||||
<input type="text" id="share-url" class="w-full my-4 border rounded leading-loose h-12 px-2 py-1" value=${url} readonly="true"/>
|
||||
<button class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" onclick=${copy}>
|
||||
${state.translate('copyUrlFormButton')}
|
||||
</button>
|
||||
<a class="text-blue my-4 font-medium cursor-pointer" onclick=${close}>${state.translate(
|
||||
'okButton'
|
||||
)}</a>
|
||||
</div>`;
|
||||
<div class="flex flex-col items-center text-center p-4 max-w-sm">
|
||||
<h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
|
||||
<p class="font-normal leading-normal text-grey-darker word-break-all">
|
||||
${state.translate('copyUrlFormLabelWithName', { filename: name })}
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
id="share-url"
|
||||
class="w-full my-4 border rounded leading-loose h-12 px-2 py-1"
|
||||
value="${url}"
|
||||
readonly="true"
|
||||
/>
|
||||
<button
|
||||
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
|
||||
onclick="${copy}"
|
||||
>
|
||||
${state.translate('copyUrlFormButton')}
|
||||
</button>
|
||||
<a class="text-blue my-4 font-medium cursor-pointer" onclick="${close}"
|
||||
>${state.translate('okButton')}</a
|
||||
>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function copy(event) {
|
||||
event.stopPropagation();
|
||||
|
|
|
|||
|
|
@ -8,31 +8,39 @@ function password(state, emit) {
|
|||
const invalid = fileInfo.password === null;
|
||||
|
||||
const div = html`
|
||||
<div class="h-full flex flex-col items-center justify-center border border-grey-light bg-white py-8">
|
||||
<div
|
||||
class="h-full flex flex-col items-center justify-center border border-grey-light bg-white py-8"
|
||||
>
|
||||
<label
|
||||
id="password-error"
|
||||
class="${invalid ? '' : 'invisible'} text-red my-4"
|
||||
for="password-input">
|
||||
for="password-input"
|
||||
>
|
||||
${state.translate('passwordTryAgain')}
|
||||
</label>
|
||||
|
||||
<form class="w-5/6" onsubmit=${checkPassword} data-no-csrf>
|
||||
<input id="password-input"
|
||||
<form class="w-5/6" onsubmit="${checkPassword}" data-no-csrf>
|
||||
<input
|
||||
id="password-input"
|
||||
class="w-full border rounded ${
|
||||
invalid ? 'border-red' : 'border-grey'
|
||||
} leading-loose px-2 py-1"
|
||||
maxlength="32"
|
||||
autocomplete="off"
|
||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||
oninput=${inputChanged}
|
||||
type="password" />
|
||||
oninput="${inputChanged}"
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<input type="submit"
|
||||
<input
|
||||
type="submit"
|
||||
id="password-btn"
|
||||
class="hidden"
|
||||
value="${state.translate('unlockInputLabel')}"/>
|
||||
value="${state.translate('unlockInputLabel')}"
|
||||
/>
|
||||
</form>
|
||||
</div>`;
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (!(div instanceof String)) {
|
||||
setTimeout(() => document.getElementById('password-input').focus());
|
||||
|
|
@ -87,16 +95,20 @@ module.exports = function(state, emit) {
|
|||
break;
|
||||
case 'complete':
|
||||
content = html`
|
||||
<div id="download-complete" class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2">
|
||||
<h1 class="text-center font-bold my-4 text-2xl">${state.translate(
|
||||
'downloadFinish'
|
||||
)}</h1>
|
||||
<p class="mb-4">
|
||||
<a href="/" class="text-blue font-medium">${state.translate(
|
||||
'sendYourFilesLink'
|
||||
)}</a>
|
||||
</p>
|
||||
</div>`;
|
||||
<div
|
||||
id="download-complete"
|
||||
class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2"
|
||||
>
|
||||
<h1 class="text-center font-bold my-4 text-2xl">
|
||||
${state.translate('downloadFinish')}
|
||||
</h1>
|
||||
<p class="mb-4">
|
||||
<a href="/" class="text-blue font-medium"
|
||||
>${state.translate('sendYourFilesLink')}</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
break;
|
||||
default:
|
||||
content = archiveTile.preview(state, emit);
|
||||
|
|
@ -105,10 +117,11 @@ module.exports = function(state, emit) {
|
|||
content = password(state, emit);
|
||||
}
|
||||
return html`
|
||||
<main class="main container">
|
||||
<section class="relative h-full w-full p-6 md:flex md:flex-row">
|
||||
<div class="md:mr-6 md:w-1/2">${content}</div>
|
||||
<div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div>
|
||||
</section>
|
||||
</main>`;
|
||||
<main class="main container">
|
||||
<section class="relative h-full w-full p-6 md:flex md:flex-row">
|
||||
<div class="md:mr-6 md:w-1/2">${content}</div>
|
||||
<div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div>
|
||||
</section>
|
||||
</main>
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,18 +3,21 @@ const assets = require('../../common/assets');
|
|||
|
||||
module.exports = function(state) {
|
||||
return html`
|
||||
<main class="main container">
|
||||
<div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
|
||||
<h1 class="text-2xl text-center">${state.translate(
|
||||
'errorPageHeader'
|
||||
)}</h1>
|
||||
<img class="my-16" src="${assets.get('illustration_error.svg')}"/>
|
||||
<p class="max-w-md leading-normal">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</p>
|
||||
<a class="text-blue mt-10 font-medium" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
</div>
|
||||
</main>`;
|
||||
<main class="main container">
|
||||
<div
|
||||
class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
|
||||
>
|
||||
<h1 class="text-2xl text-center">
|
||||
${state.translate('errorPageHeader')}
|
||||
</h1>
|
||||
<img class="my-16" src="${assets.get('illustration_error.svg')}" />
|
||||
<p class="max-w-md leading-normal">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</p>
|
||||
<a class="text-blue mt-10 font-medium" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,15 +7,18 @@ const signupDialog = require('./signupDialog');
|
|||
|
||||
module.exports = function(state, emit) {
|
||||
const el = html`
|
||||
<div class="">
|
||||
${raw(
|
||||
state.translate('frontPageExpireInfo', {
|
||||
downloadCount:
|
||||
'<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>',
|
||||
timespan: '<select id="timespan"></select>'
|
||||
})
|
||||
)}
|
||||
</div>`;
|
||||
<div class="">
|
||||
${
|
||||
raw(
|
||||
state.translate('frontPageExpireInfo', {
|
||||
downloadCount:
|
||||
'<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>',
|
||||
timespan: '<select id="timespan"></select>'
|
||||
})
|
||||
)
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
if (el.__encoded) {
|
||||
// we're rendering on the server
|
||||
return el;
|
||||
|
|
|
|||
|
|
@ -3,24 +3,31 @@ const raw = require('choo/html/raw');
|
|||
|
||||
module.exports = function(state) {
|
||||
return html`
|
||||
<main class="main container">
|
||||
<div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
|
||||
<h1 class="text-2xl text-center">${state.translate('legalHeader')}</h1>
|
||||
${raw(
|
||||
replaceLinks(state.translate('legalNoticeTestPilot'), [
|
||||
'https://testpilot.firefox.com/terms',
|
||||
'https://testpilot.firefox.com/privacy',
|
||||
'https://testpilot.firefox.com/experiments/send'
|
||||
])
|
||||
)}
|
||||
${raw(
|
||||
replaceLinks(state.translate('legalNoticeMozilla'), [
|
||||
'https://www.mozilla.org/privacy/websites/',
|
||||
'https://www.mozilla.org/about/legal/terms/mozilla/'
|
||||
])
|
||||
)}
|
||||
</div>
|
||||
</main>`;
|
||||
<main class="main container">
|
||||
<div
|
||||
class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
|
||||
>
|
||||
<h1 class="text-2xl text-center">${state.translate('legalHeader')}</h1>
|
||||
${
|
||||
raw(
|
||||
replaceLinks(state.translate('legalNoticeTestPilot'), [
|
||||
'https://testpilot.firefox.com/terms',
|
||||
'https://testpilot.firefox.com/privacy',
|
||||
'https://testpilot.firefox.com/experiments/send'
|
||||
])
|
||||
)
|
||||
}
|
||||
${
|
||||
raw(
|
||||
replaceLinks(state.translate('legalNoticeMozilla'), [
|
||||
'https://www.mozilla.org/privacy/websites/',
|
||||
'https://www.mozilla.org/about/legal/terms/mozilla/'
|
||||
])
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</main>
|
||||
`;
|
||||
};
|
||||
|
||||
function replaceLinks(str, urls) {
|
||||
|
|
|
|||
|
|
@ -2,13 +2,20 @@ const html = require('choo/html');
|
|||
|
||||
module.exports = function(state, emit) {
|
||||
return html`
|
||||
<div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8" onclick=${close}>
|
||||
<div class="h-full max-h-screen absolute pin-t flex items-center">
|
||||
<div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
|
||||
${state.modal(state, emit, close)}
|
||||
<div
|
||||
class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8"
|
||||
onclick="${close}"
|
||||
>
|
||||
<div class="h-full max-h-screen absolute pin-t flex items-center">
|
||||
<div
|
||||
class="shadow-cloud bg-white"
|
||||
onclick="${e => e.stopPropagation()}"
|
||||
>
|
||||
${state.modal(state, emit, close)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
`;
|
||||
|
||||
function close(event) {
|
||||
if (event) {
|
||||
|
|
|
|||
|
|
@ -3,20 +3,25 @@ const assets = require('../../common/assets');
|
|||
|
||||
module.exports = function(state) {
|
||||
return html`
|
||||
<main class="main container">
|
||||
<div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
|
||||
<h1 class="text-pink-dark text-2xl text-center">${state.translate(
|
||||
'expiredPageHeader'
|
||||
)}</h1>
|
||||
<img class="my-16" src="${assets.get(
|
||||
'illustration_expired.svg'
|
||||
)}" id="expired-img">
|
||||
<p class="max-w-md leading-normal">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</p>
|
||||
<a class="text-blue mt-10 font-medium" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
</div>
|
||||
</main>`;
|
||||
<main class="main container">
|
||||
<div
|
||||
class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
|
||||
>
|
||||
<h1 class="text-pink-dark text-2xl text-center">
|
||||
${state.translate('expiredPageHeader')}
|
||||
</h1>
|
||||
<img
|
||||
class="my-16"
|
||||
src="${assets.get('illustration_expired.svg')}"
|
||||
id="expired-img"
|
||||
/>
|
||||
<p class="max-w-md leading-normal">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</p>
|
||||
<a class="text-blue mt-10 font-medium" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,11 +3,15 @@ const html = require('choo/html');
|
|||
module.exports = function(message) {
|
||||
return function(state, emit, close) {
|
||||
return html`
|
||||
<div class="flex flex-col max-w-xs p-4">
|
||||
<div class="text-center m-8 leading-normal">${message}</div>
|
||||
<button class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" onclick=${close}>${state.translate(
|
||||
'okButton'
|
||||
)}</button>
|
||||
</div>`;
|
||||
<div class="flex flex-col max-w-xs p-4">
|
||||
<div class="text-center m-8 leading-normal">${message}</div>
|
||||
<button
|
||||
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
|
||||
onclick="${close}"
|
||||
>
|
||||
${state.translate('okButton')}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,14 +4,22 @@ module.exports = function(selected, options, translate, changed) {
|
|||
let x = selected;
|
||||
|
||||
return html`
|
||||
<select class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 my-2 h-8" onchange=${choose}>
|
||||
${options.map(
|
||||
i =>
|
||||
html`<option value="${i}" ${
|
||||
i === selected ? 'selected' : ''
|
||||
}>${translate(i)}</option>`
|
||||
)}
|
||||
</select>`;
|
||||
<select
|
||||
class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 my-2 h-8"
|
||||
onchange="${choose}"
|
||||
>
|
||||
${
|
||||
options.map(
|
||||
i =>
|
||||
html`
|
||||
<option value="${i}" ${i === selected ? 'selected' : ''}
|
||||
>${translate(i)}</option
|
||||
>
|
||||
`
|
||||
)
|
||||
}
|
||||
</select>
|
||||
`;
|
||||
|
||||
function choose(event) {
|
||||
const target = event.target;
|
||||
|
|
|
|||
|
|
@ -11,41 +11,49 @@ module.exports = function(state) {
|
|||
strings = unsupportedStrings(state);
|
||||
why = html`
|
||||
<a
|
||||
class="text-blue" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported">
|
||||
${state.translate('notSupportedLink')}
|
||||
</a>`;
|
||||
class="text-blue"
|
||||
href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported"
|
||||
>
|
||||
${state.translate('notSupportedLink')}
|
||||
</a>
|
||||
`;
|
||||
url =
|
||||
'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com';
|
||||
buttonAction = html`
|
||||
<p class="ml-4 font-bold">
|
||||
Firefox<br><span class="font-light text-base">${strings.button}</span>
|
||||
</p>`;
|
||||
Firefox<br /><span class="font-light text-base">${strings.button}</span>
|
||||
</p>
|
||||
`;
|
||||
} else {
|
||||
strings = outdatedStrings(state);
|
||||
url = 'https://support.mozilla.org/kb/update-firefox-latest-version';
|
||||
buttonAction = html`
|
||||
<p class="ml-4">
|
||||
${strings.button}
|
||||
</p>`;
|
||||
<p class="ml-4">${strings.button}</p>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<main class="main container">
|
||||
<div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
|
||||
<h1 class="text-center text-2xl">${strings.header}</h1>
|
||||
<p class="my-10 max-w-md leading-normal">
|
||||
${strings.description}
|
||||
</p>
|
||||
${why}
|
||||
<a href="${url}" class="border border-green-light rounded bg-green hover\:bg-green-dark focus\:bg-green-darker flex items-center justify-center text-2xl text-white mt-10 py-4 px-6">
|
||||
<img
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
class="w-10"
|
||||
alt="Firefox"/>
|
||||
${buttonAction}
|
||||
</a>
|
||||
<div
|
||||
class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
|
||||
>
|
||||
<h1 class="text-center text-2xl">${strings.header}</h1>
|
||||
<p class="my-10 max-w-md leading-normal">${strings.description}</p>
|
||||
${why}
|
||||
<a
|
||||
href="${url}"
|
||||
class="border border-green-light rounded bg-green hover\:bg-green-dark focus\:bg-green-darker flex items-center justify-center text-2xl text-white mt-10 py-4 px-6"
|
||||
>
|
||||
<img
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
class="w-10"
|
||||
alt="Firefox"
|
||||
/>
|
||||
${buttonAction}
|
||||
</a>
|
||||
</div>
|
||||
</main>`;
|
||||
</main>
|
||||
`;
|
||||
};
|
||||
|
||||
function outdatedStrings(state) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue