From f7d099edf137214142faba56a2cca7e156bf0921 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 14 May 2017 20:38:24 +0200
Subject: Add meat pie recipe and improve mobile view

---
 README.md                                          |   2 +-
 design/Main.hs                                     | 149 ++++++++++++---------
 index.html                                         |   1 -
 js/src/Dom.purs                                    |  34 ++++-
 js/src/Main.purs                                   |  15 +--
 recipes/desserts/high-carb/brownie-aux-noix.md     |   4 +-
 recipes/desserts/high-carb/cookies.md              |   4 +-
 .../high-carb/cr\303\250me-aux-\305\223ufs.md"     |   4 +-
 .../desserts/high-carb/cr\303\250me-chocolat.md"   |   4 +-
 "recipes/desserts/high-carb/cr\303\252pes.md"      |   4 +-
 recipes/desserts/high-carb/financiers.md           |   4 +-
 recipes/desserts/high-carb/fondant-chocolat.md     |   4 +-
 recipes/desserts/high-carb/shortbread.md           |  13 +-
 recipes/desserts/low-carb/fudge.md                 |   4 +-
 recipes/main-dishes/riz-vinaigre-casserole.md      |  13 +-
 recipes/main-dishes/riz-vinaigre-vita-vapeur.md    |   4 +-
 recipes/main-dishes/tarte-viande.md                |  53 ++++++++
 templates/main.html                                |   6 +-
 templates/recipe-list.html                         |   6 +-
 19 files changed, 213 insertions(+), 115 deletions(-)
 create mode 100644 recipes/main-dishes/tarte-viande.md

diff --git a/README.md b/README.md
index 1a770b7..d013260 100644
--- a/README.md
+++ b/README.md
@@ -27,4 +27,4 @@ make stop
 TODO
 ----
 
-- ameliore mobile view
+- transform points into todo items
diff --git a/design/Main.hs b/design/Main.hs
index 3ef1e0a..42c0815 100644
--- a/design/Main.hs
+++ b/design/Main.hs
@@ -2,6 +2,7 @@
 
 import Clay
 import Data.Monoid ((<>))
+import qualified Clay.Media as Media
 
 color1 = rgb 113 68 30
 color2 = rgb 13 13 81
@@ -11,68 +12,92 @@ main :: IO ()
 main = putCss $ do
 
   body ? do
-    maxWidth (px 600)
+    maxWidth responsiveLimit
     sym2 margin (px 0) auto
+    mobile $ fontSize (px 14)
+    desktop $ fontSize (px 18)
 
-  "a.header" ? do
-    display block
-    sym2 padding (px 15) (px 0)
-    margin (px 0) auto (px 30) auto
-    backgroundColor color1
-    color white
-    fontWeight bold
-    textAlign center
-    fontSize (px 36)
-    hover & textDecoration none
-
-  a ? do
-    textDecoration none
-    color color2
-    hover & textDecoration underline
-
-  (h1 <> h2 <> h3) ? color color1
-
-  ".number" ? do
-    backgroundColor color3
-    sym borderRadius (px 5)
-    sym padding (px 2)
-    borderStyle none
-    width (px 70)
-    textAlign (alignSide sideCenter)
-
-  (ul <> ol) ? do
-    listStyleType none
-    paddingLeft (px 15)
-    fontSize (px 18)
-
-    li ? do
-      marginBottom (em 0.5)
-      lineHeight (em 1.4)
-
-  (ol <> ul) |> li |> (ol <> ul) ? do
-    marginTop (em 0.5)
-    marginLeft (px 30)
-
-  ul |> li ? do
-    let bulletSize = (px 6)
-
-    before & do
-      display inlineBlock
-      content (stringContent "")
-      width bulletSize
-      height bulletSize
+    "a.header" ? do
+      display block
+      sym2 padding (px 15) (px 0)
+      sym2 margin (px 0) auto
       backgroundColor color1
