ui: start out with flex column arrangments

This commit is contained in:
Jeremy Wall 2024-02-20 20:49:14 -05:00
parent cf98532775
commit f32a221022
3 changed files with 35 additions and 7 deletions

View File

@ -64,6 +64,7 @@ async fn main() -> anyhow::Result<()> {
let router = Router::new()
// JSON api endpoints
.nest("/js", routes::mk_js_routes(config.clone()))
.nest("/static", routes::mk_static_routes(config.clone()))
.nest("/api", routes::mk_api_routes(config.clone()))
// HTMX ui component endpoints
.nest("/ui", routes::mk_ui_routes(config.clone()))

View File

@ -144,6 +144,7 @@ pub async fn index(State(config): State<Config>) -> Markup {
script src="/js/plotly.js" { }
script src="/js/htmx.js" { }
script src="/js/lib.js" { }
link rel="stylesheet" href="/static/site.css" { }
(app(State(config.clone())).await)
}
}
@ -157,15 +158,16 @@ pub async fn app(State(config): State<Config>) -> Markup {
.enumerate()
.collect::<Vec<(usize, String)>>();
html! {
div {
// Header menu
ul {
@for title in &titles {
li hx-get=(format!("/ui/dash/{}", title.0)) hx-target="#dashboard" { (title.1) }
div class="row-flex" {
div class="flex-item-shrink" {
// Header menu
ul {
@for title in &titles {
li hx-get=(format!("/ui/dash/{}", title.0)) hx-target="#dashboard" { (title.1) }
}
}
}
// dashboard display
div id="dashboard" { }
div class="flex-item-grow" id="dashboard" { }
}
}
}
@ -197,3 +199,10 @@ pub fn mk_js_routes(config: Arc<Vec<Dashboard>>) -> Router<Config> {
.route("/htmx.js", get(htmx))
.with_state(State(config))
}
pub fn mk_static_routes(config: Arc<Vec<Dashboard>>) -> Router<Config> {
Router::new()
.route("/site.css", get(|| async { return include_str!("../static/site.css"); }))
.with_state(State(config))
}

18
static/site.css Normal file
View File

@ -0,0 +1,18 @@
.column-flex {
display: flex;
flex-direction: column;
}
.row-flex {
display: flex;
flex-direction: row;
}
.flex-item-grow {
flex: 1 0 auto;
}
.flex-item-shrink {
flex: 0 1 auto;
}