Tidy admin user form layout
This commit is contained in:
+21
-10
@@ -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
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user