diff --git a/src/components/ScoreFilter/ScoreFilter.css b/src/components/ScoreFilter/ScoreFilter.css index c91ab19..2e191ae 100644 --- 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 index 8a23686..da1ffd1 100644 --- 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 index 62e4979..a62976c 100644 --- 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 index 37c6ef4..dcadfd9 100644 --- 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 index ffbe5bf..d48f38d 100644 --- 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 index a27f82b..27d5685 100644 --- 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', () => {