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

36
style/rust-ipam.css
View File

@@ -1035,23 +1035,33 @@ td.col-actions {
filter: brightness(0.9); 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 { .page-header__left {
display: flex; display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--size-xs);
}
.back-btn {
display: inline-flex;
align-items: center; align-items: center;
gap: var(--size-md); gap: 4px;
} font-size: var(--font-xs);
font-weight: 500;
.back-link {
font-size: var(--font-sm);
color: var(--text-secondary); color: var(--text-secondary);
background: var(--bg-surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 3px 10px;
text-decoration: none; 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); color: var(--text);
text-decoration: underline;
} }
/* Delete button inside hosts table */ /* Delete button inside hosts table */
@@ -1131,18 +1141,16 @@ td.col-actions {
.port-list { .port-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--size-xs);
margin-bottom: var(--size-md); margin-bottom: var(--size-md);
border-top: 1px solid var(--border);
} }
.port-row { .port-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--size-md); gap: var(--size-md);
padding: var(--size-sm) var(--size-sm); padding: var(--size-sm) var(--size-xs);
border-radius: var(--radius-sm); border-bottom: 1px solid var(--border);
background: var(--bg);
border: 1px solid var(--border);
} }
.port-row__number { .port-row__number {