web: fix width overflow on mobile and maybe progress bar

This commit is contained in:
Bill Thiede 2025-01-30 17:45:14 -08:00
parent e6181d41ed
commit 5baac0c77a

View File

@ -92,6 +92,7 @@ pub fn view(model: &Model) -> Node<Msg> {
"bg-black", "bg-black",
"text-white", "text-white",
"lg:flex-nowrap", "lg:flex-nowrap",
"w-full"
], ],
div![ div![
C!["w-full", "lg:w-48", "flex-none", "flex", "flex-col"], C!["w-full", "lg:w-48", "flex-none", "flex", "flex-col"],
@ -100,7 +101,7 @@ pub fn view(model: &Model) -> Node<Msg> {
], ],
reading_progress(model.read_completion_ratio), reading_progress(model.read_completion_ratio),
div![ div![
C!["flex-auto"], C!["flex-auto", "flex", "flex-col"],
view_header(&model.query, &model.refreshing_state, true), view_header(&model.query, &model.refreshing_state, true),
content, content,
view_header(&model.query, &model.refreshing_state, false), view_header(&model.query, &model.refreshing_state, false),
@ -893,7 +894,7 @@ fn view_header(
"All", "All",
], ],
input![ input![
C!["grow", "pl-4", "text-black", "rounded-r"], C!["grow", "pl-2", "text-black", "rounded-r"],
attrs! { attrs! {
At::Placeholder => "Search"; At::Placeholder => "Search";
At::AutoFocus => auto_focus_search.as_at_value(); At::AutoFocus => auto_focus_search.as_at_value();
@ -1194,7 +1195,7 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
] ]
} }
fn reading_progress(ratio: f64) -> Node<Msg> { fn reading_progress(ratio: f64) -> Node<Msg> {
return div![]; return vid
let percent = ratio * 100.; let percent = ratio * 100.;
info!("percent {percent}"); info!("percent {percent}");
div![ div![