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 {
|
||||
width: 1fr;
|
||||
max-width: 60;
|
||||
#main-layout {
|
||||
width: 100%;
|
||||
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;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#menu-list {
|
||||
@@ -26,9 +39,7 @@ Screen {
|
||||
}
|
||||
|
||||
#logo {
|
||||
text-align: center;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Data tables */
|
||||
|
||||
@@ -2,7 +2,7 @@ from textual.app import ComposeResult
|
||||
from textual.screen import Screen
|
||||
from textual.widgets import Header, Footer, Static, OptionList
|
||||
from textual.widgets.option_list import Option
|
||||
from textual.containers import Vertical, Center
|
||||
from textual.containers import Horizontal, Vertical
|
||||
|
||||
LOGO = """\
|
||||
[green]
|
||||
@@ -35,9 +35,10 @@ class MainMenuScreen(Screen):
|
||||
|
||||
def compose(self) -> ComposeResult:
|
||||
yield Header()
|
||||
with Center():
|
||||
with Vertical(id="main-menu"):
|
||||
with Horizontal(id="main-layout"):
|
||||
with Vertical(id="logo-panel"):
|
||||
yield Static(LOGO, id="logo", markup=True)
|
||||
with Vertical(id="menu-panel"):
|
||||
yield OptionList(
|
||||
*[Option(label, id=mid) for mid, label in MENU_ITEMS],
|
||||
id="menu-list",
|
||||
|
||||
Reference in New Issue
Block a user