Refactor layout of left and right panes to use rounded borders and improve structure

This commit is contained in:
Philip Henning 2025-07-29 16:37:38 +02:00
parent d684583cb9
commit 407e37fffd

View file

@ -29,14 +29,16 @@ class HostsManagerApp(App):
.left-pane { .left-pane {
width: 60%; width: 60%;
border: solid $primary; border: round $primary;
margin: 1; margin: 1;
padding: 1;
} }
.right-pane { .right-pane {
width: 40%; width: 40%;
border: solid $primary; border: round $primary;
margin: 1; margin: 1;
padding: 1;
} }
.entry-active { .entry-active {
@ -79,13 +81,17 @@ class HostsManagerApp(App):
yield Header() yield Header()
with Horizontal(classes="hosts-container"): with Horizontal(classes="hosts-container"):
with Vertical(classes="left-pane"): left_pane = Vertical(classes="left-pane")
yield Static("Hosts Entries", id="left-header") left_pane.border_title = "Hosts Entries"
with left_pane:
yield ListView(id="entries-list") yield ListView(id="entries-list")
yield left_pane
with Vertical(classes="right-pane"): right_pane = Vertical(classes="right-pane")
yield Static("Entry Details", id="right-header") right_pane.border_title = "Entry Details"
with right_pane:
yield Static("", id="entry-details") yield Static("", id="entry-details")
yield right_pane
yield Static("", classes="status-bar", id="status") yield Static("", classes="status-bar", id="status")
yield Footer() yield Footer()