Fix mobile view

Qluxzz · Oct 27, 2024 · c7dfe7e · c7dfe7e
1 parent 9d07b52
commit c7dfe7e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/src/Main.elm b/src/Main.elm
@@ -610,16 +610,16 @@ view model =
                 model.players
         in
         Html.div [ Html.Attributes.class "game" ]
-            ((if model.state /= Betting then
-                dealerView model.dealer model.state
-                    :: List.map playerView (allPlayers model.players)
+            [ Html.div [ Html.Attributes.class "dealer-and-players" ]
+                (if model.state /= Betting then
+                    dealerView model.dealer model.state
+                        :: List.map playerView (allPlayers model.players)
 
-              else
-                [ Html.text "" ]
-             )
-                ++ [ actionsView model.state currentPlayer
-                   ]
-            )
+                 else
+                    [ Html.text "" ]
+                )
+            , actionsView model.state currentPlayer
+            ]
     , Maybe.map toastView model.toast |> Maybe.withDefault (Html.text "")
     ]
 

diff --git a/style.css b/style.css
@@ -61,14 +61,16 @@ h6 {
 }
 
 
-body>div {
+.game {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-around;
+    justify-content: end;
+    gap: 20px;
 }
 
+
 .main-menu {
     display: flex;
     align-items: center;
@@ -81,6 +83,14 @@ body>div {
 .logo {
     display: flex;
 
+    @media (max-width: 500px) {
+        margin-left: 50px;
+
+        .card:not(:first-child) {
+            margin-left: -65px;
+        }
+    }
+
     .card-inner {
         top: -100vh;
 
@@ -147,18 +157,27 @@ body>div {
     }
 }
 
+.dealer-and-players {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: space-around;
+}
+
 .actions {
-    position: absolute;
-    bottom: 0px;
-    left: 0;
-    right: 0;
     justify-content: center;
     align-items: center;
     display: flex;
     gap: 10px;
-    height: 100px;
     padding: 10px;
+    min-height: 120px;
     background-color: #083c01;
+    width: 100%;
+    flex-direction: column;
+
+    @media (min-width: 500px) {
+        flex-direction: row;
+    }
 }
 
 .hands {