two column word list

ktonon · Dec 30, 2016 · c8fccf7 · c8fccf7
1 parent ffd281f
commit c8fccf7
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;