From fdbf7217e93980fe820f9e9567486bbcb008ce11 Mon Sep 17 00:00:00 2001
From: gabe farrell <gabrielhfarrell@gmail.com>
Date: Sun, 26 Jun 2022 12:49:31 -0400
Subject: [PATCH] Added style for mobile

---
 frontend/src/components/AboutPage.vue  |  5 ++++
 frontend/src/components/BetBox.vue     |  5 ++++
 frontend/src/components/ChatBox.vue    | 19 +++++++++++++
 frontend/src/components/GameWindow.vue |  5 ++++
 frontend/src/components/HowToPlay.vue  |  6 +++++
 frontend/src/components/LoginForm.vue  |  5 ++++
 frontend/src/components/MassFlip.vue   | 37 +++++++++++++++-----------
 frontend/src/components/PageHeader.vue |  6 +++++
 8 files changed, 73 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/AboutPage.vue b/frontend/src/components/AboutPage.vue
index a622f0a..99629d3 100644
--- a/frontend/src/components/AboutPage.vue
+++ b/frontend/src/components/AboutPage.vue
@@ -55,4 +55,9 @@ defineEmits(['display'])
         background-clip: text;
         color: transparent;
     }
+    @media (max-aspect-ratio:13/16) {
+        #About {
+            width: 80%;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/BetBox.vue b/frontend/src/components/BetBox.vue
index 4305ae9..08d9f3f 100644
--- a/frontend/src/components/BetBox.vue
+++ b/frontend/src/components/BetBox.vue
@@ -129,6 +129,11 @@ onMounted(() => {
 #lower {
     height: 200px;
 }
+@media (max-aspect-ratio:13/16) {
+    #GameWindow {
+        flex-direction: row;
+    }
+}
 
 @property --p{
   syntax: '<number>';
diff --git a/frontend/src/components/ChatBox.vue b/frontend/src/components/ChatBox.vue
index bfc93ae..4201503 100644
--- a/frontend/src/components/ChatBox.vue
+++ b/frontend/src/components/ChatBox.vue
@@ -160,4 +160,23 @@ function sendChat() {
     #ChatInput:focus {
         outline: none !important;
     }
+    
+    @media (max-aspect-ratio:13/16) {
+        #ChatBoxContainer {
+            width:80%;
+            max-width: 80%;
+            margin: auto;
+            margin-bottom: 30px;
+        }
+        #ChatWindow {
+            width:95%;
+        }
+        #ChatInput {
+            width: 65%;
+        }
+        #ChatInputContainer {
+            width: 95%;
+            margin: auto;
+        }
+    }
 </style>
diff --git a/frontend/src/components/GameWindow.vue b/frontend/src/components/GameWindow.vue
index d037ad7..2be514c 100644
--- a/frontend/src/components/GameWindow.vue
+++ b/frontend/src/components/GameWindow.vue
@@ -15,4 +15,9 @@
         display: flex;
         justify-content: space-around;
     }
+    @media (max-aspect-ratio:13/16) {
+        #GameWindow {
+            flex-direction: column;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/HowToPlay.vue b/frontend/src/components/HowToPlay.vue
index fe775c5..ea4ebde 100644
--- a/frontend/src/components/HowToPlay.vue
+++ b/frontend/src/components/HowToPlay.vue
@@ -57,4 +57,10 @@ defineEmits(['display'])
         background-clip: text;
         color: transparent;
     }
+    
+    @media (max-aspect-ratio:13/16) {
+        #HowTo {
+            width: 80%;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/LoginForm.vue b/frontend/src/components/LoginForm.vue
index 37a5e2c..f15cbf5 100644
--- a/frontend/src/components/LoginForm.vue
+++ b/frontend/src/components/LoginForm.vue
@@ -198,4 +198,9 @@ function login(e) {
     .badInput {
         border: 2px solid red;
     }
+    @media (max-aspect-ratio:13/16) {
+        #LoginContainer {
+            width: 80%;
+        }
+    }
 </style>
diff --git a/frontend/src/components/MassFlip.vue b/frontend/src/components/MassFlip.vue
index 955740f..ed1321e 100644
--- a/frontend/src/components/MassFlip.vue
+++ b/frontend/src/components/MassFlip.vue
@@ -32,22 +32,29 @@ function displayHandle(c) {
 
 <style scoped>
 #Container {
-  width: 1000px;
-  max-width: 100%;
-  height: 75vh;
-  border-radius: 30px;
-  margin: auto;
-  color: #f3f9f8;
-  background-color: #001d3d;
-  position: relative;
+    width: 1000px;
+    max-width: 100%;
+    height: 75vh;
+    border-radius: 30px;
+    margin: auto;
+    color: #f3f9f8;
+    background-color: #001d3d;
+    position: relative;
 }
 .dullBG {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  border-radius: 30px;
-  background-color: rgba(0, 8, 20,0.7);
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    border-radius: 30px;
+    background-color: rgba(0, 8, 20,0.7);
+}
+    
+@media (max-aspect-ratio:13/16) {
+    #Container {
+        width: 95%;
+        height: auto;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
index 084b1a2..8c3f3e3 100644
--- a/frontend/src/components/PageHeader.vue
+++ b/frontend/src/components/PageHeader.vue
@@ -64,4 +64,10 @@ function logout() {
         cursor: pointer;
         color: #bbb;
     }
+    @media (max-aspect-ratio:13/16) {
+        nav {
+            max-width: 80%;
+
+        }
+    }
 </style>
\ No newline at end of file