Home Explore Help
Sign In
SMusatov
/
send
mirror of https://gitlab.com/timvisee/send.git
1
0
Fork 0
Files
Browse Source

added wide layout

Danny Coates 6 years ago
parent
7838ad586d
commit
211404237a
9 changed files with 23 additions and 19 deletions
Split View Show Diff Stats
  1. 1 5
      app/main.css
  2. 1 1
      app/routes.js
  3. 7 3
      app/ui/archiveList.js
  4. 8 5
      app/ui/archiveTile.js
  5. 1 1
      app/ui/footer.js
  6. 1 1
      app/ui/fxPromo.js
  7. 1 1
      app/ui/header.js
  8. 2 1
      app/ui/modal.js
  9. 1 1
      app/ui/welcome.js

+ 1 - 5
app/main.css
View File 

@@ -32,8 +32,6 @@ progress::-webkit-progress-value {
 
 }
 
 
 .main {
 
-  @apply bg-blue-lightest;
 
-
 
   min-height: calc(100vh - 6rem);
 
 }
 
 
@@ -73,9 +71,7 @@ progress::-webkit-progress-value {
 
     @apply shadow-md;
 
     @apply m-auto;
 
 
-    min-width: 30rem;
 
-    max-width: 60rem;
 
     min-height: 30rem;
 
-    max-height: 38rem;
 
+    max-height: 40rem;
 
   }
 
 }

+ 1 - 1
app/routes.js
View File 

@@ -17,7 +17,7 @@ function banner(state, emit) {
 
 
 function body(main) {
 
   return function(state, emit) {
 
-    const b = html`<body class="flex flex-col font-sans bg-white md:h-screen md:bg-grey-lightest">
 
+    const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest">
 
     ${state.modal && modal(state, emit)}
 
     ${banner(state, emit)}
 
     ${header(state, emit)}

+ 7 - 3
app/ui/archiveList.js
View File 

@@ -34,8 +34,12 @@ module.exports = function(state, emit) {
 
     archives.push(intro(state));
 
   }
 
   return html`
 
-  <section class="relative h-full w-full px-6">
 
-    <div class="pt-4 pb-2">${wip}</div>
 
-    ${list(archives, 'list-reset h-full overflow-y-scroll foo', 'py-2')}
 
+  <section class="relative 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>`;
 
 };

+ 8 - 5
app/ui/archiveTile.js
View File 

@@ -83,9 +83,12 @@ module.exports = function(state, emit, archive) {
 
 
 module.exports.wip = function(state, emit) {
 
   return html`
 
-  <article class="relative flex flex-col bg-white border border-grey-light p-2 z-20">
 
-    ${list(state.archive.files.map(f => fileInfo(f, remove(f))), 'list-reset')}
 
-    <div class="border border-dashed border-blue-light mb-2">
 
+  <article class="relative h-full flex flex-col bg-white border border-grey-light p-2 z-20">
 
+    ${list(
 
+      state.archive.files.map(f => fileInfo(f, remove(f))),
 
+      'list-reset h-full overflow-y-scroll'
 
+    )}
 
+    <div class="flex-grow border border-dashed border-blue-light mb-2">
 
       <input
 
         id="file-upload"
 
         class="hidden"
 
@@ -102,7 +105,7 @@ module.exports.wip = function(state, emit) {
 
     </div>
 
     ${expiryOptions(state, emit)}
 
     <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('uploadFilesButton')}"
 
       onclick=${upload}>
 
       ${state.translate('uploadFilesButton')}
 
@@ -181,7 +184,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 border-dashed border-blue-light p-8">
 
+  <article class="flex flex-col items-center justify-center border border-dashed border-blue-light p-8 h-full">
 
     <div class="p-1">${state.translate('uploadDropDragMessage')}</div>
 
     <input
 
       id="file-upload"

+ 1 - 1
app/ui/footer.js
View File 

@@ -5,7 +5,7 @@ const { browserName } = require('../utils');
 
 module.exports = function(state) {
 
   const browser = browserName();
 
   const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
 
-  const footer = html`<footer class="flex-none m-2 font-medium text-xs text-grey-dark">
 
+  const footer = html`<footer class="w-full flex-none self-start p-2 bg-white font-medium text-xs text-grey-dark">
 
     <ul class="list-reset flex flex-col md:flex-row items-start md:items-center md:justify-end">
 
       <li class="m-2"><a
 
         href="https://www.mozilla.org/about/legal">

+ 1 - 1
app/ui/fxPromo.js
View File 

@@ -3,7 +3,7 @@ const assets = require('../../common/assets');
 
 
 module.exports = function() {
 
   return html`
 
-    <div class="flex-none flex flex-row items-center content-center justify-center text-sm bg-grey-light text-grey-darkest h-12 px-4">
 
+    <div class="w-full flex-none flex flex-row items-center content-center justify-center text-sm bg-grey-light text-grey-darkest h-12 px-4">
 
       <div class="flex items-center mx-auto">
 
         <img
 
           src="${assets.get('firefox_logo-only.svg')}"

+ 1 - 1
app/ui/header.js
View File 

@@ -3,7 +3,7 @@ const account = require('./account');
 
 
 module.exports = function(state, emit) {
 
   const header = html`
 
-  <header class="flex-none flex flex-row items-center bg-white w-full px-4 h-12 shadow-md justify-between">
 
+  <header class="flex-none flex flex-row items-center justify-between bg-white w-full px-4 h-12 md:shadow-md">
 
     <a
 
       class="header-logo"
 
       href="/">

+ 2 - 1
app/ui/modal.js
View File 

@@ -3,7 +3,8 @@ const html = require('choo/html');
 
 module.exports = function(state, emit) {
 
   return html`
 
   <div class="fixed pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}>
 
-    <div class="rounded max-w-md bg-white" onclick=${e => e.stopPropagation()}>
 
+    <div class="rounded max-w-md bg-white m-1" onclick=${e =>
 
+      e.stopPropagation()}>
 
       ${state.modal(state, emit, close)}
 
     </div>
 
   </div>`;

+ 1 - 1
app/ui/welcome.js
View File 

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