Make UI responsive

Switch to a vertical layout for phones

assets/js/app.js

@@ -28,7 +28,9 @@ var app = Elm.Main.init({
     node: document.getElementById("elm-main"),
     flags: {
         player: player_id,
-        room: room_id
+        room: room_id,
+        width: window.innerWidth,
+        height: window.innerHeight
     }
 })
 

assets/src/Main.elm

@@ -1,6 +1,7 @@
 module Main exposing (main)
 
 import Browser exposing (Document)
+import Browser.Events as Events
 import Browser.Navigation as Nav
 import Html
 import PlanningPokerEntry as Entry
@@ -13,6 +14,8 @@ import Url.Parser as Parser exposing ((</>), Parser, s, string)
 type alias Flags =
     { player : String
     , room : String
+    , height : Int
+    , width : Int
     }
 
 
@@ -21,6 +24,7 @@ type alias Model =
     , key : Nav.Key
     , player : String
     , room : String
+    , dimensions : { width : Int, height : Int }
     }
 
 
@@ -40,15 +44,17 @@ type Msg
     | ClickedLink Browser.UrlRequest
     | EntryMsg Entry.Msg
     | RoomMsg Room.Msg
+    | WindowResized Int Int
 
 
 init : Flags -> Url -> Nav.Key -> ( Model, Cmd Msg )
-init { player, room } url key =
+init { player, room, width, height } url key =
     updateUrl url
         { page = NotFound
         , key = key
         , player = player
         , room = room
+        , dimensions = { width = width, height = height }
         }
 
 
@@ -67,6 +73,15 @@ update msg model =
         ( RoomMsg roomMsg, RoomPage roomModel ) ->
             toRoom model (Room.update model.key roomMsg roomModel)
 
+        ( WindowResized width height, _ ) ->
+            let
+                newDimensions =
+                    { width = width, height = height }
+            in
+            ( { model | dimensions = newDimensions }
+            , Cmd.none
+            )
+
         _ ->
             ( model, Cmd.none )
 
@@ -136,7 +151,7 @@ view model =
             mapDocument EntryMsg <| Entry.view entryModel
 
         RoomPage roomModel ->
-            mapDocument RoomMsg <| Room.view roomModel
+            mapDocument RoomMsg <| Room.view model.dimensions roomModel
 
         NotFound ->
             NotFound.view
@@ -158,4 +173,5 @@ subscriptions : Model -> Sub Msg
 subscriptions _ =
     Sub.batch
         [ Sub.map RoomMsg Room.subscriptions
+        , Events.onResize WindowResized
         ]

assets/src/PlanningPokerRoom.elm

@@ -189,9 +189,13 @@ update key msg model =
             )
 
 
-view : Model -> Document Msg
+view : { height : Int, width : Int } -> Model -> Document Msg
-view model =
+view dimensions model =
     let
+        device =
+            classifyDevice dimensions
+                |> Debug.log "device"
+
         playerName =
             Dict.get model.player model.room.players
                 |> Maybe.map .name
@@ -203,7 +207,7 @@ view model =
                 { title = model.room.name
                 , body =
                     [ navBar { title = model.room.name, playerName = playerName }
-                    , viewRoom model
+                    , viewRoom device model
                     ]
                 }
 
@@ -217,24 +221,34 @@ view model =
                 }
 
 
-viewRoom : Model -> Element Msg
+viewRoom : Device -> Model -> Element Msg
-viewRoom model =
+viewRoom device model =
     let
         myVote =
             Dict.get model.player model.room.players
                 |> Maybe.andThen .vote
     in
-    column [ width fill, spacing 20 ]
+    case device.class of
-        [ row
+        Phone ->
-            [ width fill ]
+            column [ width fill, spacing 20 ]
-            [ el [ width (fillPortion 3), alignTop ] <|
-                viewCards myVote
-            , column [ width (fillPortion 1), alignTop, spacing 50 ] <|
                 [ viewPlayers (Dict.values model.room.players) model.showVotes
+                , el [ width (fillPortion 3), alignTop ] <|
+                    viewCards myVote
                 , moderatorTools model
                 ]
-            ]
+
-        ]
+        _ ->
+            column [ width fill, spacing 20 ]
+                [ row
+                    [ width fill ]
+                    [ el [ width (fillPortion 3), alignTop ] <|
+                        viewCards myVote
+                    , column [ width (fillPortion 1), alignTop, spacing 50 ] <|
+                        [ viewPlayers (Dict.values model.room.players) model.showVotes
+                        , moderatorTools model
+                        ]
+                    ]
+                ]
 
 
 navBar : { title : String, playerName : String } -> Element Msg