aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJasper Van der Jeugt2020-08-04 17:50:32 +0200
committerJasper Van der Jeugt2020-08-04 17:50:32 +0200
commitcb3682637a9a45ee088fd134e8ba67d8114886b7 (patch)
tree051e2d99485e6673748b5e7534a26d57c6979cb4
parent2754a7cd9c16875f6e8d47e48e2611be9bb26985 (diff)
Small style changes
-rw-r--r--client/src/Client.elm63
-rw-r--r--client/style.css19
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;
}