[#84] Responsive modal (#85)

* [#84] Responsive modal * [#84] Responsive Modal (fixed)
skwirowski · Jan 18, 2021 · 5946476 · 5946476
1 parent 5670264
commit 5946476
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 19 deletions.
diff --git a/src/app/App.js b/src/app/App.js
@@ -2,65 +2,61 @@ import { doc } from 'prettier';
 import { startTime } from './logic/timer';
 import { generateQuestion } from './logic/generatingQuestions/generateQuestion';
 import { modalGameOver } from './components/modalGameOver';
-import { mainWindow } from './components/mainWindow';
+import { computerAnswers, mainWindow, playerAnswers } from './components/mainWindow';
 
-const testDataHuman = {
-  q1: {
+const testDataHuman = [
+  {
     answer: 'Test',
     correct: 'Test',
     isCorrect: true,
     img: '../../static/assets/img/modes/people/1.jpg',
   },
-  q2: {
+  {
     answer: 'Test',
     correct: 'Test',
     isCorrect: true,
     img: '../../static/assets/img/modes/people/10.jpg',
   },
-  q3: {
+  {
     answer: 'Test',
     correct: 'Test',
     isCorrect: true,
     img: '../../static/assets/img/modes/people/10.jpg',
   },
-  q4: {
+  {
     answer: 'Test',
     correct: 'Test',
     isCorrect: true,
     img: '../../static/assets/img/modes/people/10.jpg',
-  },
-  correct: 1,
-  total: 2,
-};
+  },  
+];
 
-const testDataComputer = {
-  q1: {
+const testDataComputer = [
+  {
     answer: 'Test2',
     correct: 'Test',
     isCorrect: false,
     img: '../../static/assets/img/modes/people/1.jpg',
   },
-  q2: {
+  {
     answer: 'Test2',
     correct: 'Test',
     isCorrect: false,
     img: '../../static/assets/img/modes/people/10.jpg',
   },
-  q3: {
+  {
     answer: 'Test',
     correct: 'Test',
     isCorrect: true,
     img: '../../static/assets/img/modes/people/10.jpg',
   },
-  q4: {
+  {
     answer: 'Test',
     correct: 'Test',
     isCorrect: true,
     img: '../../static/assets/img/modes/people/10.jpg',
   },
-  correct: 0,
-  total: 2,
-};
+];
 
 
 const modalSubmitCallback = (e) => {

diff --git a/styles/components/modalGameOver.scss b/styles/components/modalGameOver.scss
@@ -41,17 +41,24 @@
   }
   &--detailedAnswers {
     max-height: 300px;
-    overflow-y: scroll;
   }
   &--table {
     width: 100%;
+    overflow-x: hidden;
     img {
       max-height: 100px;
       box-shadow: var(--box-shadow-property);
       border-radius: var(--border-radius);
     }
     tbody {
+      &::-webkit-scrollbar{
+        width:0;
+        display: none;
+      }
       width: 100%;
+      display: block;
+      max-height: 200px;
+      overflow-y: auto;      
     }
     tr {
       width: 100%;
@@ -121,3 +128,90 @@
   z-index: 1000;
   background: rgba(0, 0, 0, 0.75);
 }
+
+@media screen and (max-width:1023px){
+  .swquiz-modal{
+    height: 90vh;
+    font-size:2.5vw;
+    justify-content: space-between;
+    &--middleContainer{
+      grid-template-columns: 1fr;
+      max-height: 40%;
+    }
+    &--table{
+      text-align: center;
+      img{
+        max-height: 50px;
+      }
+      tbody{
+        max-height: 20vh;
+      }
+    }
+    &--detailedAnswers{
+      text-align: center;
+      font-size: 0.8em;
+    }
+    &--photoContainer{
+      display: none;
+    }
+    &--form{
+      grid-template-columns: 1fr;
+        grid-template-areas: 
+        "label"
+        "input"
+        "button";
+        .swquiz-modal{
+          &--button{
+            font-size:0.6em;
+        }
+        }
+    }
+    &--label{
+      text-align: center;
+      font-size: 0.9em;
+    }
+    &--nameInput{
+      text-align: center;
+      width:70%;
+      justify-self: center;
+      height: 7vw;
+    }
+
+  }
+}
+
+@media screen and (max-width:720px) and (max-height:745px) and (min-height:591px){
+  .swquiz-modal{
+    font-size: 3.5vw;
+    &--table{
+      tbody{
+        max-height: 15vh;
+      }
+    }
+  }
+}
+
+@media screen and (max-height:590px){
+  .swquiz-modal{
+    font-size: 3vh;
+    &--table{
+      tbody{
+        max-height: 15vh;
+      }
+    }
+    &--nameInput{
+      text-align: center;
+      width:70%;
+      justify-self: center;
+      height: 3vw;
+    }
+    &--photoContainer{
+      display: none;
+    }
+    &--middleContainer{
+      grid-template-columns: 1fr;
+      max-height: 40%;
+    }
+
+  }
+}