Include styles for small screens

akshay-rajan · akshay-rajan · commit cd57f80874e0 · 2024-11-23T22:27:09.000+05:30
diff --git a/learn/templates/learn/kmeans.html b/learn/templates/learn/kmeans.html
@@ -84,7 +84,7 @@ <h2 class="chapter-subheading">Choosing the Number of Clusters (\( K \))</h2>
                 </li>
             </ul>
         </div>
-        <div class="img-div">
+        <div class="img-div no-of-clusters">
           <img src="{% static 'learn/img/elbow_method_kmeans.png' %}" alt="Elbow Method" style="width:300px;">
           <span class="caption">Elbow Method for Choosing \( K \)</span>
         </div>
diff --git a/learn/templates/learn/layout.html b/learn/templates/learn/layout.html
@@ -1,4 +1,4 @@
-{% load static %}
+  {% load static %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -58,7 +58,11 @@ <h1 class="display-4"><img src="{% static 'main/img/es_logo_transparent.png' %}"
   </nav>
 
   <div class="learn-container d-flex">
-    <div class="left chapters">
+    <div class="left chapters open">
+      <div class="chapter-links-header">
+        <button class="btn btn-sm toggle-chapter-links" id="chapter-link-close" onClick="toggleChapterLinks()">&lt;</button>
+        <button class="btn btn-sm d-none toggle-chapter-links" id="chapter-link-open" onClick="toggleChapterLinks()">&gt;</button>
+      </div>
       <div class="links">
         {% for chapter in chapters %}
           <a href="{% url 'chapter' chapter %}" class="chapter-link-a"><div class="chapter-link">{{ chapter.title | title }}</div></a>
@@ -155,6 +159,14 @@ <h5>Preprocessing</h5>
     });
     // Syntax highlighting
     Prism.highlightAll();
+    // Toggle chapter links
+    function toggleChapterLinks() {
+      const chapters = document.querySelector('.chapters .links');
+      chapters.classList.toggle('d-none');
+      document.querySelector('.chapters').classList.toggle('open');
+      document.getElementById('chapter-link-close').classList.toggle('d-none');
+      document.getElementById('chapter-link-open').classList.toggle('d-none');
+    }
   </script>    
   {% block script %}{% endblock %}
 </body>
diff --git a/main/static/learn/css/style.css b/main/static/learn/css/style.css
@@ -122,3 +122,94 @@ table.confusion-matrix td.correct {
 table.confusion-matrix td.incorrect {
   background-color: rgba(255, 0, 0, 0.1);
 }
+
+.chapter-links-header {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  .learn-content {
+    min-width: 80vw;
+    margin-left: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  .chapters {
+    position: absolute;
+    z-index: 2;
+    margin-top: 0px;
+    min-width: 10vw!important;
+  }
+  .chapters.open {
+    background-color: aliceblue;
+  }
+  .chapter-link {
+    padding: 5px;
+    padding-left: 10px;
+  }
+  .chapter-content {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  .chapter-title {
+    font-size: 2em;
+  }
+  .chapter-subheading {
+    font-size: 1.2em;
+  }
+  .content-link {
+    min-width: 5vw;
+  }
+  .content-link button {
+    width: 100%;
+  }
+  .img-div {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  .img-div .caption {
+    font-size: 0.6em;
+  }
+  .hline {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  .chapter-content span.dark {
+    font-weight: 400;
+  }
+  table.confusion-matrix {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  table.confusion-matrix th {
+    padding: 5px;
+  }
+  table.confusion-matrix td {
+    padding: 5px;
+  }
+  .chapter-links-header {
+    display: flex;
+    justify-content: end;
+    margin: 2px;
+    padding: 5px;
+  }
+  .toggle-chapter-links {
+    position: sticky;
+    top: 0;
+    right: 0;
+    border: 1px solid var(--secondary-color)!important;
+    border-radius: 5px!important;
+    width: 30px!important;
+    height: 30px!important;
+    color: var(--secondary-color)!important;
+  }
+  #chapter-link-open {
+    opacity: 0.5;
+    position: sticky!important;
+    top: 0;
+    right: 0;
+  }
+  .img-div.no-of-clusters {
+    display: none;
+  }
+}
