wip

app/base.css

@@ -57,11 +57,14 @@ a {
   background: var(--pageBGColor);
   box-shadow: var(--large-box-shadow);
   width: 90%;
-  height: 100%;
   max-width: 960px;
+  min-height: 550px;
   max-height: 600px;
   align-self: center;
   margin: auto 0;
+  display: grid;
+  grid-template-columns: 70px 360px 1fr;
+  grid-template-areas: 'nav files content';
 }
 
 .split {
@@ -73,12 +76,11 @@ a {
 
 .split__left {
   height: 100%;
-  width: 360px;
-  margin: 0;
   border-right: 1px solid #d7d7db;
   display: flex;
   flex-direction: column;
   text-align: center;
+  grid-area: files;
 }
 
 .split__right {
@@ -88,6 +90,16 @@ a {
   align-items: flex-end;
   justify-content: center;
   position: relative;
+  grid-area: content;
+}
+
+.wide {
+  grid-area: files-start / files-start / content-end / content-end;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin-left: 12px;
+  height: 100%;
 }
 
 .noscript {
@@ -187,8 +199,6 @@ a {
 
 .page {
   height: 100%;
-  width: 75%;
-  margin: 0 auto;
   padding: 24px;
   display: flex;
   flex-direction: column;
@@ -275,16 +285,17 @@ a {
     align-items: center;
     max-height: none;
     width: 100%;
-  }
-
-  .split {
-    flex-direction: column-reverse;
-    align-items: center;
+    grid-template-columns: none;
+    grid-template-rows: 90px minmax(160px, 30vh) minmax(240px, 30vh) 70px;
+    grid-template-areas:
+      'promo'
+      'files'
+      'content'
+      'nav';
   }
 
   .split__left {
     border: none;
-    height: 600px;
   }
 
   .description {

app/main.css

@@ -1,7 +1,10 @@
 @import './base.css';
 @import './pages/share/share.css';
 @import './pages/signin/signin.css';
+@import './pages/uploads/uploads.css';
 @import './pages/unsupported/unsupported.css';
+@import './templates/archiveTile/archiveTile.css';
+@import './templates/controlArea/controlArea.css';
 @import './templates/downloadButton/downloadButton.css';
 @import './templates/downloadPassword/downloadPassword.css';
 @import './templates/file/file.css';

app/pages/blank.js

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

app/pages/legal.js

@@ -4,7 +4,7 @@ const title = require('../templates/title');
 
 module.exports = function(state) {
   return html`
-    <div class="page">
+    <main class="main page">
       ${title(state)}
       <div class="title">${state.translate('legalHeader')}</div>
         ${raw(
@@ -20,7 +20,7 @@ module.exports = function(state) {
             'https://www.mozilla.org/about/legal/terms/mozilla/'
           ])
         )}
-    </div>
+    </main>
   `;
 };
 

app/pages/notFound/index.js

@@ -4,19 +4,15 @@ const title = require('../../templates/title');
 
 module.exports = function(state) {
   return html`
-    <div class="page">
-      
+    <main class="main page">
       ${title(state)}
-
       <div class="error">${state.translate('expiredPageHeader')}</div>
-      <img src="${assets.get(
-        'illustration_expired.svg'
-      )}" class="flexible" id="expired-img">
+      <img src="${assets.get('illustration_expired.svg')}" id="expired-img">
       <div class="description">
         ${state.translate('uploadPageExplainer')}
       </div>
       <a class="link link--action" href="/">
         ${state.translate('sendYourFilesLink')}
       </a>
-    </div>`;
+    </main>`;
 };

app/pages/password/index.js

@@ -4,9 +4,9 @@ const downloadPassword = require('../../templates/downloadPassword');
 
 module.exports = function(state, emit) {
   return html`
-    <div class="page">
+    <main class="main page">
       ${titleSection(state)}
-      
+
       <div class="description">${state.translate('downloadMessage2')}</div>
       ${downloadPassword(state, emit)}
 
@@ -14,6 +14,6 @@ module.exports = function(state, emit) {
         ${state.translate('sendYourFilesLink')}
       </a>
 
-    </div>
+    </main>
   `;
 };

app/pages/preview/index.js

@@ -23,6 +23,7 @@ module.exports = function(state, emit) {
 
   return split(
     state,
+    emit,
     downloadedFiles(fileInfo, state, emit),
     html`
     <div class="copySection">

app/pages/share/index.js

@@ -19,6 +19,7 @@ module.exports = function(state, emit) {
 
   return split(
     state,
+    emit,
     uploadedFileList(file, state, emit),
     html`
     <div class="copySection">

app/pages/signin/index.js

@@ -6,7 +6,7 @@ const bytes = require('../../utils').bytes;
 
 module.exports = function(state, emit) {
   return html`
-    <div class="page signInPage">
+    <main class="main page signInPage">
       ${title(state)}
       <div class="signIn__info flexible">
         ${state.translate('accountBenefitTitle')}
@@ -44,7 +44,7 @@ module.exports = function(state, emit) {
       <label class="btn" for="email-submit">
         ${state.translate('signInContinueButton')}
       </label>
-    </div>
+    </main>
   `;
 
   function submitEmail(event) {

app/pages/split.js

@@ -1,18 +1,20 @@
 const html = require('choo/html');
 const title = require('../templates/title');
 const signupPromo = require('../templates/signupPromo');
+const controlArea = require('../templates/controlArea');
 
-module.exports = function(state, a, b) {
+module.exports = function(state, emit, a, b) {
   return html`
-    <div class="split">
-      <div class="split__left">
-        ${title(state)}
-        ${a}
-      </div>
-      <div class="split__right">
-        ${signupPromo(state)}
-        ${b}
-      </div>
+  <main class="main">
+    ${controlArea(state, emit)}
+    <div class="split__left">
+      ${title(state)}
+      ${a}
     </div>
+    <div class="split__right">
+      ${b}
+    </div>
+    ${signupPromo(state)}
+  </main>
   `;
 };