From 4ee497a83f0c39c1d7e5c9972bb463ff6d418b41 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 8 Aug 2018 17:24:58 -0700 Subject: [PATCH] minor ui fixes --- app/base.css | 14 +++++---- app/routes/index.js | 2 +- app/templates/file/file.css | 20 ++++++++----- app/templates/file/index.js | 30 +++++++++---------- app/templates/fileIcon/fileIcon.css | 1 + app/templates/fileList/fileList.css | 27 ++++++++++------- app/templates/fxPromo/fxPromo.css | 1 + .../uploadedFileList/uploadedFileList.css | 1 + 8 files changed, 58 insertions(+), 38 deletions(-) diff --git a/app/base.css b/app/base.css index f30d5c63..84bbb6d5 100644 --- a/app/base.css +++ b/app/base.css @@ -26,7 +26,7 @@ body { display: flex; flex-direction: column; margin: 0; - min-height: 100vh; + height: 100vh; } input, @@ -48,7 +48,7 @@ a { box-sizing: border-box; min-height: 500px; max-height: 800px; - height: 100px; + height: 100%; } .stripedBox { @@ -58,7 +58,8 @@ a { margin-top: 32px; background-color: white; border-radius: 6px; - box-shadow: 0 0 0 3px rgba(12, 12, 13, 0.2); + border: 3px solid rgba(12, 12, 12, 0.2); + background-clip: padding-box; background-image: repeating-linear-gradient( 45deg, white, @@ -88,7 +89,9 @@ a { .uploads { flex: 0 0 262px; - position: relative; + box-sizing: border-box; + padding-top: 180px; + display: flex; } .noscript { @@ -276,13 +279,14 @@ a { } .stripedBox { - margin-top: 72; + margin-top: 72px; min-height: 400px; flex: 1; } .uploads { flex: none; + padding-top: 6px; } .footer { diff --git a/app/routes/index.js b/app/routes/index.js index 20c7a0fa..db337e70 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -22,7 +22,6 @@ function body(template) { return function(state, emit) { const b = html` ${banner(state, emit)} - ${signupPromo(state)}
+ ${signupPromo(state)}
diff --git a/app/templates/file/file.css b/app/templates/file/file.css index 118869fa..67e436a0 100644 --- a/app/templates/file/file.css +++ b/app/templates/file/file.css @@ -1,18 +1,22 @@ .fileToast { - margin: 13px 0 0; + flex: none; + display: block; + margin: 6px 0 0; overflow: hidden; font-size: 11px; line-height: 18px; color: var(--lightTextColor); background-color: var(--pageBGColor); position: relative; - box-shadow: 0 0 0 3px rgba(12, 12, 12, 0.2); + border: 3px solid rgba(12, 12, 12, 0.2); + background-clip: padding-box; box-sizing: border-box; height: 53px; border-radius: 4px; } .fileToast__content { + height: 100%; position: relative; z-index: 2; } @@ -61,33 +65,35 @@ } .fileToast .fileIcon { - margin: 2px 8px; + margin: 0 8px; } @media (max-device-width: 750px), (max-width: 750px) { .fileToast { height: 32px; - width: 400px; } .fileToast__content { display: flex; + line-height: 13px; + margin: 0; + align-items: center; } .fileData { flex: auto; display: flex; flex-wrap: nowrap; - margin-left: 8px; + margin: 0 6px 0 0; } .fileInfo { - flex-shrink: 0; + flex: none; margin-left: auto; } .fileToast .fileIcon { - margin: 0; + flex: none; transform: scale(0.5); color: transparent; } diff --git a/app/templates/file/index.js b/app/templates/file/index.js index dce113c5..a861de5b 100644 --- a/app/templates/file/index.js +++ b/app/templates/file/index.js @@ -20,23 +20,23 @@ module.exports = function(file, state) { const activeClass = isOnSharePage() ? 'fileToast--active' : ''; return html` - -
  • -
    - ${fileIcon(file.name, file._hasPassword)} -
    -

    ${fileName}

    -

    - ${bytes(file.size)} · - ${state.translate('downloadCount', { - num: `${number(totalDownloads)} / ${number(downloadLimit)}` - })} - ${remainingTime} -

    +
  • + +
    + ${fileIcon(file.name, file._hasPassword)} +
    +

    ${fileName}

    +

    + ${bytes(file.size)} · + ${state.translate('downloadCount', { + num: `${number(totalDownloads)} / ${number(downloadLimit)}` + })} + ${remainingTime} +

    +
    -
    • + - `; function toastClick() { diff --git a/app/templates/fileIcon/fileIcon.css b/app/templates/fileIcon/fileIcon.css index e5f1a89b..ab08a622 100644 --- a/app/templates/fileIcon/fileIcon.css +++ b/app/templates/fileIcon/fileIcon.css @@ -25,4 +25,5 @@ font-size: 7px; font-weight: 600; text-transform: uppercase; + user-select: none; } diff --git a/app/templates/fileList/fileList.css b/app/templates/fileList/fileList.css index 2e3f0d93..787f9c31 100644 --- a/app/templates/fileList/fileList.css +++ b/app/templates/fileList/fileList.css @@ -1,21 +1,28 @@ .fileList { - position: absolute; - bottom: 0; - list-style-type: none; margin: 0; - padding: 3px; - font-family: 'Segoe UI', 'SF Pro Text', sans-serif; + padding: 0; width: 262px; - max-height: 80%; - overflow-y: scroll; - overflow-x: hidden; + min-height: 100%; + height: 100%; + flex-grow: 1; + display: flex; + flex-direction: column; + list-style-type: none; + overflow: scroll; + font-family: 'Segoe UI', 'SF Pro Text', sans-serif; +} + +/* hack because justify-content:flex-end and overflow:scroll doesn't work together */ +.fileList > :first-child { + margin-top: auto; } @media (max-device-width: 750px), (max-width: 750px) { .fileList { + flex: none; position: static; - width: 400px; + width: 406px; max-height: 160px; - margin: 6px 0 0 -3px; + margin: 0; } } diff --git a/app/templates/fxPromo/fxPromo.css b/app/templates/fxPromo/fxPromo.css index a1b648df..c1582fcc 100644 --- a/app/templates/fxPromo/fxPromo.css +++ b/app/templates/fxPromo/fxPromo.css @@ -1,4 +1,5 @@ .fxPromo { + flex: none; padding: 0 15px; height: 48px; background-color: #efeff1; diff --git a/app/templates/uploadedFileList/uploadedFileList.css b/app/templates/uploadedFileList/uploadedFileList.css index 378faf5e..2784a3c7 100644 --- a/app/templates/uploadedFileList/uploadedFileList.css +++ b/app/templates/uploadedFileList/uploadedFileList.css @@ -7,4 +7,5 @@ align-content: center; flex: 1; overflow-y: scroll; + overflow-x: hidden; }