Refactor training view layout to use grid for better structure and responsiveness; adjust styles for input elements and containers.

This commit is contained in:
mscrnt 2025-05-27 07:52:03 -07:00
parent fb6e2fcd65
commit 329f2ba278
3 changed files with 84 additions and 31 deletions

View File

@ -325,7 +325,8 @@ Button.game_button {
} }
#config_scroll_container { #config_scroll_container {
height: 70vh; height: 60vh;
width: 100%; /* Ensures full width container */
overflow-y: auto; overflow-y: auto;
padding: 1; padding: 1;
border-top: solid {{BORDER}}; border-top: solid {{BORDER}};
@ -346,7 +347,7 @@ Button.game_button {
} }
Input, Select { Input, Select {
width: 100%; width: auto;
min-width: 40; min-width: 40;
} }
@ -360,4 +361,23 @@ Input, Select {
layout: horizontal; layout: horizontal;
align-vertical: middle; align-vertical: middle;
padding: 0 1; padding: 0 1;
width: 100%;
height: auto;
}
.input_row > * {
width: 1fr;
padding-right: 1;
}
.input_row > *:last-child {
padding-right: 0;
}
#filter_grid {
grid-size: 4;
grid-gutter: 1;
align-horizontal: left;
width: 100%;
padding: 1 2;
} }

View File

@ -325,7 +325,8 @@ Button.game_button {
} }
#config_scroll_container { #config_scroll_container {
height: 70vh; height: 60vh;
width: 100%; /* Ensures full width container */
overflow-y: auto; overflow-y: auto;
padding: 1; padding: 1;
border-top: solid #3a9bed; border-top: solid #3a9bed;
@ -346,7 +347,7 @@ Button.game_button {
} }
Input, Select { Input, Select {
width: 100%; width: auto;
min-width: 40; min-width: 40;
} }
@ -360,4 +361,23 @@ Input, Select {
layout: horizontal; layout: horizontal;
align-vertical: middle; align-vertical: middle;
padding: 0 1; padding: 0 1;
width: 100%;
height: auto;
}
.input_row > * {
width: 1fr;
padding-right: 1;
}
.input_row > *:last-child {
padding-right: 0;
}
#filter_grid {
grid-size: 4;
grid-gutter: 1;
align-horizontal: left;
width: 100%;
padding: 1 2;
} }

View File

@ -84,45 +84,53 @@ class TrainingView(Screen):
yield Static(f"[{palette.ACCENT}]{header_text}[/{palette.ACCENT}]", classes="header") yield Static(f"[{palette.ACCENT}]{header_text}[/{palette.ACCENT}]", classes="header")
# Build scrollable form content
yield VerticalScroll( yield VerticalScroll(
Vertical( Vertical(
# Framework & Algorithm # Framework & Algorithm
Static("Framework & Algorithm", classes="section_label"), Static("Framework & Algorithm", classes="section_label"),
Horizontal( Grid(
Vertical(Label("Framework"), self.framework_dropdown), Vertical(Label("Framework"), self.framework_dropdown, classes="input_cell"),
Vertical(Label("Algorithm"), self.algo_dropdown), Vertical(Label("Algorithm"), self.algo_dropdown, classes="input_cell"),
classes="input_row" classes="input_grid"
), ),
# Model name / num_env # Model name / num_env
Static("Model Configuration", classes="section_label"), Static("Model Configuration", classes="section_label"),
Horizontal( Grid(
Vertical(Label("Model Name"), self.model_name_input), Vertical(Label("Model Name"), self.model_name_input, classes="input_cell"),
Vertical(Label("Num Envs"), self.num_env_input), Vertical(Label("Num Envs"), self.num_env_input, classes="input_cell"),
classes="input_row" classes="input_grid"
), ),
# General Settings # General Settings
Static("General Settings", classes="section_label"), Static("General Settings", classes="section_label"),
*[ Grid(
Horizontal(Vertical(Label(k)), v, classes="input_row") *[
for k, v in self.settings_inputs.items() Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell")
], for k, v in self.settings_inputs.items()
],
classes="input_grid"
),
# Wrapper Checkboxes # Wrapper Checkboxes
Static("Wrapper Flags", classes="section_label"), Static("Wrapper Flags", classes="section_label"),
*[ Grid(
Horizontal(cb, classes="input_row") *[
for cb in self.wrapper_checkboxes.values() Vertical(cb, classes="input_cell")
], for cb in self.wrapper_checkboxes.values()
],
classes="input_grid"
),
# Wrapper Inputs # Wrapper Inputs
*[ Grid(
Horizontal(Vertical(Label(k.replace("_", " ").title())), v, classes="input_row") *[
for k, v in self.wrapper_inputs.items() Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell")
], for k, v in self.wrapper_inputs.items()
],
classes="input_grid"
),
# Filter Keys # Filter Keys
Static("Filter Keys", classes="section_label"), Static("Filter Keys", classes="section_label"),
@ -130,14 +138,20 @@ class TrainingView(Screen):
# Policy kwargs # Policy kwargs
Static("Policy Architecture", classes="section_label"), Static("Policy Architecture", classes="section_label"),
Horizontal(Label("Net Arch"), self.net_arch_input, classes="input_row"), Grid(
Vertical(Label("Net Arch"), self.net_arch_input, classes="input_cell"),
classes="input_grid"
),
# PPO Settings # PPO Settings
Static("PPO Settings", classes="section_label"), Static("PPO Settings", classes="section_label"),
*[ Grid(
Horizontal(Label(k.replace("_", " ").title()), v, classes="input_row") *[
for k, v in self.ppo_inputs.items() Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell")
], for k, v in self.ppo_inputs.items()
],
classes="input_grid"
),
id="form_layout", id="form_layout",
classes="form_column" classes="form_column"
@ -145,7 +159,6 @@ class TrainingView(Screen):
id="config_scroll_container" id="config_scroll_container"
) )
# Final button and footer
yield Button("🔍 Review Config", id="review_config_btn", classes="confirm_button") yield Button("🔍 Review Config", id="review_config_btn", classes="confirm_button")
yield AgentMFooter(compact=True) yield AgentMFooter(compact=True)