feat: optimize for mobile

matoous · Apr 4, 2024 · 72c7fe7 · 72c7fe7
1 parent 7a12b88
commit 72c7fe7
Show file tree

Hide file tree

Showing 6 changed files with 196 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -11,5 +11,5 @@ MWP is the facade for [matoous/wiki](https://github.com/matoous/wiki) hosted on
 ### Web
 
 ```sh
-cargo watch -i static/styles.css -x run
+cargo watch -i mwp-web/static/ -x run
 ```
diff --git a/mwp-web/src/main.rs b/mwp-web/src/main.rs
@@ -66,7 +66,11 @@ async fn search_page(q: web::Query<SearchQuery>, index: web::Data<Index>) -> AwR
                         div {(render::tags_filter(result.tags))}
                     },
                     html! {
-                        div {(format!("{:.2?}", result.timing))}
+                        .metadata {
+                            div {"Search: " b{(q.query)}}
+                            div {"·"}
+                            div {(format!("{} results in {:.2?}", result.count, result.timing))}
+                        }
                     },
                     html! {
                         (listing(searcher, schema, result.docs))
@@ -95,49 +99,31 @@ async fn tag_page(tag: web::Path<String>, index: web::Data<Index>) -> AwResult<M
             (render::header("Tags | Matt's Wiki"))
             body {
                 (render::layout(
-                   html! {
+                    html! {
                         div {(render::tags_filter(result.tags))}
-                   },
-                   html! {
-
-                   },
-                   listing(searcher, schema, result.docs)
+                    },
+                    html! {
+                        .metadata {
+                            div {"Tag: " b{(tag)}}
+                            div {"·"}
+                            div {(format!("{} results in {:.2?}", result.count, result.timing))}
+                        }
+                    },
+                    listing(searcher, schema, result.docs)
                 ))
             }
         }
     })
 }
 
-async fn content_page(
-    path: web::Path<String>,
-    content: web::Data<Content>,
-    index: web::Data<Index>,
-) -> AwResult<Markup> {
+async fn content_page(path: web::Path<String>, content: web::Data<Content>) -> AwResult<Markup> {
     let mwp_content::Page {
         title,
         html,
-        tags,
         parents,
         ..
     } = content.get(format!("/{}", path.as_str()).as_str()).unwrap();
 
-    let schema = index.schema();
-    let reader = index.reader().unwrap();
-    let searcher = reader.searcher();
-
-    let tags_field = schema.get_field("tags").unwrap();
-
-    let result = match tags.last() {
-        Some(tag) => {
-            let query = TermQuery::new(
-                Term::from_field_text(tags_field, tag),
-                IndexRecordOption::Basic,
-            );
-            search::search(index.into_inner(), &query, 0).unwrap()
-        }
-        None => search::search(index.into_inner(), &AllQuery, 0).unwrap(),
-    };
-
     let mut hiearchy: Vec<(String, &String)> = Vec::with_capacity(parents.len());
     for parent in parents {
         if parent == "/" {

diff --git a/mwp-web/src/render.rs b/mwp-web/src/render.rs
@@ -2,6 +2,7 @@ use maud::{html, Markup, PreEscaped};
 use tantivy::aggregation::agg_result::BucketEntry;
 
 const EXPAND_ICON: &str = include_str!("static/expand.svg");
+const BURGER_ICON: &str = include_str!("static/burger.svg");
 
 pub fn header(page_title: &str) -> Markup {
     html! {
@@ -50,13 +51,18 @@ pub fn layout(sidebar: Markup, meta: Markup, content: Markup) -> Markup {
                 a .logo href="/" {
                     "Matt's Wiki_"
                 }
-                .search {
-                    form method="GET" action="/search" {
-                        input type="search" name="query" id="query" placeholder="Search..." accesskey="f";
+                .options {
+                    .search {
+                        form method="GET" action="/search" {
+                            input type="search" name="query" id="query" placeholder="Search..." accesskey="f";
+                        }
+                    }
+                    button .burger aria-controls="sidebar" aria-expanded="sidebar" {
+                        (PreEscaped(BURGER_ICON))
                     }
                 }
             }
-            .sidebar {(sidebar)}
+            #sidebar {(sidebar)}
             .meta {(meta)}
             main {(content)}
             (footer())

diff --git a/mwp-web/src/static/burger.svg b/mwp-web/src/static/burger.svg
diff --git a/mwp-web/static/styles.css b/mwp-web/static/styles.css
@@ -138,6 +138,13 @@ form {
   grid-template-rows: auto auto 1fr auto;
   grid-template-areas: "nav nav" "sidebar meta" "sidebar content" "footer footer";
 }
+@media (width <= 1000px) {
+  .layout {
+    grid-template-columns: auto;
+    grid-template-rows: auto auto 1fr auto auto;
+    grid-template-areas: "nav" "sidebar" "meta" "content" "footer";
+  }
+}
 
 .nav {
   grid-area: nav;
@@ -148,22 +155,62 @@ form {
   padding: var(--spacings-kilo) var(--spacings-giga);
   border-bottom: 2px solid var(--light);
 }
+.nav .burger {
+  display: none;
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--foreground);
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  cursor: pointer;
+}
+@media (width <= 1000px) {
+  .nav .burger {
+    display: block;
+  }
+}
+.nav .options {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacings-kilo);
+}
 
-.sidebar {
+#sidebar {
   grid-area: sidebar;
   padding: var(--spacings-giga);
   border-right: 2px solid var(--light);
 }
+@media (width <= 1000px) {
+  #sidebar {
+    padding: var(--spacings-giga) var(--spacings-tera);
+    border-right: none;
+    border-bottom: 2px solid var(--light);
+    display: none;
+  }
+  #sidebar.expanded {
+    display: block;
+  }
+}
 
 .meta {
   grid-area: meta;
   padding: var(--spacings-kilo) var(--spacings-giga);
   border-bottom: 2px solid var(--light);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.meta .metadata {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacings-byte);
 }
 
 main {
   grid-area: content;
   padding: var(--spacings-kilo) var(--spacings-giga);
+  margin-bottom: var(--spacings-zetta);
 }
 
 footer {
@@ -210,6 +257,34 @@ article {
 .tree .folder {
   margin-left: var(--spacings-mega);
 }
+.tree button[aria-expanded] {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+  position: absolute;
+  left: -22px;
+  top: 2px;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  font-size: 0.7rem;
+}
+.tree button[aria-expanded][aria-expanded=false] {
+  transform: rotate(-90deg);
+}
+.tree .icon {
+  min-width: 12px;
+  min-height: 12px;
+  width: 0.75em;
+  height: 0.75em;
+  display: inline-block;
+  vertical-align: text-bottom;
+}
+.tree .icon svg {
+  width: 100%;
+  height: 100%;
+}
 
 .hiearchy {
   display: flex;
@@ -274,32 +349,3 @@ article {
 .tree .folder.expanded {
   display: block;
 }
-
-button[aria-expanded] {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--foreground);
-  position: absolute;
-  left: -22px;
-  top: 2px;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  font-size: 0.7rem;
-}
-button[aria-expanded][aria-expanded=false] {
-  transform: rotate(-90deg);
-}
-
-.icon {
-  min-width: 12px;
-  min-height: 12px;
-  width: 0.75em;
-  height: 0.75em;
-  display: inline-block;
-  vertical-align: text-bottom;
-}
-.icon svg {
-  width: 100%;
-  height: 100%;
-}