Chapril/drop.chapril.org-firefoxsend
Chapril/drop.chapril.org-firefoxsend
25
1
Fork 0
Code Issues Releases Activity

adjusted modal background and download preview

Browse Source
This commit is contained in:
Danny Coates 2019-02-21 16:43:15 -08:00
parent 694e05f738
commit 47d75d8220
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
4 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/ui/archiveTile.js
View File

@ -447,7 +447,8 @@ module.exports.preview = function(state, emit) {
archive.open = true; archive.open = true;
} }
return html` return html`
<send-archive class="flex flex-col max-h-full bg-white rounded shadow-light p-4 w-full md:w-4/5"> <send-archive class="flex flex-col max-h-full bg-white p-4 w-full md:w-128">
<div class="border rounded py-3 px-6">
<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 word-break-all">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -458,6 +459,7 @@ module.exports.preview = function(state, emit) {
<div class="h-full md:h-48 overflow-y-auto"> <div class="h-full md:h-48 overflow-y-auto">
${archiveDetails(state.translate, archive)} ${archiveDetails(state.translate, archive)}
</div> </div>
</div>
<button <button
id="download-btn" id="download-btn"
class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline" class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline"

8
app/ui/download.js
View File

@ -135,8 +135,8 @@ module.exports = function(state, emit) {
break; break;
default: default:
content = html` content = html`
<div class="flex flex-col w-full h-full items-center mt-8"> <div class="flex flex-col w-full h-full items-center mt-12">
<h1 class="mb-4">${state.translate('downloadFileTitle')}</h1> <h1 class="">${state.translate('downloadFileTitle')}</h1>
${archiveTile.preview(state, emit)} ${archiveTile.preview(state, emit)}
</div> </div>
`; `;
@ -147,9 +147,7 @@ module.exports = function(state, emit) {
return html` return html`
<main class="main container"> <main class="main container">
${state.modal && modal(state, emit)} ${state.modal && modal(state, emit)}
<section <section class="relative h-full w-full p-6 md:rounded-lg md:shadow-big">
class="relative h-full w-full p-6 md:flex md:flex-row md:rounded-lg md:shadow-big"
>
${content} ${content}
</section> </section>
</main> </main>

7
app/ui/modal.js
View File

@ -3,14 +3,11 @@ const html = require('choo/html');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<send-modal <send-modal
class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8" class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-white md:my-8"
onclick="${close}" 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 <div class="" onclick="${e => e.stopPropagation()}">
class="shadow-cloud bg-white"
onclick="${e => e.stopPropagation()}"
>
${state.modal(state, emit, close)} ${state.modal(state, emit, close)}
</div> </div>
</div> </div>

1
tailwind.js
View File

@ -472,6 +472,7 @@ module.exports = {
'32': '8rem', '32': '8rem',
'48': '12rem', '48': '12rem',
'64': '16rem', '64': '16rem',
'128': '32rem',
'1/2': '50%', '1/2': '50%',
'1/3': '33.33333%', '1/3': '33.33333%',
'2/3': '66.66667%', '2/3': '66.66667%',