responsive

-> make responsive for mobile devices
aizubair21 · Dec 16, 2023 · 5d42ff3 · 5d42ff3
1 parent ce9d107
commit 5d42ff3
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 13 deletions.
diff --git a/function.js → assets/function.js b/function.js → assets/function.js
@@ -15,6 +15,7 @@ leftTabNav[4].classList.add('tab_item_active')
 leftTabNav.forEach((lnav, lindex) => {
     // console.log(lindex);
     lnav.addEventListener('click', () => {
+
         leftTabNav.forEach((ln, li) => {
             ln.classList.remove('tab_item_active');
             leftTabContent[li].style.display = 'none';
@@ -27,7 +28,7 @@ leftTabNav.forEach((lnav, lindex) => {
 
 //close and open left aside 
 function closeAside() {
-    console.log("function triggered !");
+    // console.log("function triggered !");
     if (asideLeft.classList.contains('aside_left_hide')) {
         asideLeft.classList.remove('aside_left_hide');
         asideLeft.style.marginLeft = 0 + '%';

diff --git a/mcq.css → assets/mcq.css b/mcq.css → assets/mcq.css
@@ -771,7 +771,7 @@ body {
 
         .footer_body {
             /* width: 100%; */
-            padding: 0px 10px;
+            /* padding: 0px 10px; */
             background-color: #fff;
             border-radius: 8px;
             display: inline-flex;
@@ -1019,8 +1019,6 @@ body {
         }
     }
 
-
-
     .exam_layout_1 {
         display: flex;
         align-items: start;
@@ -1043,6 +1041,8 @@ body {
             /* margin-left: 20px; */
             /* overflow-y: scroll; */
             align-self: flex-start;
+            height: 400px;
+            overflow-y: scroll;
         }
 
     }
@@ -1067,7 +1067,7 @@ body {
             overflow-y: scroll;
         }
 
-       
+
     }
 
 

diff --git a/mcq.js → assets/mcq.js b/mcq.js → assets/mcq.js
@@ -240,7 +240,7 @@ function generateExam() {
     // }
 
     const questionDisplay = document.getElementsByClassName("qiz_body")[0];
-    console.log("ci : " + typeof currentQuestionIndex + " qi : " + typeof questionLimitation);
+    // console.log("ci : " + typeof currentQuestionIndex + " qi : " + typeof questionLimitation);
 
     if (parseInt(currentQuestionIndex) < parseInt(questionLimitation)) {
 
@@ -290,7 +290,7 @@ function generateExam() {
             document.getElementsByClassName("form_wrapper")[0].classList.add('form_active');
         }, 100);
     } else {
-        console.log(' from create exam else block');
+        // console.log(' from create exam else block');
         submitExam();
     }
 
@@ -553,11 +553,23 @@ function getRandomNumberBetweenMinAndMaxValue(min, max) {
 }
 
 setInterval(() => {
-    if (window.innerWidth > 1300) {
+    if (window.innerWidth < 1300) {
+        asideLeft.classList.add('aside_left_hide');
+        asideLeft.style.marginLeft = -100 + "%";
+        asideLeft.style.transition = "all linear .3s";
+    } else {
+
+        asideLeft.classList.remove('aside_left_hide');
+        asideLeft.style.marginLeft = 0 + '%';
+        asideLeft.style.transition = "all linear .3s";
+    }
+    if (window.innerWidth > 768) {
         document.getElementsByClassName('exam_layout')[0].classList.add('exam_layout_1');
         document.getElementsByClassName('exam_layout')[0].classList.remove('exam_layout_2');
+        document.querySelector("#aside_left").classList.remove('aside_left_hide');
     } else {
         document.getElementsByClassName('exam_layout')[0].classList.remove('exam_layout_1');
         document.getElementsByClassName('exam_layout')[0].classList.add('exam_layout_2');
+        document.querySelector("#aside_left").classList.add('aside_left_hide');
     }
 }, 100);
diff --git a/responsive.css → assets/responsive.css b/responsive.css → assets/responsive.css
diff --git a/index.html b/index.html
@@ -7,8 +7,8 @@
     <title>MCQ - a minimal mcq examination system with vanila js</title>
     <!-- include fontawosome cdn from cdnjs  -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
-    <link rel="stylesheet" href="mcq.css">
-    <link rel="stylesheet" href="responsive.css">
+    <link rel="stylesheet" href="assets/mcq.css">
+    <link rel="stylesheet" href="assets/responsive.css">
 </head>
 
 <body>
@@ -328,7 +328,7 @@ <h2 class="h2">
             </div>
         </div>
 
-        <div id="setup_exam" class="setup_exam_active">
+        <div id="setup_exam" class="setup_exam_activ">
 
             <div class="ex_wrapper">
                 <div class="sx_header">
@@ -415,8 +415,9 @@ <h4 class="h4">Default View </h4>
 
             <!-- setup exam end  -->
         </div>
-        <script src="function.js"></script>
-        <script src="mcq.js"></script>
+
+        <script src="assets/function.js"></script>
+        <script src="assets/mcq.js"></script>
 </body>
 
 </html>