Add all content

public/bacon-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bacon" class="svg-inline--fa fa-bacon fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M218.92 336.39c34.89-34.89 44.2-59.7 54.05-86 10.61-28.29 21.59-57.54 61.37-97.34s69.05-50.77 97.35-61.38c23.88-9 46.64-17.68 76.79-45.37L470.81 8.91a31 31 0 0 0-40.18-2.83c-13.64 10.1-25.15 14.39-41 20.3C247 79.52 209.26 191.29 200.65 214.1c-29.75 78.83-89.55 94.68-98.72 98.09-24.86 9.26-54.73 20.38-91.07 50.36C-3 374-3.63 395 9.07 407.61l35.76 35.51C80 410.52 107 400.15 133 390.39c26.27-9.84 51.06-19.12 85.92-54zm348-232l-35.75-35.51c-35.19 32.63-62.18 43-88.25 52.79-26.26 9.85-51.06 19.16-85.95 54s-44.19 59.69-54 86C292.33 290 281.34 319.22 241.55 359s-69 50.73-97.3 61.32c-23.86 9-46.61 17.66-76.72 45.33l37.68 37.43a31 31 0 0 0 40.18 2.82c13.6-10.06 25.09-14.34 40.94-20.24 142.2-53 180-164.1 188.94-187.69C405 219.18 464.8 203.3 474 199.86c24.87-9.27 54.74-20.4 91.11-50.41 13.89-11.4 14.52-32.45 1.82-45.05z"></path></svg>

src/Main.elm

@@ -135,6 +135,7 @@ type Msg
     | ClickedAlcohol
     | ClickedCaffeine
     | ClickedMeat
+    | ClickedKeto
     | ClickedPortion Portion
     | GotNewScreenSize ScreenSize
 
@@ -195,6 +196,15 @@ update msg model =
             in
             ( newModel, Cmd.none )
 
+        ClickedKeto ->
+            let
+                newModel =
+                    model.currentFoodLog
+                        |> setKeto (not model.currentFoodLog.keto)
+                        |> asCurrentFoodLogIn model
+            in
+            ( newModel, Cmd.none )
+
         ClickedPortion portion ->
             let
                 newModel =
@@ -223,6 +233,11 @@ setPortion portion foodLog =
     { foodLog | portion = portion }
 
 
+setKeto : Bool -> FoodLog -> FoodLog
+setKeto value foodLog =
+    { foodLog | keto = value }
+
+
 setMeat : Bool -> FoodLog -> FoodLog
 setMeat value foodLog =
     { foodLog | meat = value }
@@ -248,6 +263,7 @@ view model =
     Element.layout
         [ Element.height Element.fill
         , Element.width Element.fill
+        , Element.padding 20
         ]
         (Element.column
             [ Element.height Element.fill
@@ -286,6 +302,9 @@ view model =
                         [ Element.none ]
                 )
 
+            -- app title
+            , Element.el [] <| showMainTitle
+
             -- main
             , Element.column
                 [ Element.height Element.fill
@@ -297,7 +316,7 @@ view model =
                         viewMain model userData
 
                     Maybe.Nothing ->
-                        [ Element.none ]
+                        viewLoginMain model
                 )
 
             -- footer
@@ -310,59 +329,161 @@ view model =
         )
 
 
+showMainTitle : Element.Element Msg
+showMainTitle =
+    Element.column [ Element.centerX ] [ Element.el [] (Element.text "Simple Food Log") ]
+
+
+viewLoginMain : Model -> List (Element.Element Msg)
+viewLoginMain model =
+    [ Element.el
+        [ Element.width Element.fill
+        , Element.height Element.fill
+        ]
+      <|
+        Element.Input.button
+            [ Element.centerX
+            , Element.centerY
+            ]
+            { onPress = Just SignIn
+            , label = Element.text "Login with Google"
+            }
+    ]
+
+
 viewMain : Model -> UserData -> List (Element.Element Msg)
 viewMain model userData =
