Small style changes

2 files changed, 49 insertions, 33 deletions

diff --git a/client/src/Client.elm b/client/src/Client.elm
index 0494140..6d64050 100644
--- a/client/src/Client.elm
+++ b/client/src/Client.elm
@@ -60,35 +60,39 @@ view model = case model of
         ]
     Connecting -> [Html.h1 [] [Html.text "Connecting to room..."]]
     Game game ->
-        [ Html.h1 [] [Html.text "Players"]
-        , Html.ul [] <| List.map
-            (\o -> Html.li [] [viewPlayer o])
-            (game.view.me :: game.view.players)
-        , Html.h1 [] [Html.text "You"]
-        , Html.form
-            [ Html.Attributes.action ""
-            , Html.Events.onSubmit SubmitMyName
-            ]
-            [ Html.input
-                [ Html.Attributes.value game.changeMyName
-                , Html.Events.onInput ChangeMyName
+        [ Html.div [Html.Attributes.class "players"]
+            [ Html.h1 [] [Html.text "Players"]
+            , Html.ul [] <| List.map
+                (\o -> Html.li [] [viewPlayer o])
+                (game.view.me :: game.view.players)
+            , Html.form
+                [ Html.Attributes.action ""
+                , Html.Events.onSubmit SubmitMyName
                 ]
-                []
-            , Html.button
-                [ Html.Attributes.type_ "submit"
-                , Html.Attributes.disabled <|
-                    game.view.me.name == game.changeMyName ||
-                    String.length game.changeMyName > 32
+                [ Html.input
+                    [ Html.Attributes.value game.changeMyName
+                    , Html.Events.onInput ChangeMyName
+                    ]
+                    []
+                , Html.button
+                    [ Html.Attributes.type_ "submit"
+                    , Html.Attributes.disabled <|
+                        game.view.me.name == game.changeMyName ||
+                        String.length game.changeMyName > 32
+                    ]
+                    [Html.text "Change name"]
                 ]
-                [Html.text "Update name"]
             ]
-        , Html.h1 [] [Html.text "Table"]
-        , viewTable game
-        , Html.h1 [] [Html.text "Your cards"]
-        ] ++
-        (List.map
-            (\c -> whiteCard game.cards c (cardIsSelected game c))
-            game.view.hand)
+        , Html.div [Html.Attributes.class "main"] <|
+            [ Html.h1 [] [Html.text "Table"]
+            , viewTable game
+            , Html.h1 [] [Html.text "Your cards"]
+            ]
+            ++
+            (List.map
+                (\c -> whiteCard game.cards c (cardIsSelected game c))
+                game.view.hand)
+        ]
 
 tableBlackCard : GameState -> Maybe BlackCard
 tableBlackCard game = case game.view.table of
@@ -189,12 +193,11 @@ blackCard attrs cards black whites =
             case blackParts of
                 "" :: _ -> capitalizeFirst
                 _ -> identity
-        blank txt = Html.span
-            [Html.Attributes.class "blank"]
-            [Html.text txt] in
+        filled txt = Html.span [Html.Attributes.class "filled"] [Html.text txt]
+        blank = Html.span [Html.Attributes.class "blank"] [] in
     Html.div
         (List.map Html.Attributes.class ["card", "black"] ++ attrs) <|
-    intersperseWith (List.map blank whiteParts) (blank "") <|
+    intersperseWith (List.map filled whiteParts) blank <|
     List.map Html.text blackParts
 
 whiteCardContent : Cards -> WhiteCard -> String
diff --git a/client/style.css b/client/style.css
index e3824b6..735c5f8 100644
--- a/client/style.css
+++ b/client/style.css
@@ -2,14 +2,23 @@ html {
   font-size: 18px;
 }
 
+body {
+  display: flex;
+}
+
 .card {
-  padding: 18px;
   border-radius: 18px;
+  display: inline-block;
+  margin: 18px;
+  padding: 18px;
+  width: 300px;
+  vertical-align: text-top;
 }
 
 .black {
   color: white;
   background: black;
+  width: 600px;
 }
 
 .votable {
@@ -41,7 +50,11 @@ html {
 }
 
 .blank {
-  border-bottom: 2px solid white;
-  display: inline-block;
   min-width: 42px;
+  border-bottom: 1px solid white;
+  display: inline-block;
+}
+
+.filled {
+  text-decoration: underline;
 }