Start using elm-ui

.gitignore

@@ -12,4 +12,13 @@ node_modules
 
 # Desktop Services Store on macOS
 .DS_Store
-.env
+.env
+
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/

elm.json

@@ -12,6 +12,7 @@
             "elm/html": "1.0.0",
             "elm/json": "1.1.2",
             "elm/time": "1.0.0",
+            "mdgriffith/elm-ui": "1.1.5",
             "pilatch/flip": "1.0.0"
         },
         "indirect": {

public/user-alt-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-alt" class="svg-inline--fa fa-user-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"></path></svg>

public/user-circle-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-circle" class="svg-inline--fa fa-user-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"></path></svg>

src/Main.elm

@@ -1,6 +1,9 @@
 module Main exposing (..)
 
 import Browser
+import Browser.Events
+import Element
+import Element.Background
 import Flip
 import Html exposing (Html, button, div, h1, img, text)
 import Html.Attributes exposing (height, id, src, width)
@@ -9,6 +12,7 @@ import Json.Decode
 import Json.Decode.Pipeline
 import Json.Encode
 import Ports
+import Styles
 import Time
 
 
@@ -16,6 +20,18 @@ import Time
 ---- MODEL ----
 
 
+type alias Flags =
+    { startingWidth : Int
+    , startingHeight : Int
+    }
+
+
+type alias ScreenSize =
+    { width : Int
+    , height : Int
+    }
+
+
 type alias UserData =
     { token : String
     , email : String
@@ -59,14 +75,16 @@ type alias FoodLog =
 
 type alias Model =
     { userData : Maybe UserData
+    , screenSize : ScreenSize
     , currentFoodLog : FoodLog
     }
 
 
-init : ( Model, Cmd Msg )
-init =
+init : Flags -> ( Model, Cmd Msg )
+init flags =
     ( { userData = Just fakeUserData
       , currentFoodLog = defaultFoodLog
+      , screenSize = { width = flags.startingWidth, height = flags.startingHeight }
       }
     , Cmd.none
     )
@@ -116,6 +134,7 @@ type Msg
     | ClickedCaffeine
     | ClickedMeat
     | ClickedPortion Portion
+    | GotNewScreenSize ScreenSize
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -177,10 +196,15 @@ update msg model =
         ClickedPortion portion ->
             let
                 newModel =
-                    model
+                    model.currentFoodLog
+                        |> setPortion portion
+                        |> asCurrentFoodLogIn model
             in
             ( newModel, Cmd.none )
 
+        GotNewScreenSize screenSize ->
+            ( { model | screenSize = screenSize }, Cmd.none )
+
 
 asCurrentFoodLogIn : Model -> FoodLog -> Model
 asCurrentFoodLogIn =
@@ -219,6 +243,54 @@ setVegan value foodLog =
 
 view : Model -> Html Msg
 view model =
+    Element.layout
+        [ Element.height Element.fill
+        , Element.width Element.fill
+        ]
+        (Element.column
+            [ Element.height Element.fill
+            , Element.width
+                (Element.fill
+                    |> Element.maximum Styles.maxWidth
+                )
+            , Element.Background.color Styles.mainColor
+            , Element.centerX
+            ]
+            [ -- header
+              Element.row
+                [ Element.height <| Element.px (get10PercentHeight model.screenSize)
+                , Element.padding <| get1PercentHeight model.screenSize
+                , Element.width Element.fill
+                ]
+                [ Element.image
+                    [ Element.alignRight
+                    , Element.width <| Element.px (get8PercentHeight model.screenSize)
+                    , Element.height Element.fill
+                    ]
+                    { src = "/user-circle-solid.svg"
+                    , description = "Logout icon"
+                    }
+                ]
+
+            -- main
+            , Element.row
+                [ Element.height Element.fill
+                , Element.width Element.fill
+                ]
+                []
+
+            -- footer
+            , Element.row
+                [ Element.height <| Element.px (get10PercentHeight model.screenSize)
+                , Element.width Element.fill
+                ]
+                []
+            ]
+        )
+
+
+view2 : Model -> Html Msg
+view2 model =
     div []
         [ img [ src "/logo.svg" ] []
         , h1 [] [ text "Your Elm App is working!" ]
@@ -254,6 +326,26 @@ view model =
         ]
 
 
+getPercentage : Int -> Int -> Int
+getPercentage original percentage =
+    original * percentage // 100
+
+
+get8PercentHeight : ScreenSize -> Int
+get8PercentHeight size =
+    getPercentage size.height 8
+
+
+get1PercentHeight : ScreenSize -> Int
+get1PercentHeight size =
+    getPercentage size.height 1
+
+
+get10PercentHeight : ScreenSize -> Int
+get10PercentHeight size =
+    getPercentage size.height 10
+
+
 
 ---- PROGRAM ----
 
@@ -284,14 +376,15 @@ subscriptions : Model -> Sub Msg
 subscriptions model =
     Sub.batch
         [ Ports.signInInfo (Json.Decode.decodeValue userDataDecoder >> LoggedInData)
+        , Browser.Events.onResize (\width height -> GotNewScreenSize { width = width, height = height })
         ]
 
 
-main : Program () Model Msg
+main : Program Flags Model Msg
 main =
     Browser.element
         { view = view
-        , init = \_ -> init
+        , init = init
         , update = update
         , subscriptions = subscriptions
         }

src/Styles.elm

@@ -0,0 +1,48 @@
+module Styles exposing (..)
+
+import Element exposing (Color)
+
+
+
+-- COLORS
+-- beige: #fff8f0
+-- green: #00916e
+-- blue: #344966
+-- red: #eb4511
+-- black: #0a0a0a
+
+
+beige =
+    Element.rgb255 255 248 240
+
+
+green =
+    Element.rgb255 0 145 110
+
+
+blue =
+    Element.rgb255 52 73 102
+
+
+red =
+    Element.rgb255 235 6917
+
+
+black =
+    Element.rgb255 10 10 10
+
+
+bannerColor =
+    green
+
+
+mainColor =
+    beige
+
+
+
+-- SIZES
+
+
+maxWidth =
+    768

src/index.js

@@ -21,7 +21,11 @@ const provider = new firebase.auth.GoogleAuthProvider();
 const db = firebase.firestore();
 
 const app = Elm.Main.init({
-  node: document.getElementById('root')
+  node: document.getElementById('root'),
+  flags: {
+    startingWidth: window.innerWidth,
+    startingHeight: window.innerHeight
+  }
 });
 
 app.ports.signIn.subscribe(() => {