dylan.derr/Send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

a few style tweaks

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

11
app/ui/archiveTile.js
View file

@ -109,16 +109,13 @@ function fileInfo(file, action) {
function archiveDetails(translate, archive) {
if (archive.manifest.files.length > 1) {
return html`
<details class="w-full pb-1 overflow-y-hidden" ${
<details class="w-full pb-1 overflow-y-scroll" ${
archive.open ? 'open' : ''
} ontoggle=${toggled}>
<summary>${translate('fileCount', {
num: archive.manifest.files.length
})}</summary>
${list(
archive.manifest.files.map(f => fileInfo(f)),
'list-reset h-full overflow-y-scroll'
)}
${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset h-full')}
</details>`;
}
function toggled(event) {
@ -180,7 +177,7 @@ module.exports.wip = function(state, emit) {
<article class="h-full flex flex-col bg-white z-20">
${list(
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'
)}
<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;
}
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">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium">${archive.name}</h1>

2
app/ui/download.js
View file

@ -107,7 +107,7 @@ module.exports = function(state, emit) {
return html`
<main class="main container">
<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>
</section>
</main>`;

4
app/ui/modal.js
View file

@ -2,9 +2,9 @@ const html = require('choo/html');
module.exports = function(state, emit) {
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="border-modal bg-white" onclick=${e => e.stopPropagation()}>
<div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
${state.modal(state, emit, close)}
</div>
</div>