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;
}
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">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<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">
${archiveDetails(state.translate, archive)}
</div>
</div>
<button
id="download-btn"
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;
default:
content = html`
<div class="flex flex-col w-full h-full items-center mt-8">
<h1 class="mb-4">${state.translate('downloadFileTitle')}</h1>
<div class="flex flex-col w-full h-full items-center mt-12">
<h1 class="">${state.translate('downloadFileTitle')}</h1>
${archiveTile.preview(state, emit)}
</div>
`;
@ -147,9 +147,7 @@ module.exports = function(state, emit) {
return html`
<main class="main container">
${state.modal && modal(state, emit)}
<section
class="relative h-full w-full p-6 md:flex md:flex-row md:rounded-lg md:shadow-big"
>
<section class="relative h-full w-full p-6 md:rounded-lg md:shadow-big">
${content}
</section>
</main>

7
app/ui/modal.js
View File

@ -3,14 +3,11 @@ const html = require('choo/html');
module.exports = function(state, emit) {
return html`
<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}"
>
<div class="h-full max-h-screen absolute pin-t flex items-center">
<div
class="shadow-cloud bg-white"
onclick="${e => e.stopPropagation()}"
>
<div class="" onclick="${e => e.stopPropagation()}">
${state.modal(state, emit, close)}
</div>
</div>

1
tailwind.js
View File

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