Added instructor partial and messed with front end

schedules/app/assets/javascripts/search.js

@@ -35,11 +35,12 @@ const removeFromSchedule = section => {
  * Toggles the display of the schedule
  */
 const toggleSections = course => {
-    const sections = course.querySelector('#sections');
-    if (sections.style.display === 'block') {
-        course.querySelector('#sections').style.display = 'none';
+    const sections = course.querySelector('.sections');
+    console.log(sections);
+    if (sections.style.display === 'flex') {
+        sections.style.display = 'none';
     } else {
-        course.querySelector('#sections').style.display = 'block';
+        sections.style.display = 'flex';
     }
 };
 

schedules/app/assets/stylesheets/application.scss

@@ -27,6 +27,33 @@ body {
     
     box-shadow: 0 0 5px rgba(0,0,0,0.2);
     transition: 0.3s;
+    
+    ul.attr-list {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      
+      li {
+        &:nth-child(odd) {
+          float: left;
+          clear: left;
+        }
+        
+        &:nth-child(even) {
+          float: right;
+          clear: right;
+        }
+      }
+    }
+    
+    .card-header {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .card-body {
+      
+    }
 }
 
 /* On mouse-over, add a deeper shadow */

schedules/app/helpers/search_helper.rb

@@ -29,7 +29,9 @@ module SearchHelper
     end
     
     def self.fetch_instructors(query_data)
-      Instructor.from_name(Instructor.select("instructors.*"), query_data.search_string)
+      Instructor.from_name(Instructor.select("instructors.*, COUNT(course_sections.id) AS section_count"), query_data.search_string)
+                .left_outer_joins(:course_sections)
+                .group("instructors.id")
     end
     
     def self.fetch_courses(query_data)

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

 <% expanded = false unless defined? expanded %>
 
 <div class="card" id="course-<%= course.id %>" onclick="toggleSections(this)">
+  <div class="card-header">
+    <h3><%= "#{course.subject} #{course.course_number}" %></h3>
+    <h5><em><%= course.title %></em>. <%= course.credits %> credits.</h5>
+  </div>
   <div class="card-body">
     <div>
-      <h3 style="float: left"><%= "#{course.subject} #{course.course_number}" %></h3>
-      <h5 style="float: right"><em><%= course.title %></em>. <%= course.credits %> credits.</h5>
+      <ul class="attr-list">
+        <li><i class="fa fa-book"></i></li>
+      </ul>
     </div>
-
-    <div style="clear: both"> </div>
-
-    <p class="description"><%= course.description %></p>
+    <p class="description"><%= course.description %>...</p>
 
     <% unless course.prereqs.nil? || course.prereqs.empty? %>
-	<% first, rest = course.prereqs.split(':') %>
-	<% prereqs, note = rest.split('.') %>
-	<p><strong><%= first %>:</strong> <%= prereqs %> <sub><%= note %></sub></p>
+    	<% first, rest = course.prereqs.split(':') %>
+    	<% prereqs, note = rest.split('.') %>
+    	<p><strong><%= first %>:</strong> <%= prereqs %> <sub><%= note %></sub></p>
     <% 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 style="margin-bottom:-4px; font-size: 10px;">Expand</p>
+  	  <i class="fas fa-chevron-down"></i>
     </div>
-
+  
     <!-- List of Course Sections -->
-    <ul class="list-group list-group-flush" id="sections" style="display: <%= expanded ? "block" : "none" %>">
-	<% if defined?(@instructor) %>
-	    <%= render partial: 'shared/section', collection: course.course_sections.where(instructor: @instructor), locals: { in_cart: false } %>
-	<% else %>
-	    <%= render partial: 'shared/section', collection: course.course_sections, locals: { in_cart: false } %>
-	<% end %>
-    </ul>
+    <div class="list-group list-group-flush sections" style="display: <%= expanded ? "flex" : "none" %>">
+	    <% if defined?(@instructor) %>
+        <%= render partial: 'shared/section', collection: course.course_sections.where(instructor: @instructor), locals: { in_cart: false } %>
+	    <% else %>
+	      <%= render partial: 'shared/section', collection: course.course_sections, locals: { in_cart: false } %>
+	    <% end %>
+    </div>
   </div>
 </div>

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

+<div class="card">
+  <div class="card-body">
+    <h3><%= "#{instructor.name}" %></h3>
+    <ul class="attr-list">
+      <li><i class="fa fa-user"></i> Instructor</li>
+      <li><i class="fa fa-bars"></i> <%= "#{instructor.section_count}" %> sections</li>
+    </ul>
+  </div>
+</div>
\ No newline at end of file

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

 <% if in_cart %>
-    <li id="section-<%= section.crn %>"
-	class="list-group-item schedule-section-card"
-	data-crn="<%= section.crn %>"
-	onclick="removeFromSchedule(this)"
-    >
-	<span style="float:left"><b class="subj"><%= "#{section.name}" %></b>:  <%= section.title %></span>
-	<span style="float:right"><i class="fas fa-map-marker-alt"></i> <%= section.location %></span>
-	<div style="clear: both"></div>
-	<span style="float:left"><i class="fas fa-chalkboard-teacher"></i> <%= link_to section.instructor.name, instructor_path(section.instructor) %> </span>
-	<span style="float:right"><i class="fas fa-clock"></i> <%= "#{section.days}, #{section.start_time}-#{section.end_time}" %></span>
-	<div style="clear: both"></div>
-    </li>
+    <div id="section-<%= section.crn %>"
+	      class="list-group-item schedule-section-card"
+	      data-crn="<%= section.crn %>"
+	      onclick="removeFromSchedule(this)">
+    	<ul class="attr-list">
+      	<li><b class="subj"><%= "#{section.name}" %></b>:  <%= section.title %></li>
+      	<li><i class="fas fa-map-marker-alt"></i> <%= section.location %></li>
+      	<li><i class="fas fa-chalkboard-teacher"></i> <%= link_to section.instructor.name, instructor_path(section.instructor) %> </li>
+      	<li><i class="fas fa-clock"></i> <%= "#{section.days}, #{section.start_time}-#{section.end_time}" %></li>
+      </ul>
+    </a>
+  </div>
 
 <% else %>
-    <li id="section-<%= section.crn %>"
-	class="list-group-item section-item <%= "selected" if @cart.include? section %>"
-	data-crn="<%= section.crn %>"
-	onclick="addOrRemoveFromSchedule(event, this)"
-    >
-	<span style="float:left"><b class="subj"><%= "#{section.name}" %></b>:  <%= section.title %></span>
-	<span style="float:right"><i class="fas fa-map-marker-alt"></i> <%= section.location %></span>
-	<div style="clear: both"></div>
-	<span style="float:left"><i class="fas fa-chalkboard-teacher"></i> <%= link_to section.instructor.name, instructor_path(section.instructor) %></span>
-	<span style="float:right"><i class="fas fa-clock"></i> <%= "#{section.days}, #{section.start_time}-#{section.end_time}" %></span>
-	<div style="clear: both"></div>
-    </li>
+    <div id="section-<%= section.crn %>"
+	      class="list-group-item section-item <%= "selected" if @cart.include? section %>"
+	      data-crn="<%= section.crn %>"
+	      onclick="addOrRemoveFromSchedule(event, this)">
+	  <ul class="attr-list">
+    	<li><b class="subj"><%= "#{section.name}" %></b>:  <%= section.title %></li>
+    	<li><i class="fas fa-map-marker-alt"></i> <%= section.location %></li>
+    	<li><i class="fas fa-chalkboard-teacher"></i> <%= link_to section.instructor.name, instructor_path(section.instructor) %> </li>
+    	<li><i class="fas fa-clock"></i> <%= "#{section.days}, #{section.start_time}-#{section.end_time}" %></li>
+    </ul>
+  </div>
 <% end  %>