wip on download page

app/fileManager.js

@@ -158,25 +158,6 @@ export default function(state, emitter) {
         emitter.emit('password', { password, file: ownedFile });
       }
       state.modal = copyDialog(ownedFile.name, ownedFile.url);
-      state.animation = () => {
-        const x = document.querySelector('.foo');
-        const y = x.previousElementSibling;
-        x.animate(
-          [
-            { transform: `translateY(-${y.getBoundingClientRect().height}px)` },
-            { transform: 'translateY(0)' }
-          ],
-          {
-            duration: 400,
-            easing: 'ease'
-          }
-        );
-        y.animate([{ opacity: 0 }, { opacity: 1 }], {
-          delay: 300,
-          duration: 100,
-          fill: 'both'
-        });
-      };
     } catch (err) {
       if (err.message === '0') {
         //cancelled. do nothing

app/routes.js

@@ -32,7 +32,7 @@ function body(main) {
 
 module.exports = function() {
   const app = choo();
-  app.route('/', body(require('./ui/welcome')));
+  app.route('/', body(require('./ui/home')));
   app.route('/download/:id', body(download));
   app.route('/download/:id/:key', body(download));
   app.route('/unsupported/:reason', body(require('./ui/unsupported')));

app/ui/archiveTile.js

@@ -107,13 +107,22 @@ function fileInfo(file, action) {
 function archiveDetails(translate, archive) {
   if (archive.manifest.files.length > 1) {
     return html`
-    <details class="w-full">
+    <details class="w-full pb-1 overflow-y-hidden" ${
+      archive.open ? 'open' : ''
+    } ontoggle=${toggled}>
       <summary>${translate('fileCount', {
         num: archive.manifest.files.length
       })}</summary>
-      ${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset')}
+      ${list(
+        archive.manifest.files.map(f => fileInfo(f)),
+        'list-reset h-full overflow-y-scroll'
+      )}
     </details>`;
   }
+  function toggled(event) {
+    event.stopPropagation();
+    archive.open = event.target.open;
+  }
 }
 
 module.exports = function(state, emit, archive) {
@@ -286,9 +295,12 @@ module.exports.empty = function(state, emit) {
 
 module.exports.preview = function(state, emit) {
   const archive = state.fileInfo;
+  if (archive.open === undefined) {
+    archive.open = true;
+  }
   return html`
-  <article class="flex flex-col bg-white border border-grey-light p-2 z-20">
-    <p class="w-full mb-4">
+  <article class="flex flex-col max-h-full bg-white border border-grey-light p-2 z-20">
+    <p class="flex-none w-full mb-4">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <h1 class="text-base font-semibold">${archive.name}</h1>
       <div class="text-sm font-light">${bytes(archive.size)}</div>
@@ -296,7 +308,7 @@ module.exports.preview = function(state, emit) {
     ${archiveDetails(state.translate, archive)}
     <hr class="w-full border-t">
     <button
-      class="border rounded bg-blue text-white mt-2 py-2 px-6"
+      class="flex-none border rounded bg-blue text-white mt-2 py-2 px-6"
       title="${state.translate('downloadButtonLabel')}"
       onclick=${download}>
       ${state.translate('downloadButtonLabel')}

app/ui/blank.js

@@ -1,5 +1,5 @@
 const html = require('choo/html');
 
 module.exports = function() {
-  return html`<main class="main"></main>`;
+  return html`<main class="main container"></main>`;
 };

app/ui/download.js

@@ -1,6 +1,7 @@
 /* global downloadMetadata */
 const html = require('choo/html');
 const archiveTile = require('./archiveTile');
+const intro = require('./intro');
 
 function password(state, emit) {
   const fileInfo = state.fileInfo;
@@ -96,8 +97,9 @@ module.exports = function(state, emit) {
   }
   return html`
   <main class="main container">
-    <section class="relative h-full w-full my-4 px-6">
-      ${content}
+    <section class="relative h-full w-full px-6 md:flex md:flex-row">
+      <div class="pt-4 md:mr-6 md:pb-4 md:w-1/2">${content}</div>
+      <div class="pt-4 md:w-1/2">${intro(state)}</div>
     </section>
   </main>`;
 };

app/ui/error.js

@@ -3,7 +3,7 @@ const assets = require('../../common/assets');
 
 module.exports = function(state) {
   return html`
-  <main class="main">
+  <main class="main container">
     <div class="flex flex-col items-center text-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
     <h1 class="">${state.translate('errorPageHeader')}</h1>
     <img class="my-8" src="${assets.get('illustration_error.svg')}"/>

app/ui/home.js

@@ -1,6 +1,7 @@
 const html = require('choo/html');
 const { list } = require('../utils');
 const archiveTile = require('./archiveTile');
+const modal = require('./modal');
 const intro = require('./intro');
 
 module.exports = function(state, emit) {
@@ -20,12 +21,15 @@ module.exports = function(state, emit) {
     archives.push(intro(state));
   }
   return html`
-  <section class="h-full w-full px-6 md:flex md:flex-row">
-    <div class="pt-4 md:pb-4 md:mr-6 md:w-1/2">${wip}</div>
-    ${list(
-      archives,
-      'list-reset h-full md:w-1/2 overflow-y-scroll foo pt-2',
-      'py-2'
-    )}
-  </section>`;
+  <main class="main container relative">
+    ${state.modal && modal(state, emit)}
+    <section class="h-full w-full px-6 md:flex md:flex-row">
+      <div class="pt-4 md:pb-4 md:mr-6 md:w-1/2">${wip}</div>
+      ${list(
+        archives,
+        'list-reset h-full md:w-1/2 overflow-y-scroll pt-2',
+        'py-2'
+      )}
+    </section>
+  </main>`;
 };

app/ui/legal.js

@@ -3,7 +3,7 @@ const raw = require('choo/html/raw');
 
 module.exports = function(state) {
   return html`
-  <main class="main">
+  <main class="main container">
   <div class="flex flex-col items-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
       <h1 class="">${state.translate('legalHeader')}</h1>
       ${raw(

app/ui/notFound.js

@@ -3,7 +3,7 @@ const assets = require('../../common/assets');
 
 module.exports = function(state) {
   return html`
-  <main class="main">
+  <main class="main container">
     <div class="flex flex-col items-center text-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
       <h1 class="text-pink-dark">${state.translate('expiredPageHeader')}</h1>
       <img src="${assets.get('illustration_expired.svg')}" id="expired-img">

app/ui/unsupported.js

@@ -30,7 +30,7 @@ module.exports = function(state) {
   }
 
   return html`
-    <main class="main">
+    <main class="main container">
       <div class="flex flex-col items-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
       <h1 class="text-center">${strings.header}</h1>
       <p class="my-16">

app/ui/welcome.js

@@ -1,10 +0,0 @@
-const html = require('choo/html');
-const archiveList = require('./archiveList');
-const modal = require('./modal');
-
-module.exports = function(state, emit) {
-  return html`<main class="main container relative">
-  ${state.modal && modal(state, emit)}
-  ${archiveList(state, emit)}
-  </main>`;
-};