Layout logo on left, menu on right in main screen
Use Horizontal container with logo-panel and menu-panel side by side, centered vertically in the terminal. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -12,11 +12,24 @@ Screen {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Main menu */
|
/* Main menu */
|
||||||
#main-menu {
|
#main-layout {
|
||||||
width: 1fr;
|
width: 100%;
|
||||||
max-width: 60;
|
height: 1fr;
|
||||||
|
align: center middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo-panel {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
padding: 1 2;
|
||||||
|
align: center middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-panel {
|
||||||
|
width: 1fr;
|
||||||
|
max-width: 40;
|
||||||
|
height: auto;
|
||||||
padding: 1 2;
|
padding: 1 2;
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu-list {
|
#menu-list {
|
||||||
@@ -26,9 +39,7 @@ Screen {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
text-align: center;
|
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Data tables */
|
/* Data tables */
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ from textual.app import ComposeResult
|
|||||||
from textual.screen import Screen
|
from textual.screen import Screen
|
||||||
from textual.widgets import Header, Footer, Static, OptionList
|
from textual.widgets import Header, Footer, Static, OptionList
|
||||||
from textual.widgets.option_list import Option
|
from textual.widgets.option_list import Option
|
||||||
from textual.containers import Vertical, Center
|
from textual.containers import Horizontal, Vertical
|
||||||
|
|
||||||
LOGO = """\
|
LOGO = """\
|
||||||
[green]
|
[green]
|
||||||
@@ -35,9 +35,10 @@ class MainMenuScreen(Screen):
|
|||||||
|
|
||||||
def compose(self) -> ComposeResult:
|
def compose(self) -> ComposeResult:
|
||||||
yield Header()
|
yield Header()
|
||||||
with Center():
|
with Horizontal(id="main-layout"):
|
||||||
with Vertical(id="main-menu"):
|
with Vertical(id="logo-panel"):
|
||||||
yield Static(LOGO, id="logo", markup=True)
|
yield Static(LOGO, id="logo", markup=True)
|
||||||
|
with Vertical(id="menu-panel"):
|
||||||
yield OptionList(
|
yield OptionList(
|
||||||
*[Option(label, id=mid) for mid, label in MENU_ITEMS],
|
*[Option(label, id=mid) for mid, label in MENU_ITEMS],
|
||||||
id="menu-list",
|
id="menu-list",
|
||||||
|
|||||||
Reference in New Issue
Block a user