feat: Style gameplay view (#196)

forcecraft · Dec 2, 2017 · 09d8b86 · 09d8b86
1 parent 46642a6
commit 09d8b86
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 55 deletions.
diff --git a/aion/web/elm/src/Ranking/View.elm b/aion/web/elm/src/Ranking/View.elm
@@ -21,15 +21,15 @@ rankingView : Model -> Html Msg
 rankingView model =
     Grid.container []
         [ Grid.row []
-            [ Grid.col [ Col.xs4, Col.offsetXs1 ]
+            [ Grid.col [ Col.xs4 ]
                 [ Form.group []
                     [ Form.label [] [ text "Select Category" ]
                     , Select.select [ Select.onChange OnRankingCategoryChange ] (selectCategoriesAttributes model)
                     ]
                 ]
             ]
         , Grid.row []
-            [ Grid.col [ Col.xs10, Col.offsetXs1 ]
+            [ Grid.col [ Col.xs12 ]
                 [ rankingTable model ]
             ]
         ]

diff --git a/aion/web/elm/src/Room/View.elm b/aion/web/elm/src/Room/View.elm
@@ -1,16 +1,16 @@
 module Room.View exposing (..)
 
-import Bootstrap.Badge as Badge
 import Bootstrap.Button as Button
-import Bootstrap.Card as Card
 import Bootstrap.Form as Form
 import Bootstrap.Form.Input as Input
 import Bootstrap.Grid as Grid
+import Bootstrap.Grid.Col as Col
+import Bootstrap.Grid.Row as Row
 import Bootstrap.ListGroup as ListGroup
 import Bootstrap.Progress as Progress
 import General.Models exposing (Model)
 import General.Notifications exposing (toastsConfig)
-import Html exposing (Attribute, Html, a, button, div, form, h4, input, li, text, ul)
+import Html exposing (Attribute, Html, a, button, div, form, h4, hr, input, li, text, ul)
 import Html.Attributes exposing (autocomplete, class, for, href, id, src, value)
 import Html.Events exposing (keyCode, on, onClick, onInput, onWithOptions)
 import Json.Decode exposing (map)
@@ -36,22 +36,25 @@ roomView model roomId =
     in
         Grid.container [ class "room-container" ]
             [ Grid.row []
-                [ Grid.col []
-                    [ h4 [] [ text roomName ]
-                    , fillQuestionArea model
+                [ Grid.col [ Col.sm7 ]
+                    [ displayQuestionText model
                     , displayProgress model.progressBar
                     , displayAnswerInput currentAnswer
-                    , Toasty.view toastsConfig Toasty.Defaults.view ToastyMsg model.toasties
                     ]
-                , Grid.col []
-                    [ h4 [] [ text "Scoreboard:" ]
-                    , displayScores model
+                , Grid.col [ Col.sm5 ]
+                    [ displayQuestionImage model.location model.currentQuestion.image_name model.roomState
                     ]
                 ]
-            , Grid.row []
-                [ Grid.col []
-                    [ displayEventLog model.eventLog ]
+            , hr [ class "room-content-separator" ] []
+            , Grid.row [ Row.attrs [ class "room-lower-content" ] ]
+                [ Grid.col [ Col.sm7 ]
+                    [ displayEventLog model.eventLog
+                    ]
+                , Grid.col [ Col.sm5 ]
+                    [ displayScores model
+                    ]
                 ]
+            , Toasty.view toastsConfig Toasty.Defaults.view ToastyMsg model.toasties
             ]
 
 
@@ -80,7 +83,7 @@ displayEventLog eventLog =
     let
         logList =
             eventLog
-                |> List.take 3
+                |> List.take 5
                 |> List.map displaySingleLog
     in
         div
@@ -120,16 +123,11 @@ displaySingleLog event =
         ListGroup.li [] [ text log ]
 
 
-fillQuestionArea : Model -> Html Msg
-fillQuestionArea model =
-    let
-        imageName =
-            model.currentQuestion.image_name
-    in
-        div [ class "question-container" ]
-            [ displayQuestion model.currentQuestion.content model.roomState
-            , displayQuestionImage model.location imageName model.roomState
-            ]
+displayQuestionText : Model -> Html Msg
+displayQuestionText model =
+    div [ class "question-container" ]
+        [ displayQuestion model.currentQuestion.content model.roomState
+        ]
 
 
 displayScores : Model -> Html Msg
@@ -163,17 +161,17 @@ displayQuestion question roomState =
         temporaryText =
             "Get ready, the next question is going to appear soon!"
 
-        ( cardClass, textFieldValue ) =
+        textFieldValue =
             case roomState of
                 QuestionDisplayed ->
-                    ( "room-question", question )
+                    question
 
                 QuestionBreak ->
-                    ( "room-question-hidden", temporaryText )
+                    temporaryText
     in
-        Card.config [ Card.attrs [ class cardClass ] ]
-            |> Card.block [] [ Card.text [] [ text textFieldValue ] ]
-            |> Card.view
+        div [ class "room-question-container" ]
+            [ p [ class "room-question" ] [ text textFieldValue ]
+            ]
 
 
 displayQuestionImage : Location -> ImageName -> RoomState -> Html Msg
@@ -208,9 +206,10 @@ displayAnswerInput : Answer -> Html Msg
 displayAnswerInput currentAnswer =
     Form.form [ class "room-answer-input" ]
         [ Form.group []
-            [ Form.label [ for "answer" ] [ Badge.badgeSuccess [] [ text "Insert your answer below:" ] ]
-            , displayAnswerInputField currentAnswer
-            , displayAnswerSubmitButton
+            [ Grid.row []
+                [ Grid.col [ Col.sm9 ] [ displayAnswerInputField currentAnswer ]
+                , Grid.col [ Col.sm3 ] [ displayAnswerSubmitButton ]
+                ]
             ]
         ]
 

diff --git a/aion/web/static/css/app.css b/aion/web/static/css/app.css
@@ -26,7 +26,7 @@ body {
     height: 100%;
     max-width: 980px;
     position: relative;
-    padding: 20px 40px;
+    padding: 40px 40px 30px;
     min-height: calc(100vh - 135px);
 }
 
@@ -89,11 +89,13 @@ footer p {
 }
 
 .question-container {
-    margin-bottom: 10px;
+    margin-bottom: 26px;
 }
+
 .progress-bar {
     width: 100%;
-    height: 15px;
+    height: 20px;
+    border-radius: 3px;
 }
 
 .highlight-aion {
@@ -179,29 +181,43 @@ footer p {
 }
 
 .room-container {
-    padding: 10px 50px;
+    padding: 0 50px;
 }
 
 .room-scoreboard {
-    margin-top: 20px;
-    position: relative;
-    z-index: 0;
+    font-size: 14px;
 }
 
 .room-events {
-    margin-top: 10px;
-    position: relative;
-    z-index: 0;
+    font-size: 14px;
+}
+
+.room-question-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 150px;
+    border: 1px solid #5CB85C;
+    border-radius: 5px;
+    background-color: #97D098;
+    margin-bottom: 10px;
+    text-align: center;
+    padding: 15px;
 }
 
 .room-question {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    font-size: 18px;
+    color: white;
+    text-align: center;
 }
 
 .room-image {
     max-width: 100%;
-    height: 300px;
+    height: 250px;
+    display: block;
+    margin: 0 auto;
+    border: 1px solid #5CB85C;
+    border-radius: 5px;
 }
 
 .room-image-hidden {
@@ -210,18 +226,24 @@ footer p {
     display: none;
 }
 
-.room-question-hidden {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    display: none;
-}
-
 .room-answer-input {
     padding-top: 20px;
 }
 
 .room-answer-button {
-    margin-top: 20px;
+    width: 100%;
+}
+
+.room-content-separator {
+    border-color: #97D098;
+}
+
+.room-lower-content {
+    padding-top: 10px;
+}
+
+.list-group-item {
+    border-color: #97D098 !important;
 }
 
 .multiselectWrap {