Mobile UI improvements

daithihearn · May 18, 2023 · 215c280 · 215c280
1 parent 38eee89
commit 215c280
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "7.0.2",
+    "version": "7.0.3",
     "description": "React frontend for the Cards 110",
     "author": "Daithi Hearn",
     "license": "MIT",

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,7 +1,7 @@
 {
   "short_name": "Cards 110",
   "name": "Cards 110",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "icons": [
     {
       "src": "./assets/favicon.png",

diff --git a/src/components/Game/Actions/ActionsWrapper.tsx b/src/components/Game/Actions/ActionsWrapper.tsx
@@ -19,7 +19,7 @@ const ActionsWrapper = () => {
 
     return (
         <CardContent className="button-area">
-            <MuiButtonGroup size="large" variant="contained">
+            <MuiButtonGroup size="medium" variant="contained">
                 {isCalling && <Calling />}
                 {isBuying && <Buying />}
                 {isCalled && <SelectSuit />}

diff --git a/src/components/Game/Actions/ThrowCardsWarningModal.tsx b/src/components/Game/Actions/ThrowCardsWarningModal.tsx
@@ -68,7 +68,7 @@ const ThrowCardsWarningModal: React.FC<ModalOpts> = ({
                     </CardContent>
 
                     <CardContent className="button-area">
-                        <ButtonGroup size="large">
+                        <ButtonGroup size="medium">
                             <Button
                                 variant="contained"
                                 color="primary"

diff --git a/src/pages/Game/Game.tsx b/src/pages/Game/Game.tsx
@@ -49,8 +49,8 @@ const Game = () => {
 
     return (
         <div className="app">
-            <div className="game_wrap">
-                <div className="game_container">
+            <div className="game-wrap">
+                <div className="game-container">
                     {isGameActive ? <GameWrapper /> : <GameOver />}
                 </div>
             </div>

diff --git a/src/pages/Game/_game.scss b/src/pages/Game/_game.scss
@@ -142,10 +142,6 @@
     min-height: 90px;
 }
 
-.button-area {
-    min-height: 75px;
-}
-
 .gameModalBody {
     padding: 0;
 }
@@ -176,6 +172,11 @@
 }
 
 @media (max-width: 420px) {
+
+    .button-area {
+        padding: 0 !important;
+    }
+
     .score-text {
         width: 2em;
         display: inline-block;

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -37,8 +37,8 @@ const Home = () => {
 
     return (
         <div className="app">
-            <div className="game_wrap">
-                <div className="game_container">
+            <div className="game-wrap">
+                <div className="game-container">
                     {!myProfile.isPlayer && !myProfile.isAdmin ? (
                         <Grid container>
                             <Grid item xs={12}>

diff --git a/src/pages/Home/_home.scss b/src/pages/Home/_home.scss
@@ -2,7 +2,7 @@
     overflow: hidden;
 }
 
-.game_wrap {
+.game-wrap {
     min-width: 650px;
     max-width: 800px;
     overflow: overlay;
@@ -11,7 +11,7 @@
     text-align: center;
 }
 
-.game_container {
+.game-container {
     padding: 10px 10px 10px 10px;
 }
 
@@ -115,7 +115,7 @@
 }
 
 @media only screen and (max-width: 768px) {
-    .game_wrap {
+    .game-wrap {
         max-width: 750px;
     }
 
@@ -126,7 +126,7 @@
 }
 
 @media only screen and (max-width: 736px) {
-    .game_wrap {
+    .game-wrap {
         max-width: 710px;
     }
 
@@ -137,7 +137,7 @@
 }
 
 @media only screen and (max-width: 734px) {
-    .game_wrap {
+    .game-wrap {
         max-width: 700px;
     }
 
@@ -148,7 +148,7 @@
 }
 
 @media only screen and (max-width: 667px) {
-    .game_wrap {
+    .game-wrap {
         min-width: 600px;
         max-width: 650px;
     }
@@ -160,7 +160,11 @@
 }
 
 @media only screen and (max-width: 570px) {
-    .game_wrap {
+    .game-container {
+        padding: 0;
+    }
+
+    .game-wrap {
         min-width: 550px;
         max-width: 560px;
     }
@@ -172,8 +176,9 @@
 }
 
 @media only screen and (max-width: 420px) {
-    .game_wrap {
-        min-width: 400px;
+
+    .game-wrap {
+        min-width: 390px;
         max-width: 410px;
     }
 
@@ -184,7 +189,7 @@
 }
 
 @media only screen and (max-width: 385px) {
-    .game_wrap {
+    .game-wrap {
         min-width: 370px;
         max-width: 375px;
     }
@@ -195,7 +200,7 @@
 }
 
 @media only screen and (max-width: 360px) {
-    .game_wrap {
+    .game-wrap {
         min-width: 300px;
         max-width: 350px;
     }
@@ -206,7 +211,7 @@
 }
 
 @media only screen and (max-width: 320px) {
-    .game_wrap {
+    .game-wrap {
         max-width: 310px;
     }
 

diff --git a/src/pages/Layout/Layout.tsx b/src/pages/Layout/Layout.tsx
@@ -26,12 +26,10 @@ const Layout = () => {
     }, [isLoading, isAuthenticated])
 
     return (
-        <Box
-            component="div"
-            className="main_content carpet no-horizontal-scroll">
-            <span className="app" style={{ overflowX: "hidden" }}>
+        <Box component="div" className="main_content carpet">
+            <span className="app">
                 <div className="app_body">
-                    <main className="main">
+                    <main className="main" style={{ overflowX: "hidden" }}>
                         {isAuthenticated && accessToken ? (
                             <>
                                 <DefaultHeader />