Update vnext android ui (#1036)

* refine android ui

* fix layout
This commit is contained in:
Mark Liang (You-Wen) 2018-12-14 00:36:03 +08:00 committed by Donovan Preston
parent 09a4d7b9ee
commit aa156558b6
6 changed files with 55 additions and 20 deletions

View File

@ -24,14 +24,18 @@ module.exports = function(state, emit) {
let content = '';
let button = html`
<img
<div
class="bg-blue rounded-full m-4 flex items-center justify-center shadow-lg"
style="width: 56px; height: 56px"
onclick="${onclick}"
style="padding: 1em"
src="${assets.get('addfile.svg')}"
/>
>
<img src="${assets.get('add.svg')}" />
</div>
`;
if (state.uploading) {
content = archiveTile.uploading(state, emit);
content = html`
<div class="p-6 w-full">${archiveTile.uploading(state, emit)}</div>
`;
} else if (state.archive) {
content = archiveTile.wip(state, emit);
button = '';
@ -39,11 +43,15 @@ module.exports = function(state, emit) {
content =
archives.length < 1
? intro(state)
: list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3');
: list(
archives,
'list-reset h-full overflow-y-scroll w-full p-6',
'mb-3 w-full'
);
}
return html`
<main class="flex relative h-full">
<main class="flex relative h-full w-full">
${state.modal && modal(state, emit)} ${content}
<div class="fixed pin-r pin-b">
${button}

View File

@ -165,3 +165,23 @@ progress::-webkit-progress-value {
@apply shadow-md;
}
}
.rounded-device {
border-radius: 0.25rem;
}
.px-4-device {
padding-left: 0;
padding-right: 0;
}
@media screen and (max-device-width: 576px) {
.rounded-device {
border-radius: 0;
}
.px-4-device {
padding-left: 1rem;
padding-right: 1rem;
}
}

View File

@ -20,7 +20,7 @@ function password(state) {
const MAX_LENGTH = 32;
return html`
<div class="my-2">
<div class="my-2 px-4-device">
<div class="checkbox inline-block mr-3">
<input
id="add-password"
@ -96,7 +96,7 @@ function password(state) {
function fileInfo(file, action) {
return html`
<article class="flex flex-row items-center p-3">
<article class="flex flex-row items-center p-3 w-full">
<img class="" src="${assets.get('blue_file.svg')}"/>
<p class="ml-4 w-full">
<h1 class="text-sm font-medium word-break-all">${file.name}</h1>
@ -143,7 +143,7 @@ module.exports = function(state, emit, archive) {
return html`
<article
id="${archive.id}"
class="flex flex-col items-start border border-grey-light bg-white p-4">
class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<input
@ -189,7 +189,7 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) {
return html`
<article class="flex flex-col bg-white z-20 md:h-full" id="wip">
<article class="flex flex-col bg-white z-20 md:h-full w-full" id="wip">
${
list(
Array.from(state.archive.files)
@ -225,7 +225,7 @@ module.exports.wip = function(state, emit) {
${expiryOptions(state, emit)} ${password(state, emit)}
<button
id="upload-btn"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 flex flex-no-shrink items-center justify-center font-semibold"
class="rounded-device bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('uploadFilesButton')}"
onclick="${upload}"
>
@ -283,7 +283,7 @@ module.exports.uploading = function(state, emit) {
return html`
<article
id="${archive.id}"
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4 w-full">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -317,7 +317,7 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) {
return html`
<article
class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full"
class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full"
onclick="${
e => {
if (e.target.tagName !== 'LABEL') {
@ -367,7 +367,7 @@ module.exports.preview = function(state, emit) {
archive.open = true;
}
return html`
<article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20">
<article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20 w-full">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -397,7 +397,7 @@ module.exports.downloading = function(state, emit) {
const progress = state.transfer.progressRatio;
const progressPercent = percent(progress);
return html`
<article class="flex flex-col bg-white border border-grey-light p-4 z-20">
<article class="flex flex-col bg-white border border-grey-light p-4 z-20 w-full">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>

View File

@ -7,7 +7,7 @@ const signupDialog = require('./signupDialog');
module.exports = function(state, emit) {
const el = html`
<div class="">
<div class="px-4-device">
${
raw(
state.translate('frontPageExpireInfo', {

View File

@ -20,14 +20,18 @@ module.exports = function(state, emit) {
const right =
archives.length < 1
? intro(state)
: list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3');
: list(
archives,
'list-reset h-full overflow-y-scroll w-full',
'mb-3 w-full'
);
return html`
<main class="main relative">
${state.modal && modal(state, emit)}
<section class="h-full w-full p-6 md:flex md:flex-row z-10">
<div class="md:mr-6 md:w-1/2">${left}</div>
<div class="md:w-1/2 mt-6 md:mt-0">${right}</div>
<div class="md:mr-6 md:w-1/2 w-full">${left}</div>
<div class="md:w-1/2 mt-6 md:mt-0 w-full">${right}</div>
</section>
</main>
`;

3
assets/add.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<polygon fill="#FFF" fill-rule="evenodd" points="6.857 0 6.857 6.857 0 6.857 0 9.143 6.857 9.143 6.857 16 9.143 16 9.143 9.143 16 9.143 16 6.857 9.143 6.857 9.143 0"/>
</svg>

After

Width:  |  Height:  |  Size: 261 B