diff --git a/app/main.css b/app/main.css index 95ca22ad..1539d7a3 100644 --- a/app/main.css +++ b/app/main.css @@ -31,19 +31,23 @@ progress::-webkit-progress-value { @apply rounded-sm; } +.word-break-all { + word-break: break-all; +} + .main { display: flex; max-width: 64rem; width: 100%; + height: 100%; } .main > section { @apply bg-white; - @apply shadow; } .header-logo { - background-image: url('../assets/send_logo.svg'); + background-image: url('../assets/send_logo_white.svg'); background-position: left; background-repeat: no-repeat; background-size: 1.8rem; @@ -145,11 +149,16 @@ progress::-webkit-progress-value { @apply flex-1; @apply self-center; @apply items-center; - @apply my-10; + @apply m-auto; + @apply py-8; - width: calc(100% - 3rem); - min-height: 30rem; + min-height: 33rem; max-height: 40rem; + width: calc(100% - 3rem); + } + + .header-logo { + background-image: url('../assets/send_logo.svg'); } .main > section { diff --git a/app/routes.js b/app/routes.js index b2619599..cb616c42 100644 --- a/app/routes.js +++ b/app/routes.js @@ -16,7 +16,7 @@ function banner(state, emit) { function body(main) { return function(state, emit) { - const b = html` + const b = html` ${banner(state, emit)} ${header(state, emit)} ${main(state, emit)} diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index cd63155c..eb1232eb 100644 --- a/app/ui/archiveTile.js +++ b/app/ui/archiveTile.js @@ -36,7 +36,7 @@ function password(state) { id="password-input" class="${ 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" maxlength="${MAX_LENGTH}" type="password" @@ -96,7 +96,7 @@ function fileInfo(file, action) {

-

${file.name}

+

${file.name}

${bytes( file.size )}
@@ -137,7 +137,7 @@ module.exports = function(state, emit, archive) { alt="Delete" src="${assets.get('close-16.svg')}" onclick=${del}/> -

${archive.name}

+

${archive.name}

${bytes( archive.size )}
@@ -174,11 +174,13 @@ module.exports = function(state, emit, archive) { module.exports.wip = function(state, emit) { return html` -
+
${list( - state.archive.files.map(f => fileInfo(f, remove(f))), - 'list-reset h-full overflow-y-scroll p-4 bg-blue-lightest md:max-h-half-screen', - 'bg-white px-2 mb-3 border border-grey-light rounded' + Array.from(state.archive.files) + .reverse() + .map(f => fileInfo(f, remove(f))), + 'list-reset h-full overflow-y-scroll px-4 bg-blue-lightest md:max-h-half-screen', + 'bg-white px-2 mt-3 border border-grey-light rounded' )}
${state.translate('uploadSuccessConfirmHeader')} @@ -207,6 +209,7 @@ module.exports.wip = function(state, emit) {
`; function upload(event) { + window.scrollTo(0, 0); event.preventDefault(); event.target.disabled = true; if (!state.uploading) { @@ -223,6 +226,11 @@ module.exports.wip = function(state, emit) { const newFiles = Array.from(event.target.files); emit('addFiles', { files: newFiles }); + setTimeout(() => { + document + .querySelector('#wip > ul > li:first-child') + .scrollIntoView({ block: 'center' }); + }); } function remove(file) { @@ -250,7 +258,7 @@ module.exports.uploading = function(state, emit) { class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">

-

${archive.name}

+

${archive.name}

${bytes( archive.size )}
@@ -280,7 +288,8 @@ module.exports.uploading = function(state, emit) { module.exports.empty = function(state, emit) { return html` -
+
document.getElementById('file-upload').click()}>
${state.translate( 'uploadDropDragMessage' @@ -293,7 +302,8 @@ module.exports.empty = function(state, emit) { class="hidden" type="file" multiple - onchange=${add} /> + onchange=${add} + onclick=${e => e.stopPropagation()} />