Merge pull request #100 from Nefariusek/bug/issue-88

added responsive view to all screens
Nefariusek · Jan 4, 2022 · a8a5301 · a8a5301
2 parents 32cf160 + 237ed09
commit a8a5301
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 30 deletions.
diff --git a/src/components/ScoreFilter/ScoreFilter.css b/src/components/ScoreFilter/ScoreFilter.css
@@ -1,25 +1,37 @@
 .score-filter {
   display: flex;
+  flex-direction: row;
   align-items: center;
   align-content: center;
-  margin-top: 5vh;
+  margin-top: 0;
+}
+
+select {
+  width: 80%;
+  min-width: 15ch;
+  max-width: 30ch;
+}
+
+.dropList-filter {
+  display: flex;
+  flex-direction: row;
 }
 
 .score-range {
   display: flex;
 }
 
-input {
+input.min,
+input.max {
   text-align: center;
   margin-left: 10px;
-  height: 5vh;
   width: 40px;
   font-size: 60%;
   text-align: right;
 }
 
-button {
-  margin-top: 2vh;
+#clearFilterBtn {
+  margin-top: 3vh;
 }
 
 #settings {
@@ -29,13 +41,33 @@ button {
 #option {
   text-align: center;
 }
-
-@media only screen and (min-device-width: 280px) and (max-device-width: 1200px) {
-  .score-filter {
-    flex-direction: column;
-    margin-top: 2vh;
+@media (min-width: 320px) and (max-width: 960px) {
+  .filter {
+    margin: 0 2vh;
   }
   #settings {
     margin: 10px auto;
   }
+  input.min,
+  input.max {
+    flex-direction: row;
+    width: 40px;
+    font-size: 3vmin;
+  }
+  .range {
+    font-size: 4vmin;
+  }
+  #clearFilterBtn {
+    width: min-content;
+    font-size: 2vmin;
+  }
+  .dropList-filter {
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  select {
+    min-width: 10ch;
+    max-width: 20ch;
+    height: 2.3rem;
+  }
 }
diff --git a/src/components/ScoreFilter/ScoreFilter.js b/src/components/ScoreFilter/ScoreFilter.js
@@ -20,11 +20,15 @@ export default function ScoreFilter() {
   const scoreFilter = document.createElement('div');
   scoreFilter.classList.add('score-filter');
 
+  const dropListFilter = document.createElement('div');
+  dropListFilter.classList.add('dropList-filter');
+  scoreFilter.appendChild(dropListFilter);
+
   const button = ClearButton();
 
   const dropdownAbout = Dropdown('about-dropdown', DEFAULT_ABOUT, 'CATS', 'DOGS');
   const dropdownType = Dropdown('type-dropdown', DEFAULT_TYPE, 'MULTIPLE CHOICE', 'OPEN');
-  scoreFilter.append(dropdownAbout, dropdownType);
+  dropListFilter.append(dropdownAbout, dropdownType);
 
   dropdownAbout.addEventListener('change', (e) => {
     settings.about = e.target.value;
@@ -64,6 +68,7 @@ export default function ScoreFilter() {
 // TODO: use Button component instead
 function ClearButton() {
   const button = document.createElement('button');
+  button.setAttribute('id', 'clearFilterBtn');
   button.innerHTML = 'clear filters';
   button.addEventListener('click', () => {
     settings.about = DEFAULT_ABOUT;

diff --git a/src/views/Leaderboard/Leaderboard.css b/src/views/Leaderboard/Leaderboard.css
@@ -11,9 +11,10 @@ div#scorePage > * {
 }
 
 #scorePageTitle {
-  font-size: 5rem;
+  font-size: 4rem;
   font-weight: bold;
   color: #2c3e50;
+  margin-bottom: 0;
 }
 /*podium*/
 
@@ -66,7 +67,7 @@ td.step div:first-of-type {
 
 .list {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-evenly;
   color: whitesmoke;
   bottom: 20%;
 }
@@ -93,12 +94,12 @@ button.resetButton {
   right: 4%;
 }
 
-@media (max-width: 960px) {
+@media (min-width: 320px) and (max-width: 960px) {
   .podiumNickname {
     font-size: 1rem;
   }
   .listItem {
-    font-size: 0.8rem;
+    font-size: 2vmin;
   }
 
   #scorePageTitle {
@@ -107,25 +108,36 @@ button.resetButton {
 
   button.leaderboardMenuButton {
     bottom: 0;
-    left: 0;
-    width: min-content;
+    left: 5%;
+    width: fit-content;
+    font-size: 2vmin;
   }
   td.step div:first-of-type {
     width: 100px;
+    font-size: 3rem;
+  }
+
+  #gold {
+    height: 150px;
+    margin: 20px auto;
+  }
+  #silver {
+    height: 100px;
+  }
+  #bronze {
+    height: 80px;
   }
 
   button.resetButton {
     bottom: 0;
-    right: 0;
-    width: min-content;
+    right: 5%;
+    width: fit-content;
+    font-size: 1.5vmin;
   }
-}
-@media only screen and (min-device-width: 280px) and (max-device-width: 480px) {
-  td.step div:first-of-type {
-    margin: 20px 0px;
-    width: 75px;
-  }
-  #scorePageTitle {
-    font-size: 2rem;
+
+  .list {
+    justify-content: center;
+    margin-bottom: 10%;
+    font-size: 3vmin;
   }
 }
diff --git a/src/views/QuizView/quizView.css b/src/views/QuizView/quizView.css
@@ -139,9 +139,10 @@
   color: white;
 }
 
-@media only screen and (min-device-width: 280px) and (max-device-width: 660px) {
+@media (min-width: 320px) and (max-width: 960px) {
   .quizViewMenuButton {
     width: min-content;
     padding-top: 12px;
+    font-size: 3vmin;
   }
 }
diff --git a/src/views/ScorePage/ScorePage.css b/src/views/ScorePage/ScorePage.css
@@ -61,7 +61,7 @@ input {
 #finalScore {
   height: 70px;
 }
-@media only screen and (min-device-width: 280px) and (max-device-width: 480px) {
+@media (min-width: 320px) and (max-width: 960px) {
   .scorePageMenuButton {
     position: relative;
     align-self: center;

diff --git a/src/views/ScorePage/ScorePage.js b/src/views/ScorePage/ScorePage.js
@@ -70,7 +70,7 @@ function renderNicknameForm() {
   nicknameFormContainer.setAttribute('id', 'nicknameFormDiv');
   const input = document.createElement('input');
   input.setAttribute('id', 'nicknamename');
-  input.setAttribute('placeholder', 'Enter Nicknamename');
+  input.setAttribute('placeholder', 'Enter Nickname');
   input.setAttribute('type', 'text');
   input.setAttribute('style', 'text-transform: uppercase');
   input.addEventListener('keyup', () => {