wip

Author: functora

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

@@ -18,7 +18,7 @@ assetsViewer st = do
 assetViewer :: Model -> Int -> [View Action]
 assetViewer st idx =
   [ fieldset_ mempty
-      $ [ legend_
+      $ ( legend_
             mempty
             [ text title,
               text " ",
@@ -34,8 +34,8 @@ assetViewer st idx =
                   text " Edit"
                 ]
             ]
-        ]
-      <> FieldPairs.fieldPairsViewer FieldPairs.defOpts args
+        )
+      : FieldPairs.fieldPairsViewer FieldPairs.defOpts args
   ]
     <> ( Dialog.dialog
           ( Dialog.defOpts @Model @Action

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

@@ -8,6 +8,7 @@ import Functora.Miso.Prelude
 import qualified Functora.Miso.Widgets.BrowserLink as BrowserLink
 import qualified Functora.Miso.Widgets.Field as Field
 import qualified Functora.Miso.Widgets.FieldPairs as FieldPairs
+import qualified Functora.Miso.Widgets.Flex as Flex
 import qualified Functora.Miso.Widgets.Icon as Icon
 import qualified Functora.Miso.Widgets.Spinner as Spinner
 import qualified Functora.Money as Money
@@ -20,27 +21,23 @@ mainWidget st =
     [ style_
         [ ("margin", "0"),
           ("padding", "0"),
-          ("width", "100%"),
           ("min-height", "100vh"),
           ("display", "flex"),
           ("flex-direction", "column"),
-          ("justify-content", "space-between")
+          ("justify-content", "space-between"),
+          ("align-items", "center")
         ]
     ]
-    $ [ header_ mempty $ Menu.menu st
-      ]
-    <> [ main_
-          [ style_
-              [ ("align-self", "center"),
-                ("display", "flex"),
-                ("align-items", "center"),
-                ("flex-direction", "column")
-              ]
+    $ [ header_
+          [ style_ [("width", "100%")]
           ]
-          $ screenWidget st
+          $ Menu.menu st
+      ]
+    <> [ Flex.flexCol main_ id $ screenWidget st
        ]
     <> [ footer_
-          [style_ [("text-align", "center")]]
+          [ style_ [("text-align", "center")]
+          ]
           $ tosWidget
           : br_ mempty
           : Menu.qrButton st
@@ -99,45 +96,52 @@ screenWidget st@Model {modelState = St {stScreen = Main}} =
       then mempty
       else buttons
   )
-    <> Asset.assetsViewer st
-    <> totalViewer st
+    <> [ Flex.flexCol section_ id $ Asset.assetsViewer st <> totalViewer st
+       ]
     <> buttons
   where
     assets :: [View Action]
     assets = Asset.assetsViewer st
     buttons :: [View Action]
     buttons =
-      [ button_
-          [ onClick . PushUpdate . Instant . ImpureUpdate $ do
-              asset <- newAsset
-              pure
-                $ #modelState
-                . #stAssets
-                %~ flip snoc asset
-          ]
-          [ icon Icon.IconAdd,
-            text " Add item"
-          ],
-        button_
-          [ onClick
-              . PushUpdate
-              . Instant
-              . either impureThrow Jsm.openBrowserPage
-              $ stTeleUri st
-          ]
-          [ icon Icon.IconTelegram,
-            text " Order via Telegram"
+      singleton
+        $ Flex.flexRow
+          section_
+          id
+          [ button_
+              [ type_ "submit",
+                onClick . PushUpdate . Instant . ImpureUpdate $ do
+                  asset <- newAsset
+                  pure
+                    $ #modelState
+                    . #stAssets
+                    %~ flip snoc asset
+              ]
+              [ icon Icon.IconAdd,
+                text " Add item"
+              ],
+            button_
+              [ type_ "submit",
+                onClick
+                  . PushUpdate
+                  . Instant
+                  . either impureThrow Jsm.openBrowserPage
+                  $ stTeleUri st
+              ]
+              [ icon Icon.IconTelegram,
+                text " Order via Telegram"
+              ]
           ]
-      ]
 
 totalViewer :: Model -> [View Action]
 totalViewer st =
   if base == 0
     then mempty
     else
-      [ h1_ mempty [text "Total"]
-      ]
-        <> FieldPairs.fieldPairsViewer
+      singleton
+        $ fieldset_ mempty
+        $ (legend_ mempty [text "Total"])
+        : FieldPairs.fieldPairsViewer
           FieldPairs.defOpts
           FieldPairs.Args
             { FieldPairs.argsModel = st,

ghcjs/delivery-calculator/src/Main.hs

@@ -240,11 +240,12 @@ viewModel st =
   prependViews
     [ link_
         [ rel_ "stylesheet",
-          href_ "node_modules/@lowlighter/matcha/dist/matcha.css"
+          href_ "static/css/fontawesome.min.css"
         ],
       link_
         [ rel_ "stylesheet",
-          href_ "static/css/fontawesome.min.css"
+          -- href_ "static/css/mvp.css"
+          href_ "node_modules/@lowlighter/matcha/dist/matcha.css"
         ],
       link_
         [ rel_ "stylesheet",

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

@@ -1,3 +1,7 @@
+* {
+  overflow-wrap: anywhere;
+}
+
 html {
   width: 100vw;
   min-height: 100vh;
@@ -8,8 +12,11 @@ html, main {
   padding: 0;
 }
 
-footer {
-  padding-bottom: 18px;
+header, footer {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 textarea {
@@ -21,6 +28,10 @@ dialog {
   overflow: auto;
 }
 
+button {
+  margin: 0.25rem 0.125rem;
+}
+
 @media print {
   body {
     color-adjust: exact !important;