This commit is contained in:
Danny Coates 2018-10-16 16:53:33 -07:00
parent 2b81ff1fb3
commit cc85486414
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
28 changed files with 207 additions and 97 deletions

View File

@ -57,11 +57,14 @@ a {
background: var(--pageBGColor); background: var(--pageBGColor);
box-shadow: var(--large-box-shadow); box-shadow: var(--large-box-shadow);
width: 90%; width: 90%;
height: 100%;
max-width: 960px; max-width: 960px;
min-height: 550px;
max-height: 600px; max-height: 600px;
align-self: center; align-self: center;
margin: auto 0; margin: auto 0;
display: grid;
grid-template-columns: 70px 360px 1fr;
grid-template-areas: 'nav files content';
} }
.split { .split {
@ -73,12 +76,11 @@ a {
.split__left { .split__left {
height: 100%; height: 100%;
width: 360px;
margin: 0;
border-right: 1px solid #d7d7db; border-right: 1px solid #d7d7db;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
grid-area: files;
} }
.split__right { .split__right {
@ -88,6 +90,16 @@ a {
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
position: relative; position: relative;
grid-area: content;
}
.wide {
grid-area: files-start / files-start / content-end / content-end;
overflow: hidden;
display: flex;
flex-direction: column;
margin-left: 12px;
height: 100%;
} }
.noscript { .noscript {
@ -187,8 +199,6 @@ a {
.page { .page {
height: 100%; height: 100%;
width: 75%;
margin: 0 auto;
padding: 24px; padding: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -275,16 +285,17 @@ a {
align-items: center; align-items: center;
max-height: none; max-height: none;
width: 100%; width: 100%;
} grid-template-columns: none;
grid-template-rows: 90px minmax(160px, 30vh) minmax(240px, 30vh) 70px;
.split { grid-template-areas:
flex-direction: column-reverse; 'promo'
align-items: center; 'files'
'content'
'nav';
} }
.split__left { .split__left {
border: none; border: none;
height: 600px;
} }
.description { .description {

View File

@ -1,7 +1,10 @@
@import './base.css'; @import './base.css';
@import './pages/share/share.css'; @import './pages/share/share.css';
@import './pages/signin/signin.css'; @import './pages/signin/signin.css';
@import './pages/uploads/uploads.css';
@import './pages/unsupported/unsupported.css'; @import './pages/unsupported/unsupported.css';
@import './templates/archiveTile/archiveTile.css';
@import './templates/controlArea/controlArea.css';
@import './templates/downloadButton/downloadButton.css'; @import './templates/downloadButton/downloadButton.css';
@import './templates/downloadPassword/downloadPassword.css'; @import './templates/downloadPassword/downloadPassword.css';
@import './templates/file/file.css'; @import './templates/file/file.css';

View File

@ -1,5 +1,5 @@
const html = require('choo/html'); const html = require('choo/html');
module.exports = function() { module.exports = function() {
return html`<div></div>`; return html`<main class="main"></main>`;
}; };

View File

@ -4,7 +4,7 @@ const title = require('../templates/title');
module.exports = function(state) { module.exports = function(state) {
return html` return html`
<div class="page"> <main class="main page">
${title(state)} ${title(state)}
<div class="title">${state.translate('legalHeader')}</div> <div class="title">${state.translate('legalHeader')}</div>
${raw( ${raw(
@ -20,7 +20,7 @@ module.exports = function(state) {
'https://www.mozilla.org/about/legal/terms/mozilla/' 'https://www.mozilla.org/about/legal/terms/mozilla/'
]) ])
)} )}
</div> </main>
`; `;
}; };

View File

@ -4,19 +4,15 @@ const title = require('../../templates/title');
module.exports = function(state) { module.exports = function(state) {
return html` return html`
<div class="page"> <main class="main page">
${title(state)} ${title(state)}
<div class="error">${state.translate('expiredPageHeader')}</div> <div class="error">${state.translate('expiredPageHeader')}</div>
<img src="${assets.get( <img src="${assets.get('illustration_expired.svg')}" id="expired-img">
'illustration_expired.svg'
)}" class="flexible" id="expired-img">
<div class="description"> <div class="description">
${state.translate('uploadPageExplainer')} ${state.translate('uploadPageExplainer')}
</div> </div>
<a class="link link--action" href="/"> <a class="link link--action" href="/">
${state.translate('sendYourFilesLink')} ${state.translate('sendYourFilesLink')}
</a> </a>
</div>`; </main>`;
}; };

View File

@ -4,7 +4,7 @@ const downloadPassword = require('../../templates/downloadPassword');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<div class="page"> <main class="main page">
${titleSection(state)} ${titleSection(state)}
<div class="description">${state.translate('downloadMessage2')}</div> <div class="description">${state.translate('downloadMessage2')}</div>
@ -14,6 +14,6 @@ module.exports = function(state, emit) {
${state.translate('sendYourFilesLink')} ${state.translate('sendYourFilesLink')}
</a> </a>
</div> </main>
`; `;
}; };

View File

@ -23,6 +23,7 @@ module.exports = function(state, emit) {
return split( return split(
state, state,
emit,
downloadedFiles(fileInfo, state, emit), downloadedFiles(fileInfo, state, emit),
html` html`
<div class="copySection"> <div class="copySection">

View File

@ -19,6 +19,7 @@ module.exports = function(state, emit) {
return split( return split(
state, state,
emit,
uploadedFileList(file, state, emit), uploadedFileList(file, state, emit),
html` html`
<div class="copySection"> <div class="copySection">

View File

@ -6,7 +6,7 @@ const bytes = require('../../utils').bytes;
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<div class="page signInPage"> <main class="main page signInPage">
${title(state)} ${title(state)}
<div class="signIn__info flexible"> <div class="signIn__info flexible">
${state.translate('accountBenefitTitle')} ${state.translate('accountBenefitTitle')}
@ -44,7 +44,7 @@ module.exports = function(state, emit) {
<label class="btn" for="email-submit"> <label class="btn" for="email-submit">
${state.translate('signInContinueButton')} ${state.translate('signInContinueButton')}
</label> </label>
</div> </main>
`; `;
function submitEmail(event) { function submitEmail(event) {

View File

@ -1,18 +1,20 @@
const html = require('choo/html'); const html = require('choo/html');
const title = require('../templates/title'); const title = require('../templates/title');
const signupPromo = require('../templates/signupPromo'); const signupPromo = require('../templates/signupPromo');
const controlArea = require('../templates/controlArea');
module.exports = function(state, a, b) { module.exports = function(state, emit, a, b) {
return html` return html`
<div class="split"> <main class="main">
${controlArea(state, emit)}
<div class="split__left"> <div class="split__left">
${title(state)} ${title(state)}
${a} ${a}
</div> </div>
<div class="split__right"> <div class="split__right">
${signupPromo(state)}
${b} ${b}
</div> </div>
</div> ${signupPromo(state)}
</main>
`; `;
}; };

View File

@ -32,7 +32,7 @@ module.exports = function(state) {
} }
return html` return html`
<div class="page unsupportedPage"> <main class="main page unsupportedPage">
${title(state)} ${title(state)}
<div class="error unsupportedPage__error">${strings.header}</div> <div class="error unsupportedPage__error">${strings.header}</div>
<div class="description flexible"> <div class="description flexible">
@ -53,7 +53,7 @@ module.exports = function(state) {
<div class="unsupportedPage__info"> <div class="unsupportedPage__info">
${strings.explainer} ${strings.explainer}
</div> </div>
</div>`; </main>`;
}; };
function outdatedStrings(state) { function outdatedStrings(state) {

View File

@ -0,0 +1,18 @@
const html = require('choo/html');
const controlArea = require('../../templates/controlArea');
const archiveTile = require('../../templates/archiveTile');
module.exports = function(state, emit) {
const fileArea = state.storage.files.length
? html`<ul class="myUploads">
${state.storage.files.map(f => archiveTile(f, state))}
</ul>`
: html`<div>nothing to see here</div>`;
return html`<main class="main">
${controlArea(state, emit)}
<div class="wide">
<h1>${state.translate('myUploads')}</h1>
${fileArea}
</div>
</main>`;
};

View File

@ -0,0 +1,11 @@
.myUploads {
margin: 0;
padding: 0;
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(auto-fit, 150px);
grid-auto-columns: 150px;
grid-auto-rows: 160px;
list-style-type: none;
overflow: scroll;
}

View File

@ -2,5 +2,5 @@ const fileManager = require('../../templates/fileManager');
const split = require('../split'); const split = require('../split');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return split(state, fileManager(state, emit)); return split(state, emit, fileManager(state, emit));
}; };

View File

@ -30,9 +30,7 @@ module.exports = function() {
${modalDialog(state, emit)} ${modalDialog(state, emit)}
${banner(state, emit)} ${banner(state, emit)}
${header(state, emit)} ${header(state, emit)}
<main class="main">
${page(state, emit)} ${page(state, emit)}
</main>
${footer(state)} ${footer(state)}
</body>`; </body>`;
if (state.layout) { if (state.layout) {
@ -45,6 +43,7 @@ module.exports = function() {
app.route('/', body(require('../pages/welcome'))); app.route('/', body(require('../pages/welcome')));
app.route('/share/:id', body(require('../pages/share'))); app.route('/share/:id', body(require('../pages/share')));
app.route('/uploads', body(require('../pages/uploads')));
app.route('/download/:id', body(download)); app.route('/download/:id', body(download));
app.route('/download/:id/:key', body(download)); app.route('/download/:id/:key', body(download));
app.route('/unsupported/:reason', body(require('../pages/unsupported'))); app.route('/unsupported/:reason', body(require('../pages/unsupported')));

View File

@ -0,0 +1,10 @@
.archiveTile {
border: 1px solid #d7d7db;
border-radius: 4px;
width: 100%;
height: 100%;
}
.archiveTile:hover {
border: 1px solid lightblue;
}

View File

@ -0,0 +1,8 @@
const html = require('choo/html');
module.exports = function(archive) {
return html`
<li id="${archive.id}" class="archiveTile">
<a href="/share/${archive.id}">${archive.name}</a>
</li>`;
};

View File

@ -0,0 +1,22 @@
.controlArea {
border-right: 1px solid #d7d7db;
}
.controlArea > ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: column;
align-items: center;
}
.controlArea > ul > li {
margin: 12px;
}
@media (max-device-width: 720px), (max-width: 720px) {
.controlArea > ul {
flex-direction: row;
}
}

View File

@ -0,0 +1,28 @@
const html = require('choo/html');
const assets = require('../../../common/assets');
const userAccount = require('../userAccount');
module.exports = function(state, emit) {
const account = state.capabilities.account
? html`<li>
${userAccount(state, emit)}
</li>`
: null;
return html`
<nav class="controlArea">
<ul>
${account}
<li>
<a href="/">
<img src="${assets.get('addfile.svg')}"/>
</a>
</li>
<li>
<a href="/uploads">
<img src="${assets.get('blue_file.svg')}"/>
</a>
</li>
</ul>
</nav>
`;
};

View File

@ -6,6 +6,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
align-items: center;
} }
.legalSection { .legalSection {
@ -34,6 +35,24 @@
display: none; display: none;
} }
.feedback {
background-color: #000;
background-image: url('../assets/feedback.svg');
background-position: 2px 4px;
background-repeat: no-repeat;
background-size: 18px;
color: var(--primaryControlFGColor);
cursor: pointer;
display: block;
font-size: 12px;
line-height: 12px;
padding: 5px 5px 5px 20px;
text-indent: 2px;
transition: all 250ms ease-in-out;
white-space: nowrap;
margin-left: 12px;
}
@media (max-device-width: 720px), (max-width: 720px) { @media (max-device-width: 720px), (max-width: 720px) {
.footer { .footer {
justify-content: flex-start; justify-content: flex-start;

View File

@ -1,7 +1,11 @@
const html = require('choo/html'); const html = require('choo/html');
const assets = require('../../../common/assets'); const assets = require('../../../common/assets');
const version = require('../../../package.json').version;
const { browserName } = require('../../utils');
module.exports = function(state) { module.exports = function(state) {
const browser = browserName();
const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
const footer = html`<footer class="footer"> const footer = html`<footer class="footer">
<div class="legalSection"> <div class="legalSection">
<a class="legalSection__link" <a class="legalSection__link"
@ -39,7 +43,12 @@ module.exports = function(state) {
Twitter Twitter
</a> </a>
</div> </div>
<a href="${feedbackUrl}"
rel="noreferrer noopener"
class="feedback"
alt="Feedback"
target="_blank">${state.translate('siteFeedback')}
</a>
<a <a
href="https://github.com/mozilla/send" href="https://github.com/mozilla/send"
class="socialSection__link footer_hiddenIcon"> class="socialSection__link footer_hiddenIcon">

View File

@ -3,7 +3,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
width: 100%; width: 100%;
height: 64px; height: 64px;
background-color: white; background-color: white;
@ -13,28 +13,3 @@
.header h1 { .header h1 {
margin: 0; margin: 0;
} }
.header__controls {
justify-self: end;
display: grid;
grid-auto-flow: column;
grid-gap: 8px;
align-items: center;
}
.feedback {
background-color: #979797;
background-image: url('../assets/feedback.svg');
background-position: 2px 4px;
background-repeat: no-repeat;
background-size: 18px;
color: var(--primaryControlFGColor);
cursor: pointer;
display: block;
font-size: 12px;
line-height: 12px;
padding: 5px 5px 5px 20px;
text-indent: 2px;
transition: all 250ms ease-in-out;
white-space: nowrap;
}

View File

@ -1,24 +1,11 @@
const html = require('choo/html'); const html = require('choo/html');
const userAccount = require('../../templates/userAccount'); const assets = require('../../../common/assets');
const version = require('../../../package.json').version;
const { browserName } = require('../../utils');
module.exports = function(state, emit) {
const browser = browserName();
const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
module.exports = function() {
const header = html` const header = html`
<header class="header"> <header class="header">
<h1><a href="/">Firefox Send</a></h1> <a href="/"><img src="${assets.get('send_logo.svg')}"/></a>
<div class="header__controls"> <a href="/"><h1>Firefox Send</h1></a>
${userAccount(state, emit)}
<a href="${feedbackUrl}"
rel="noreferrer noopener"
class="feedback"
alt="Feedback"
target="_blank">${state.translate('siteFeedback')}
</a>
</div>
</header>`; </header>`;
// HACK // HACK
// We only want to render this once because we // We only want to render this once because we

View File

@ -10,9 +10,9 @@
justify-content: center; justify-content: center;
transition: background 100ms; transition: background 100ms;
margin: 24px; margin: 24px;
position: absolute; grid-area: content;
top: 0; justify-self: right;
right: 0; z-index: 1;
} }
.signupPromo:hover { .signupPromo:hover {
@ -30,3 +30,13 @@
padding: 6px; padding: 6px;
color: black; color: black;
} }
@media (max-device-width: 720px), (max-width: 720px) {
.signupPromo {
grid-area: promo;
margin: 0;
justify-self: auto;
height: 100%;
width: 100%;
}
}

View File

@ -1,5 +1,6 @@
.account { .account {
padding: 0; /* padding: 12px; */
position: relative;
} }
.account__avatar { .account__avatar {
@ -18,6 +19,7 @@
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);
padding: 11px 0; padding: 11px 0;
visibility: hidden; visibility: hidden;
white-space: nowrap;
outline: 0; outline: 0;
} }

View File

@ -94,8 +94,6 @@ workflows:
filters: filters:
branches: branches:
ignore: master ignore: master
requires:
- build
build_and_deploy_dev: build_and_deploy_dev:
jobs: jobs:
- build: - build:
@ -137,8 +135,6 @@ workflows:
tags: tags:
only: /^v.*/ only: /^v.*/
- integration_tests: - integration_tests:
requires:
- build
filters: filters:
branches: branches:
ignore: /.*/ ignore: /.*/

View File

@ -170,3 +170,4 @@ accountBenefitSync = Manage your uploads across devices
manageAccount = Manage Account manageAccount = Manage Account
logOut = Sign Out logOut = Sign Out
okButton = Ok okButton = Ok
myUploads = My Uploads

View File

@ -67,8 +67,9 @@ module.exports = function(app) {
}); });
app.use(express.json()); app.use(express.json());
app.get('/', language, pages.index); app.get('/', language, pages.index);
app.get('/signin', pages.blank); app.get('/signin', language, pages.blank);
app.get('/oauth', pages.blank); app.get('/uploads', language, pages.blank);
app.get('/oauth', language, pages.blank);
app.get('/legal', language, pages.legal); app.get('/legal', language, pages.legal);
app.get('/jsconfig.js', require('./jsconfig')); app.get('/jsconfig.js', require('./jsconfig'));
app.get(`/share/:id${ID_REGEX}`, language, pages.blank); app.get(`/share/:id${ID_REGEX}`, language, pages.blank);