Refactor training view layout to use grid for better structure and responsiveness; adjust styles for input elements and containers.
This commit is contained in:
parent
fb6e2fcd65
commit
329f2ba278
@ -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;
|
||||||
}
|
}
|
||||||
@ -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;
|
||||||
}
|
}
|
||||||
@ -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")
|
Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell")
|
||||||
for k, v in self.settings_inputs.items()
|
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")
|
Vertical(cb, classes="input_cell")
|
||||||
for cb in self.wrapper_checkboxes.values()
|
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")
|
Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell")
|
||||||
for k, v in self.wrapper_inputs.items()
|
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")
|
Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell")
|
||||||
for k, v in self.ppo_inputs.items()
|
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)
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user