Update vnext android ui (#1036)

* refine android ui

* fix layout

android/pages/home.js

@@ -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}

app/main.css

@@ -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;
+  }
+}

app/ui/archiveTile.js

@@ -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>

app/ui/expiryOptions.js

@@ -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', {

app/ui/home.js

@@ -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>
   `;

assets/add.svg

@@ -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>