a few style tweaks

This commit is contained in:
Danny Coates 2018-11-02 11:28:56 -07:00
parent cacb3a898d
commit 1c063111cc
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
5 changed files with 10 additions and 24 deletions

View File

@ -33,7 +33,7 @@ progress::-webkit-progress-value {
.main { .main {
display: flex; display: flex;
max-width: 1024px; max-width: 64rem;
width: 100%; width: 100%;
} }
@ -83,14 +83,6 @@ progress::-webkit-progress-value {
white-space: nowrap; white-space: nowrap;
} }
.bg-shades {
background-color: rgba(255, 255, 255, 0.8);
}
.border-modal {
box-shadow: 0 0 5rem 5rem white;
}
.checkbox { .checkbox {
@apply leading-normal; @apply leading-normal;
@apply select-none; @apply select-none;
@ -148,10 +140,6 @@ progress::-webkit-progress-value {
content: '\200b'; content: '\200b';
} }
.max-h-half {
max-height: 50vh;
}
@screen md { @screen md {
.main { .main {
@apply flex-1; @apply flex-1;
@ -159,7 +147,7 @@ progress::-webkit-progress-value {
@apply items-center; @apply items-center;
@apply my-10; @apply my-10;
width: calc(100% - 48px); width: calc(100% - 3rem);
min-height: 30rem; min-height: 30rem;
max-height: 40rem; max-height: 40rem;
} }

View File

@ -109,16 +109,13 @@ function fileInfo(file, action) {
function archiveDetails(translate, archive) { function archiveDetails(translate, archive) {
if (archive.manifest.files.length > 1) { if (archive.manifest.files.length > 1) {
return html` return html`
<details class="w-full pb-1 overflow-y-hidden" ${ <details class="w-full pb-1 overflow-y-scroll" ${
archive.open ? 'open' : '' archive.open ? 'open' : ''
} ontoggle=${toggled}> } ontoggle=${toggled}>
<summary>${translate('fileCount', { <summary>${translate('fileCount', {
num: archive.manifest.files.length num: archive.manifest.files.length
})}</summary> })}</summary>
${list( ${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset h-full')}
archive.manifest.files.map(f => fileInfo(f)),
'list-reset h-full overflow-y-scroll'
)}
</details>`; </details>`;
} }
function toggled(event) { function toggled(event) {
@ -180,7 +177,7 @@ module.exports.wip = function(state, emit) {
<article class="h-full flex flex-col bg-white z-20"> <article class="h-full flex flex-col bg-white z-20">
${list( ${list(
state.archive.files.map(f => fileInfo(f, remove(f))), state.archive.files.map(f => fileInfo(f, remove(f))),
'list-reset h-full overflow-y-scroll p-4 bg-blue-lightest max-h-half', 'list-reset h-full overflow-y-scroll p-4 bg-blue-lightest md:max-h-half-screen',
'bg-white px-2 mb-3 border border-grey-light rounded' 'bg-white px-2 mb-3 border border-grey-light rounded'
)} )}
<div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium"> <div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium">
@ -319,7 +316,7 @@ module.exports.preview = function(state, emit) {
archive.open = true; archive.open = true;
} }
return html` return html`
<article class="flex flex-col bg-white border border-grey-light p-4 z-20"> <article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20">
<p class="w-full mb-4"> <p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium">${archive.name}</h1> <h1 class="text-sm font-medium">${archive.name}</h1>

View File

@ -107,7 +107,7 @@ module.exports = function(state, emit) {
return html` return html`
<main class="main container"> <main class="main container">
<section class="relative h-full w-full p-6 md:flex md:flex-row"> <section class="relative h-full w-full p-6 md:flex md:flex-row">
<div class="md:mr-6 md:w-1/2 overflow-y-scroll">${content}</div> <div class="md:mr-6 md:w-1/2">${content}</div>
<div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div> <div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div>
</section> </section>
</main>`; </main>`;

View File

@ -2,9 +2,9 @@ const html = require('choo/html');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}> <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud" onclick=${close}>
<div class="h-full max-h-screen absolute pin-t flex items-center"> <div class="h-full max-h-screen absolute pin-t flex items-center">
<div class="border-modal bg-white" onclick=${e => e.stopPropagation()}> <div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
${state.modal(state, emit, close)} ${state.modal(state, emit, close)}
</div> </div>
</div> </div>

View File

@ -604,6 +604,7 @@ module.exports = {
maxHeight: { maxHeight: {
full: '100%', full: '100%',
'half-screen': '50vh',
screen: '100vh' screen: '100vh'
}, },