wip

Author: functora

ghcjs/miso-capa/miso-capa.cabal

@@ -140,7 +140,6 @@ test-suite miso-capa-test
       Functora.Miso.Capa.FieldPairs
       Functora.Miso.Capa.Flex
       Functora.Miso.Capa.Grid
-      Functora.Miso.Capa.Header
       Functora.Miso.Capa.Money
       Functora.Miso.Capa.Qr
       Functora.Miso.Capa.Switch

ghcjs/miso-capa/src/Functora/Miso/Capa/Grid.hs

@@ -8,52 +8,35 @@ module Functora.Miso.Capa.Grid
 where
 
 import Functora.Miso.Prelude
-import qualified Material.LayoutGrid as LayoutGrid
 
 grid :: [Attribute action] -> [View action] -> View action
-grid attrs cells =
-  LayoutGrid.layoutGrid
-    [ LayoutGrid.alignMiddle
-    ]
-    [ LayoutGrid.inner attrs cells
-    ]
+grid attrs =
+  div_
+    $ style_
+      [ ("gap", "1rem"),
+        ("display", "grid"),
+        ("margin", "0 auto"),
+        ("grid-template-columns", "repeat(auto-fit, minmax(300px, 1fr))")
+      ]
+    : attrs
+
+cell :: [View action] -> View action
+cell =
+  div_
+    $ [ style_
+          [ ("height", "4rem"),
+            ("padding", "1rem")
+          ]
+      ]
 
 bigCell :: [View action] -> View action
-bigCell =
-  LayoutGrid.cell
-    [ LayoutGrid.span12Desktop,
-      LayoutGrid.span8Tablet,
-      LayoutGrid.span4Phone,
-      LayoutGrid.alignMiddle,
-      style_ [("align-content", "center")]
-    ]
+bigCell = cell
 
 mediumCell :: [View action] -> View action
-mediumCell =
-  LayoutGrid.cell
-    [ LayoutGrid.span6Desktop,
-      LayoutGrid.span4Tablet,
-      LayoutGrid.span4Phone,
-      LayoutGrid.alignMiddle,
-      style_ [("align-content", "center")]
-    ]
+mediumCell = cell
 
 smallCell :: [View action] -> View action
-smallCell =
-  LayoutGrid.cell
-    [ LayoutGrid.span3Desktop,
-      LayoutGrid.span2Tablet,
-      LayoutGrid.span2Phone,
-      LayoutGrid.alignMiddle,
-      style_ [("align-content", "center")]
-    ]
+smallCell = cell
 
 microCell :: [View action] -> View action
-microCell =
-  LayoutGrid.cell
-    [ LayoutGrid.span3Desktop,
-      LayoutGrid.span2Tablet,
-      LayoutGrid.span1Phone,
-      LayoutGrid.alignMiddle,
-      style_ [("align-content", "center")]
-    ]
+microCell = cell