From 2b81ff1fb306ec84019a07c4ace9e8fff3b44386 Mon Sep 17 00:00:00 2001 From: Danny Coates Date: Tue, 9 Oct 2018 18:17:40 -0700 Subject: [PATCH] some wip. still broken --- app/base.css | 133 +++++++------- app/main.css | 2 +- app/pages/legal.js | 6 +- app/pages/preview/index.js | 18 +- app/pages/share/index.js | 28 ++- app/pages/share/share.css | 13 +- app/pages/signin/index.js | 3 - app/pages/split.js | 18 ++ app/pages/welcome/index.js | 163 +----------------- app/routes/index.js | 11 -- app/templates/fileIcon/fileIcon.css | 2 +- .../fileManager/fileManager.css} | 12 +- app/templates/fileManager/index.js | 129 ++++++++++++++ app/templates/footer/footer.css | 34 +--- app/templates/footer/index.js | 31 +--- app/templates/fxPromo/fxPromo.css | 4 - app/templates/header/header.css | 17 +- app/templates/header/index.js | 18 +- app/templates/setPasswordSection/index.js | 6 +- .../setPasswordSection/setPasswordSection.css | 1 - app/templates/signupPromo/index.js | 1 + app/templates/signupPromo/signupPromo.css | 4 + app/templates/title/title.css | 5 +- app/templates/uploadedFile/index.js | 14 +- app/templates/uploadedFile/uploadedFile.css | 4 - .../uploadedFileList/uploadedFileList.css | 4 +- app/templates/userAccount/userAccount.css | 4 - server/layout.js | 11 ++ 28 files changed, 305 insertions(+), 391 deletions(-) create mode 100644 app/pages/split.js rename app/{pages/welcome/welcome.css => templates/fileManager/fileManager.css} (91%) create mode 100644 app/templates/fileManager/index.js diff --git a/app/base.css b/app/base.css index 780c7ef4..f5c623f4 100644 --- a/app/base.css +++ b/app/base.css @@ -31,20 +31,13 @@ html { } body { - display: grid; - grid-template-columns: minmax(500px, 1080px); - grid-template-rows: 54px 700px 54px; - align-content: center; - align-items: center; - justify-items: stretch; - justify-content: center; - font-family: Futura, -apple-system, BlinkMacSystemFont, 'SF Pro Text', - 'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial, - sans-serif; + display: flex; + flex-direction: column; + font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui', + 'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif; height: 100vh; - background: #f9f9fa; margin: 0; - padding: var(--grid-basis); + background-color: #f8f9fa; } input, @@ -60,12 +53,41 @@ a { } .main { + flex: 1 1 auto; background: var(--pageBGColor); box-shadow: var(--large-box-shadow); - display: grid; - grid-template-columns: minmax(400px, 1fr) 1fr; - width: 100%; + width: 90%; height: 100%; + max-width: 960px; + max-height: 600px; + align-self: center; + margin: auto 0; +} + +.split { + display: flex; + flex-direction: row; + justify-content: space-between; + height: 100%; +} + +.split__left { + height: 100%; + width: 360px; + margin: 0; + border-right: 1px solid #d7d7db; + display: flex; + flex-direction: column; + text-align: center; +} + +.split__right { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; + position: relative; } .noscript { @@ -74,30 +96,6 @@ a { border-radius: 6px; } -.main__file-manager, -.main__context { - padding: calc(var(--grid-basis) * 2); -} - -.main__file-manager { - border-right: 2px solid black; -} - -.main__context { - display: flex; - flex-direction: column; -} - -.main__context-footer, -.main__signup-promo { - display: flex; - justify-content: flex-end; -} - -.main__file-list { - flex: 1; -} - .footer__mozLogo { width: 112px; height: 32px; @@ -107,11 +105,10 @@ a { .btn { display: flex; width: 100%; - height: 70px; line-height: 1.2; align-items: center; justify-content: center; - padding: 0 10px; + padding: 16px; font-size: 17px; font-weight: 500; text-transform: uppercase; @@ -190,7 +187,9 @@ a { .page { height: 100%; - margin: 0; + width: 75%; + margin: 0 auto; + padding: 24px; display: flex; flex-direction: column; text-align: center; @@ -226,13 +225,6 @@ a { } } -.goBackButton { - position: absolute; - top: 0; - left: 0; - margin: 18px; -} - .error { color: var(--errorColor); font-weight: 600; @@ -261,6 +253,10 @@ a { visibility: visible !important; } +.invisible { + visibility: hidden; +} + .noDisplay { display: none !important; } @@ -269,39 +265,34 @@ a { flex: 1; } -@media (max-device-width: 750px), (max-width: 750px) { - .description { - margin: 0 auto 25px; +@media (max-device-width: 720px), (max-width: 720px) { + body { + height: unset; } .main { - flex-direction: column; - height: 100%; + box-shadow: none; + align-items: center; + max-height: none; + width: 100%; } - .spacer { - flex: none; - height: 0; + .split { + flex-direction: column-reverse; + align-items: center; } - .stripedBox { - margin-top: 72px; - min-height: 400px; - flex: 1; + .split__left { + border: none; + height: 600px; + } + + .description { + margin: 0 auto 25px; } .uploads { flex: none; padding-top: 6px; } - - .footer { - margin: 15px; - } -} - -@media (max-device-width: 700px), (max-width: 700px) { - .stripedBox { - margin-top: 72px; - } } diff --git a/app/main.css b/app/main.css index 3a98d958..384587e0 100644 --- a/app/main.css +++ b/app/main.css @@ -2,12 +2,12 @@ @import './pages/share/share.css'; @import './pages/signin/signin.css'; @import './pages/unsupported/unsupported.css'; -@import './pages/welcome/welcome.css'; @import './templates/downloadButton/downloadButton.css'; @import './templates/downloadPassword/downloadPassword.css'; @import './templates/file/file.css'; @import './templates/fileIcon/fileIcon.css'; @import './templates/fileList/fileList.css'; +@import './templates/fileManager/fileManager.css'; @import './templates/footer/footer.css'; @import './templates/fxPromo/fxPromo.css'; @import './templates/header/header.css'; diff --git a/app/pages/legal.js b/app/pages/legal.js index f18a926a..6261c29d 100644 --- a/app/pages/legal.js +++ b/app/pages/legal.js @@ -1,14 +1,10 @@ const html = require('choo/html'); const raw = require('choo/html/raw'); -const assets = require('../../common/assets'); const title = require('../templates/title'); module.exports = function(state) { return html` -
- - - +
${title(state)}
${state.translate('legalHeader')}
${raw( diff --git a/app/pages/preview/index.js b/app/pages/preview/index.js index 076d26c8..bfb83a54 100644 --- a/app/pages/preview/index.js +++ b/app/pages/preview/index.js @@ -1,7 +1,7 @@ const html = require('choo/html'); -const titleSection = require('../../templates/title'); const downloadButton = require('../../templates/downloadButton'); const downloadedFiles = require('../../templates/uploadedFileList'); +const split = require('../split'); module.exports = function(state, emit) { const fileInfo = state.fileInfo; @@ -21,18 +21,16 @@ module.exports = function(state, emit) { const bottomLink = state.transfer.state === 'downloading' ? cancelButton : trySendLink; - return html` -
- ${titleSection(state)} - - ${downloadedFiles(fileInfo, state, emit)} + return split( + state, + downloadedFiles(fileInfo, state, emit), + html` +
${state.translate('downloadMessage2')}
${downloadButton(state, emit)} - ${bottomLink} - -
- `; +
` + ); function cancel() { if (state.transfer.state === 'downloading') { diff --git a/app/pages/share/index.js b/app/pages/share/index.js index 153c3a98..5c35a92b 100644 --- a/app/pages/share/index.js +++ b/app/pages/share/index.js @@ -1,11 +1,11 @@ const html = require('choo/html'); const raw = require('choo/html/raw'); -const assets = require('../../../common/assets'); const notFound = require('../notFound'); const deletePopup = require('../../templates/popup'); const uploadedFileList = require('../../templates/uploadedFileList'); const timeLimitText = require('../../templates/timeLimitText'); -const { allowedCopy, delay, fadeOut } = require('../../utils'); +const { allowedCopy, delay } = require('../../utils'); +const split = require('../split'); module.exports = function(state, emit) { const file = state.storage.getFileById(state.params.id); @@ -17,16 +17,13 @@ module.exports = function(state, emit) { ? '' : 'passwordReminder--hidden'; - return html` -
- - - - ${expireInfo(file, state.translate)} - - ${uploadedFileList(file, state, emit)} - + return split( + state, + uploadedFileList(file, state, emit), + html` +
+ ${expireInfo(file, state.translate)} ${state.translate('copyUrlLabel')}
(don't forget the password too)
@@ -43,7 +40,7 @@ module.exports = function(state, emit) { title="${state.translate('copyUrlFormButton')}" onclick=${copyLink}>${state.translate('copyUrlFormButton')} - +
${deletePopup( state.translate('deletePopupText'), @@ -58,10 +55,8 @@ module.exports = function(state, emit) { title="${state.translate('deleteFileButton')}" onclick=${showDeletePopup}>${state.translate('deleteFileButton')} - -
- - `; +
` + ); function showDeletePopup() { const popup = document.querySelector('.popup'); @@ -91,7 +86,6 @@ module.exports = function(state, emit) { async function deleteFile() { emit('delete', { file, location: 'success-screen' }); - await fadeOut('#shareWrapper'); emit('pushState', '/'); } }; diff --git a/app/pages/share/share.css b/app/pages/share/share.css index 2ad3f468..7a1d1b7f 100644 --- a/app/pages/share/share.css +++ b/app/pages/share/share.css @@ -22,17 +22,15 @@ } .shareTitle { - color: var(--textColor); margin: 8px auto 15px; - text-align: center; - font-family: 'SF Pro Text', sans-serif; - font-size: 12px; - font-style: italic; - width: 280px; } .copySection { - width: 100%; + display: flex; + flex-direction: column; + align-items: center; + margin: 24px auto; + width: 80%; } .copySection__url { @@ -48,6 +46,7 @@ letter-spacing: 0; line-height: 18px; font-weight: 500; + width: 100%; } .copySection__url:disabled { diff --git a/app/pages/signin/index.js b/app/pages/signin/index.js index 75588071..d63c7a8a 100644 --- a/app/pages/signin/index.js +++ b/app/pages/signin/index.js @@ -7,9 +7,6 @@ const bytes = require('../../utils').bytes; module.exports = function(state, emit) { return html`
- - - ${title(state)}