From 72c7fe7ebfa1d2247ce57e319f5b4de52439b0e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matou=C5=A1=20Dzivjak?= Date: Thu, 4 Apr 2024 00:03:33 +0200 Subject: [PATCH] feat: optimize for mobile --- README.md | 2 +- mwp-web/src/main.rs | 46 +++++-------- mwp-web/src/render.rs | 14 ++-- mwp-web/src/static/burger.svg | 6 ++ mwp-web/static/styles.css | 106 +++++++++++++++++++++--------- mwp-web/static/styles.scss | 120 ++++++++++++++++++++++++---------- 6 files changed, 196 insertions(+), 98 deletions(-) create mode 100644 mwp-web/src/static/burger.svg diff --git a/README.md b/README.md index 2b34806..5c53fc3 100644 --- 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 index a382f33..f2569d6 100644 --- a/mwp-web/src/main.rs +++ b/mwp-web/src/main.rs @@ -66,7 +66,11 @@ async fn search_page(q: web::Query, index: web::Data) -> 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, index: web::Data) -> AwResult, - content: web::Data, - index: web::Data, -) -> AwResult { +async fn content_page(path: web::Path, content: web::Data) -> AwResult { 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 index 4c32d89..ce293b9 100644 --- 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 new file mode 100644 index 0000000..efe7180 --- /dev/null +++ b/mwp-web/src/static/burger.svg @@ -0,0 +1,6 @@ + + menu + + + + diff --git a/mwp-web/static/styles.css b/mwp-web/static/styles.css index fbe701d..50564c0 100644 --- 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%; -} diff --git a/mwp-web/static/styles.scss b/mwp-web/static/styles.scss index d9892a9..b2f471b 100644 --- a/mwp-web/static/styles.scss +++ b/mwp-web/static/styles.scss @@ -148,6 +148,17 @@ form { 'sidebar meta' 'sidebar content' 'footer footer'; + + @media (width <=1000px) { + grid-template-columns: auto; + grid-template-rows: auto auto 1fr auto auto; + grid-template-areas: + 'nav' + 'sidebar' + 'meta' + 'content' + 'footer'; + } } .nav { @@ -158,23 +169,66 @@ form { align-items: center; padding: var(--spacings-kilo) var(--spacings-giga); border-bottom: 2px solid var(--light); + + .burger { + display: none; + background-color: transparent; + border-color: transparent; + color: var(--foreground); + width: 28px; + height: 28px; + padding: 0; + cursor: pointer; + + @media (width <=1000px) { + display: block; + } + } + + .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) { + padding: var(--spacings-giga) var(--spacings-tera); + border-right: none; + border-bottom: 2px solid var(--light); + display: none; + + &.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; + + .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 { @@ -226,6 +280,38 @@ article { .folder { margin-left: var(--spacings-mega); } + + 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; + + &[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; + + svg { + width: 100%; + height: 100%; + } + } } .hiearchy { @@ -301,36 +387,4 @@ article { 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; - - &[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; - - svg { - width: 100%; - height: 100%; - } } \ No newline at end of file