From 391253a4ccf8a53e1a1ca67aab836d5386f0328b Mon Sep 17 00:00:00 2001 From: Guillaume Hivert Date: Wed, 22 May 2024 17:33:06 +0200 Subject: [PATCH] ui: adapt to mobile Signed-off-by: Guillaume Hivert --- apps/frontend/src/frontend.gleam | 2 +- .../src/frontend/view/body/styles.gleam | 21 ++++++++++++++++++- .../src/frontend/view/footer/styles.gleam | 2 +- .../src/frontend/view/navbar/navbar.gleam | 2 +- .../src/frontend/view/navbar/styles.gleam | 18 ++++++++++++++-- 5 files changed, 39 insertions(+), 6 deletions(-) diff --git a/apps/frontend/src/frontend.gleam b/apps/frontend/src/frontend.gleam index 6c1e9d8..ccaf44c 100644 --- a/apps/frontend/src/frontend.gleam +++ b/apps/frontend/src/frontend.gleam @@ -41,7 +41,7 @@ pub fn api_endpoint() { pub fn main() { let debugger_ = case is_dev() { - False -> Error(Nil) + False | True -> Error(Nil) True -> tardis.single("Gloogle") |> result.nil_error() diff --git a/apps/frontend/src/frontend/view/body/styles.gleam b/apps/frontend/src/frontend/view/body/styles.gleam index 0aea514..ecd71a4 100644 --- a/apps/frontend/src/frontend/view/body/styles.gleam +++ b/apps/frontend/src/frontend/view/body/styles.gleam @@ -3,7 +3,8 @@ import gleam/list import lustre/element import sketch as s import sketch/lustre/extra as l -import sketch/size.{px} +import sketch/media +import sketch/size.{px, vw} pub fn implementations_pill(background, color, attributes, children) { let id = "implementations-pill-" <> background @@ -45,6 +46,10 @@ pub fn search_results_wrapper(attributes, children) { s.gap(px(24)), s.grid_template_columns("min-content minmax(auto, 1fr)"), s.justify_items("center"), + s.media(media.max_width(px(700)), [ + s.grid_template_columns("calc(100vw - 48px)"), + s.padding_("0 24px"), + ]), ]) } @@ -54,6 +59,7 @@ pub fn search_details(attributes, children) { s.display("flex"), s.gap(px(12)), s.justify_content("space-between"), + s.media(media.max_width(px(700)), [s.flex_direction("column")]), ]) } @@ -89,6 +95,7 @@ pub fn signature(attributes, children) { s.white_space("pre-wrap"), s.display("block"), s.line_height("1.6"), + s.overflow("auto"), ]) } @@ -124,6 +131,15 @@ pub fn search_wrapper(attributes, children) { s.max_width(px(700)), s.width(size.percent(100)), s.margin_("auto"), + s.media(media.max_width(px(700)), [ + s.max_width(vw(100)), + s.padding(px(24)), + s.grid_template_areas( + "\"title title title\" + \"input input input\" + \". . submit\"", + ), + ]), ]) } @@ -189,6 +205,7 @@ pub fn matches_titles(attributes, children) { s.align_items("baseline"), s.gap(px(6)), s.font_size(px(12)), + s.media(media.max_width(px(700)), [s.flex_direction("column")]), ]) } @@ -251,6 +268,7 @@ pub fn sidebar_wrapper(attributes, children) { rgba(255, 255, 255, 0) )" }), + s.media(media.max_width(px(700)), [s.display("none")]), ]) } @@ -311,6 +329,7 @@ pub fn items_wrapper(attributes, children) { s.gap(px(24)), s.padding_top(px(12)), s.max_width(px(700)), + s.width(size.percent(100)), ]) } diff --git a/apps/frontend/src/frontend/view/footer/styles.gleam b/apps/frontend/src/frontend/view/footer/styles.gleam index 34d9e3c..edd3d1d 100644 --- a/apps/frontend/src/frontend/view/footer/styles.gleam +++ b/apps/frontend/src/frontend/view/footer/styles.gleam @@ -4,7 +4,7 @@ import sketch/lustre/extra as l import sketch/size.{px} pub fn footer(attributes, children) { - l.memo("div", attributes, children, [ + l.memo("footer", attributes, children, [ s.background(palette.dark.charcoal), s.display("flex"), s.flex_direction("column"), diff --git a/apps/frontend/src/frontend/view/navbar/navbar.gleam b/apps/frontend/src/frontend/view/navbar/navbar.gleam index 3e29b2c..285680e 100644 --- a/apps/frontend/src/frontend/view/navbar/navbar.gleam +++ b/apps/frontend/src/frontend/view/navbar/navbar.gleam @@ -25,7 +25,7 @@ pub fn navbar(model: Model) { s.navbar_search([], [ s.navbar_search_title([a.href("/")], [ s.search_lucy([a.src("/images/lucy.svg")]), - h.text("Gloogle"), + s.title([], [h.text("Gloogle")]), ]), s.search_input_wrapper([e.on_submit(msg.SubmitSearch)], [ search_input.view(model.loading, model.input), diff --git a/apps/frontend/src/frontend/view/navbar/styles.gleam b/apps/frontend/src/frontend/view/navbar/styles.gleam index a19edfb..005184b 100644 --- a/apps/frontend/src/frontend/view/navbar/styles.gleam +++ b/apps/frontend/src/frontend/view/navbar/styles.gleam @@ -2,7 +2,8 @@ import frontend/colors/palette import frontend/view/body/styles as body_styles import sketch as s import sketch/lustre/extra as l -import sketch/size.{px} +import sketch/media +import sketch/size.{px, vw} pub const search_lucy = body_styles.search_lucy @@ -25,6 +26,7 @@ pub fn nav_links(attributes, children) { s.align_items("baseline"), s.gap(px(48)), s.padding(px(48)), + s.media(media.max_width(px(700)), [s.display("none")]), ]) } @@ -51,7 +53,7 @@ pub fn nav_link(attributes, children) { } pub fn navbar(attributes, children) { - l.memo("div", attributes, children, [ + l.memo("nav", attributes, children, [ s.position("sticky"), s.top(px(0)), s.display("flex"), @@ -63,6 +65,13 @@ pub fn navbar(attributes, children) { s.background(palette.dark.underwater_blue), s.height(px(130)), s.z_index(1000), + s.media(media.max_width(px(700)), [ + s.padding_left(px(24)), + s.padding_right(px(24)), + s.gap(px(24)), + s.max_width(vw(100)), + s.height(px(115)), + ]), ]) } @@ -72,5 +81,10 @@ pub fn navbar_search(attributes, children) { s.gap(px(48)), s.align_items("center"), s.flex("1"), + s.media(media.max_width(px(700)), [s.gap(px(24))]), ]) } + +pub fn title(a, c) { + l.memo("div", a, c, [s.media(media.max_width(px(700)), [s.display("none")])]) +}