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

2
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)}

10
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>`;
};

13
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"

2
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">

2
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')}"

2
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="/">

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

2
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>`;
};