natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix #985-#988, #990-#993

This commit is contained in:
Mark Liang 2018-11-05 16:12:40 +08:00
parent 77a5a377e3
commit 7394d20cb7
15 changed files with 54 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/main.css
View File

@ -35,15 +35,20 @@ progress::-webkit-progress-value {
display: flex; display: flex;
max-width: 64rem; max-width: 64rem;
width: 100%; width: 100%;
height: 100%;
} }
.main > section { .main > section {
@apply bg-white; @apply bg-white;
@apply shadow; }
.info {
height: 90%;
max-height: 32rem;
} }
.header-logo { .header-logo {
background-image: url('../assets/send_logo.svg'); background-image: url('../assets/send_logo_white.svg');
background-position: left; background-position: left;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1.8rem; background-size: 1.8rem;
@ -147,12 +152,17 @@ progress::-webkit-progress-value {
@apply items-center; @apply items-center;
@apply my-10; @apply my-10;
width: calc(100% - 3rem);
min-height: 30rem;
max-height: 40rem; max-height: 40rem;
width: calc(100% - 3rem);
}
.header-logo {
background-image: url('../assets/send_logo.svg');
} }
.main > section { .main > section {
@apply shadow-md; @apply shadow-md;
min-height: 30rem;
} }
} }

2
app/routes.js
View File

