css wip

Author: functora

ghcjs/delivery-calculator/src/App/Widgets/Main.hs

@@ -22,9 +22,13 @@ mainWidget st =
     ]
     $ [ header_ mempty $ Menu.menu st
       ]
-    <> [ main_ [class_ "main-widget-middle"] $ screenWidget st
+    <> [ main_
+          [class_ "main-widget-middle"]
+          $ screenWidget st
        ]
-    <> [ footer_ mempty tosWidget
+    <> [ footer_
+          [style_ [("text-align", "center")]]
+          [tosWidget]
        ]
     <> ( if st ^. #modelLoading
           then
@@ -210,19 +214,21 @@ foldFieldPair :: Rational -> FieldPair DynamicField f -> Rational
 foldFieldPair acc =
   foldField acc . fieldPairValue
 
-tosWidget :: [View Action]
+tosWidget :: View Action
 tosWidget =
-  [ Miso.text "\169 2024 ",
-    BrowserLink.browserLink
-      BrowserLink.Args
-        { BrowserLink.argsLink = functoraLink,
-          BrowserLink.argsLabel = "Functora",
-          BrowserLink.argsAction = PushUpdate . Instant
-        },
-    Miso.text ". All rights reserved. ",
-    Miso.text "By continuing to use this software, you agree to the ",
-    a_ [href_ "license.html"] [Miso.text "Terms of Service"],
-    Miso.text " and ",
-    a_ [href_ "privacy.html"] [Miso.text "Privacy Policy"],
-    Miso.text $ ". Version " <> vsn <> "."
-  ]
+  small_
+    mempty
+    [ Miso.text "\169 2024 ",
+      BrowserLink.browserLink
+        BrowserLink.Args
+          { BrowserLink.argsLink = functoraLink,
+            BrowserLink.argsLabel = "Functora",
+            BrowserLink.argsAction = PushUpdate . Instant
+          },
+      Miso.text ". All rights reserved. ",
+      Miso.text "By continuing to use this software, you agree to the ",
+      a_ [href_ "license.html"] [Miso.text "Terms of Service"],
+      Miso.text " and ",
+      a_ [href_ "privacy.html"] [Miso.text "Privacy Policy"],
+      Miso.text $ ". Version " <> vsn <> "."
+    ]

ghcjs/delivery-calculator/src/App/Widgets/Menu.hs

@@ -22,7 +22,11 @@ import qualified Text.URI as URI
 menu :: Model -> [View Action]
 menu st =
   [ menu_
-      [ class_ "no-print"
+      [ class_ "no-print",
+        style_
+          [ ("flex-direction", "row"),
+            ("flex-wrap", "wrap")
+          ]
       ]
       [ li_ [onClick opened] [text "menu"],
         li_

ghcjs/delivery-calculator/static/app.css

@@ -15,12 +15,12 @@ footer {
 .main-widget {
   margin: 0;
   padding: 0;
-  width: 100vw;
+  width: 100%;
   min-height: 100vh;
-  overflow-x: hidden;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  /* overflow-x: hidden; */
 }
 
 .main-widget-middle {