wip

Author: functora

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

@@ -17,22 +17,18 @@ import Miso hiding (at, view)
 
 mainWidget :: Model -> View Action
 mainWidget st =
-  section_
+  div_
     [ style_
-        [ ("margin", "0"),
-          ("padding", "0"),
+        [ ("padding", "0"),
+          ("margin", "0 auto"),
           ("min-height", "100vh"),
           ("display", "flex"),
           ("flex-direction", "column"),
           ("justify-content", "space-between"),
           ("align-items", "center")
         ]
     ]
-    $ [ header_
-          [ style_ [("width", "100%")]
-          ]
-          $ Menu.menu st
-      ]
+    $ Menu.menu st
     <> [ Flex.flexCol main_ id $ screenWidget st
        ]
     <> [ footer_
@@ -96,7 +92,7 @@ screenWidget st@Model {modelState = St {stScreen = Main}} =
       then mempty
       else buttons
   )
-    <> [ Flex.flexCol section_ id $ Asset.assetsViewer st <> totalViewer st
+    <> [ Flex.flexCol div_ id $ Asset.assetsViewer st <> totalViewer st
        ]
     <> buttons
   where
@@ -106,7 +102,7 @@ screenWidget st@Model {modelState = St {stScreen = Main}} =
     buttons =
       singleton
         $ Flex.flexRow
-          section_
+          p_
           id
           [ button_
               [ type_ "submit",

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

@@ -14,19 +14,27 @@ import qualified Functora.Miso.Widgets.BrowserLink as BrowserLink
 import qualified Functora.Miso.Widgets.Currency as Currency
 import qualified Functora.Miso.Widgets.Dialog as Dialog
 import qualified Functora.Miso.Widgets.Field as Field
-import qualified Functora.Miso.Widgets.Flex as Flex
 import qualified Functora.Miso.Widgets.Icon as Icon
 import qualified Functora.Miso.Widgets.Select as Select
 import qualified Functora.Money as Money
 import qualified Text.URI as URI
 
 menu :: Model -> [View Action]
 menu st =
-  ( Flex.flexLeftRight
-      menu_
-      id
-      [ li_
+  [ nav_
+      [ style_
+          [ ("width", "100%"),
+            ("display", "grid"),
+            ("align-items", "center"),
+            ("grid-template-columns", "auto 1fr auto auto auto auto")
+          ]
+      ]
+      [ button_
           [ role_ "button",
+            style_
+              [ ("min-width", "0"),
+                ("justify-self", "start")
+              ],
             onClick
               . PushUpdate
               . Instant
@@ -36,17 +44,26 @@ menu st =
           ]
           [ icon Icon.IconMenu
           ],
-        li_
+        button_
           [ role_ "button",
+            style_
+              [ ("min-width", "0"),
+                ("justify-self", "start"),
+                ("word-break", "keep-all"),
+                ("overflow-wrap", "normal")
+              ],
             onClick . PushUpdate . Instant . ImpureUpdate $ do
               doc <- liftIO newSt
               pure $ #modelState .~ doc
           ]
           [ text "Delivery Calculator"
-          ]
-      ]
-      [ li_
+          ],
+        button_
           [ role_ "button",
+            style_
+              [ ("min-width", "0"),
+                ("justify-self", "end")
+              ],
             onClick
               . PushUpdate
               . Instant
@@ -56,8 +73,12 @@ menu st =
           ]
           [ icon Icon.IconFav
           ],
-        li_
+        button_
           [ role_ "button",
+            style_
+              [ ("min-width", "0"),
+                ("justify-self", "end")
+              ],
             onClick
               . PushUpdate
               . Instant
@@ -68,8 +89,12 @@ menu st =
           ]
           [ icon Icon.IconPrint
           ],
-        li_
+        button_
           [ role_ "button",
+            style_
+              [ ("min-width", "0"),
+                ("justify-self", "end")
+              ],
             onClick
               . PushUpdate
               . Instant
@@ -83,8 +108,12 @@ menu st =
           ]
           [ icon Icon.IconDownload
           ],
-        li_
+        button_
           [ role_ "button",
+            style_
+              [ ("min-width", "0"),
+                ("justify-self", "end")
+              ],
             onClick
               . PushUpdate
               . Instant
@@ -96,7 +125,7 @@ menu st =
           [ icon Icon.IconShare
           ]
       ]
-  )
+  ]
     <> Fav.fav st
     <> Dialog.dialog
       ( Dialog.defOpts

ghcjs/delivery-calculator/src/Main.hs

@@ -245,7 +245,9 @@ viewModel st =
       link_
         [ rel_ "stylesheet",
           -- href_ "static/css/mvp.css"
-          href_ "node_modules/@lowlighter/matcha/dist/matcha.css"
+          -- href_ "static/css/simple.min.css"
+          href_ "static/css/tacit-css-1.8.1.min.css"
+          -- href_ "node_modules/@lowlighter/matcha/dist/matcha.css"
         ],
       link_
         [ rel_ "stylesheet",

ghcjs/delivery-calculator/static/css/app.css

@@ -7,12 +7,19 @@ html {
   min-height: 100vh;
 }
 
-html, main {
+body {
+  padding: 0;
+  margin: 0 auto;
+}
+
+html,
+main {
   margin: 0;
   padding: 0;
 }
 
-header, footer {
+header,
+footer {
   margin-left: 0;
   margin-right: 0;
   padding-left: 0;
@@ -30,6 +37,10 @@ dialog {
 
 button {
   margin: 0.25rem 0.125rem;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 @media print {

ghcjs/delivery-calculator/static/css/simple.min.css

@@ -54,7 +54,7 @@ with pkgs; let
         pkgs.nodePackages.prettier
       }/bin/prettier --plugin ${
         pkgs.nodePackages.prettier-plugin-toml
-      }/lib/node_modules/prettier-plugin-toml/lib/api.js "$@"
+      }/lib/node_modules/prettier-plugin-toml/lib/index.js "$@"
     '';
   };
   styleTest = pkgs.writeShellScriptBin "style-test" ''