blek
/
bfile
1
0
Fork 0
Code Issues 6 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

mobile file upload button

This commit is contained in:
blek 2023-09-30 02:00:40 +10:00
parent 1cd0f33fdc
commit 49983c5b35
Signed by: blek
GPG Key ID: 14546221E3595D0C
2 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
filed/static/paint.css
View File

@ -137,6 +137,7 @@ p {
border-radius: 16px; border-radius: 16px;
padding: var(--header-padding-x); padding: var(--header-padding-x);
transition: 250ms ease; transition: 250ms ease;
margin-bottom: 0;
} }
.file-drag-n-drop * { display: block } .file-drag-n-drop * { display: block }
.file-drag-n-drop object { display: initial } .file-drag-n-drop object { display: initial }
@ -155,9 +156,32 @@ p {
text-align: center; text-align: center;
line-height: 32px; line-height: 32px;
} }
.mobile-file-upload-btn {
opacity: 0;
height: 0;
width: 0;
clip-path: inset(0 0 0 0);
font-size: 0;
padding: 0;
}
@media (max-width:513px) { @media (max-width:667px) {
.file-drag-n-drop { .file-drag-n-drop {
width: calc(100% - 32px); opacity: 0;
clip-path: inset(0 0 0 0);
width: 0;
height: 0;
font-size: 0;
padding: 0;
}
.mobile-file-upload-btn {
width: fit-content;
height: fit-content;
opacity: 1;
font-size: initial;
padding: var(--header-padding-y);
}
.bfile-formupload-file-delete-pick {
margin-bottom: 28px;
} }
} }

5
filed/templates/index.html
View File

@ -17,7 +17,7 @@
<p> <p>
I want my file deleted: I want my file deleted:
</p> </p>
<ul> <ul class="bfile-formupload-file-delete-pick">
<li> <li>
<input type="radio" id="bfile-formupload-delete-30-min" name="delmode" value='30' checked /> <input type="radio" id="bfile-formupload-delete-30-min" name="delmode" value='30' checked />
<label for="bfile-formupload-delete-30-min">After 30 minutes</label> <label for="bfile-formupload-delete-30-min">After 30 minutes</label>
@ -30,6 +30,9 @@
<p> <p>
<input type="file" name="file" id="bfile-formupload-file" style="display: none" /> <input type="file" name="file" id="bfile-formupload-file" style="display: none" />
<label for="bfile-formupload-file"> <label for="bfile-formupload-file">
<span class='btn mobile-file-upload-btn'>
Upload file
</span>
<span class="file-drag-n-drop"> <span class="file-drag-n-drop">
<span class="file-drag-n-drop-inside"> <span class="file-drag-n-drop-inside">
<span class="file-drag-n-drop-inside-text"> <span class="file-drag-n-drop-inside-text">