diff --git a/app/Main.elm b/app/Main.elm index da1bbb0..3c3f7e2 100644 --- a/app/Main.elm +++ b/app/Main.elm @@ -273,31 +273,27 @@ updateBoardSize model = } -cellWidth : Config.Model -> Shape -> Int -cellWidth conf shape = +boardSize : Config.Model -> ( Int, Int ) +boardSize conf = let - w = - Shape.toWidth shape - - h = - Shape.toHeight shape - s = conf.windowSize + in + if conf.isMobile then + ( (s.width |> toFloat) * 0.9 |> round, s.height - 100 ) + else + ( (s.width |> toFloat) * 0.58 |> round, s.height - 200 ) - x = - if conf.isMobile then - (s.width |> toFloat) * 0.9 |> round - else - (s.width |> toFloat) * 0.7 |> round - y = - if conf.isMobile then - s.height - 100 - else - s.height - 200 +cellWidth : Config.Model -> Shape -> Int +cellWidth conf shape = + let + ( x, y ) = + boardSize conf in - (min (x // w) (y // h)) + (min (x // Shape.toWidth shape) + (y // Shape.toHeight shape) + ) refreshWords : Config.Model -> Model -> ( Model, Cmd Msg ) @@ -482,8 +478,8 @@ boardView model = [ class "px2" ] [ if model.config.isMobile then div [ class "clearfix" ] - [ div [ class "col col-3" ] [ timer ] - , div [ class "col col-9" ] [ shuffle ] + [ div [ class "col col-5" ] [ timer ] + , div [ class "col col-7" ] [ shuffle ] ] else shuffle @@ -494,8 +490,8 @@ boardView model = , div [] wordList ] else - [ div [ class "col col-3" ] wordList - , div [ class "rel col col-9 mt3" ] board + [ div [ class "col col-5" ] wordList + , div [ class "rel col col-7 mt3" ] board ] ) , Util.forkMe model.config diff --git a/app/Share.elm b/app/Share.elm index ef43236..c4f41d2 100644 --- a/app/Share.elm +++ b/app/Share.elm @@ -56,8 +56,8 @@ view isMobile share timer = (if isMobile then [ div [ class "box rounded" ] [ mobileShareView share ] ] else - [ div [ class "col col-3" ] [ timer ] - , div [ class "box rounded px2 col col-9" ] [ shareView share ] + [ div [ class "col col-5" ] [ timer ] + , div [ class "box rounded px2 col col-7" ] [ shareView share ] ] ) diff --git a/app/Word/Input.elm b/app/Word/Input.elm index 8794075..ceb93b2 100644 --- a/app/Word/Input.elm +++ b/app/Word/Input.elm @@ -31,8 +31,8 @@ view gameMode word score status timer = [ statusClass status ("word-input clearfix " ++ (gameMode |> GameMode.toString)) ] - [ div [ class "timer col col-3" ] [ timer ] - , div [ class "box rounded px2 col col-9" ] + [ div [ class "timer col col-5" ] [ timer ] + , div [ class "box rounded px2 col col-7" ] [ text showWord , div [ class "bonus right" ] (bonusView status score) ] diff --git a/app/Word/Word.elm b/app/Word/Word.elm index acf394c..2cc0776 100644 --- a/app/Word/Word.elm +++ b/app/Word/Word.elm @@ -143,12 +143,12 @@ view word = div [] [ div [ getClass word ] [ div - [ class "text col col-8" + [ class "text col col-3" , onClick ToggleDefinition ] [ text (word.word |> String.toLower) ] - , div [ class "col col-3" ] [ Score.view word.score ] - , div [ class "col col-1" ] [] + , div [ class "col col-2" ] [ Score.view word.score ] + , div [ class "white col col-1" ] [ text "." ] ] , definitionView word.definition ] diff --git a/app/style.scss b/app/style.scss index 307f862..3447ed8 100644 --- a/app/style.scss +++ b/app/style.scss @@ -47,6 +47,7 @@ body { } .timer { color: #ccc; + text-align: center; &.playing { color: black; } @@ -113,11 +114,14 @@ body { } } input { - font-size: 24px; + font-size: 24px; + width: 200px; } } .word-list { + height: 80vh; + overflow-y: scroll; font-size: 25px; .header { border-bottom: 1px solid #333;