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

style(host-detail): polish buttons, back link and port list

Browse Source 
- Save changes / Add port: add btn-primary class for consistent blue accent
- Back button: stacked above page title, styled as a small bordered button
- Port list: remove row background, replace full border with bottom separator only

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mathieu
2026-05-16 02:26:40 +02:00
parent 2a6d925e59
commit 577a655aee
2 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/host_detail.rs
View File

@@ -170,7 +170,7 @@ pub fn HostDetailPage() -> impl IntoView {
// ── Page header ──────────────────────────────────
<div class="page-header">
<div class="page-header__left">
<a class="back-link" href="/hosts">"← Hosts"</a>
<a class="back-btn" href="/hosts">"← Hosts"</a>
<h1>{move || name_sig.get()}</h1>
</div>
<button
@@ -236,6 +236,7 @@ pub fn HostDetailPage() -> impl IntoView {
<div class="form-actions">
<button
class="btn-primary"
type="button"
on:click=move |_| {
update_action.dispatch(UpdateHost {
@@ -278,6 +279,7 @@ pub fn HostDetailPage() -> impl IntoView {
on:input=move |e| new_port.set(event_target_value(&e))
/>
<button
class="btn-primary"
type="button"
on:click=move |_| {
let raw = new_port.get_untracked();

36
style/rust-ipam.css
View File

@@ -1035,23 +1035,33 @@ td.col-actions {
filter: brightness(0.9);
}
/* Left cluster inside page header (back link + title) */
/* Left cluster inside page header: back button stacked above title */
.page-header__left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--size-xs);
}
.back-btn {
display: inline-flex;
align-items: center;
gap: var(--size-md);
}
.back-link {
font-size: var(--font-sm);
gap: 4px;
font-size: var(--font-xs);
font-weight: 500;
color: var(--text-secondary);
background: var(--bg-surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 3px 10px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.back-link:hover {
.back-btn:hover {
background: var(--bg-hover);
color: var(--text);
text-decoration: underline;
}
/* Delete button inside hosts table */
@@ -1131,18 +1141,16 @@ td.col-actions {
.port-list {
display: flex;
flex-direction: column;
gap: var(--size-xs);
margin-bottom: var(--size-md);
border-top: 1px solid var(--border);
}
.port-row {
display: flex;
align-items: center;
gap: var(--size-md);
padding: var(--size-sm) var(--size-sm);
border-radius: var(--radius-sm);
background: var(--bg);
border: 1px solid var(--border);
padding: var(--size-sm) var(--size-xs);
border-bottom: 1px solid var(--border);
}
.port-row__number {