MirrorMirror
/
lufi
mirror of https://framagit.org/fiat-tux/hat-softwares/lufi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add card file skeleton

This commit is contained in:
Booteille 2024-12-18 12:50:32 +01:00
parent 23db18ee05
commit a6f5964a6c
No known key found for this signature in database
GPG Key ID: 0AB6C6CA01272646
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
themes/default/public/js/upload.js
View File

@ -150,6 +150,12 @@ document.addEventListener("DOMContentLoaded", () => {
) => {
const uploadedFilesDOM = document.getElementById("uploaded-files");
const skeletonCardDOM = document
.querySelector("template#card-file-skeleton")
.content.cloneNode(true).children[0];
uploadedFilesDOM.prepend(skeletonCardDOM);
const serverUrl = new URL(ws_url.replace("/upload", ""));
serverUrl.protocol = serverUrl.protocol === "ws:" ? "http:" : "https:";
@ -197,6 +203,7 @@ document.addEventListener("DOMContentLoaded", () => {
updateProgressBar(job.lufiFile, uploadingFileCard);
});
skeletonCardDOM.remove();
uploadedFilesDOM.prepend(uploadingFileCard);
return job

26
themes/default/templates/index.html.ep
View File

@ -187,12 +187,34 @@
</div>
</div>
<div id="uploaded-files" class="block">
</div>
<div id="uploaded-files" class="block"></div>
</div>
</div>
% }
<template id="card-file-skeleton">
<article class="card-file-skeleton card m-2 is-size-6 skeleton-block">
<div class="card-content p-2">
<div class="content fixed-grid has-12-cols">
<div class="grid is-vcentered">
<div class="cell is-col-1">
<span class="icon fas fa-file fa-2x is-large has-text-primary" aria-hidden="true"></span>
</div>
<div class="cell is-col-span-10">
<strong class="is-block wb-all name is-overflow-x"></strong>
<small class="is-block size mt-1"></small>
</div>
<button class="is-narrow is-pulled-right card-header-icon" aria-label="<%= l('Close') %>">
<span class="delete"></span>
</button>
</div>
</div>
</div>
</article>
</template>
<template id="card-file-error">
<article class="card-file-error card m-2 is-size-6">
<div class="card-content p-2">