natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added wide layout

This commit is contained in:
Danny Coates 2018-10-25 13:28:06 -07:00
parent 7838ad586d
commit 211404237a
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
9 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/main.css
View File

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

2
app/routes.js
View File

@ -17,7 +17,7 @@ function banner(state, emit) {
function body(main) { function body(main) {
return function(state, emit) { 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)} ${state.modal && modal(state, emit)}
${banner(state, emit)} ${banner(state, emit)}
${header(state, emit)} ${header(state, emit)}

10
app/ui/archiveList.js
View File

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

13
app/ui/archiveTile.js
View File

@ -83,9 +83,12 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) { module.exports.wip = function(state, emit) {
return html` return html`
<article class="relative flex flex-col bg-white border border-grey-light p-2 z-20"> <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')} ${list(
<div class="border border-dashed border-blue-light mb-2"> 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 <input
id="file-upload" id="file-upload"
class="hidden" class="hidden"
@ -102,7 +105,7 @@ module.exports.wip = function(state, emit) {
</div> </div>
${expiryOptions(state, emit)} ${expiryOptions(state, emit)}
<button <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')}" title="${state.translate('uploadFilesButton')}"
onclick=${upload}> onclick=${upload}>
${state.translate('uploadFilesButton')} ${state.translate('uploadFilesButton')}
@ -181,7 +184,7 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) { module.exports.empty = function(state, emit) {
return html` 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> <div class="p-1">${state.translate('uploadDropDragMessage')}</div>
<input <input
id="file-upload" id="file-upload"

2
app/ui/footer.js
View File

@ -5,7 +5,7 @@ const { browserName } = require('../utils');
module.exports = function(state) { module.exports = function(state) {
const browser = browserName(); const browser = browserName();
const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`; 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"> <ul class="list-reset flex flex-col md:flex-row items-start md:items-center md:justify-end">
<li class="m-2"><a <li class="m-2"><a
href="https://www.mozilla.org/about/legal"> href="https://www.mozilla.org/about/legal">

2
app/ui/fxPromo.js
View File

@ -3,7 +3,7 @@ const assets = require('../../common/assets');
module.exports = function() { module.exports = function() {
return html` 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"> <div class="flex items-center mx-auto">
<img <img
src="${assets.get('firefox_logo-only.svg')}" src="${assets.get('firefox_logo-only.svg')}"

2
app/ui/header.js
View File

@ -3,7 +3,7 @@ const account = require('./account');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const header = html` 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 <a
class="header-logo" class="header-logo"
href="/"> href="/">

3
app/ui/modal.js
View File

@ -3,7 +3,8 @@ const html = require('choo/html');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<div class="fixed pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}> <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)} ${state.modal(state, emit, close)}
</div> </div>
</div>`; </div>`;

2
app/ui/welcome.js
View File

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