ui: adapt to mobile

Signed-off-by: Guillaume Hivert <hivert.is.coming@gmail.com>

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()

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

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"),

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),

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