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

accessibility stuff

This commit is contained in:
blek 2023-09-30 13:55:17 +10:00
parent d7463af380
commit a5d17d29aa
Signed by: blek
GPG Key ID: 14546221E3595D0C
4 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
filed/static/dragndrop-form.js
View File

@ -26,6 +26,10 @@
input_el.files = transfer.files; input_el.files = transfer.files;
} }
root_drag_rop.onclick = e => {
input_el.click();
}
input_el.onchange = e => { input_el.onchange = e => {
const file = input_el.files[0] const file = input_el.files[0]
selectFile(file); selectFile(file);

6
filed/static/paint.css
View File

@ -148,13 +148,15 @@ p {
.file-drag-n-drop { .file-drag-n-drop {
display: block; display: block;
cursor: pointer; cursor: pointer;
width: 400px; width: 440px;
height: 400px; height: 440px;
background: var(--header-sec-color); background: var(--header-sec-color);
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; margin-bottom: 0;
border: 0px solid transparent;
color: var(--header-fg-color);
} }
.file-drag-n-drop:hover { .file-drag-n-drop:hover {
background: #393939; background: #393939;

22
filed/templates/index.html
View File

@ -31,14 +31,16 @@
<p> <p>
<label class="fancycheckbox"> <label class="fancycheckbox">
<input type="checkbox" name="named"> <input type="checkbox" name="named">
I also want my file named:
<span class="form-input-partial">
<span class="form-input-label">
file.blek.codes/
</span>
<input style="max-width:100px" type="text" name="filename" placeholder="file.txt"></input>
</span>
</label> </label>
<label for="bfile-formupload-file-name">
I also want my file named:
</label>
<span class="form-input-partial">
<span class="form-input-label">
file.blek.codes/
</span>
<input style="max-width:100px" id='bfile-formupload-file-name' type="text" name="filename" placeholder="file.txt"></input>
</span>
</p> </p>
<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" />
@ -46,10 +48,10 @@
<span class='btn btn-fill mobile-file-upload-btn'> <span class='btn btn-fill mobile-file-upload-btn'>
Select a file Select a file
</span> </span>
<span class="file-drag-n-drop"> <button type="button" 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">
<object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/> <object data="/tab-new-symbolic.svg" width="32" height="32" tabindex="-1"></object><br/>
<span style="line-height:16pt"> <span style="line-height:16pt">
<span id='drag-n-drop-jsonly' style='display:none'> <span id='drag-n-drop-jsonly' style='display:none'>
Drag & drop your files here! Drag & drop your files here!
@ -63,7 +65,7 @@
</span> </span>
</span> </span>
</span> </span>
</span> </button>
<script src="/dragndrop-form.js"></script> <script src="/dragndrop-form.js"></script>
</label> </label>
</p> </p>

2
filed/templates/text-x-generic.svg
View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg"> <svg aria-label='A file icon' height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg">
<path d="m 28 8 h 50 l 30.042969 29.917969 v 74.058593 c 0 4.433594 -3.609375 8.023438 -8.042969 8.023438 h -72 c -4.433594 0 -8 -3.566406 -8 -8 v -96 c 0 -4.433594 3.566406 -8 8 -8 z m 0 0" fill="#f6f5f4"/> <path d="m 28 8 h 50 l 30.042969 29.917969 v 74.058593 c 0 4.433594 -3.609375 8.023438 -8.042969 8.023438 h -72 c -4.433594 0 -8 -3.566406 -8 -8 v -96 c 0 -4.433594 3.566406 -8 8 -8 z m 0 0" fill="#f6f5f4"/>
<g fill="#deddda"> <g fill="#deddda">
<path d="m 78 8 v 22 c 0 4.433594 3.609375 7.921875 8.042969 7.921875 l 22 -0.003906 z m 0 0"/> <path d="m 78 8 v 22 c 0 4.433594 3.609375 7.921875 8.042969 7.921875 l 22 -0.003906 z m 0 0"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB