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),
+ ]
+ ]
+}