Assessment display changes (#2205)

* Display two cards per row max

* make category headers smaller

* change responsive screen in course index

Author: jlge

app/models/assessment.rb

@@ -461,7 +461,7 @@ def source_config_file_backup_path
   end
 
   def date_to_s(date)
-    date.strftime("%b %e at %l:%M%P")
+    date.strftime("%a, %b %e at %l:%M%P")
   end
 
   def load_dir_to_tar(dir_path, asmt_dir, tar, filters = [], export_dir = "")

app/views/assessments/index.html.erb

@@ -11,9 +11,7 @@
     function addClearFix() {
       let num_columns;
       const cards = document.querySelectorAll('.assessments');
-      if (window.innerWidth >= 1200) {
-        num_columns = 3;
-      } else if (window.innerWidth >= 992) {
+      if (window.innerWidth >= 992) {
           num_columns = 2;
       } else {
           num_columns = 1;
@@ -74,6 +72,10 @@
     .collection-item {
       overflow: auto;
     }
+
+    .card-content.category-card {
+        padding: 15px 24px;
+    }
   </style>
   <%= stylesheet_link_tag "assessments" %>
   <%= stylesheet_link_tag "assessment_date" %>
@@ -144,9 +146,9 @@
       <% @course.assessment_categories.each do |cat| %>
         <% asmts = @course.assessments_with_category(cat, @cud.student?) %>
         <% if asmts.any? %>
-          <div class="col s12 l6 xl4 assessments">
+          <div class="col s12 l6 assessments">
             <div class="card hoverable date">
-              <div class="card-content red darken-3">
+              <div class="category-card card-content red darken-3">
                 <span class="card-title white-text"><%= cat %></span>
               </div>
 

app/views/courses/index.html.erb

@@ -17,7 +17,7 @@
         <% course_cud = CourseUserDatum.find_cud_for_course(course, current_user.id) %>
         <% not_student = course_cud.has_auth_level? :course_assistant %>
 
-        <div class="col s12 m4">
+        <div class="col s12 l4">
           <div class="card hoverable">
             <%= link_to course_path(course), title: "Go to Course Page" do %>
               <div class="card-content red darken-4">