chevron changes direction on expand

schedules/app/assets/javascripts/search.js

 // Place all the behaviors and hooks related to the matching controller here.
 // All this logic will automatically be available in application.js.
 
-const sectionWithCrn = crn => document.getElementById('search-list').querySelector(`[data-crn="${crn}"]`);
-
 /**
  * Either adds or removes a section from the cart depending on
  * if it is currently in the cart.
@@ -24,11 +22,17 @@ const addOrRemoveFromCart = async (event, sectionNode) => {
  */
 const toggleSections = course => {
     const sections = course.querySelector('.sections');
+    const chev = $(course.querySelector('#course-chevron'));
+    const label = course.querySelector('#chevron-label');
 
     if (sections.style.display === 'flex') {
         sections.style.display = 'none';
+        chev.addClass('fa-chevron-down').removeClass('fa-chevron-up');
+        label.innerText = 'Expand';
     } else {
         sections.style.display = 'flex';
+        chev.addClass('fa-chevron-up').removeClass('fa-chevron-down');
+        label.innerText = 'Minimize';
     }
 };
 

schedules/app/assets/stylesheets/search.scss

@@ -8,10 +8,11 @@
 }
 
 .section-item.selected {
+        transition: 0.15s;
     background-color: lightgreen;
 }
 
 .section-item.selected:hover {
     transition: 0.15s;
-    background-color: red;
+    background-color: rgba(255, 0, 0, 0.6);
 }

schedules/app/views/shared/_course.html.erb

@@ -24,8 +24,7 @@
 		<div class="icon">
 		    <i class="fa fa-bars"></i>
 		</div>
-		<!-- TODO: FIX THIS -->
-		<%#= "#{course.section_count}" %> <%= course.course_sections.count %> sections
+		 <%= course.course_sections.count %> sections
 	    </div>
 	</div>
 	<p class="description"><%= course.description %></p>
@@ -37,8 +36,8 @@
 	<% end %>
 	
 	<div class="d-block" style="text-align: center">
-  	    <p style="margin-bottom:-4px; font-size: 10px;">Expand</p>
-  	    <i class="fas fa-chevron-down"></i>
+  	    <p id="chevron-label" style="margin-bottom:-4px; font-size: 10px;">Expand</p>
+  	    <i id="course-chevron" class="fas fa-chevron-down"></i>
 	</div>
 	
 	<!-- List of Course Sections -->