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

finish off drag and drop styl

This commit is contained in:
blek 2023-09-30 01:04:48 +10:00
parent a26f0c3b56
commit 8b4566a634
Signed by: blek
GPG Key ID: 14546221E3595D0C
3 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
filed/static/paint.css
View File

@ -130,15 +130,26 @@ p {
.file-drag-n-drop {
display: block;
width: 400px;
height: 400px;
background: var(--header-sec-color);
border-radius: 16px;
padding: var(--header-padding-x);
}
.file-drag-n-drop-inside {
.file-drag-n-drop * { display: block }
.file-drag-n-drop object { display: initial }
.file-drag-n-drop .file-drag-n-drop-inside {
padding: var(--header-padding-x);
border: 4px dotted #656565;
height: calc(100% - 32px - 8px);
border-radius: 16px;
}
.file-drag-n-drop .file-drag-n-drop-inside .file-drag-n-drop-inside-text {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
line-height: 32px;
}

6
filed/static/tab-new-symbolic.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" fill='#eee'>
<path d="m 3 0 c -1.644531 0 -3 1.355469 -3 3 v 10 c 0 1.644531 1.355469 3 3 3 h 10 c 1.644531 0 3 -1.355469 3 -3 v -10 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 10 c 0.570312 0 1 0.429688 1 1 v 10 c 0 0.570312 -0.429688 1 -1 1 h -10 c -0.570312 0 -1 -0.429688 -1 -1 v -10 c 0 -0.570312 0.429688 -1 1 -1 z m 0 0"/>
<path d="m 4 7 h 8 v 2 h -8 z m 0 0"/>
<path d="m 9 4 v 8 h -2 v -8 z m 0 0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 552 B

13
filed/templates/index.html
View File

@ -30,11 +30,14 @@
<p>
<input type="file" name="file" id="bfile-formupload-file" style="display: none" />
<label for="bfile-formupload-file">
<div class="file-drag-n-drop">
<div class="file-drag-n-drop-inside">
</div>
</div>
<span class="file-drag-n-drop">
<span class="file-drag-n-drop-inside">
<span class="file-drag-n-drop-inside-text">
<object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/>
Drag & drop your files here!
</span>
</span>
</span>
</label>
</p>
</form>