ui(apk): le formulaire de nouvelle entree devient une seule carte
Sept champs faisaient sept cartes, chacune contenant un champ avec son propre fond et ses coins - rectangle dans rectangle. Une carte, des lignes dedans, le champ reduit a son trait de saisie ; le bouton Save sort de sa carte. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -309,6 +309,32 @@
|
|||||||
jamais - la fin d'une URL longue restait hors d'atteinte. */
|
jamais - la fin d'une URL longue restait hors d'atteinte. */
|
||||||
-webkit-user-select: text; user-select: text;
|
-webkit-user-select: text; user-select: text;
|
||||||
}
|
}
|
||||||
|
/* UN FORMULAIRE EST UNE SEULE CARTE. Sept champs faisaient sept cartes,
|
||||||
|
chacune avec son fond et ses coins - un empilement de rectangles ou l'oeil
|
||||||
|
ne voit plus le formulaire. Ici une carte, et des lignes dedans. */
|
||||||
|
.form { background: var(--surface); border-radius: var(--radius);
|
||||||
|
padding: 0 14px; margin-bottom: 8px; }
|
||||||
|
.form .field { background: none; border-radius: 0; margin: 0;
|
||||||
|
padding: 8px 0 6px;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,.07); }
|
||||||
|
.form .field:last-child { border-bottom: 0; }
|
||||||
|
.form .field .field-in { border-bottom: 0; }
|
||||||
|
/* Le de a la meme hauteur que le champ qu'il accompagne, sinon il etire la
|
||||||
|
ligne et le trait de saisie remonte tout seul. */
|
||||||
|
.form .field .btn.ico-btn { width: 38px; min-width: 38px; height: 38px; }
|
||||||
|
/* UNE CARTE NE CONTIENT PAS UNE SECONDE BOITE. La carte .field porte deja un
|
||||||
|
fond et des coins arrondis ; le champ qui s'y pose n'a donc besoin ni de
|
||||||
|
l'un ni de l'autre - juste d'un trait qui dise ou l'on ecrit, et qui
|
||||||
|
s'allume quand le doigt s'y pose. Hors carte (reglages, deverrouillage),
|
||||||
|
.field-in garde sa boite : la, rien d'autre ne la dessine. */
|
||||||
|
.field .field-in {
|
||||||
|
background: transparent; border-radius: 0; padding-left: 0; padding-right: 0;
|
||||||
|
height: 38px; margin-top: 0;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,.16);
|
||||||
|
}
|
||||||
|
.field .field-in:focus { border-bottom-color: var(--accent); }
|
||||||
|
.field select.field-in { padding-left: 0; }
|
||||||
|
.field textarea.field-in { padding: 6px 0; }
|
||||||
.field-in.multi { height: auto; min-height: 46px; overflow: hidden; padding: 12px 44px 12px 14px; resize: none;
|
.field-in.multi { height: auto; min-height: 46px; overflow: hidden; padding: 12px 44px 12px 14px; resize: none;
|
||||||
line-height: 1.35; word-break: break-all; display: block; }
|
line-height: 1.35; word-break: break-all; display: block; }
|
||||||
.field-in::placeholder { color: var(--muted); }
|
.field-in::placeholder { color: var(--muted); }
|
||||||
@@ -1433,7 +1459,8 @@ function openNewEntry() {
|
|||||||
closeMenu();
|
closeMenu();
|
||||||
document.getElementById('kebab').hidden = true;
|
document.getElementById('kebab').hidden = true;
|
||||||
document.getElementById('fields').innerHTML =
|
document.getElementById('fields').innerHTML =
|
||||||
'<div class="field"><div class="cap">Kind</div><div class="line">'
|
'<div class="form">'
|
||||||
|
+ '<div class="field"><div class="cap">Kind</div><div class="line">'
|
||||||
+ '<button class="btn main" data-kind="login">Login</button>'
|
+ '<button class="btn main" data-kind="login">Login</button>'
|
||||||
+ '<button class="btn" data-kind="note">Note</button></div></div>'
|
+ '<button class="btn" data-kind="note">Note</button></div></div>'
|
||||||
+ newFolderField()
|
+ newFolderField()
|
||||||
@@ -1449,11 +1476,12 @@ function openNewEntry() {
|
|||||||
// sur une entree qu'on venait de creer - il fallait enregistrer puis
|
// sur une entree qu'on venait de creer - il fallait enregistrer puis
|
||||||
// rouvrir. Meme intitule que l'editeur pour qu'on reconnaisse le champ.
|
// rouvrir. Meme intitule que l'editeur pour qu'on reconnaisse le champ.
|
||||||
+ newField('nTotp', '2FA secret', 'nTotpRow')
|
+ newField('nTotp', '2FA secret', 'nTotpRow')
|
||||||
+ '<div class="field"><div class="line">'
|
+ '</div>'
|
||||||
|
+ '<div class="line" style="display:flex;margin-top:12px">'
|
||||||
// flex:1 et non .wide : .wide ne regle que le rembourrage, et la largeur
|
// flex:1 et non .wide : .wide ne regle que le rembourrage, et la largeur
|
||||||
// pleine vient d'etre etire dans son conteneur.
|
// pleine vient d'etre etire dans son conteneur.
|
||||||
+ '<button class="btn main wide" id="nSave" style="flex:1">Save</button>'
|
+ '<button class="btn main wide" id="nSave" style="flex:1">Save</button>'
|
||||||
+ '</div></div>';
|
+ '</div>';
|
||||||
document.body.classList.remove('on-list');
|
document.body.classList.remove('on-list');
|
||||||
document.body.classList.add('on-detail');
|
document.body.classList.add('on-detail');
|
||||||
view = 'detail';
|
view = 'detail';
|
||||||
|
|||||||
Reference in New Issue
Block a user