-      sym borderRadius bulletSize
-      marginRight (px 15)
-      verticalAlign middle
-
-  ol ? do
-    "counter-reset" -: "ol"
-
-    li ? do
-      before & do
-        display inline
-        "counter-increment" -: "ol"
-        "content" -: "counter(ol)\".\""
-        marginRight (px 10)
-        color color1
+      color white
+      fontWeight bold
+      textAlign center
+      hover & textDecoration none
+      desktop $ do
+        fontSize (px 32)
+        marginBottom (px 30)
+        borderRadius (px 0) (px 0) (px 5) (px 5)
+      mobile $ do
+        fontSize (px 22)
+        marginBottom (px 20)
+
+    a ? do
+      textDecoration none
+      color color2
+      hover & textDecoration underline
+
+    "#content" ? do
+      mobile $ sym2 margin (px 0) (px 20)
+
+      (h1 <> h2) ? color color1
+
+      h1 ? do
+        desktop $ fontSize (px 28)
+        mobile $ fontSize (px 22)
+
+      h2 ? do
+        desktop $ fontSize (px 22)
+        mobile $ fontSize (px 18)
+
+      ".number" ? do
+        fontSize inherit
+        backgroundColor color3
+        sym borderRadius (px 5)
+        sym padding (px 2)
+        borderStyle none
+        textAlign (alignSide sideCenter)
+        desktop $ width (px 70)
+        mobile $ width (px 50)
+
+      (ul <> ol) ? do
+        listStyleType none
+        desktop $ paddingLeft (px 15)
+        mobile $ paddingLeft (px 0)
+
+        li ? do
+          marginBottom (em 0.8)
+          lineHeight (em 1.6)
+
+      (ol <> ul) |> li |> (ol <> ul) ? do
+        marginTop (em 0.5)
+        marginLeft (px 30)
+
+      ol ? do
+        "counter-reset" -: "ol"
+
+        li ? do
+          desktop $ paddingLeft (px 30)
+          mobile $ paddingLeft (px 20)
+          position relative
+          textAlign justify
+          before & do
+            display inline
+            position absolute
+            top (px 0)
+            left (px 0)
+            "counter-increment" -: "ol"
+            "content" -: "counter(ol)\".\""
+            marginRight (px 10)
+            color color1
+
+mobile :: Css -> Css
+mobile = query Media.screen [ Media.maxWidth responsiveLimit ]
+
+desktop :: Css -> Css
+desktop = query Media.screen [ Media.minWidth responsiveLimit ]
+
+responsiveLimit :: Size LengthUnit
+responsiveLimit = px 800
diff --git a/index.html b/index.html
index e261ab4..f8bc60b 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,5 @@
 ---
 title: Recettes
-hideTitle: true
 ---
 
 $partial("templates/recipe-list.html")$
