mathieu/rust-ipam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(host-detail): centre host title, move delete button to bottom-right

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mathieu
2026-05-16 02:30:19 +02:00
parent 577a655aee
commit ba4d2a60c6
2 changed files with 39 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/client/host_detail.rs
View File

@@ -168,18 +168,9 @@ pub fn HostDetailPage() -> impl IntoView {
view! { view! {
// ── Page header ────────────────────────────────── // ── Page header ──────────────────────────────────
<div class="page-header"> <div class="page-header detail-page-header">
<div class="page-header__left"> <a class="back-btn" href="/hosts">"← Hosts"</a>
<a class="back-btn" href="/hosts">"← Hosts"</a> <h1 class="detail-page-title">{move || name_sig.get()}</h1>
<h1>{move || name_sig.get()}</h1>
</div>
<button
class="btn-danger-solid"
type="button"
on:click=move |_| show_delete_modal.set(true)
>
"Delete host"
</button>
</div> </div>
// ── Identity form ───────────────────────────────── // ── Identity form ─────────────────────────────────
@@ -305,6 +296,17 @@ pub fn HostDetailPage() -> impl IntoView {
</div> </div>
</section> </section>
// ── Danger zone ──────────────────────────────────
<div class="danger-zone">
<button
class="btn-danger-solid"
type="button"
on:click=move |_| show_delete_modal.set(true)
>
"Delete host"
</button>
</div>
// ── Delete modal (conditional) ──────────────────── // ── Delete modal (conditional) ────────────────────
{move || show_delete_modal.get().then(|| view! { {move || show_delete_modal.get().then(|| view! {
<DeleteModal <DeleteModal

25
style/rust-ipam.css
View File

@@ -1043,6 +1043,24 @@ td.col-actions {
gap: var(--size-xs); gap: var(--size-xs);
} }
/* Detail page header: back button then centred title */
.detail-page-header {
flex-direction: column;
align-items: center;
gap: var(--size-xs);
}
/* Self-align the back button to the left while the title stays centred */
.detail-page-header .back-btn {
align-self: flex-start;
}
.detail-page-title {
text-align: center;
width: 100%;
margin: 0;
}
.back-btn { .back-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -1182,3 +1200,10 @@ td.col-actions {
width: 200px; width: 200px;
flex-shrink: 0; flex-shrink: 0;
} }
/* Delete button anchored to the bottom-right of the detail page */
.danger-zone {
display: flex;
justify-content: flex-end;
margin-top: var(--size-lg);
}