improve menu functions and better menu responsiveness

Patcire · Sep 7, 2024 · 2f5f02f · 2f5f02f
1 parent 3d8db56
commit 2f5f02f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/sass/components/_bigbuttonsmenu.scss b/sass/components/_bigbuttonsmenu.scss
@@ -46,6 +46,9 @@
     &:hover{
       transform: scale(1.2);
     }
+    &--disabled{
+      pointer-events: none;
+    }
 
   }
 
@@ -94,7 +97,6 @@
     }
   &__element{
     height: 104px;
-    width: 204px;
     }
     &__anchor{
       font-size: 1.2rem ;

diff --git a/sass/pages/_gamesMenu.scss b/sass/pages/_gamesMenu.scss
@@ -8,7 +8,8 @@
   &__content{
     position: relative;
     //background-color: lightblue;
-    @include flex-row;
+    @include flex-column;
+    padding-bottom: 48px;
   }
 
   &__container{
@@ -52,6 +53,9 @@
     font-size: 2.5rem;
     text-shadow: $shadow3;
     //background-color: crimson;
+    &--mod{
+      color: $lightBlue;
+    }
   }
 
   &__join{
@@ -115,9 +119,13 @@
     }
     &__join{
       padding-top: 20px;
+      gap: 15px;
     }
     &__input{
-      width: 20rem;
+      font-size: 1.5rem;
+      width: 244px;
+      height: 104px;
+      text-align: center;
     }
     &__box{
       margin-bottom: 40px;

diff --git a/src/components/BigButtonsMenu.vue b/src/components/BigButtonsMenu.vue
@@ -13,11 +13,11 @@ export default {
           Play</router-link>
       </li>
       <li class="games-menu__element">
-        <router-link to="/mirror" class="games-menu__anchor">
+        <router-link to="/mirror" class="games-menu__anchor games-menu__anchor--disabled">
           Mirror</router-link>
       </li>
       <li class="games-menu__element">
-        <router-link to="/exploding" class="games-menu__anchor">
+        <router-link to="/exploding" class="games-menu__anchor games-menu__anchor--disabled">
           Exploding
           questions</router-link>
       </li>

diff --git a/src/pages/Games.vue b/src/pages/Games.vue
@@ -36,8 +36,8 @@ export default {
 <template>
 
   <section class="games">
-
     <article class="games__content">
+      <h3 class="multi__title multi__title--mod">Singleplayer</h3>
       <div class="games__container">
         <img class="games__hand" src="/public/Vectorhand.svg" alt="hand doodle">
       </div>