formatting update
This commit is contained in:
parent
91a8c66e0c
commit
fbad1ab55a
|
@ -1,10 +1,12 @@
|
||||||
const html = require('choo/html');
|
const html = require('choo/html');
|
||||||
|
|
||||||
export default function error(_state, _emit) {
|
export default function error(_state, _emit) {
|
||||||
return html`<body>
|
return html`
|
||||||
|
<body>
|
||||||
<div id="white">
|
<div id="white">
|
||||||
<h1>Error</h1>
|
<h1>Error</h1>
|
||||||
<p>Sorry, an error occurred.</p>
|
<p>Sorry, an error occurred.</p>
|
||||||
</div>
|
</div>
|
||||||
</body>`;
|
</body>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,21 +16,19 @@ export default function preferences(state, emit) {
|
||||||
emit('pushState', '/');
|
emit('pushState', '/');
|
||||||
}
|
}
|
||||||
|
|
||||||
return html`<body>
|
return html`
|
||||||
|
<body>
|
||||||
<div id="white">
|
<div id="white">
|
||||||
<div id="preferences">
|
<div id="preferences">
|
||||||
<a onclick=${clickDone} href="#">
|
<a onclick="${clickDone}" href="#"> done </a>
|
||||||
done
|
|
||||||
</a>
|
|
||||||
<dl>
|
<dl>
|
||||||
<dt>
|
<dt>wss url:</dt>
|
||||||
wss url:
|
|
||||||
</dt>
|
|
||||||
<dd>
|
<dd>
|
||||||
<input type="text" onchange=${updateWssUrl} value=${wssURL} />
|
<input type="text" onchange="${updateWssUrl}" value="${wssURL}" />
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>`;
|
</body>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,8 +26,12 @@ export default function uploadComplete(state, emit) {
|
||||||
emit('upload', {});
|
emit('upload', {});
|
||||||
}
|
}
|
||||||
|
|
||||||
const input = html`<input id="url" value=${file.url} readonly="true" />`;
|
const input = html`
|
||||||
const copyText = html`<span>Copy link</span>`;
|
<input id="url" value="${file.url}" readonly="true" />
|
||||||
|
`;
|
||||||
|
const copyText = html`
|
||||||
|
<span>Copy link</span>
|
||||||
|
`;
|
||||||
return html`<body>
|
return html`<body>
|
||||||
<div id="white">
|
<div id="white">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
|
@ -12,13 +12,15 @@ export default function progressBar(state, emit) {
|
||||||
}
|
}
|
||||||
emit('pushState', '/');
|
emit('pushState', '/');
|
||||||
}
|
}
|
||||||
return html`<body>
|
return html`
|
||||||
|
<body>
|
||||||
<div id="white">
|
<div id="white">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div>${percent}%</div>
|
<div>${percent}%</div>
|
||||||
<span class="progress" style="width: ${percent}%">.</span>
|
<span class="progress" style="width: ${percent}%">.</span>
|
||||||
<div class="cancel" onclick=${onclick}>CANCEL</div>
|
<div class="cancel" onclick="${onclick}">CANCEL</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>`;
|
</body>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
const html = require('choo/html');
|
const html = require('choo/html');
|
||||||
|
|
||||||
module.exports = function() {
|
module.exports = function() {
|
||||||
return html`<main class="main container"></main>`;
|
return html`
|
||||||
|
<main class="main container"></main>
|
||||||
|
`;
|
||||||
};
|
};
|
||||||
|
|
|
@ -6,18 +6,27 @@ module.exports = function(name, url) {
|
||||||
return html`
|
return html`
|
||||||
<div class="flex flex-col items-center text-center p-4 max-w-sm">
|
<div class="flex flex-col items-center text-center p-4 max-w-sm">
|
||||||
<h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
|
<h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
|
||||||
<p class="font-normal leading-normal text-grey-darker word-break-all">${state.translate(
|
<p class="font-normal leading-normal text-grey-darker word-break-all">
|
||||||
'copyUrlFormLabelWithName',
|
${state.translate('copyUrlFormLabelWithName', { filename: name })}
|
||||||
{ filename: name }
|
</p>
|
||||||
)}</p>
|
<input
|
||||||
<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"/>
|
type="text"
|
||||||
<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}>
|
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')}
|
${state.translate('copyUrlFormButton')}
|
||||||
</button>
|
</button>
|
||||||
<a class="text-blue my-4 font-medium cursor-pointer" onclick=${close}>${state.translate(
|
<a class="text-blue my-4 font-medium cursor-pointer" onclick="${close}"
|
||||||
'okButton'
|
>${state.translate('okButton')}</a
|
||||||
)}</a>
|
>
|
||||||
</div>`;
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
function copy(event) {
|
function copy(event) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
|
@ -8,31 +8,39 @@ function password(state, emit) {
|
||||||
const invalid = fileInfo.password === null;
|
const invalid = fileInfo.password === null;
|
||||||
|
|
||||||
const div = html`
|
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
|
<label
|
||||||
id="password-error"
|
id="password-error"
|
||||||
class="${invalid ? '' : 'invisible'} text-red my-4"
|
class="${invalid ? '' : 'invisible'} text-red my-4"
|
||||||
for="password-input">
|
for="password-input"
|
||||||
|
>
|
||||||
${state.translate('passwordTryAgain')}
|
${state.translate('passwordTryAgain')}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<form class="w-5/6" onsubmit=${checkPassword} data-no-csrf>
|
<form class="w-5/6" onsubmit="${checkPassword}" data-no-csrf>
|
||||||
<input id="password-input"
|
<input
|
||||||
|
id="password-input"
|
||||||
class="w-full border rounded ${
|
class="w-full border rounded ${
|
||||||
invalid ? 'border-red' : 'border-grey'
|
invalid ? 'border-red' : 'border-grey'
|
||||||
} leading-loose px-2 py-1"
|
} leading-loose px-2 py-1"
|
||||||
maxlength="32"
|
maxlength="32"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||||
oninput=${inputChanged}
|
oninput="${inputChanged}"
|
||||||
type="password" />
|
type="password"
|
||||||
|
/>
|
||||||
|
|
||||||
<input type="submit"
|
<input
|
||||||
|
type="submit"
|
||||||
id="password-btn"
|
id="password-btn"
|
||||||
class="hidden"
|
class="hidden"
|
||||||
value="${state.translate('unlockInputLabel')}"/>
|
value="${state.translate('unlockInputLabel')}"
|
||||||
|
/>
|
||||||
</form>
|
</form>
|
||||||
</div>`;
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
if (!(div instanceof String)) {
|
if (!(div instanceof String)) {
|
||||||
setTimeout(() => document.getElementById('password-input').focus());
|
setTimeout(() => document.getElementById('password-input').focus());
|
||||||
|
@ -87,16 +95,20 @@ module.exports = function(state, emit) {
|
||||||
break;
|
break;
|
||||||
case 'complete':
|
case 'complete':
|
||||||
content = html`
|
content = html`
|
||||||
<div id="download-complete" class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2">
|
<div
|
||||||
<h1 class="text-center font-bold my-4 text-2xl">${state.translate(
|
id="download-complete"
|
||||||
'downloadFinish'
|
class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2"
|
||||||
)}</h1>
|
>
|
||||||
|
<h1 class="text-center font-bold my-4 text-2xl">
|
||||||
|
${state.translate('downloadFinish')}
|
||||||
|
</h1>
|
||||||
<p class="mb-4">
|
<p class="mb-4">
|
||||||
<a href="/" class="text-blue font-medium">${state.translate(
|
<a href="/" class="text-blue font-medium"
|
||||||
'sendYourFilesLink'
|
>${state.translate('sendYourFilesLink')}</a
|
||||||
)}</a>
|
>
|
||||||
</p>
|
</p>
|
||||||
</div>`;
|
</div>
|
||||||
|
`;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
content = archiveTile.preview(state, emit);
|
content = archiveTile.preview(state, emit);
|
||||||
|
@ -110,5 +122,6 @@ module.exports = function(state, emit) {
|
||||||
<div class="md:mr-6 md:w-1/2">${content}</div>
|
<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>
|
<div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div>
|
||||||
</section>
|
</section>
|
||||||
</main>`;
|
</main>
|
||||||
|
`;
|
||||||
};
|
};
|
||||||
|
|
|
@ -4,10 +4,12 @@ const assets = require('../../common/assets');
|
||||||
module.exports = function(state) {
|
module.exports = function(state) {
|
||||||
return html`
|
return html`
|
||||||
<main class="main container">
|
<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">
|
<div
|
||||||
<h1 class="text-2xl text-center">${state.translate(
|
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"
|
||||||
'errorPageHeader'
|
>
|
||||||
)}</h1>
|
<h1 class="text-2xl text-center">
|
||||||
|
${state.translate('errorPageHeader')}
|
||||||
|
</h1>
|
||||||
<img class="my-16" src="${assets.get('illustration_error.svg')}" />
|
<img class="my-16" src="${assets.get('illustration_error.svg')}" />
|
||||||
<p class="max-w-md leading-normal">
|
<p class="max-w-md leading-normal">
|
||||||
${state.translate('uploadPageExplainer')}
|
${state.translate('uploadPageExplainer')}
|
||||||
|
@ -16,5 +18,6 @@ module.exports = function(state) {
|
||||||
${state.translate('sendYourFilesLink')}
|
${state.translate('sendYourFilesLink')}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</main>`;
|
</main>
|
||||||
|
`;
|
||||||
};
|
};
|
||||||
|
|
|
@ -8,14 +8,17 @@ const signupDialog = require('./signupDialog');
|
||||||
module.exports = function(state, emit) {
|
module.exports = function(state, emit) {
|
||||||
const el = html`
|
const el = html`
|
||||||
<div class="">
|
<div class="">
|
||||||
${raw(
|
${
|
||||||
|
raw(
|
||||||
state.translate('frontPageExpireInfo', {
|
state.translate('frontPageExpireInfo', {
|
||||||
downloadCount:
|
downloadCount:
|
||||||
'<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>',
|
'<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>',
|
||||||
timespan: '<select id="timespan"></select>'
|
timespan: '<select id="timespan"></select>'
|
||||||
})
|
})
|
||||||
)}
|
)
|
||||||
</div>`;
|
}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
if (el.__encoded) {
|
if (el.__encoded) {
|
||||||
// we're rendering on the server
|
// we're rendering on the server
|
||||||
return el;
|
return el;
|
||||||
|
|
|
@ -4,23 +4,30 @@ const raw = require('choo/html/raw');
|
||||||
module.exports = function(state) {
|
module.exports = function(state) {
|
||||||
return html`
|
return html`
|
||||||
<main class="main container">
|
<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">
|
<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>
|
<h1 class="text-2xl text-center">${state.translate('legalHeader')}</h1>
|
||||||
${raw(
|
${
|
||||||
|
raw(
|
||||||
replaceLinks(state.translate('legalNoticeTestPilot'), [
|
replaceLinks(state.translate('legalNoticeTestPilot'), [
|
||||||
'https://testpilot.firefox.com/terms',
|
'https://testpilot.firefox.com/terms',
|
||||||
'https://testpilot.firefox.com/privacy',
|
'https://testpilot.firefox.com/privacy',
|
||||||
'https://testpilot.firefox.com/experiments/send'
|
'https://testpilot.firefox.com/experiments/send'
|
||||||
])
|
])
|
||||||
)}
|
)
|
||||||
${raw(
|
}
|
||||||
|
${
|
||||||
|
raw(
|
||||||
replaceLinks(state.translate('legalNoticeMozilla'), [
|
replaceLinks(state.translate('legalNoticeMozilla'), [
|
||||||
'https://www.mozilla.org/privacy/websites/',
|
'https://www.mozilla.org/privacy/websites/',
|
||||||
'https://www.mozilla.org/about/legal/terms/mozilla/'
|
'https://www.mozilla.org/about/legal/terms/mozilla/'
|
||||||
])
|
])
|
||||||
)}
|
)
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</main>`;
|
</main>
|
||||||
|
`;
|
||||||
};
|
};
|
||||||
|
|
||||||
function replaceLinks(str, urls) {
|
function replaceLinks(str, urls) {
|
||||||
|
|
|
@ -2,13 +2,20 @@ const html = require('choo/html');
|
||||||
|
|
||||||
module.exports = function(state, emit) {
|
module.exports = function(state, emit) {
|
||||||
return html`
|
return html`
|
||||||
<div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8" onclick=${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="h-full max-h-screen absolute pin-t flex items-center">
|
||||||
<div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
|
<div
|
||||||
|
class="shadow-cloud bg-white"
|
||||||
|
onclick="${e => e.stopPropagation()}"
|
||||||
|
>
|
||||||
${state.modal(state, emit, close)}
|
${state.modal(state, emit, close)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
function close(event) {
|
function close(event) {
|
||||||
if (event) {
|
if (event) {
|
||||||
|
|
|
@ -4,13 +4,17 @@ const assets = require('../../common/assets');
|
||||||
module.exports = function(state) {
|
module.exports = function(state) {
|
||||||
return html`
|
return html`
|
||||||
<main class="main container">
|
<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">
|
<div
|
||||||
<h1 class="text-pink-dark text-2xl text-center">${state.translate(
|
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"
|
||||||
'expiredPageHeader'
|
>
|
||||||
)}</h1>
|
<h1 class="text-pink-dark text-2xl text-center">
|
||||||
<img class="my-16" src="${assets.get(
|
${state.translate('expiredPageHeader')}
|
||||||
'illustration_expired.svg'
|
</h1>
|
||||||
)}" id="expired-img">
|
<img
|
||||||
|
class="my-16"
|
||||||
|
src="${assets.get('illustration_expired.svg')}"
|
||||||
|
id="expired-img"
|
||||||
|
/>
|
||||||
<p class="max-w-md leading-normal">
|
<p class="max-w-md leading-normal">
|
||||||
${state.translate('uploadPageExplainer')}
|
${state.translate('uploadPageExplainer')}
|
||||||
</p>
|
</p>
|
||||||
|
@ -18,5 +22,6 @@ module.exports = function(state) {
|
||||||
${state.translate('sendYourFilesLink')}
|
${state.translate('sendYourFilesLink')}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</main>`;
|
</main>
|
||||||
|
`;
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,9 +5,13 @@ module.exports = function(message) {
|
||||||
return html`
|
return html`
|
||||||
<div class="flex flex-col max-w-xs p-4">
|
<div class="flex flex-col max-w-xs p-4">
|
||||||
<div class="text-center m-8 leading-normal">${message}</div>
|
<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(
|
<button
|
||||||
'okButton'
|
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"
|
||||||
)}</button>
|
onclick="${close}"
|
||||||
</div>`;
|
>
|
||||||
|
${state.translate('okButton')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -4,14 +4,22 @@ module.exports = function(selected, options, translate, changed) {
|
||||||
let x = selected;
|
let x = selected;
|
||||||
|
|
||||||
return html`
|
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}>
|
<select
|
||||||
${options.map(
|
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 =>
|
i =>
|
||||||
html`<option value="${i}" ${
|
html`
|
||||||
i === selected ? 'selected' : ''
|
<option value="${i}" ${i === selected ? 'selected' : ''}
|
||||||
}>${translate(i)}</option>`
|
>${translate(i)}</option
|
||||||
)}
|
>
|
||||||
</select>`;
|
`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
`;
|
||||||
|
|
||||||
function choose(event) {
|
function choose(event) {
|
||||||
const target = event.target;
|
const target = event.target;
|
||||||
|
|
|
@ -11,41 +11,49 @@ module.exports = function(state) {
|
||||||
strings = unsupportedStrings(state);
|
strings = unsupportedStrings(state);
|
||||||
why = html`
|
why = html`
|
||||||
<a
|
<a
|
||||||
class="text-blue" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported">
|
class="text-blue"
|
||||||
|
href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported"
|
||||||
|
>
|
||||||
${state.translate('notSupportedLink')}
|
${state.translate('notSupportedLink')}
|
||||||
</a>`;
|
</a>
|
||||||
|
`;
|
||||||
url =
|
url =
|
||||||
'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com';
|
'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com';
|
||||||
buttonAction = html`
|
buttonAction = html`
|
||||||
<p class="ml-4 font-bold">
|
<p class="ml-4 font-bold">
|
||||||
Firefox<br><span class="font-light text-base">${strings.button}</span>
|
Firefox<br /><span class="font-light text-base">${strings.button}</span>
|
||||||
</p>`;
|
</p>
|
||||||
|
`;
|
||||||
} else {
|
} else {
|
||||||
strings = outdatedStrings(state);
|
strings = outdatedStrings(state);
|
||||||
url = 'https://support.mozilla.org/kb/update-firefox-latest-version';
|
url = 'https://support.mozilla.org/kb/update-firefox-latest-version';
|
||||||
buttonAction = html`
|
buttonAction = html`
|
||||||
<p class="ml-4">
|
<p class="ml-4">${strings.button}</p>
|
||||||
${strings.button}
|
`;
|
||||||
</p>`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<main class="main container">
|
<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">
|
<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>
|
<h1 class="text-center text-2xl">${strings.header}</h1>
|
||||||
<p class="my-10 max-w-md leading-normal">
|
<p class="my-10 max-w-md leading-normal">${strings.description}</p>
|
||||||
${strings.description}
|
|
||||||
</p>
|
|
||||||
${why}
|
${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">
|
<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
|
<img
|
||||||
src="${assets.get('firefox_logo-only.svg')}"
|
src="${assets.get('firefox_logo-only.svg')}"
|
||||||
class="w-10"
|
class="w-10"
|
||||||
alt="Firefox"/>
|
alt="Firefox"
|
||||||
|
/>
|
||||||
${buttonAction}
|
${buttonAction}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</main>`;
|
</main>
|
||||||
|
`;
|
||||||
};
|
};
|
||||||
|
|
||||||
function outdatedStrings(state) {
|
function outdatedStrings(state) {
|
||||||
|
|
|
@ -7,8 +7,11 @@ module.exports = function(state) {
|
||||||
? html`
|
? html`
|
||||||
<script nonce="${state.cspNonce}">
|
<script nonce="${state.cspNonce}">
|
||||||
const downloadMetadata = ${
|
const downloadMetadata = ${
|
||||||
state.downloadMetadata ? raw(JSON.stringify(state.downloadMetadata)) : '{}'
|
state.downloadMetadata
|
||||||
|
? raw(JSON.stringify(state.downloadMetadata))
|
||||||
|
: '{}'
|
||||||
};
|
};
|
||||||
</script>`
|
</script>
|
||||||
|
`
|
||||||
: '';
|
: '';
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,15 +5,21 @@ const initScript = require('./initScript');
|
||||||
|
|
||||||
module.exports = function(state, body = '') {
|
module.exports = function(state, body = '') {
|
||||||
const firaTag = state.fira
|
const firaTag = state.fira
|
||||||
? html`<link rel="stylesheet" type="text/css" href="https://code.cdn.mozilla.net/fonts/fira.css" />`
|
? html`
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
href="https://code.cdn.mozilla.net/fonts/fira.css"
|
||||||
|
/>
|
||||||
|
`
|
||||||
: '';
|
: '';
|
||||||
return html`
|
return html`
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="${state.locale}">
|
<html lang="${state.locale}">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
<meta property="og:title" content="${state.title}" />
|
<meta property="og:title" content="${state.title}" />
|
||||||
<meta name="twitter:title" content="${state.title}" />
|
<meta name="twitter:title" content="${state.title}" />
|
||||||
|
@ -21,50 +27,72 @@ module.exports = function(state, body = '') {
|
||||||
<meta property="og:description" content="${state.description}" />
|
<meta property="og:description" content="${state.description}" />
|
||||||
<meta name="twitter:description" content="${state.description}" />
|
<meta name="twitter:description" content="${state.description}" />
|
||||||
<meta name="twitter:card" content="summary" />
|
<meta name="twitter:card" content="summary" />
|
||||||
<meta property="og:image" content="${state.baseUrl}${assets.get(
|
<meta
|
||||||
'send-fb.jpg'
|
property="og:image"
|
||||||
)}"/>
|
content="${state.baseUrl}${assets.get('send-fb.jpg')}"
|
||||||
<meta name="twitter:image" content="${state.baseUrl}${assets.get(
|
/>
|
||||||
'send-twitter.jpg'
|
<meta
|
||||||
)}"/>
|
name="twitter:image"
|
||||||
|
content="${state.baseUrl}${assets.get('send-twitter.jpg')}"
|
||||||
|
/>
|
||||||
<meta property="og:url" content="${state.baseUrl}" />
|
<meta property="og:url" content="${state.baseUrl}" />
|
||||||
|
|
||||||
<title>${state.title}</title>
|
<title>${state.title}</title>
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="${assets.get('app.css')}" />
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
href="${assets.get('app.css')}"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- generic favicons -->
|
<!-- generic favicons -->
|
||||||
<link rel="icon" href="${assets.get('favicon-32.png')}" sizes="32x32">
|
<link rel="icon" href="${assets.get('favicon-32.png')}" sizes="32x32" />
|
||||||
<link rel="icon" href="${assets.get('favicon-96.png')}" sizes="96x96">
|
<link rel="icon" href="${assets.get('favicon-96.png')}" sizes="96x96" />
|
||||||
<link rel="icon" href="${assets.get('favicon-128.png')}" sizes="128x128">
|
<link
|
||||||
<link rel="icon" href="${assets.get('favicon-228.png')}" sizes="228x228">
|
rel="icon"
|
||||||
|
href="${assets.get('favicon-128.png')}"
|
||||||
|
sizes="128x128"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
href="${assets.get('favicon-228.png')}"
|
||||||
|
sizes="228x228"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Android -->
|
<!-- Android -->
|
||||||
<link rel="shortcut icon" href="${assets.get(
|
<link
|
||||||
'favicon-196.png'
|
rel="shortcut icon"
|
||||||
)}" sizes="196x196">
|
href="${assets.get('favicon-196.png')}"
|
||||||
|
sizes="196x196"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- iOS -->
|
<!-- iOS -->
|
||||||
<link rel="apple-touch-icon" href="${assets.get(
|
<link
|
||||||
'favicon-120.png'
|
rel="apple-touch-icon"
|
||||||
)}" sizes="120x120">
|
href="${assets.get('favicon-120.png')}"
|
||||||
<link rel="apple-touch-icon" href="${assets.get(
|
sizes="120x120"
|
||||||
'favicon-152.png'
|
/>
|
||||||
)}" sizes="152x152">
|
<link
|
||||||
<link rel="apple-touch-icon" href="${assets.get(
|
rel="apple-touch-icon"
|
||||||
'favicon-180.png'
|
href="${assets.get('favicon-152.png')}"
|
||||||
)}" sizes="180x180">
|
sizes="152x152"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
href="${assets.get('favicon-180.png')}"
|
||||||
|
sizes="180x180"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Windows 8 IE 10 -->
|
<!-- Windows 8 IE 10 -->
|
||||||
<meta name="msapplication-TileColor" content="#FFFFFF">
|
<meta name="msapplication-TileColor" content="#FFFFFF" />
|
||||||
<meta name="msapplication-TileImage" content="${assets.get(
|
<meta
|
||||||
'favicon-144.png'
|
name="msapplication-TileImage"
|
||||||
)}">
|
content="${assets.get('favicon-144.png')}"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Windows 8.1 + IE11 and above -->
|
<!-- Windows 8.1 + IE11 and above -->
|
||||||
<meta name="msapplication-config" content="/browserconfig.xml" />
|
<meta name="msapplication-config" content="/browserconfig.xml" />
|
||||||
|
|
||||||
|
|
||||||
${firaTag}
|
${firaTag}
|
||||||
<script defer src="/jsconfig.js"></script>
|
<script defer src="/jsconfig.js"></script>
|
||||||
<!-- <script defer src="${assets.get('runtime.js')}"></script> -->
|
<!-- <script defer src="${assets.get('runtime.js')}"></script> -->
|
||||||
|
@ -77,15 +105,17 @@ module.exports = function(state, body = '') {
|
||||||
<div class="noscript">
|
<div class="noscript">
|
||||||
<h2>${state.translate('javascriptRequired')}</h2>
|
<h2>${state.translate('javascriptRequired')}</h2>
|
||||||
<p>
|
<p>
|
||||||
<a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
|
<a
|
||||||
|
class="link"
|
||||||
|
href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript"
|
||||||
|
>
|
||||||
${state.translate('whyJavascript')}
|
${state.translate('whyJavascript')}
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<p>${state.translate('enableJavascript')}</p>
|
<p>${state.translate('enableJavascript')}</p>
|
||||||
</div>
|
</div>
|
||||||
</noscript>
|
</noscript>
|
||||||
${body}
|
${body} ${initScript(state)}
|
||||||
${initScript(state)}
|
|
||||||
</html>
|
</html>
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|
|
@ -19,15 +19,15 @@ module.exports = function(app) {
|
||||||
<script>
|
<script>
|
||||||
const reporters = mocha.constructor.reporters;
|
const reporters = mocha.constructor.reporters;
|
||||||
function Combo(runner) {
|
function Combo(runner) {
|
||||||
reporters.HTML.call(this, runner)
|
reporters.HTML.call(this, runner);
|
||||||
reporters.JSON.call(this, runner)
|
reporters.JSON.call(this, runner);
|
||||||
}
|
}
|
||||||
Object.setPrototypeOf(Combo.prototype, reporters.HTML.prototype)
|
Object.setPrototypeOf(Combo.prototype, reporters.HTML.prototype);
|
||||||
mocha.setup({
|
mocha.setup({
|
||||||
ui: 'bdd',
|
ui: 'bdd',
|
||||||
reporter: Combo,
|
reporter: Combo,
|
||||||
timeout: 5000
|
timeout: 5000
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
<script src="/jsconfig.js"></script>
|
<script src="/jsconfig.js"></script>
|
||||||
<script src="${assets.get('cryptofill.js')}"></script>
|
<script src="${assets.get('cryptofill.js')}"></script>
|
||||||
|
|
Loading…
Reference in New Issue