fix(android): l'accueil se lit de haut en bas, et ses blocs respirent

L'espace de 8 px vit A L'INTERIEUR de chaque pile. "Create vault" et
"Download vault" etaient dans deux piles voisines et se touchaient donc,
tandis que "Download vault" et "Settings", dans la meme pile,
respiraient. Un margin entre piles adjacentes suffit.

L'ordre suit maintenant les frequences et non l'ordre du code : aller
chercher le coffre, regler, creer en dernier. La creation etait en tete
parce que son bloc etait ecrit en premier dans la page.

L'accent suit le geste attendu - il va a "Download vault" des qu'un depot
est configure, et ne reste sur la creation que lorsqu'il n'y a rien a
aller chercher.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-08-28 14:42:54 +01:00
parent 900f5ba740
commit ab5eeb60f5
+42 -19
View File
@@ -271,6 +271,11 @@
/* --- deverrouillage ----------------------------------------------------- */ /* --- deverrouillage ----------------------------------------------------- */
.status { color: var(--muted); margin: 22px 4px 14px; min-height: 20px; } .status { color: var(--muted); margin: 22px 4px 14px; min-height: 20px; }
.stack { display: flex; flex-direction: column; gap: 8px; } .stack { display: flex; flex-direction: column; gap: 8px; }
/* L'espace de 8 px vit A L'INTERIEUR de chaque pile. Deux piles voisines se
touchaient donc, et "Create vault" collait a "Download vault" alors que
"Download vault" et "Settings" respiraient - les premiers etant dans deux
piles, les seconds dans une seule. */
.stack + .stack { margin-top: 8px; }
.pair { display: flex; gap: 8px; } .pair { display: flex; gap: 8px; }
.pair .btn { flex: 1; } .pair .btn { flex: 1; }
.field-in { .field-in {
@@ -352,6 +357,24 @@
<div class="screen" id="unlock"> <div class="screen" id="unlock">
<div class="scroll"> <div class="scroll">
<div class="status" id="status"></div> <div class="status" id="status"></div>
<div class="stack">
<button class="btn wide main" id="btnOpen">&#10140;&nbsp; Open vault</button>
<button class="btn wide" id="btnSync">&#8635;&nbsp; Sync</button>
<!-- UN SEUL BOUTON, ET IL NE MENT PAS SUR SA DESTINATION.
Il y en avait deux, "Settings" et "Log", et le second a fini par
ouvrir le premier - le journal ayant demenage dans les reglages. Un
bouton nomme "Log" qui ouvre "Settings" se ment sur son etiquette.
TOUJOURS VISIBLE, contrairement a ce qu'on avait essaye. Le cacher
des qu'un coffre existe laissait l'accueil sans aucune porte vers les
reglages - et c'est precisement quand le coffre REFUSE de s'ouvrir
(code faux, adresse fausse) qu'on en a besoin, avec le journal.
Ce n'est pas un doublon de la roue dentee : celle-ci est DANS le
coffre, celui-ci est sur l'accueil. Jamais cote a cote. -->
<button class="btn wide" id="btnCfg">&#9881;&nbsp; Settings</button>
</div>
<!-- SE CONNECTER, comme sur le poste. Le mot de passe maitre ouvre le <!-- SE CONNECTER, comme sur le poste. Le mot de passe maitre ouvre le
conteneur local - c'est le dechiffrement lui-meme qui verifie, aucun conteneur local - c'est le dechiffrement lui-meme qui verifie, aucun
secret n'est compare - et le nom dit a qui appartient ce coffre. secret n'est compare - et le nom dit a qui appartient ce coffre.
@@ -373,23 +396,6 @@
<button class="btn wide main" id="btnAuth">Sign in</button> <button class="btn wide main" id="btnAuth">Sign in</button>
</div> </div>
<div class="stack">
<button class="btn wide main" id="btnOpen">&#10140;&nbsp; Open vault</button>
<button class="btn wide" id="btnSync">&#8635;&nbsp; Sync</button>
<!-- UN SEUL BOUTON, ET IL NE MENT PAS SUR SA DESTINATION.
Il y en avait deux, "Settings" et "Log", et le second a fini par
ouvrir le premier - le journal ayant demenage dans les reglages. Un
bouton nomme "Log" qui ouvre "Settings" se ment sur son etiquette.
TOUJOURS VISIBLE, contrairement a ce qu'on avait essaye. Le cacher
des qu'un coffre existe laissait l'accueil sans aucune porte vers les
reglages - et c'est precisement quand le coffre REFUSE de s'ouvrir
(code faux, adresse fausse) qu'on en a besoin, avec le journal.
Ce n'est pas un doublon de la roue dentee : celle-ci est DANS le
coffre, celui-ci est sur l'accueil. Jamais cote a cote. -->
<button class="btn wide" id="btnCfg">&#9881;&nbsp; Settings</button>
</div>
<!-- LE CODE EST ICI, PAS DANS LES REGLAGES DU SERVEUR. Il ne concerne que <!-- LE CODE EST ICI, PAS DANS LES REGLAGES DU SERVEUR. Il ne concerne que
cet appareil - il scelle le cache local - alors que les trois autres cet appareil - il scelle le cache local - alors que les trois autres
champs decrivent le depot distant, partage entre les appareils. Range champs decrivent le depot distant, partage entre les appareils. Range
@@ -637,6 +643,20 @@ var authMode = 'open';
// dernier ecrasait le premier. Chacun met a jour sa variable, la fonction // dernier ecrasait le premier. Chacun met a jour sa variable, la fonction
// tranche. // tranche.
var pinNeeded = false; var pinNeeded = false;
// L'ACCUEIL SE LIT DE HAUT EN BAS : aller chercher le coffre, regler, et creer
// en dernier - c'est l'ordre des frequences, pas celui du code. La creation
// etait en tete parce que son bloc etait ecrit en premier dans la page.
function syncAuthbox() {
document.getElementById('authbox').hidden = (authMode === 'open');
// L'ACCENT SUIT LE GESTE ATTENDU. Creer un coffre neuf le portait alors qu'un
// depot est configure - c'est-a-dire exactement le mauvais geste. Il revient
// a celui qui vient chercher le coffre, et ne reste sur la creation que
// lorsqu'il n'y a rien a chercher.
var repo = elUrl.value.trim() !== '';
document.getElementById('btnSync').classList.toggle('main', repo);
document.getElementById('btnAuth').classList.toggle('main', !repo);
}
function syncPinbox() { function syncPinbox() {
document.getElementById('pinbox').hidden = !pinNeeded || (authMode !== 'open'); document.getElementById('pinbox').hidden = !pinNeeded || (authMode !== 'open');
} }
@@ -1583,6 +1603,10 @@ var PM = {
setConfig: function (url, tok, pwd, show) { setConfig: function (url, tok, pwd, show) {
// elPin volontairement absent : rien ne le restaure, jamais. // elPin volontairement absent : rien ne le restaure, jamais.
elUrl.value = url; elTok.value = tok; elPwd.value = pwd; elUrl.value = url; elTok.value = tok; elPwd.value = pwd;
// L'adresse decide de la mise en page ci-dessus, et elle peut arriver apres
// setAuthMode : sans ce rappel, l'accueil garderait la forme qu'il avait
// avant de savoir qu'un depot est configure.
syncAuthbox();
// Rien a deplier : c'est le voile des reglages qui les montre desormais. // Rien a deplier : c'est le voile des reglages qui les montre desormais.
// Un depot pas encore configure s'annonce donc autrement - le bouton // Un depot pas encore configure s'annonce donc autrement - le bouton
// d'accueil dit "Download vault" et l'ecran, "No vault on this device". // d'accueil dit "Download vault" et l'ecran, "No vault on this device".
@@ -1624,8 +1648,7 @@ var PM = {
/// un conteneur sans cache, ou un cache pret a s'ouvrir. /// un conteneur sans cache, ou un cache pret a s'ouvrir.
setAuthMode: function (mode) { setAuthMode: function (mode) {
authMode = mode; authMode = mode;
var box = document.getElementById('authbox'); syncAuthbox();
box.hidden = (mode === 'open');
syncPinbox(); syncPinbox();
document.getElementById('btnAuth').textContent = document.getElementById('btnAuth').textContent =
(mode === 'register') ? 'Create vault' : 'Sign in'; (mode === 'register') ? 'Create vault' : 'Sign in';