Tidy admin user form layout

This commit is contained in:
rajchales-monito
2026-07-30 07:36:42 +02:00
parent 16e44c5f79
commit 9549876b54
2 changed files with 25 additions and 14 deletions
+21 -10
View File
@@ -280,17 +280,28 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.admin-user-form { .admin-user-form {
grid-column: 1 / -1; grid-column: 1 / -1;
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: 1fr;
gap: 8px; gap: 9px;
padding: 10px; padding: 10px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 8px; border-radius: 8px;
background: #fbfdfb; background: #fbfdfb;
} }
.admin-user-form label { .admin-user-form label {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-width: 0;
}
.admin-user-form label span {
color: var(--ink);
font-size: 13px;
}
.admin-user-form input {
width: 100%;
min-width: 0; min-width: 0;
} }
.admin-user-form label:nth-child(4),
.admin-user-form button { .admin-user-form button {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@@ -324,18 +335,22 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.admin-user-item .admin-user-actions { .admin-user-item .admin-user-actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
gap: 6px; gap: 6px;
} }
.admin-user-item button { .admin-user-item button {
padding: 7px 9px; padding: 6px 8px;
border-radius: 6px;
font-size: 12px; font-size: 12px;
} }
.password-mask { .password-mask {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
min-height: 30px; min-height: 30px;
padding: 0 4px 0 0;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
letter-spacing: 1px; letter-spacing: 1px;
color: var(--muted);
} }
.admin-user-item button:disabled { .admin-user-item button:disabled {
opacity: .45; opacity: .45;
@@ -344,14 +359,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
#adminUsersStatus { #adminUsersStatus {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@media (max-width: 1100px) {
.admin-user-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) { @media (max-width: 720px) {
.admin-user-form { .admin-user-form label {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 5px;
} }
} }
.list-tools { .list-tools {
+4 -4
View File
@@ -200,16 +200,16 @@
<fieldset class="effect-settings admin-users-settings"> <fieldset class="effect-settings admin-users-settings">
<legend>BO uzivatele</legend> <legend>BO uzivatele</legend>
<form id="adminUserForm" class="admin-user-form"> <form id="adminUserForm" class="admin-user-form">
<label>Login <label><span>Login</span>
<input name="username" autocomplete="off" placeholder="petr" required> <input name="username" autocomplete="off" placeholder="petr" required>
</label> </label>
<label>Jmeno <label><span>Jmeno</span>
<input name="displayName" autocomplete="off" placeholder="Petr"> <input name="displayName" autocomplete="off" placeholder="Petr">
</label> </label>
<label>Nick v chatu <label><span>Nick v chatu</span>
<input name="chatNick" autocomplete="off" placeholder="Petr"> <input name="chatNick" autocomplete="off" placeholder="Petr">
</label> </label>
<label>Heslo <label><span>Heslo</span>
<input name="password" type="password" autocomplete="new-password" placeholder="min. 8 znaku" required> <input name="password" type="password" autocomplete="new-password" placeholder="min. 8 znaku" required>
</label> </label>
<button type="submit">Pridat uzivatele</button> <button type="submit">Pridat uzivatele</button>