improve responsiveness via CSS grid

ndsvw · Jan 2, 2020 · 0809692 · 0809692
1 parent 1cd40f8
commit 0809692
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -49,14 +49,14 @@ <h4>How it works:</h4>
     <div id="ask" style="min-height: 450px;">
       <div id="dateSpan" class="alert alert-primary font-weight-bold ml-4 mr-4" role="alert" style="display: inline-block"></div>
 
-      <div style="margin-bottom: 5rem;">
-        <button class="btn btn-outline-primary" id="btnMonday">Monday</button>
-        <button class="btn btn-outline-primary" id="btnTuesday">Tuesday</button>
-        <button class="btn btn-outline-primary" id="btnWednesday">Wednesday</button>
-        <button class="btn btn-outline-primary" id="btnThursday">Thursday</button>
-        <button class="btn btn-outline-primary" id="btnFriday">Friday</button>
-        <button class="btn btn-outline-primary" id="btnSaturday">Saturday</button>
-        <button class="btn btn-outline-primary" id="btnSunday">Sunday</button>
+      <div id="day-options-container" style="margin-bottom: 5rem;">
+        <button class="btn btn-outline-primary grid-item" id="btnMonday">Monday</button>
+        <button class="btn btn-outline-primary grid-item" id="btnTuesday">Tuesday</button>
+        <button class="btn btn-outline-primary grid-item" id="btnWednesday">Wednesday</button>
+        <button class="btn btn-outline-primary grid-item" id="btnThursday">Thursday</button>
+        <button class="btn btn-outline-primary grid-item" id="btnFriday">Friday</button>
+        <button class="btn btn-outline-primary grid-item" id="btnSaturday">Saturday</button>
+        <button class="btn btn-outline-primary grid-item" id="btnSunday">Sunday</button>
       </div>
 
       <div id="alertCorrect" class="alert alert-success ml-4 mr-4" role="alert" style="display: none">

diff --git a/index.js b/index.js
@@ -38,6 +38,7 @@ const alertCorrect = document.getElementById('alertCorrect');
 const alertWrong = document.getElementById('alertWrong');
 const dateSpan = document.getElementById('dateSpan');
 const nextButton = document.getElementById('next');
+const dayOptionsContainer = document.getElementById('day-options-container');
 
 const weekDayButtons = [
 	document.getElementById('btnSunday'),
@@ -59,6 +60,7 @@ const ask = (diff) => {
 const refresh = () => {
 	alertCorrect.style.display = 'none';
 	alertWrong.style.display = 'none';
+	dayOptionsContainer.classList.remove("result-alert-shown");
 	currentDate = getRandomDateByDifficulty();
 	dateSpan.innerHTML = dateToString(currentDate);
 };
@@ -80,6 +82,7 @@ const checkAnswer = (ans) => {
     Correct answer: ${ weekDayNames[currentDate.getDay()] }`;
 		alertWrong.style.display = 'block';
 	}
+	dayOptionsContainer.classList.add("result-alert-shown");
 };
 
 for (let i = 0; i < weekDayButtons.length; i++) {

diff --git a/style.css b/style.css
@@ -24,3 +24,31 @@ nav a {
 #tutorial {
   overflow-wrap: break-word;
 }
+
+#day-options-container {
+  display: grid;
+}
+
+.grid-item {
+  justify-self: stretch;
+}
+
+@media(min-width: 768px) {
+  #day-options-container {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    column-gap: 7px;
+  }
+
+}
+
+@media(max-width: 767px) {
+  #day-options-container {
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    row-gap: 7px;
+  }
+
+  #day-options-container.result-alert-shown {
+    background-color: black;
+    display: none;
+  }
+}