UI fix

internal/dashboard/templates/targets.html

@@ -3,34 +3,42 @@
 <html lang="ru">
 <head>{{template "html_head" .}}</head>
 <body>
-{{template "page_header" .}}
-<main class="container-fluid py-3">
+<input type="checkbox" id="nav-toggle" class="nav-toggle">
+<div class="shell">
+{{template "sidebar_nav" .}}
+<div>
+{{template "topbar_mobile" .}}
+<main class="main">
 <div id="error-banner">{{template "banner_inner" .Banner}}</div>
 {{template "targets_content" .}}
 </main>
+</div>
+</div>
 </body>
 </html>
 {{end}}
 
 {{define "targets_content"}}
-<h1>Цели проверки</h1>
-<p class="muted">Группа целей — именованный список URL/адресов, на который затем ссылаются типы проверок.</p>
+<div class="topbar"><h1>Цели проверки</h1></div>
+<p class="muted" style="margin-bottom:16px">Группа целей — именованный список URL/адресов, на который затем ссылаются типы проверок.</p>
 
-<form class="card card-body mb-3 py-2" hx-post="/targets" hx-target="#targets-table-wrap" hx-swap="innerHTML" hx-on::after-request="this.reset()">
-<div class="row g-2 align-items-end">
-<div class="col-12 col-md-3">
-<label class="form-label mb-1">Имя новой группы</label>
-<input type="text" name="name" class="form-control form-control-sm" placeholder="web" required>
+<div class="panel">
+<div class="panel-body">
+<form hx-post="/targets" hx-target="#targets-table-wrap" hx-swap="innerHTML" hx-on::after-request="this.reset()">
+<div class="field-row">
+<div class="field" style="flex: 0 1 200px;">
+<label>Имя новой группы</label>
+<input type="text" name="name" placeholder="web" required>
 </div>
-<div class="col-12 col-md-7">
-<label class="form-label mb-1">Цели (по одной на строку или через запятую)</label>
-<textarea name="targets" class="form-control form-control-sm" rows="2" placeholder="https://hub.docker.com&#10;https://github.com" required></textarea>
-</div>
-<div class="col-12 col-md-2">
-<button type="submit" class="btn btn-sm btn-primary w-100">Создать</button>
+<div class="field" style="flex: 1 1 380px;">
+<label>Цели (по одной на строку или через запятую)</label>
+<textarea name="targets" rows="2" placeholder="https://hub.docker.com&#10;https://github.com" required></textarea>
 </div>
+<button type="submit" class="btn btn-primary">Создать</button>
 </div>
 </form>
+</div>
+</div>
 
 <div id="targets-table-wrap">
 {{template "targets_table" .}}
@@ -38,26 +46,30 @@
 {{end}}
 
 {{define "targets_table"}}
-<div class="table-responsive">
-<table class="table table-sm table-striped align-middle">
-<thead><tr><th>Группа</th><th>Цели</th><th>Действия</th></tr></thead>
+<div class="panel">
+<div class="table-scroll">
+<table>
+<thead><tr><th>Группа</th><th>Цели</th><th></th></tr></thead>
 <tbody>
 {{range .Items}}
 <tr>
-<td class="text-nowrap">{{.Name}}</td>
-<td>
+<td class="mono" data-label="Группа">{{.Name}}</td>
+<td data-label="Цели">
 <form class="inline-form" hx-put="/targets/{{.Name}}" hx-target="#targets-table-wrap" hx-swap="innerHTML">
-<textarea name="targets" class="form-control form-control-sm" rows="2">{{join .Targets "\n"}}</textarea>
-<button type="submit" class="btn btn-sm btn-outline-secondary text-nowrap">Сохранить</button>
+<textarea name="targets" rows="2">{{join .Targets "\n"}}</textarea>
+<button type="submit" class="btn btn-ghost btn-sm">Сохранить</button>
 </form>
 </td>
-<td class="actions-cell">
-<button class="btn btn-sm btn-outline-danger" hx-delete="/targets/{{.Name}}" hx-target="#targets-table-wrap" hx-swap="innerHTML" hx-confirm="Удалить группу {{.Name}}?">Удалить</button>
+<td data-label="">
+<div class="actions">
+<button class="btn btn-danger-ghost btn-sm" hx-delete="/targets/{{.Name}}" hx-target="#targets-table-wrap" hx-swap="innerHTML" hx-confirm="Удалить группу {{.Name}}?">Удалить</button>
+</div>
 </td>
 </tr>
 {{end}}
 </tbody>
 </table>
 </div>
+</div>
 {{if not .Items}}<p class="muted">Групп целей нет.</p>{{end}}
 {{end}}