From 457fbbe2f16660e60286b370563a0116d40989dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20G=C3=B3ra?= <jgora.szczecin@gmail.com>
Date: Mon, 18 Jan 2021 19:46:40 +0100
Subject: [PATCH] [#93] Modal Responsiveness

---
 src/app/App.js                       |  9 +++++
 styles/components/modalGameOver.scss | 51 ++++++++++++++++++++++++++--
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index 9500f97..4ef24a2 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -1,6 +1,15 @@
 import { doc } from 'prettier';
 import { mainWindow } from './components/mainWindow';
+import {modalGameOver} from './components/modalGameOver';
+import { playerAnswers, computerAnswers } from './components/mainWindow'
+
 
 export const App = ({ options }) => {
   mainWindow(options.quizMaxTime);
+//   modalGameOver(
+//     document.querySelector('#swquiz-app'),
+//     playerAnswers,
+//     computerAnswers,
+//     function(){},
+// );
 };
diff --git a/styles/components/modalGameOver.scss b/styles/components/modalGameOver.scss
index 89d8402..10e0c1b 100644
--- a/styles/components/modalGameOver.scss
+++ b/styles/components/modalGameOver.scss
@@ -139,7 +139,7 @@
     &--table{
       text-align: center;
       img{
-        max-height: 50px;
+        max-height: 4em;
       }
       tbody{
         max-height: 20vh;
@@ -186,12 +186,19 @@
         max-height: 15vh;
       }
     }
+    &--form{
+      grid-template-columns: 1fr;
+        grid-template-areas: 
+        "label"
+        "input"
+        "button";
   }
 }
+}
 
 @media screen and (max-height:590px){
   .swquiz-modal{
-    font-size: 3vh;
+    font-size: 2vh;
     &--table{
       tbody{
         max-height: 15vh;
@@ -201,7 +208,7 @@
       text-align: center;
       width:70%;
       justify-self: center;
-      height: 3vw;
+      height: 5vh;
     }
     &--photoContainer{
       display: none;
@@ -210,6 +217,44 @@
       grid-template-columns: 1fr;
       max-height: 40%;
     }
+    &--form{
+      grid-template-columns: 1fr;
+        grid-template-areas: 
+        "label"
+        "input"
+        "button";
+    
 
   }
 }
+}
+
+@media screen and (max-height:590px) and (max-width:550px){
+  .swquiz-modal{
+    font-size: 2vh;
+    &--form{
+      grid-template-columns: 1fr;
+        grid-template-areas: 
+        "label"
+        "input"
+        "button";
+}
+}
+}
+
+@media screen and (max-height:590px) and (min-width:550px){
+  .swquiz-modal{
+    font-size: 4vh;
+    &--form{
+      grid-template-columns: 1fr;
+        grid-template-areas: 
+        "label"
+        "input"
+        "button";
+    }
+    }
+  }
+
+
+
+