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 {
height: 70vh;
height: 60vh;
width: 100%; /* Ensures full width container */
overflow-y: auto;
padding: 1;
border-top: solid {{BORDER}};
@ -346,7 +347,7 @@ Button.game_button {
}
Input, Select {
width: 100%;
width: auto;
min-width: 40;
}
@ -360,4 +361,23 @@ Input, Select {
layout: horizontal;
align-vertical: middle;
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 {
height: 70vh;
height: 60vh;
width: 100%; /* Ensures full width container */
overflow-y: auto;
padding: 1;
border-top: solid #3a9bed;
@ -346,7 +347,7 @@ Button.game_button {
}
Input, Select {
width: 100%;
width: auto;
min-width: 40;
}
@ -360,4 +361,23 @@ Input, Select {
layout: horizontal;
align-vertical: middle;
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")
# Build scrollable form content
yield VerticalScroll(
Vertical(
# Framework & Algorithm
Static("Framework & Algorithm", classes="section_label"),
Horizontal(
Vertical(Label("Framework"), self.framework_dropdown),
Vertical(Label("Algorithm"), self.algo_dropdown),
classes="input_row"
Grid(
Vertical(Label("Framework"), self.framework_dropdown, classes="input_cell"),
Vertical(Label("Algorithm"), self.algo_dropdown, classes="input_cell"),
classes="input_grid"
),
# Model name / num_env
Static("Model Configuration", classes="section_label"),
Horizontal(
Vertical(Label("Model Name"), self.model_name_input),
Vertical(Label("Num Envs"), self.num_env_input),
classes="input_row"
Grid(
Vertical(Label("Model Name"), self.model_name_input, classes="input_cell"),
Vertical(Label("Num Envs"), self.num_env_input, classes="input_cell"),
classes="input_grid"
),
# General Settings
Static("General Settings", classes="section_label"),
Grid(
*[
Horizontal(Vertical(Label(k)), v, classes="input_row")
Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell")
for k, v in self.settings_inputs.items()
],
classes="input_grid"
),
# Wrapper Checkboxes
Static("Wrapper Flags", classes="section_label"),
Grid(
*[
Horizontal(cb, classes="input_row")
Vertical(cb, classes="input_cell")
for cb in self.wrapper_checkboxes.values()
],
classes="input_grid"
),
# Wrapper Inputs
Grid(
*[
Horizontal(Vertical(Label(k.replace("_", " ").title())), v, classes="input_row")
Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell")
for k, v in self.wrapper_inputs.items()
],
classes="input_grid"
),
# Filter Keys
Static("Filter Keys", classes="section_label"),
@ -130,14 +138,20 @@ class TrainingView(Screen):
# Policy kwargs
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
Static("PPO Settings", classes="section_label"),
Grid(
*[
Horizontal(Label(k.replace("_", " ").title()), v, classes="input_row")
Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell")
for k, v in self.ppo_inputs.items()
],
classes="input_grid"
),
id="form_layout",
classes="form_column"
@ -145,7 +159,6 @@ class TrainingView(Screen):
id="config_scroll_container"
)
# Final button and footer
yield Button("🔍 Review Config", id="review_config_btn", classes="confirm_button")
yield AgentMFooter(compact=True)