-    -- title
-    [ Element.column [ Element.centerX ] [ Element.el [] (Element.text "Simple Food Log") ]
-    , -- portion size
-      Element.column [ Element.centerX ]
-        [ Element.el [] (Element.text "Choose your portion size!")
-        , Element.row [ Element.spaceEvenly ]
-            [ Element.image
-                [ Element.alignRight
-                , Element.width <| Element.px (get8PercentHeight model.screenSize)
-                , Element.height Element.fill
-                , Element.Events.onClick (ClickedPortion Small)
-                ]
-                { src = "/pizza-slice-solid.svg"
-                , description = "Small portion button"
-                }
-            , Element.image
-                [ Element.alignRight
-                , Element.width <| Element.px (get8PercentHeight model.screenSize)
-                , Element.height Element.fill
-                , Element.Events.onClick (ClickedPortion Medium)
-                ]
-                { src = "/pizza-slice-solid.svg"
-                , description = "Medium portion button"
-                }
-            , Element.image
-                [ Element.alignRight
-                , Element.width <| Element.px (get8PercentHeight model.screenSize)
-                , Element.height Element.fill
-                , Element.Events.onClick (ClickedPortion Large)
-                ]
-                { src = "/pizza-slice-solid.svg"
-                , description = "Large portion button"
-                }
-            , Element.image
-                [ Element.alignRight
-                , Element.width <| Element.px (get8PercentHeight model.screenSize)
-                , Element.height Element.fill
-                , Element.Events.onClick (ClickedPortion Huge)
-                ]
-                { src = "/pizza-slice-solid.svg"
-                , description = "Huge portion button"
-                }
+    [ -- portion size
+      Element.column
+        [ Element.width Element.fill
+        , Element.centerX
+        , Element.height <| Element.fillPortion 1
+        ]
+        [ Element.el [ Element.height <| Element.fillPortion 1 ] (Element.text "Choose your portion size!")
+        , Element.row
+            [ Element.spaceEvenly
+            , Element.width Element.fill
+            , Element.height <| Element.fillPortion 3
+            ]
+            [ Element.el [] <|
+                Element.image
+                    [ Element.alignRight
+                    , Element.width <| Element.px (get8PercentHeight model.screenSize)
+                    , Element.height Element.fill
+                    , Element.Events.onClick (ClickedPortion Small)
+                    ]
+                    { src = "/pizza-slice-solid.svg"
+                    , description = "Small portion button"
+                    }
+            , Element.el [] <|
+                Element.image
+                    [ Element.alignRight
+                    , Element.width <| Element.px (get8PercentHeight model.screenSize)
+                    , Element.height Element.fill
+                    , Element.Events.onClick (ClickedPortion Medium)
+                    ]
+                    { src = "/pizza-slice-solid.svg"
+                    , description = "Medium portion button"
+                    }
+            , Element.el [] <|
+                Element.image
+                    [ Element.alignRight
+                    , Element.width <| Element.px (get8PercentHeight model.screenSize)
+                    , Element.height Element.fill
+                    , Element.Events.onClick (ClickedPortion Large)
+                    ]
+                    { src = "/pizza-slice-solid.svg"
+                    , description = "Large portion button"
+                    }
+            , Element.el [] <|
+                Element.image
+                    [ Element.alignRight
+                    , Element.width <| Element.px (get8PercentHeight model.screenSize)
+                    , Element.height Element.fill
+                    , Element.Events.onClick (ClickedPortion Huge)
+                    ]
+                    { src = "/pizza-slice-solid.svg"
+                    , description = "Huge portion button"
+                    }
             ]
         ]
     , -- options
-      Element.column [] [ Element.el [] (Element.text "Any specifics about your meal?") ]
+      Element.column
+        [ Element.height <| Element.fillPortion 1
+        ]
+        [ Element.el
+            [ Element.width Element.fill
+            , Element.height <| Element.fillPortion 1
+            ]
+            (Element.text "Any specifics about your meal?")
+        , Element.wrappedRow
+            [ Element.spaceEvenly
+            , Element.width Element.fill
+            , Element.height <| Element.fillPortion 3
+            ]
+            [ Element.el [] <|
+                Element.image
+                    [ Element.alignRight
+                    , Element.width <| Element.px (get8PercentHeight model.screenSize)
+                    , Element.height Element.fill
+                    , Element.Events.onClick ClickedAlcohol
+                    ]
+                    { src = "/beer-solid.svg"
+                    , description = "Alcohol option"
+                    }
+            , Element.el [] <|
+                Element.image
+                    [ Element.alignRight
+                    , Element.width <| Element.px (get8PercentHeight model.screenSize)
+                    , Element.height Element.fill
+                    , Element.Events.onClick ClickedCaffeine
+                    ]
+                    { src = "/coffee-solid.svg"
+                    , description = "Coffee option"
+                    }
+            , Element.el [] <|
+                Element.image
+                    [ Element.alignRight
+                    , Element.width <| Element.px (get8PercentHeight model.screenSize)
+                    , Element.height Element.fill
+                    , Element.Events.onClick ClickedMeat
+                    ]
+                    { src = "/drumstick-bite-solid.svg"
+                    , description = "Meat option"
+                    }
+            , Element.el [] <|
+                Element.image
+                    [ Element.alignRight
+                    , Element.width <| Element.px (get8PercentHeight model.screenSize)
+                    , Element.height Element.fill
+                    , Element.Events.onClick ClickedVegan
+                    ]
+                    { src = "/leaf-solid.svg"
+                    , description = "Vegan option"
+                    }
+            , Element.el [] <|
+                Element.image
+                    [ Element.alignRight
+                    , Element.width <| Element.px (get8PercentHeight model.screenSize)
+                    , Element.height Element.fill
+                    , Element.Events.onClick ClickedKeto
+                    ]
+                    { src = "/bacon-solid.svg"
+                    , description = "KEto option"
+                    }
+            ]
+        ]
     , -- validate
-      Element.column []
-        [ Element.Input.button []
+      Element.column
+        [ Element.height <| Element.fillPortion 1
+        , Element.width Element.fill
+        ]
+        [ Element.Input.button
+            [ Element.centerX
+            , Element.centerY
+            ]
             { onPress = Just <| SendCurrentFoodLog model.currentFoodLog userData.uid
-            , label = Element.text "Send your log!"
+            , label = Element.el [ Element.centerX, Element.centerY ] <| Element.text "Send your log!"
             }
         ]
     ]