Prettified with Bootstrap

justfile

@@ -11,9 +11,12 @@ install:
 debug:
     elm-live src/Leaderboard.elm --open -- --debug --output=leaderboard.js
 
-build_release:
+build_release: format
 	elm make src/Leaderboard.elm --optimize --output=leaderboard.opt.js
 	uglifyjs leaderboard.opt.js --compress "pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe" | uglifyjs --mangle --output=leaderboard.js
 
 deploy: build_release
 	rsync index.html leaderboard.js anthonycicchetti.com:/var/www/crossword.anthonycicchetti.com/public
+
+format:
+	elm-format --yes src

src/Leaderboard.elm

@@ -1,5 +1,11 @@
 module Leaderboard exposing (main)
 
+import Bootstrap.Form.Input as Input
+import Bootstrap.Form.InputGroup as InputGroup
+import Bootstrap.Grid as Grid
+import Bootstrap.Grid.Col as Col
+import Bootstrap.Grid.Row as Row
+import Bootstrap.ListGroup as ListGroup
 import Browser
 import Date
 import Debug exposing (toString)
@@ -84,7 +90,6 @@ update msg model =
             ( { model | entries = List.sortBy .score newEntries }, Cmd.none )
 
         NewEntries (Err err) ->
-            -- ( { model | alertMessage = Just (toString err) }, Cmd.none)
             ( model, Cmd.none )
 
 
@@ -109,38 +114,41 @@ getScores newDate =
 --- VIEW
 
 
-viewDate : String -> Html Msg
-viewDate date =
-    h2 []
-        [ text date ]
+viewEntry : Entry -> ListGroup.Item Msg
+viewEntry entry =
+    ListGroup.li []
+        [ div [] [ text entry.name ]
+        , div [] [ text entry.score ]
+        ]
 
 
 viewEntryList : List Entry -> Html Msg
 viewEntryList entries =
-    ul []
-        (List.map
-            (\entry ->
-                li []
-                    [ div [] [ text entry.name ]
-                    , div [] [ text entry.score ]
+    div [ class "container-fluid" ]
+        [ ListGroup.ul
+            (List.map viewEntry entries)
+        ]
+
+
+viewDatePicker : Model -> Grid.Column Msg
+viewDatePicker model =
+    Grid.col []
+        [ InputGroup.config
+            (InputGroup.date
+                [ Input.placeholder model.date
+                , Input.onInput NewDate
+                , Input.value model.date
                 ]
             )
-            entries
-        )
+            |> InputGroup.predecessors [ InputGroup.span [] [ text "Date: " ] ]
+            |> InputGroup.view
+        ]
 
 
 view : Model -> Html Msg
 view model =
-    div []
-        [ div [] 
-              [ input 
-                [ type_ "date"
-                , placeholder model.date
-                , onInput NewDate
-                , value model.date
-              ]
-              []
-            ]
+    Grid.containerFluid []
+        [ Grid.row [] [ viewDatePicker model ]
         , viewEntryList model.entries
         , text (Maybe.withDefault "" model.alertMessage)
         ]