diff --git a/app/base.css b/app/base.css index f5c623f4..9c5a0ab3 100644 --- a/app/base.css +++ b/app/base.css @@ -57,11 +57,14 @@ a { background: var(--pageBGColor); box-shadow: var(--large-box-shadow); width: 90%; - height: 100%; max-width: 960px; + min-height: 550px; max-height: 600px; align-self: center; margin: auto 0; + display: grid; + grid-template-columns: 70px 360px 1fr; + grid-template-areas: 'nav files content'; } .split { @@ -73,12 +76,11 @@ a { .split__left { height: 100%; - width: 360px; - margin: 0; border-right: 1px solid #d7d7db; display: flex; flex-direction: column; text-align: center; + grid-area: files; } .split__right { @@ -88,6 +90,16 @@ a { align-items: flex-end; justify-content: center; 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 { @@ -187,8 +199,6 @@ a { .page { height: 100%; - width: 75%; - margin: 0 auto; padding: 24px; display: flex; flex-direction: column; @@ -275,16 +285,17 @@ a { align-items: center; max-height: none; width: 100%; - } - - .split { - flex-direction: column-reverse; - align-items: center; + grid-template-columns: none; + grid-template-rows: 90px minmax(160px, 30vh) minmax(240px, 30vh) 70px; + grid-template-areas: + 'promo' + 'files' + 'content' + 'nav'; } .split__left { border: none; - height: 600px; } .description { diff --git a/app/main.css b/app/main.css index 384587e0..a0c0661b 100644 --- a/app/main.css +++ b/app/main.css @@ -1,7 +1,10 @@ @import './base.css'; @import './pages/share/share.css'; @import './pages/signin/signin.css'; +@import './pages/uploads/uploads.css'; @import './pages/unsupported/unsupported.css'; +@import './templates/archiveTile/archiveTile.css'; +@import './templates/controlArea/controlArea.css'; @import './templates/downloadButton/downloadButton.css'; @import './templates/downloadPassword/downloadPassword.css'; @import './templates/file/file.css'; diff --git a/app/pages/blank.js b/app/pages/blank.js index edaadcac..6e8decdc 100644 --- a/app/pages/blank.js +++ b/app/pages/blank.js @@ -1,5 +1,5 @@ const html = require('choo/html'); module.exports = function() { - return html`
`; + return html`
`; }; diff --git a/app/pages/legal.js b/app/pages/legal.js index 6261c29d..95103a51 100644 --- a/app/pages/legal.js +++ b/app/pages/legal.js @@ -4,7 +4,7 @@ const title = require('../templates/title'); module.exports = function(state) { return html` -
+
${title(state)}
${state.translate('legalHeader')}
${raw( @@ -20,7 +20,7 @@ module.exports = function(state) { 'https://www.mozilla.org/about/legal/terms/mozilla/' ]) )} -
+ `; }; diff --git a/app/pages/notFound/index.js b/app/pages/notFound/index.js index 46ab6753..6267218b 100644 --- a/app/pages/notFound/index.js +++ b/app/pages/notFound/index.js @@ -4,19 +4,15 @@ const title = require('../../templates/title'); module.exports = function(state) { return html` -
- +
${title(state)} -
${state.translate('expiredPageHeader')}
- +
${state.translate('uploadPageExplainer')}
${state.translate('sendYourFilesLink')} -
`; + `; }; diff --git a/app/pages/password/index.js b/app/pages/password/index.js index e4c06949..c54a857e 100644 --- a/app/pages/password/index.js +++ b/app/pages/password/index.js @@ -4,9 +4,9 @@ const downloadPassword = require('../../templates/downloadPassword'); module.exports = function(state, emit) { return html` -
+
${titleSection(state)} - +
${state.translate('downloadMessage2')}
${downloadPassword(state, emit)} @@ -14,6 +14,6 @@ module.exports = function(state, emit) { ${state.translate('sendYourFilesLink')} -
+ `; }; diff --git a/app/pages/preview/index.js b/app/pages/preview/index.js index bfb83a54..12d6aee2 100644 --- a/app/pages/preview/index.js +++ b/app/pages/preview/index.js @@ -23,6 +23,7 @@ module.exports = function(state, emit) { return split( state, + emit, downloadedFiles(fileInfo, state, emit), html`
diff --git a/app/pages/share/index.js b/app/pages/share/index.js index 5c35a92b..2ba0d3e3 100644 --- a/app/pages/share/index.js +++ b/app/pages/share/index.js @@ -19,6 +19,7 @@ module.exports = function(state, emit) { return split( state, + emit, uploadedFileList(file, state, emit), html`
diff --git a/app/pages/signin/index.js b/app/pages/signin/index.js index d63c7a8a..16bbeb2e 100644 --- a/app/pages/signin/index.js +++ b/app/pages/signin/index.js @@ -6,7 +6,7 @@ const bytes = require('../../utils').bytes; module.exports = function(state, emit) { return html` -
+
${title(state)} +
`; function submitEmail(event) { diff --git a/app/pages/split.js b/app/pages/split.js index f5b50de1..32652bcd 100644 --- a/app/pages/split.js +++ b/app/pages/split.js @@ -1,18 +1,20 @@ const html = require('choo/html'); const title = require('../templates/title'); 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` -
-
- ${title(state)} - ${a} -
-
- ${signupPromo(state)} - ${b} -
+
+ ${controlArea(state, emit)} +
+ ${title(state)} + ${a}
+
+ ${b} +
+ ${signupPromo(state)} +
`; }; diff --git a/app/pages/unsupported/index.js b/app/pages/unsupported/index.js index 61c724f5..cb3c91b4 100644 --- a/app/pages/unsupported/index.js +++ b/app/pages/unsupported/index.js @@ -32,7 +32,7 @@ module.exports = function(state) { } return html` -
+
${title(state)}
${strings.header}
@@ -53,7 +53,7 @@ module.exports = function(state) {
${strings.explainer}
-
`; +
`; }; function outdatedStrings(state) { diff --git a/app/pages/uploads/index.js b/app/pages/uploads/index.js new file mode 100644 index 00000000..23e6ee05 --- /dev/null +++ b/app/pages/uploads/index.js @@ -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`
    + ${state.storage.files.map(f => archiveTile(f, state))} +
` + : html`
nothing to see here
`; + return html`
+ ${controlArea(state, emit)} +
+

${state.translate('myUploads')}

+ ${fileArea} +
+
`; +}; diff --git a/app/pages/uploads/uploads.css b/app/pages/uploads/uploads.css new file mode 100644 index 00000000..a2a2612e --- /dev/null +++ b/app/pages/uploads/uploads.css @@ -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; +} diff --git a/app/pages/welcome/index.js b/app/pages/welcome/index.js index 675b9e9b..0417f1e5 100644 --- a/app/pages/welcome/index.js +++ b/app/pages/welcome/index.js @@ -2,5 +2,5 @@ const fileManager = require('../../templates/fileManager'); const split = require('../split'); module.exports = function(state, emit) { - return split(state, fileManager(state, emit)); + return split(state, emit, fileManager(state, emit)); }; diff --git a/app/routes/index.js b/app/routes/index.js index 9e485f17..80ff1a04 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -30,11 +30,9 @@ module.exports = function() { ${modalDialog(state, emit)} ${banner(state, emit)} ${header(state, emit)} -
- ${page(state, emit)} -
+ ${page(state, emit)} ${footer(state)} - `; + `; if (state.layout) { // server side only return state.layout(state, b); @@ -45,6 +43,7 @@ module.exports = function() { app.route('/', body(require('../pages/welcome'))); 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/:key', body(download)); app.route('/unsupported/:reason', body(require('../pages/unsupported'))); diff --git a/app/templates/archiveTile/archiveTile.css b/app/templates/archiveTile/archiveTile.css new file mode 100644 index 00000000..767edcf4 --- /dev/null +++ b/app/templates/archiveTile/archiveTile.css @@ -0,0 +1,10 @@ +.archiveTile { + border: 1px solid #d7d7db; + border-radius: 4px; + width: 100%; + height: 100%; +} + +.archiveTile:hover { + border: 1px solid lightblue; +} diff --git a/app/templates/archiveTile/index.js b/app/templates/archiveTile/index.js new file mode 100644 index 00000000..9992b4b5 --- /dev/null +++ b/app/templates/archiveTile/index.js @@ -0,0 +1,8 @@ +const html = require('choo/html'); + +module.exports = function(archive) { + return html` +
  • + ${archive.name} +
    • `; +}; diff --git a/app/templates/controlArea/controlArea.css b/app/templates/controlArea/controlArea.css new file mode 100644 index 00000000..05f961ea --- /dev/null +++ b/app/templates/controlArea/controlArea.css @@ -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; + } +} diff --git a/app/templates/controlArea/index.js b/app/templates/controlArea/index.js new file mode 100644 index 00000000..ca456bc8 --- /dev/null +++ b/app/templates/controlArea/index.js @@ -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`
  • + ${userAccount(state, emit)} +
    • ` + : null; + return html` + + `; +}; diff --git a/app/templates/footer/footer.css b/app/templates/footer/footer.css index 06910538..1a4d05c3 100644 --- a/app/templates/footer/footer.css +++ b/app/templates/footer/footer.css @@ -6,6 +6,7 @@ display: flex; flex-direction: row; justify-content: flex-end; + align-items: center; } .legalSection { @@ -34,6 +35,24 @@ 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) { .footer { justify-content: flex-start; diff --git a/app/templates/footer/index.js b/app/templates/footer/index.js index 3c837eab..3833ca0f 100644 --- a/app/templates/footer/index.js +++ b/app/templates/footer/index.js @@ -1,7 +1,11 @@ const html = require('choo/html'); const assets = require('../../../common/assets'); +const version = require('../../../package.json').version; +const { browserName } = require('../../utils'); module.exports = function(state) { + const browser = browserName(); + const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`; const footer = html`