diff --git a/web/index.html b/web/index.html index 8710ded..ac1d9ed 100644 --- a/web/index.html +++ b/web/index.html @@ -133,7 +133,7 @@ blockquote[type="cite"], } */ -.desktop-main-content { +.desktop .main-content { display: grid; grid-template-columns: 12rem 1fr; } @@ -153,6 +153,11 @@ blockquote[type="cite"], .navbar { border: none; } +.desktop nav.pagination, +.tablet nav.pagination { + margin-left: .5em; + margin-bottom: 0 !important; +} diff --git a/web/src/state.rs b/web/src/state.rs index 0fd2558..28afe8b 100644 --- a/web/src/state.rs +++ b/web/src/state.rs @@ -19,6 +19,7 @@ pub fn init(url: Url, orders: &mut impl Orders) -> Model { } else { orders.notify(subs::UrlRequested::new(url)); }; + orders.stream(streams::window_event(Ev::Resize, |_| Msg::OnResize)); orders.subscribe(on_url_changed); Model { @@ -127,6 +128,7 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders) { Msg::Reload => { orders.perform_cmd(async move { on_url_changed(subs::UrlChanged(Url::current())) }); } + Msg::OnResize => (), Msg::SearchRequest { query, @@ -357,6 +359,8 @@ pub enum Msg { Noop, // Tell the client to refresh its state Reload, + // Window has changed size + OnResize, // Tell the server to update state RefreshStart, RefreshDone(Option), diff --git a/web/src/view/desktop.rs b/web/src/view/desktop.rs index 3f1b824..541b6ac 100644 --- a/web/src/view/desktop.rs +++ b/web/src/view/desktop.rs @@ -86,7 +86,7 @@ pub(super) fn view(model: &Model) -> Node { let tags_open = use_state(|| false); let force_tags_open = unread.is_empty(); div![ - C!["desktop-main-content"], + C!["main-content"], aside![ C!["tags-menu", "menu"], IF!(!unread.is_empty() => p![C!["menu-label"], "Unread"]), diff --git a/web/src/view/mod.rs b/web/src/view/mod.rs index d9ee99b..199fc07 100644 --- a/web/src/view/mod.rs +++ b/web/src/view/mod.rs @@ -19,6 +19,7 @@ use crate::{ mod desktop; mod legacy; mod mobile; +mod tablet; fn set_title(title: &str) { seed::document().set_title(&format!("lb: {}", title)); @@ -395,26 +396,28 @@ fn view_footer(render_time_ms: u128) -> Node { // `view` describes what to display. pub fn view(model: &Model) -> Node { - info!("refreshing {:?}", model.refreshing_state); - let is_mobile = seed::window() - .match_media("(max-width: 768px)") - .expect("failed media query") - .map(|mql| mql.matches()) - .unwrap_or(false); - let start = Instant::now(); + info!("refreshing {:?}", model.refreshing_state); + let win = seed::window(); + let w = win + .inner_width() + .expect("window width") + .as_f64() + .expect("window width f64"); + let h = win + .inner_height() + .expect("window height") + .as_f64() + .expect("window height f64"); + info!("win: {w}x{h}"); + info!("view called"); div![ - if is_mobile { - C!["mobile"] - } else { - C!["desktop"] + match w { + w if w < 800. => div![C!["mobile"], mobile::view(model)], + w if w < 1024. => div![C!["tablet"], tablet::view(model)], + _ => div![C!["desktop"], desktop::view(model)], }, - if is_mobile { - mobile::view(model) - } else { - desktop::view(model) - }, - view_footer(start.elapsed().as_millis()) + view_footer(start.elapsed().as_millis()), ] } diff --git a/web/src/view/tablet.rs b/web/src/view/tablet.rs new file mode 100644 index 0000000..dd448df --- /dev/null +++ b/web/src/view/tablet.rs @@ -0,0 +1,30 @@ +use seed::{prelude::*, *}; + +use crate::{ + state::{Context, Model, Msg}, + view::{view_header, view_search_results, view_thread}, +}; + +pub(super) fn view(model: &Model) -> Node { + // Do two queries, one without `unread` so it loads fast, then a second with unread. + let content = match &model.context { + Context::None => div![h1!["Loading"]], + Context::Thread(_) => unimplemented!("tablet legacy thread view"), + Context::ThreadResult(thread) => view_thread(thread), + Context::Search(_) => unimplemented!("tablet legacy search results view"), + Context::SearchResult { + query, + results, + count, + pager, + } => view_search_results(&query, results.as_slice(), *count, pager), + }; + div![ + C!["main-content"], + div![ + view_header(&model.query, &model.refreshing_state), + content, + view_header(&model.query, &model.refreshing_state), + ] + ] +}