Merge pull request #1005 from thecourseforum/issue-991-icon-fixes

Issue 991 icon fixes

Author: barrettruth

tcf_website/static/icons/icons.css

@@ -182,6 +182,27 @@
   background-position: center;
 }
 
+.fa-chevron-up-white {
+  width: 1em;
+  height: 1em;
+  background-image: url("../icons/img/fa-chevron-up.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  filter: invert(1);
+}
+
+.fa-chevron-down-white {
+  width: 1em;
+  height: 1em;
+  background-image: url("../icons/img/fa-chevron-down.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  filter: invert(1);
+}
+
+
 .fa-thumbs-up {
   width: 1em;
   height: 1em;
@@ -294,3 +315,18 @@
   background-size: contain;
   background-position: center;
 }
+
+.fa-flask {
+  background-image: url("../icons/img/fa-flask.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
+.invert-to-light {
+  filter: invert(1);
+}
+
+.invert-to-dark {
+  filter: invert(0);
+}

tcf_website/static/icons/img/fa-flask.svg

@@ -32,3 +32,24 @@ <h2 class="font-weight-light mt-4">Browse by Department</h2>
         </div>
     </div>
 {% endblock %}
+
+{% block js %}
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        document.querySelectorAll(".card-header").forEach(header => {
+            header.addEventListener("click", function () {
+                let schoolId = this.id.replace("header-", "").trim(); // Extract school ID
+    
+                let icon = document.getElementById(`chevron-${schoolId}`); // Find the icon
+    
+                if (icon) {
+                    icon.classList.toggle("fa-chevron-down-white");
+                    icon.classList.toggle("fa-chevron-up-white");
+                } else {
+                    console.warn("Icon not found for school ID:", schoolId);
+                }
+            });
+        });
+    });    
+</script>
+{% endblock %}

tcf_website/templates/browse/browse.html

@@ -1,21 +1,22 @@
 <div class="school card mb-3">
     <div class="card-header pt-3" data-toggle="collapse"
-    data-target="#school-{{ school.id }}" aria-expanded="true">
+        data-target="#school-{{ school.id }}" aria-expanded="true"
+        id="header-{{ school.id }}">
         <div class="float-left">
-            <h3 class="card-title mb-0 alignleft">{{school.name}}</h3>
+            <h3 class="card-title mb-0 alignleft">{{ school.name }}</h3>
         </div>
         <div class="float-right">
-            <h3><i class="fa fa-chevron-down"></i></h3>
+            <i class="fa fa-chevron-down-white" id="chevron-{{ school.id }}"></i>
         </div>
         <div class="clearfix"></div>
     </div>
     <div class="school-body collapse show" id="school-{{ school.id }}">
         <ul class="department-list">
             {% for d in school.department_set.all|dictsort:"name" %}
                 <li>
-                    <a href="{% url 'department' dept_id=d.pk %}">{{d}}</a>
+                    <a href="{% url 'department' dept_id=d.pk %}">{{ d }}</a>
                 </li>
             {% endfor %}
         </ul>
     </div>
-</div>
+</div>

tcf_website/templates/browse/school.html

@@ -5,7 +5,6 @@
 
 {% block styles %}
     <link rel="stylesheet" href="{% static 'course/course_professor.css' %}"/>
-    <link rel="stylesheet" href="{% static 'icons/icons.css' %}"/>
 {% endblock %}
 
 {% block content %}
@@ -131,7 +130,7 @@ <h2 class="mr-md-3">{{ course.title }}</h2>
                         <div class="info-container">
                             <div class="info-row">
                                 <div class="info-title">
-                                    <i class="fas fa-book"></i>&nbsp;Reading
+                                    <i class="fa fa-book invert-to-dark"></i>&nbsp;Reading
                                 </div>
                                 <div class="info-bar">
                                     <div class="progress">
@@ -144,7 +143,7 @@ <h2 class="mr-md-3">{{ course.title }}</h2>
                             </div>
                             <div class="info-row">
                                 <div class="info-title">
-                                    <i class="fas fa-pencil-alt"></i>&nbsp;Writing
+                                    <i class="fa fa-pencil invert-to-dark"></i>&nbsp;Writing
                                 </div>
                                 <div class="info-bar">
                                     <div class="progress">
@@ -157,7 +156,7 @@ <h2 class="mr-md-3">{{ course.title }}</h2>
                             </div>
                             <div class="info-row">
                                 <div class="info-title">
-                                    <i class="fas fa-user-friends"></i>&nbsp;Groupwork
+                                    <i class="fa fa-user-friends"></i>&nbsp;Groupwork
                                 </div>
                                 <div class="info-bar">
                                     <div class="progress">
@@ -170,7 +169,7 @@ <h2 class="mr-md-3">{{ course.title }}</h2>
                             </div>
                             <div class="info-row">
                                 <div class="info-title">
-                                    <i class="fas fa-flask"></i>&nbsp;Other
+                                    <i class="fa fa-flask invert-to-dark"></i>&nbsp;Other
                                 </div>
                                 <div class="info-bar">
                                     <div class="progress">

tcf_website/templates/course/course_professor.html

@@ -349,6 +349,25 @@ <h5>Follow
         {% block js %}
         <!-- <script type="module" src="{% static 'landing/feedbackform.js' %}"></script> -->
         <script type="text/javascript">
+
+            document.addEventListener("DOMContentLoaded", function () {
+                document.querySelectorAll(".faqs-content h5").forEach(header => {
+                    header.addEventListener("click", function () {
+                        let icon = this.querySelector("i.fas"); // Find the <i> inside the h5
+            
+                        if (icon) {
+                            icon.classList.toggle("fa-chevron-down");
+                            icon.classList.toggle("fa-chevron-up");
+                        } else {
+                            console.warn("Chevron icon not found in FAQ header:", this);
+                        }
+                    });
+                });
+            
+                // Update copyright year at the bottom of landing page
+                $(".year").text(new Date().getFullYear());
+            });
+            
             // Update copyright year at the bottom of landing page
             $(".year").text(new Date().getFullYear());
         </script>

tcf_website/templates/landing/landing.html

@@ -167,6 +167,21 @@ <h3 class="mr-3">Departments</h3>
 
 {% block js %}
   <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        document.querySelectorAll(".hover-tcf-orange").forEach(header => {
+            header.addEventListener("click", function () {
+                let icon = this.querySelector("i.fas.fa-chevron-down, i.fas.fa-chevron-up");
+                console.log("Icon found:", icon);
+
+                if (icon) {
+                    icon.classList.toggle("fa-chevron-down");
+                    icon.classList.toggle("fa-chevron-up");
+                } else {
+                    console.warn("Icon not found.");
+                }
+            });
+        });
+    });
     // Search results should display some content at all times
     // Thus the current open accordion will not be able to close itself
     $('[data-toggle="collapse"]').on('click',function(e) {