Merge pull request #98 from daithihearn/mobile-styling

Styling improvements for mobile
daithihearn · Jan 19, 2023 · 313a9c7 · 313a9c7
2 parents 41f6904 + 3fabf1f
commit 313a9c7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/components/Game/PlayersAndCards.tsx b/src/components/Game/PlayersAndCards.tsx
@@ -22,7 +22,7 @@ const PlayersAndCards = () => {
     return (
         <CardBody className="cardArea">
             <Container>
-                <Row>
+                <Row xs="6" sm="6" md="6" lg="6" xl="6">
                     {sortedPlayers.map(player => (
                         <PlayerCard
                             key={`playercard_${player.id}`}

diff --git a/src/pages/Game/_game.scss b/src/pages/Game/_game.scss
@@ -156,10 +156,21 @@
     }
 
     .overlay-score {
-        margin-top: 1.8em;
+        margin-top: 0.8em;
     }
 
     .overlay-chip {
-        margin-top: 4rem;
+        margin-top: 1rem;
+    }
+
+    .overlay-dealer-chip {
+        margin-top: 0.5rem;
+    }
+
+    .avatar {
+        vertical-align: middle;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
     }
 }
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
@@ -10,7 +10,6 @@ body {
 .main_content {
     background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='40' height='40' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(135)'%3E%3Crect width='100%25' height='100%25' fill='rgba(47, 133, 90,1)'/%3E%3Ccircle cx='40' cy='20' r='1' fill='%231a202c'/%3E%3Ccircle cx='0' cy='20' r='1' fill='%231a202c'/%3E%3Ccircle cx='20' cy='40' r='1' fill='%231a202c'/%3E%3Ccircle cx='20' cy='0' r='1' fill='%231a202c'/%3E%3Ccircle cx='38' cy='2' r='1' fill='%23ecc94b'/%3E%3Ccircle cx='2' cy='38' r='1' fill='%23ecc94b'/%3E%3Ccircle cx='38' cy='38' r='1' fill='%23ecc94b'/%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ecc94b'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
     background-color: #2f855a;
-    min-height: 800px;
     position: fixed;
     width: 100%;
     height: 100vh;