Merge pull request #65 from aeternity/fix/responsiveness_issues

fix: responsiveness issues
aeternity · Aug 1, 2022 · 0c47907 · 0c47907
2 parents 8d1015d + 2e63208
commit 0c47907
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 32 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -59,6 +59,10 @@ onBeforeUnmount(async () => {
   flex-direction: column;
   height: 100vh;
   justify-content: space-between;
+  @include for-phone-only {
+    min-height: 100vh;
+    height: unset;
+  }
 }
 :root {
   --green: #42bd65;

diff --git a/client/src/components/GameInfo.vue b/client/src/components/GameInfo.vue
@@ -10,17 +10,19 @@ defineProps<{
 <template>
   <div class="round-info">
     <span class="title">Game</span>
-    <span class="info" data-testid="info" v-if="stake">
-      <span class="stake"
-        >STAKE: {{ stake.dividedBy(1e18).toFormat(2) }} AE</span
-      >
+    <div class="info" data-testid="info" v-if="stake">
+      <span class="stake">
+        STAKE: {{ stake.dividedBy(1e18).toFormat(2) }} AE
+      </span>
       <span class="info-seperator" v-if="round"> / </span>
-      <span v-if="round">ROUND: {{ round }}</span></span
-    >
+      <span v-if="round">ROUND: {{ round }}</span>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+@import '../mediaqueries.scss';
+
 .round-info {
   display: flex;
   flex-direction: column;
@@ -30,12 +32,19 @@ defineProps<{
   .title {
     font-size: 50px;
     font-weight: bold;
+    @include for-phone-only {
+      font-size: 34px;
+    }
   }
 
   .info {
     font-size: 30px;
     text-align: right;
     font-weight: 500;
+    @include for-phone-only {
+      font-size: 16px;
+      text-align: center;
+    }
   }
   .stake,
   .info-seperator {

diff --git a/client/src/components/GenericButton.vue b/client/src/components/GenericButton.vue
@@ -14,7 +14,7 @@ defineProps<{
 button {
   font-family: unset;
   font-size: 16px;
-  font-weight: 100;
+  font-weight: 400;
   border: none;
   user-select: none;
   cursor: pointer;
@@ -34,7 +34,7 @@ button {
     cursor: not-allowed;
   }
   @include for-phone-only {
-    font-size: 30px;
+    font-size: 24px;
   }
 }
 </style>
diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
@@ -25,18 +25,12 @@ const channelStore = useChannelStore();
 .header {
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
   padding: var(--padding);
   padding-bottom: 5px;
   height: 10%;
   @include for-phone-only {
     height: 15%;
   }
 }
-
-.center {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
 </style>
diff --git a/client/src/components/PlayerInfo.vue b/client/src/components/PlayerInfo.vue
@@ -17,6 +17,8 @@ defineProps<{
 </template>
 
 <style scoped lang="scss">
+@import '../mediaqueries.scss';
+
 .player-info {
   display: flex;
   flex-direction: column;
@@ -26,13 +28,19 @@ defineProps<{
   .name {
     font-size: 50px;
     font-weight: bold;
+    @include for-phone-only {
+      font-size: 34px;
+    }
   }
 
   .balance {
     font-size: 30px;
     text-align: right;
     font-weight: 500;
     color: var(--pink);
+    @include for-phone-only {
+      font-size: 16px;
+    }
   }
 }
 </style>
diff --git a/client/src/components/PopUp.vue b/client/src/components/PopUp.vue
@@ -9,8 +9,8 @@ const store = usePopUpStore();
   <div v-if="store.title" class="popup__wrapper">
     <div class="popup">
       <div class="title">{{ store.title }}</div>
-      <Tooltip v-if="store.tooltipText" :text="store.tooltipText" />
       <div class="text" v-if="store.text" data-testid="popup-text">
+        <Tooltip v-if="store.tooltipText" :text="store.tooltipText" />
         {{ store.text }}
       </div>
       <div class="buttons">
@@ -78,16 +78,17 @@ const store = usePopUpStore();
     align-items: center;
   }
   @include for-phone-only {
+    max-width: unset;
     width: 100%;
     margin: 0 10px;
     height: unset;
     padding: 15px;
     & > .title {
-      font-size: 44px;
+      font-size: 30px;
     }
 
     & > .text {
-      font-size: 24px;
+      font-size: 20px;
     }
     & > .buttons {
       button {

diff --git a/client/src/components/RockPaperScissors.vue b/client/src/components/RockPaperScissors.vue
@@ -170,9 +170,9 @@ async function makeSelection(selection: Selections) {
     flex-direction: row;
   }
   & > .button {
-    font-size: 60px;
+    font-size: 50px;
     font-family: 'Clash Display', sans-serif;
-    width: 270px;
+    width: 250px;
     border: none;
     background-color: transparent;
     @include for-tablet-portrait-up {
@@ -184,7 +184,7 @@ async function makeSelection(selection: Selections) {
     }
     @include for-desktop-up {
       font-size: 60px;
-      width: 270px;
+      width: 300px;
     }
   }
   & > .button.user-selecting {

diff --git a/client/src/components/Tooltip.vue b/client/src/components/Tooltip.vue
@@ -17,17 +17,14 @@ defineProps<{
 @import '../mediaqueries.scss';
 
 .tooltip {
-  position: absolute;
-  right: 70px;
-  transform: translateY(-20px);
+  display: block;
+  position: relative;
+  margin-left: 5px;
+  float: right;
   img {
     width: 20px;
     height: 20px;
   }
-  @include for-phone-only {
-    right: 20px;
-    transform: translateY(-30px);
-  }
   .tooltip-text {
     visibility: hidden;
     opacity: 0;

diff --git a/client/src/components/TransactionsList.vue b/client/src/components/TransactionsList.vue
@@ -119,7 +119,7 @@ const isMinimized = computed(() => !channelStore.channel?.isOpen);
         font-size: 28px;
         font-weight: 500;
         @include for-phone-only {
-          font-size: 22px;
+          font-size: 16px;
         }
       }
       .expand {
@@ -142,15 +142,18 @@ const isMinimized = computed(() => !channelStore.channel?.isOpen);
           cursor: not-allowed;
         }
         @include for-phone-only {
-          font-size: 22px;
+          span {
+            display: none;
+          }
         }
         .icon {
           width: 28px;
           height: 28px;
           margin-right: 15px;
           @include for-phone-only {
-            width: 22px;
-            height: 22px;
+            width: 16px;
+            height: 16px;
+            margin-right: 0px;
           }
         }
       }