diff --git a/public/index.html b/public/index.html
index 3f563a7..290a2a0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -31,6 +31,9 @@
* {
box-sizing: border-box;
}
+ [hidden] {
+ display: none !important;
+ }
body {
margin: 0;
padding: 2rem 1rem;
@@ -85,8 +88,12 @@
background: transparent;
color: var(--accent);
}
- form.inline {
+ .authrow form {
margin: 0;
+ display: flex;
+ }
+ .authrow .btn {
+ white-space: nowrap;
}
label {
display: block;
@@ -119,13 +126,19 @@
background: color-mix(in srgb, var(--accent) 8%, transparent);
color: var(--text);
}
- #dropzone.disabled {
- opacity: 0.5;
- cursor: not-allowed;
+ #dropArea {
+ display: grid;
+ gap: 1.25rem;
}
#list {
display: grid;
gap: 0.6rem;
+ max-height: 55vh;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ }
+ #list:not(:empty) {
+ padding-right: 0.25rem;
}
.item {
border: 1px solid var(--border);
@@ -210,12 +223,10 @@
@@ -225,16 +236,18 @@
-
- Déposez fichiers ou dossiers ici
- ou cliquez pour parcourir
-
-
+
+
+ Déposez fichiers ou dossiers ici
+ ou cliquez pour parcourir
+
+
-
@@ -252,6 +265,7 @@
const logoutForm = document.getElementById('logoutForm');
const targetCard = document.getElementById('targetCard');
const targetSelect = document.getElementById('targetSelect');
+ const dropArea = document.getElementById('dropArea');
const dropzone = document.getElementById('dropzone');
const picker = document.getElementById('picker');
const dirRow = document.getElementById('dirRow');
@@ -272,6 +286,17 @@
let currentTarget = null;
let currentTargetAllowsDirs = false;
+ // Les zones de dépôt ne sont présentes dans le DOM que si l'on est connecté.
+ const dropAreaAnchor = queueRow;
+ dropArea.remove();
+ function setDropAreaPresent(present) {
+ if (present) {
+ if (!dropArea.isConnected) dropAreaAnchor.before(dropArea);
+ } else if (dropArea.isConnected) {
+ dropArea.remove();
+ }
+ }
+
function showBanner(message) {
banner.textContent = message;
banner.hidden = false;
@@ -286,13 +311,12 @@
authenticated = Boolean(me && me.authenticated);
loginLink.hidden = authenticated;
logoutForm.hidden = !authenticated;
- dropzone.classList.toggle('disabled', !authenticated);
+ setDropAreaPresent(authenticated);
authState.textContent = authenticated ? 'Connecté : ' + me.name : 'Non connecté';
if (authenticated) {
loadTargets();
} else {
targetCard.hidden = true;
- dirRow.hidden = true;
}
}