@ -16,7 +16,7 @@ function banner(state, emit) {
function body(main) { function body(main) {
return function(state, emit) { 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:min-h-screen md:bg-grey-lightest justify-between">
${banner(state, emit)} ${banner(state, emit)}
${header(state, emit)} ${header(state, emit)}
${main(state, emit)} ${main(state, emit)}

7
app/ui/archiveTile.js
View File

@ -36,7 +36,7 @@ function password(state) {
id="password-input" id="password-input"
class="${ class="${
state.password ? '' : 'invisible' 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" autocomplete="off"
maxlength="${MAX_LENGTH}" maxlength="${MAX_LENGTH}"
type="password" type="password"
@ -199,7 +199,7 @@ module.exports.wip = function(state, emit) {
${password(state, emit)} ${password(state, emit)}
<button <button
id="upload-btn" 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')}" title="${state.translate('uploadSuccessConfirmHeader')}"
onclick=${upload}> onclick=${upload}>
${state.translate('uploadSuccessConfirmHeader')} ${state.translate('uploadSuccessConfirmHeader')}
@ -207,6 +207,7 @@ module.exports.wip = function(state, emit) {
</article>`; </article>`;
function upload(event) { function upload(event) {
window.scrollTo(0, 0);
event.preventDefault(); event.preventDefault();
event.target.disabled = true; event.target.disabled = true;
if (!state.uploading) { if (!state.uploading) {
@ -280,7 +281,7 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) { module.exports.empty = function(state, emit) {
return html` 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"/> <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( <div class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide">${state.translate(
'uploadDropDragMessage' 'uploadDropDragMessage'

8
app/ui/error.js
View File

@ -4,13 +4,15 @@ 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 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-2xl">${state.translate('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')}
</p> </p>
<a class="text-blue my-10 font-medium" href="/"> <a class="text-blue mt-10 font-medium" href="/">
${state.translate('sendYourFilesLink')} ${state.translate('sendYourFilesLink')}
</a> </a>
</div> </div>

3
app/ui/expiryOptions.js
View File

@ -10,7 +10,8 @@ module.exports = function(state, emit) {
<div class=""> <div class="">
${raw( ${raw(
state.translate('frontPageExpireInfo', { 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>' timespan: '<select id="timespan"></select>'
}) })
)} )}

4
app/ui/footer.js
View File

@ -15,10 +15,6 @@ module.exports = function(state) {
href="https://www.mozilla.org/about/legal"> href="https://www.mozilla.org/about/legal">
${state.translate('footerLinkLegal')} ${state.translate('footerLinkLegal')}
</a></li> </a></li>
<li class="m-2"><a
href="https://testpilot.firefox.com/about">
${state.translate('footerLinkAbout')}
</a></li>
<li class="m-2"><a <li class="m-2"><a
href="/legal"> href="/legal">
${state.translate('footerLinkTerms')} ${state.translate('footerLinkTerms')}

2
app/ui/fxPromo.js
View File

@ -3,7 +3,7 @@ const assets = require('../../common/assets');
module.exports = function() { module.exports = function() {
return html` 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"> <div class="flex items-center mx-auto">
<img <img
src="${assets.get('firefox_logo-only.svg')}" src="${assets.get('firefox_logo-only.svg')}"

4
app/ui/header.js
View File

@ -3,11 +3,11 @@ const account = require('./account');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const header = html` 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 <a
class="header-logo" class="header-logo"
href="/"> 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> </a>
${account(state, emit)} ${account(state, emit)}
<div class="invisible absolute pin-t pin-l mt-12 w-full flex flex-col items-center pointer-events-none"> <div class="invisible absolute pin-t pin-l mt-12 w-full flex flex-col items-center pointer-events-none">

2
app/ui/home.js
View File

@ -23,7 +23,7 @@ module.exports = function(state, emit) {
: list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3'); : list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3');
return html` return html`
<main class="main md:relative"> <main class="main relative">
${state.modal && modal(state, emit)} ${state.modal && modal(state, emit)}
<section class="h-full w-full p-6 md:flex md:flex-row z-10"> <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:mr-6 md:w-1/2">${left}</div>

4
app/ui/intro.js
View File

@ -3,7 +3,8 @@ const assets = require('../../common/assets');
module.exports = function intro(state) { module.exports = function intro(state) {
return html` 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"> <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="info flex flex-col items-center justify-between">
<p class="text-center"> <p class="text-center">
<div class="font-semibold leading-normal">${state.translate( <div class="font-semibold leading-normal">${state.translate(
'uploadPageHeader' 'uploadPageHeader'
@ -16,5 +17,6 @@ module.exports = function intro(state) {
<p class="md:mx-6 max-w-sm text-sm opacity-50 leading-normal">${state.translate( <p class="md:mx-6 max-w-sm text-sm opacity-50 leading-normal">${state.translate(
'uploadPageExplainer' 'uploadPageExplainer'
)}</p> )}</p>
</div>
</article>`; </article>`;
}; };

4
app/ui/legal.js
View File

@ -4,8 +4,8 @@ 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 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-2xl">${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',

6
app/ui/notFound.js
View File

@ -4,8 +4,8 @@ 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 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-pink-dark text-2xl">${state.translate( <h1 class="text-pink-dark text-2xl text-center">${state.translate(
'expiredPageHeader' 'expiredPageHeader'
)}</h1> )}</h1>
<img class="my-16" src="${assets.get( <img class="my-16" src="${assets.get(
@ -14,7 +14,7 @@ module.exports = function(state) {
<p class="max-w-md leading-normal"> <p class="max-w-md leading-normal">
${state.translate('uploadPageExplainer')} ${state.translate('uploadPageExplainer')}
</p> </p>
<a class="text-blue my-10 font-medium" href="/"> <a class="text-blue mt-10 font-medium" href="/">
${state.translate('sendYourFilesLink')} ${state.translate('sendYourFilesLink')}
</a> </a>
</div> </div>

2
app/ui/selectbox.js
View File

@ -4,7 +4,7 @@ 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 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( ${options.map(
i => i =>
html`<option value="${i}" ${ html`<option value="${i}" ${

4
app/ui/unsupported.js
View File

@ -31,13 +31,13 @@ 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 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> <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} ${strings.description}
</p> </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 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 <img
src="${assets.get('firefox_logo-only.svg')}" src="${assets.get('firefox_logo-only.svg')}"
class="w-10" class="w-10"

1
assets/send_logo_white.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB