Danny Coates
GitHub
commit
d60eb5e022
19
app/main.css
19
app/main.css
@ -31,19 +31,23 @@ progress::-webkit-progress-value {
|
||||
@apply rounded-sm;
|
||||
}
|
||||
|
||||
.word-break-all {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
max-width: 64rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main > section {
|
||||
@apply bg-white;
|
||||
@apply shadow;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
background-image: url('../assets/send_logo.svg');
|
||||
background-image: url('../assets/send_logo_white.svg');
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.8rem;
|
||||
@ -145,11 +149,16 @@ progress::-webkit-progress-value {
|
||||
@apply flex-1;
|
||||
@apply self-center;
|
||||
@apply items-center;
|
||||
@apply my-10;
|
||||
@apply m-auto;
|
||||
@apply py-8;
|
||||
|
||||
width: calc(100% - 3rem);
|
||||
min-height: 30rem;
|
||||
min-height: 33rem;
|
||||
max-height: 40rem;
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
background-image: url('../assets/send_logo.svg');
|
||||
}
|
||||
|
||||
.main > section {
|
||||
|
||||
@ -16,7 +16,7 @@ function banner(state, emit) {
|
||||
|
||||
function body(main) {
|
||||
return function(state, emit) {
|
||||
const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest justify-between">
|
||||
const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest">
|
||||
${banner(state, emit)}
|
||||
${header(state, emit)}
|
||||
${main(state, emit)}
|
||||
|
||||
@ -36,7 +36,7 @@ function password(state) {
|
||||
id="password-input"
|
||||
class="${
|
||||
state.password ? '' : 'invisible'
|
||||
} border rounded-sm focus:border-blue leading-normal mt-2 py-1 px-2 h-8"
|
||||
} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
|
||||
autocomplete="off"
|
||||
maxlength="${MAX_LENGTH}"
|
||||
type="password"
|
||||
@ -96,7 +96,7 @@ function fileInfo(file, action) {
|
||||
<article class="flex flex-row items-center p-3">
|
||||
<img class="" src="${assets.get('blue_file.svg')}"/>
|
||||
<p class="ml-4 w-full">
|
||||
<h1 class="text-sm font-medium">${file.name}</h1>
|
||||
<h1 class="text-sm font-medium word-break-all">${file.name}</h1>
|
||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||
file.size
|
||||
)}</div>
|
||||
@ -137,7 +137,7 @@ module.exports = function(state, emit, archive) {
|
||||
alt="Delete"
|
||||
src="${assets.get('close-16.svg')}"
|
||||
onclick=${del}/>
|
||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
||||
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
|
||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||
archive.size
|
||||
)}</div>
|
||||
@ -199,7 +199,7 @@ module.exports.wip = function(state, emit) {
|
||||
${password(state, emit)}
|
||||
<button
|
||||
id="upload-btn"
|
||||
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 mt-4 flex flex-no-shrink items-center justify-center font-semibold"
|
||||
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 flex flex-no-shrink items-center justify-center font-semibold"
|
||||
title="${state.translate('uploadSuccessConfirmHeader')}"
|
||||
onclick=${upload}>
|
||||
${state.translate('uploadSuccessConfirmHeader')}
|
||||
@ -207,6 +207,7 @@ module.exports.wip = function(state, emit) {
|
||||
</article>`;
|
||||
|
||||
function upload(event) {
|
||||
window.scrollTo(0, 0);
|
||||
event.preventDefault();
|
||||
event.target.disabled = true;
|
||||
if (!state.uploading) {
|
||||
@ -250,7 +251,7 @@ module.exports.uploading = function(state, emit) {
|
||||
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">
|
||||
<p class="w-full">
|
||||
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
||||
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
|
||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||
archive.size
|
||||
)}</div>
|
||||
@ -280,7 +281,7 @@ module.exports.uploading = function(state, emit) {
|
||||
|
||||
module.exports.empty = function(state, emit) {
|
||||
return html`
|
||||
<article class="flex flex-col items-center justify-center border border-dashed border-blue-light px-6 py-16 h-full">
|
||||
<article class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full">
|
||||
<img src="${assets.get('addfiles.svg')}" width="48" height="48"/>
|
||||
<div class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide">${state.translate(
|
||||
'uploadDropDragMessage'
|
||||
@ -319,7 +320,7 @@ module.exports.preview = function(state, emit) {
|
||||
<article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20">
|
||||
<p class="w-full mb-4">
|
||||
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
||||
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
|
||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||
archive.size
|
||||
)}</div>
|
||||
@ -349,7 +350,7 @@ module.exports.downloading = function(state, emit) {
|
||||
<article class="flex flex-col bg-white border border-grey-light p-4 z-20">
|
||||
<p class="w-full mb-4">
|
||||
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
||||
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
|
||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||
archive.size
|
||||
)}</div>
|
||||
|
||||
@ -6,7 +6,7 @@ module.exports = function(name, url) {
|
||||
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">${state.translate(
|
||||
<p class="font-normal leading-normal text-grey-darker word-break-all">${state.translate(
|
||||
'copyUrlFormLabelWithName',
|
||||
{ filename: name }
|
||||
)}</p>
|
||||
|
||||
@ -4,13 +4,15 @@ 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 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
|
||||
<h1 class="text-2xl">${state.translate('errorPageHeader')}</h1>
|
||||
<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 my-10 font-medium" href="/">
|
||||
<a class="text-blue mt-10 font-medium" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,8 @@ module.exports = function(state, emit) {
|
||||
<div class="">
|
||||
${raw(
|
||||
state.translate('frontPageExpireInfo', {
|
||||
downloadCount: '<select id="dlCount"></select>',
|
||||
downloadCount:
|
||||
'<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>',
|
||||
timespan: '<select id="timespan"></select>'
|
||||
})
|
||||
)}
|
||||
|
||||
@ -15,10 +15,6 @@ module.exports = function(state) {
|
||||
href="https://www.mozilla.org/about/legal">
|
||||
${state.translate('footerLinkLegal')}
|
||||
</a></li>
|
||||
<li class="m-2"><a
|
||||
href="https://testpilot.firefox.com/about">
|
||||
${state.translate('footerLinkAbout')}
|
||||
</a></li>
|
||||
<li class="m-2"><a
|
||||
href="/legal">
|
||||
${state.translate('footerLinkTerms')}
|
||||
|
||||
@ -3,7 +3,7 @@ const assets = require('../../common/assets');
|
||||
|
||||
module.exports = function() {
|
||||
return html`
|
||||
<div class="w-full flex-none flex flex-row items-center content-center justify-center text-sm bg-grey-light text-grey-darkest h-12 px-4">
|
||||
<div class="w-full flex-none flex flex-row items-center content-center justify-center text-sm bg-grey-light leading-tight text-grey-darkest px-4 py-3">
|
||||
<div class="flex items-center mx-auto">
|
||||
<img
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
|
||||
@ -3,11 +3,11 @@ const account = require('./account');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const header = html`
|
||||
<header class="relative flex-none flex flex-row items-center justify-between bg-white w-full px-6 h-16 shadow z-20">
|
||||
<header class="relative flex-none flex flex-row items-center justify-between bg-blue md:bg-white w-full px-6 h-16 md:shadow z-20">
|
||||
<a
|
||||
class="header-logo"
|
||||
href="/">
|
||||
<h1 class="text-black font-normal">Firefox <b>Send</b></h1>
|
||||
<h1 class="text-white md:text-black font-normal">Firefox <b>Send</b></h1>
|
||||
</a>
|
||||
${account(state, emit)}
|
||||
<div class="invisible absolute pin-t pin-l mt-12 w-full flex flex-col items-center pointer-events-none">
|
||||
|
||||
@ -23,11 +23,11 @@ module.exports = function(state, emit) {
|
||||
: list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3');
|
||||
|
||||
return html`
|
||||
<main class="main md:relative">
|
||||
<main class="main relative">
|
||||
${state.modal && modal(state, emit)}
|
||||
<section class="h-full w-full p-6 md:flex md:flex-row z-10">
|
||||
<div class="md:mr-6 md:w-1/2">${left}</div>
|
||||
<div class="md:w-1/2 overflow-y-scroll mt-6 md:mt-0">${right}</div>
|
||||
<div class="md:w-1/2 mt-6 md:mt-0">${right}</div>
|
||||
</section>
|
||||
</main>`;
|
||||
};
|
||||
|
||||
@ -3,18 +3,20 @@ const assets = require('../../common/assets');
|
||||
|
||||
module.exports = function intro(state) {
|
||||
return html`
|
||||
<article class="flex flex-col items-center justify-between bg-white border border-grey-light md:border-none px-6 md:py-10 py-6 md:mb-0 mb-6">
|
||||
<p class="text-center">
|
||||
<div class="font-semibold leading-normal">${state.translate(
|
||||
'uploadPageHeader'
|
||||
)}</div>
|
||||
<div class="italic text-sm opacity-75 leading-normal">${state.translate(
|
||||
'pageHeaderCredits'
|
||||
)}</div>
|
||||
</p>
|
||||
<img class="my-6" src="${assets.get('illustration_download.svg')}"/>
|
||||
<p class="md:mx-6 max-w-sm text-sm opacity-50 leading-normal">${state.translate(
|
||||
'uploadPageExplainer'
|
||||
)}</p>
|
||||
<article class="flex flex-col items-center justify-center bg-white border border-grey-light md:border-none px-6 text-center md:py-0 py-6 md:mb-0 mb-6 h-full">
|
||||
<div class="flex flex-col items-center justify-between h-full py-8">
|
||||
<p class="text-center">
|
||||
<div class="font-semibold leading-normal">${state.translate(
|
||||
'uploadPageHeader'
|
||||
)}</div>
|
||||
<div class="italic text-sm opacity-75 leading-normal">${state.translate(
|
||||
'pageHeaderCredits'
|
||||
)}</div>
|
||||
</p>
|
||||
<img class="my-6" src="${assets.get('illustration_download.svg')}"/>
|
||||
<p class="md:mx-6 max-w-sm text-sm opacity-50 leading-normal">${state.translate(
|
||||
'uploadPageExplainer'
|
||||
)}</p>
|
||||
</div>
|
||||
</article>`;
|
||||
};
|
||||
|
||||
@ -4,8 +4,8 @@ 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 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
|
||||
<h1 class="text-2xl">${state.translate('legalHeader')}</h1>
|
||||
<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',
|
||||
|
||||
@ -2,7 +2,7 @@ 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" 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="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
|
||||
${state.modal(state, emit, close)}
|
||||
|
||||
@ -4,8 +4,8 @@ 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 p-6 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">${state.translate(
|
||||
<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(
|
||||
@ -14,7 +14,7 @@ module.exports = function(state) {
|
||||
<p class="max-w-md leading-normal">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</p>
|
||||
<a class="text-blue my-10 font-medium" href="/">
|
||||
<a class="text-blue mt-10 font-medium" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@ 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 mx-1 h-8" onchange=${choose}>
|
||||
<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}" ${
|
||||
|
||||
@ -31,13 +31,13 @@ module.exports = function(state) {
|
||||
|
||||
return html`
|
||||
<main class="main container">
|
||||
<div class="flex flex-col items-center bg-white m-6 p-6 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>
|
||||
<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 my-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
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
class="w-10"
|
||||
|
||||
1
assets/send_logo_white.svg
Normal file
1
assets/send_logo_white.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="30" height="27" viewBox="0 0 30 27" xmlns="http://www.w3.org/2000/svg"><title>send logo</title><g stroke="#ffffff" fill="none" fill-rule="evenodd" transform="translate(-0.231,0.11948695)"><path d="M22.364 19.989l-2.153-2.103a2.046 2.046 0 0 0-2.665-.151l3.402 3.323a.531.531 0 0 1 0 .766l-2.466 2.408a.563.563 0 0 1-.784 0l-3.398-3.32a1.932 1.932 0 0 0 .188 2.564l2.153 2.103c.788.77 2.066.77 2.855 0l2.868-2.802a1.94 1.94 0 0 0 0-2.788M8.77 14.745a.534.534 0 0 0 0 .766l3.399 3.32a2.05 2.05 0 0 1-2.625-.184l-2.153-2.102a1.94 1.94 0 0 1 0-2.79l2.869-2.801a2.052 2.052 0 0 1 2.854 0l2.153 2.103c.73.713.775 1.83.154 2.603l-3.401-3.323a.565.565 0 0 0-.784 0L8.77 14.745zm9.464 5.682a.777.777 0 0 1 0 1.118.822.822 0 0 1-1.144 0l-5.6-5.47a.777.777 0 0 1 0-1.118.822.822 0 0 1 1.144 0l5.6 5.47z" stroke-width=".618" fill="#ffffff"/><path d="M6.065 20.606c-2.913-1.586-3.988-3.656-3.988-6.468 0-2.81 2.265-6.425 5.786-6.289.1.004.55-.006.649 0 .895-3.27 2.508-6.353 6.898-6.353 4.557 0 7.336 3.716 6.75 7.785.08-.005 1.232.17 1.31.186 3.096.644 4.915 3.275 4.915 5.18 0 1.905-.107 3.029-2.023 4.947" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -8,7 +8,6 @@ describe('Firefox Send homepage', function() {
|
||||
const footerLinks = [
|
||||
'mozilla',
|
||||
'legal',
|
||||
'about',
|
||||
'legal',
|
||||
'cookies',
|
||||
'report-infringement',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user