web: add tablet rendering, listen to window resize events.

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<Msg> {
 
 // `view` describes what to display.
 pub fn view(model: &Model) -> Node<Msg> {
-    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()),
     ]
 }