Skip to content

Commit

Permalink
[#93] Modal Responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
GoraJakub committed Jan 18, 2021
1 parent 55fb84a commit 457fbbe
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 3 deletions.
9 changes: 9 additions & 0 deletions src/app/App.js
Original file line number Diff line number Diff line change
@@ -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(){},
// );
};
51 changes: 48 additions & 3 deletions styles/components/modalGameOver.scss
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@
&--table{
text-align: center;
img{
max-height: 50px;
max-height: 4em;
}
tbody{
max-height: 20vh;
Expand Down Expand Up @@ -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;
Expand All @@ -201,7 +208,7 @@
text-align: center;
width:70%;
justify-self: center;
height: 3vw;
height: 5vh;
}
&--photoContainer{
display: none;
Expand All @@ -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";
}
}
}




0 comments on commit 457fbbe

Please sign in to comment.