diff --git a/js/src/Dom.purs b/js/src/Dom.purs
index a71cda7..426c390 100644
--- a/js/src/Dom.purs
+++ b/js/src/Dom.purs
@@ -1,6 +1,7 @@
 module Dom
   ( onInput
   , selectElement
+  , selectElements
   , selectElementFrom
   , selectElementsFrom
   , replaceElement
@@ -26,8 +27,8 @@ import DOM.Node.Node (replaceChild, parentNode, appendChild) as DOM
 import DOM.Node.NodeList (length, item) as DOM
 import DOM.Node.ParentNode (QuerySelector)
 import DOM.Node.ParentNode (querySelector, querySelectorAll) as DOM
-import DOM.Node.Types (Element, Node)
-import DOM.Node.Types (elementToParentNode) as DOM
+import DOM.Node.Types (Element, Node, NodeList)
+import DOM.Node.Types (elementToParentNode, readElement) as DOM
 
 foreign import onInput :: forall e. Element -> (String -> Eff (dom :: DOM | e) Unit) -> Eff (dom :: DOM | e) Unit
 
@@ -36,18 +37,41 @@ selectElement query = do
   document <- DOM.window >>= DOM.document
   DOM.querySelector query (DOM.htmlDocumentToParentNode document)
 
+selectElements :: forall e. QuerySelector -> Eff (dom :: DOM | e) (Array Element)
+selectElements query = do
+  document <- DOM.window >>= DOM.document
+  nodeList <- DOM.querySelectorAll query (DOM.htmlDocumentToParentNode document)
+  getNodes nodeList
+
 selectElementFrom :: forall e. Element -> QuerySelector -> Eff (dom :: DOM | e) (Maybe Element)
-selectElementFrom elem query = DOM.querySelector query (DOM.elementToParentNode elem)
+selectElementFrom elem query =
+  DOM.querySelector query (DOM.elementToParentNode elem)
 
-selectElementsFrom :: forall e. Element -> QuerySelector -> Eff (dom :: DOM | e) (Array Node)
+selectElementsFrom :: forall e. Element -> QuerySelector -> Eff (dom :: DOM | e) (Array Element)
 selectElementsFrom elem query = do
   nodeList <- DOM.querySelectorAll query (DOM.elementToParentNode elem)
+  getNodes nodeList
+
+getNodes :: forall e. NodeList -> Eff (dom :: DOM | e) (Array Element)
+getNodes nodeList = do
   length <- DOM.length nodeList
   Array.range 0 length
-    # map (\i -> DOM.item i nodeList)
+    # (map (\i -> (concatMaybe <<< map nodeToElement) <$> DOM.item i nodeList))
     # Traversable.sequence
     # map Array.catMaybes
 
+concatMaybe :: forall a. Maybe (Maybe a) -> Maybe a
+concatMaybe mma =
+  case mma of
+    Just x -> x
+    Nothing -> Nothing
+
+nodeToElement :: Node -> Maybe Element
+nodeToElement node =
+  case Except.runExcept $ DOM.readElement (Foreign.toForeign node) of
+    Right element -> Just element
+    _ -> Nothing
+
 replaceElement :: forall e. Node -> Node -> Eff (dom :: DOM | e) Unit
 replaceElement before after = do
   parent <- DOM.parentNode before
diff --git a/js/src/Main.purs b/js/src/Main.purs
index 42db131..3e470ae 100644
--- a/js/src/Main.purs
+++ b/js/src/Main.purs
@@ -10,7 +10,7 @@ import DOM.Node.Types (elementToNode) as DOM
 import DOM.Node.Types (Node)
 import Prelude
 
-import Dom (selectElement, selectElementsFrom, onInput, setValue, selectElementFrom) as Dom
+import Dom (selectElement, selectElements, onInput, setValue, selectElementFrom) as Dom
 import EditableNumber (NumberElem)
 import EditableNumber (set) as EditableNumber
 import Number (format) as Number
@@ -24,15 +24,10 @@ main = do
 
 getNumberElements :: forall e. Eff (dom :: DOM | e) (Array { tag :: String, node :: Node })
 getNumberElements = do
-  h2 <- (map (\elem -> { tag: "h2", node: DOM.elementToNode elem})) <$> Dom.selectElement (QuerySelector "h2")
-  ul <- Dom.selectElement (QuerySelector "ul")
-  lis <- case ul of
-    Just elem -> do
-      myLis <- Dom.selectElementsFrom elem (QuerySelector "li")
-      pure $ map (\node -> { tag: "li", node: node }) myLis
-    _ -> do
-      pure []
-  pure $ (maybeToArray h2 <> lis)
+  let fromElem tag elem = { tag: tag, node: DOM.elementToNode elem }
+  h1 <- map (fromElem "h1") <$> Dom.selectElement (QuerySelector "h1")
+  lis <- map (fromElem "li") <$> Dom.selectElements (QuerySelector "ul > li")
+  pure $ (maybeToArray h1 <> lis)
 
 onInput :: forall e. Array NumberElem -> NumberElem -> Eff (dom :: DOM | e) Unit
 onInput numberElems { elem, number } = do
diff --git a/recipes/desserts/high-carb/brownie-aux-noix.md b/recipes/desserts/high-carb/brownie-aux-noix.md
index 8b6d881..61914b1 100644
--- a/recipes/desserts/high-carb/brownie-aux-noix.md
+++ b/recipes/desserts/high-carb/brownie-aux-noix.md
@@ -3,7 +3,7 @@ title: Brownie aux noix
 ---
 
 Ingrédients
------------
+===========
 
 - 225 g de chocolat noir
 - 190 g de beurre
@@ -13,7 +13,7 @@ Ingrédients
 - 6 œufs
 
 Recette
--------
+=======
 
 #. Mettre à fondre le beurre et le chocolat.
 #. Ajouter le sucre.
diff --git a/recipes/desserts/high-carb/cookies.md b/recipes/desserts/high-carb/cookies.md
index 76545be..10f15e0 100644
--- a/recipes/desserts/high-carb/cookies.md
+++ b/recipes/desserts/high-carb/cookies.md
@@ -3,7 +3,7 @@ title: Cookies
 ---
 
 Ingrédients (45 cookies)
-------------------------
+========================
 
 - 250 g de beurre
 - 300 g de pépites de chocolat
@@ -15,7 +15,7 @@ Ingrédients (45 cookies)
 - sel
 
 Recette
--------
+=======
 
 #. Travailler le beurre mou avec les deux sucres jusqu'à obtention d'un mélange
    homogène.
diff --git "a/recipes/desserts/high-carb/cr\303\250me-aux-\305\223ufs.md" "b/recipes/desserts/high-carb/cr\303\250me-aux-\305\223ufs.md"
index e9890bf..b5442cd 100644
--- "a/recipes/desserts/high-carb/cr\303\250me-aux-\305\223ufs.md"
+++ "b/recipes/desserts/high-carb/cr\303\250me-aux-\305\223ufs.md"
@@ -5,7 +5,7 @@ title: Crème aux œufs (sans caramel)
 Temps total (préparation, cuisson, nettoyage) : 1 heure.
 
 Ingrédients
------------
+===========
 
 - 6 œufs
 - 0,75 cL lait
@@ -13,7 +13,7 @@ Ingrédients
 - 1 sachet de sucre vanillé (ou 1 gousse de vanille)
 
 Recette
--------
+=======
 
 #. Chauffer dans une casserole le lait et le sucre vanillé (ou la gousse).
 #. Pendant ce temps, dans un grand saladier, battre les œufs entiers, puis
diff --git "a/recipes/desserts/high-carb/cr\303\250me-chocolat.md" "b/recipes/desserts/high-carb/cr\303\250me-chocolat.md"
index 06b042c..0d6422b 100644
--- "a/recipes/desserts/high-carb/cr\303\250me-chocolat.md"
+++ "b/recipes/desserts/high-carb/cr\303\250me-chocolat.md"
@@ -3,7 +3,7 @@ title: Crème au chocolat
 ---
 
 Ingrédients
------------
+===========
 
 - 120 g de chocolat
 - 750 cl de lait
@@ -12,7 +12,7 @@ Ingrédients
 - 2 jaunes d’œufs
 
 Recette
--------
+=======
 
 #. Faire fondre le chocolat dans le lait.
 #. Ajouter le sucre, attendre qu’il soit dissout.
diff --git "a/recipes/desserts/high-carb/cr\303\252pes.md" "b/recipes/desserts/high-carb/cr\303\252pes.md"
index b549528..61fb153 100644
--- "a/recipes/desserts/high-carb/cr\303\252pes.md"
+++ "b/recipes/desserts/high-carb/cr\303\252pes.md"
@@ -3,7 +3,7 @@ title: Crêpes
 ---
 
 Ingrédients (25 crêpes)
------------------------
+=======================
 
 - 500 g de farine
 - 1 sachet de levure
@@ -14,7 +14,7 @@ Ingrédients (25 crêpes)
 - 1 petit verre d’huile végétale (tournesol)
 
 Recette
--------
+=======
 
 #. Verser la farine, la levure chimique et le sel dans un saladier.
 #. Former un puits.
diff --git a/recipes/desserts/high-carb/financiers.md b/recipes/desserts/high-carb/financiers.md
index cdced3a..4869a6e 100644
--- a/recipes/desserts/high-carb/financiers.md
+++ b/recipes/desserts/high-carb/financiers.md
@@ -3,7 +3,7 @@ title: Financiers
 ---
 
 Ingrédients
------------
+===========
 
 - 90 g d'amande
 - 100 g de sucre
@@ -14,7 +14,7 @@ Ingrédients
 - 4 blancs d'œufs
 
 Recette
--------
+=======
 
 #. Mélanger le tout.
 #. Cuire 10 minutes au four à 200°C.
diff --git a/recipes/desserts/high-carb/fondant-chocolat.md b/recipes/desserts/high-carb/fondant-chocolat.md
index 3be8ec5..9e51d73 100644
--- a/recipes/desserts/high-carb/fondant-chocolat.md
+++ b/recipes/desserts/high-carb/fondant-chocolat.md
@@ -3,7 +3,7 @@ title: Fondant au chocolat
 ---
 
 Ingrédients
------------
+===========
 
 - 125 g de chocolat noir
 - 125 g de beurre
@@ -13,7 +13,7 @@ Ingrédients
 - sel
 
 Recette
--------
+=======
 
 #. Mettre à fondre le chocolat avec le beurre.
 #. Mélanger les jaunes d’œufs et le sucre, puis y incorporer la Maïzena lorsque
diff --git a/recipes/desserts/high-carb/shortbread.md b/recipes/desserts/high-carb/shortbread.md
index 65e74af..c7e6d8a 100644
--- a/recipes/desserts/high-carb/shortbread.md
+++ b/recipes/desserts/high-carb/shortbread.md
@@ -3,7 +3,7 @@ title: Shortbread
 ---
 
 Ingrédients
------------
+===========
 
 - 175 g de farine
 - 175 g de beurre
@@ -14,9 +14,10 @@ Ingrédients
 - 1 CS de Maïzena
 
 Recette
--------
+=======
 
-### Biscuit
+Biscuit
+-------
 
 #. Sortir le beurre pour le ramollir à température ambiante.
 #. Préchauffer le four à 190°C.
@@ -26,7 +27,8 @@ Recette
 #. Piquer la préparation à la fourchette.
 #. Enfourner 10 minutes.
 
-### Caramel
+Caramel
+-------
 
 #. Mettre 50 g de beurre à fondre dans une casserole.
 #. Toujours en cuisson, y ajouter les laits concentrés. et la Maïzena.
@@ -34,7 +36,8 @@ Recette
 #. Verser le caramel crémeux sur le biscuit.
 #. Laisser refroidir.
 
-### Chocolat
+Chocolat
+--------
 
 #. Casser le chocolat en morceaux dans une casserole.
 #. Le faire fondre à feu doux avec une cuillère à soupe d’eau.
diff --git a/recipes/desserts/low-carb/fudge.md b/recipes/desserts/low-carb/fudge.md
index 7aa4517..dcdb06a 100644
--- a/recipes/desserts/low-carb/fudge.md
+++ b/recipes/desserts/low-carb/fudge.md
@@ -3,7 +3,7 @@ title: Fudge
 ---
 
 Ingrédients (24 parts)
-----------------------
+======================
 
 - 480 mL de crème fleurette 30%
 - 1 cc d’extrait de vanille
@@ -12,7 +12,7 @@ Ingrédients (24 parts)
 - Arôme en option (noix de coco, cannelle, café, menthe…)
 
 Recette
--------
+=======
 
 #. Porter la crème et la vanille à ébullition dans une casserole. Dès que les
 bulles apparaissent, mettre à feu doux et laisser mijoter. Remuer de temps en
diff --git a/recipes/main-dishes/riz-vinaigre-casserole.md b/recipes/main-dishes/riz-vinaigre-casserole.md
index fb6c332..530fc9b 100644
--- a/recipes/main-dishes/riz-vinaigre-casserole.md
+++ b/recipes/main-dishes/riz-vinaigre-casserole.md
@@ -3,7 +3,7 @@ title: Riz vinaigré à la casserole
 ---
 
 Ingrédients (8 feuilles)
-------------------------
+========================
 
 - 400 g de riz rond
 - 50 ml de vinaigre de riz
@@ -11,9 +11,10 @@ Ingrédients (8 feuilles)
 - 2 CS de sucre
 
 Recette
--------
+=======
 
-### Préparation du riz
+Préparation du riz
+------------------
 
 #. Verser dans un saladier :
     #. un peu de sel ;
@@ -23,7 +24,8 @@ Recette
 #. Tant que l’eau se trouble, changer l'eau et remuer à nouveau.
 #. Égoutter le riz.
 
-### Chauffe du riz
+Chauffe du riz
+--------------
 
 #. Verser dans une casserole :
     #. 400 ml d’eau ;
@@ -36,7 +38,8 @@ Recette
     #. puis 10 minutes à feu doux.
 #. Sortir la casserole du feu et attendre 10 minutes.
 
-### Mélange final
+Mélange final
+-------------
 
 #. Verser le riz dans un saladier.
 #. Désolidariser le riz.
diff --git a/recipes/main-dishes/riz-vinaigre-vita-vapeur.md b/recipes/main-dishes/riz-vinaigre-vita-vapeur.md
index 32f4ea3..50bd177 100644
--- a/recipes/main-dishes/riz-vinaigre-vita-vapeur.md
+++ b/recipes/main-dishes/riz-vinaigre-vita-vapeur.md
@@ -3,7 +3,7 @@ title: Riz vinaigré au vita vapeur
 ---
 
 Ingrédients (2 chirachis)
--------------------------
+=========================
 
 - 300 g de riz rond
 - 40 ml de vinaigre de riz
@@ -11,7 +11,7 @@ Ingrédients (2 chirachis)
 - 1,5 CS de sucre
 
 Recette
--------
+=======
 
 ### Préparation du riz
 
diff --git a/recipes/main-dishes/tarte-viande.md b/recipes/main-dishes/tarte-viande.md
new file mode 100644
index 0000000..3303b39
--- /dev/null
+++ b/recipes/main-dishes/tarte-viande.md
@@ -0,0 +1,53 @@
+---
+title: Tarte à la viande
+---
+
+Ingrédients (6 parts)
+=====================
+
+Garniture
+---------
+
+- 1 oignon jaune
+- 1 gousse d’aïl
+- 2 CS de beurre ou d’huile d’olive
+- 1,5 kg de bœuf ou d’agneau haché
+- 1 CS d’origan ou de basilique séché
+- 4 CS de concentré de tomate ou de pesto
+- 125 mL d’eau
+- sel et poivre
+
+Pâte
+----
+
+- 100 g de poudre d’amande
+- 4 CS de graines de sésame
+- 4 CS de farine de coco
+- 1 CS d’enveloppe de psyllium en poudre
+- 1 cc de levure
+- 1 pincée de sel
+- 3 CS d’huile d’olive ou d’huile de coco
+- 1 œuf
+- 4 CS d’eau
+
+Gratin
+------
+
+- 225 g de fromage blanc
+- 200 g de fromage rapé
+
+Recette
+=======
+
+#. Préchauffer le four à 175°C.
+#. Cuire les oignons et et l’ail dans du beurre ou de l’huile d’olive à feu
+moyen pendant quelques minutes, jusqu’à ce que l’oignon soit mou. Ajouter la
+viande hachée et laisse cuire. Ajouter de l’origan ou du basilic. Saler et poivrer.
+#. Ajouter le concentré de tomate ou le pesto, puis ajouter l’eau. Laisser
+mijoter pendant au moins 20 minutes à feu doux.
+#. Mélanger tous les ingrédients pour la pâte, avec un mixer ou à la main,
+jusqu’à obtenir une boule, puis l’étaler dans un plat.
+#. Précuire la pâte pendant 10 à 15 minutes. Ajouter ensuite la garniture avec
+le gratin par dessus.
+#. Cuire 30 à 40 minutes sur la grille de dessous jusqu’à ce que la tarte soit
+dorée.
diff --git a/templates/main.html b/templates/main.html
index 23c37fe..5957668 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -8,11 +8,7 @@
     <link rel="icon" href="/images/icon.png">
   </head>
   <body>
-    <a href="/" class="header">Recettes</a>
-    $if(hideTitle)$
-    $else$
-      <h1>$title$</h1>
-    $endif$
+    <a href="/" class="header">$title$</a>
     <div id="content">$body$</div>
     <script src="/main.js"></script>
   </body>
diff --git a/templates/recipe-list.html b/templates/recipe-list.html
index 83d0849..32e033a 100644
--- a/templates/recipe-list.html
+++ b/templates/recipe-list.html
@@ -1,4 +1,4 @@
-<h3>Plats</h3>
+<h1>Plats</h1>
 
 <ul>
   $for(mainDishes)$
@@ -8,7 +8,7 @@
   $endfor$
 </ul>
 
-<h3>Desserts hypoglucidiques</h3>
+<h1>Desserts hypoglucidiques</h1>
 
 <ul>
   $for(lowCarbDesserts)$
@@ -18,7 +18,7 @@
   $endfor$
 </ul>
 
-<h3>Desserts hyperglucidiques</h3>
+<h1>Desserts hyperglucidiques</h1>
 
 <ul>
   $for(highCarbDesserts)$
-- 
cgit v1.2.3