Visual cues improvements

app/assets/stylesheets/_variables.scss

@@ -12,4 +12,5 @@ $autolab-green: #3a862d;
 $autolab-light-green: #ebffd2;
 $autolab-white: #fff;
 $autolab-selected-gray: #f5f5f5;
-$autolab-border-gray: #ddd;
+$autolab-border-gray: #f4f1f1;
+$autolab-gray-text: #676464;

app/assets/stylesheets/assessment_date.scss

@@ -0,0 +1,16 @@
+@import 'variables';
+
+.date .collection-item {
+  padding-left: 24px !important;
+  padding-right: 24px !important;
+}
+
+.date .collection-item p {
+  line-height: 1rem;
+}
+
+.date p {
+  margin: 0;
+  font-size: 0.85rem;
+  color: $autolab-gray-text;
+}

app/assets/stylesheets/assessments.scss

@@ -10,17 +10,12 @@
   margin-bottom: 0 !important;
 }
 
-.date .collection-item {
-  padding-left: 24px !important;
-  padding-right: 24px !important;
+.hover p {
+  display: none;
 }
 
-.date .collection-item p {
-  line-height: 1rem;
-}
-
-.date p {
-  margin: 0;
-  font-size: 0.85rem;
-  color: #676464;
+.collection-item:hover {
+  .hover {
+    display: block;
+  }
 }

app/controllers/users_controller.rb

@@ -37,6 +37,8 @@ def show
       redirect_to(users_path) && return
     end
 
+    @hover_assessment_date = user.hover_assessment_date
+
     if current_user.administrator?
       # if current user is admin, show whatever he requests
       @user = user
@@ -372,6 +374,19 @@ def update_password_for_user
     end
   end
 
+  action_auth_level :update_display_settings, :student
+  def update_display_settings
+    @user = current_user
+    return if params[:user].nil? || params[:user].is_a?(String) || @user.nil?
+
+    if @user.update(hover_assessment_date: params[:user][:hover_assessment_date])
+      flash[:success] = "Successfully updated display settings"
+      (redirect_to user_path(id: @user.id)) && return
+    else
+      flash[:error] = @user.errors[:hover_assessment_date][0].to_s
+    end
+  end
+
 private
 
   def new_user_params

app/views/assessments/_assessment_date.html.erb

@@ -0,0 +1,5 @@
+<% hoverable = hover %>
+<p class="date <%= hoverable %>">
+  <b>Start:</b>&ensp;<%= assessment.date_to_s(assessment.start_at) %>&ensp;|
+  &ensp;<b>Due:</b>&ensp;<%= assessment.date_to_s(assessment.due_at) %>
+</p>

app/views/assessments/index.html.erb

@@ -7,6 +7,29 @@
 <% content_for :javascripts do %>
   <%= external_javascript_include_tag "clipboardjs" %>
   <script>
+    /* Calculates where to insert clearfix depending on window size */
+    function addClearFix() {
+      let num_columns;
+      const cards = document.querySelectorAll('.assessments');
+      if (window.innerWidth >= 1200) {
+        num_columns = 3;
+      } else if (window.innerWidth >= 992) {
+          num_columns = 2;
+      } else {
+          num_columns = 1;
+      }
+      const clearfixDiv = document.createElement('div');
+      clearfixDiv.className = 'clearfix hide-on-small-only'
+
+      for (let i = 0; i < cards.length; i++) {
+          if (i % num_columns === 0) {
+              cards[i].parentNode.insertBefore(clearfixDiv.cloneNode(true), cards[i]);
+          }
+      }
+    }
+
+    addClearFix();
+
     jQuery(function() {
       /* a way to mimic nested anchor tags */
       $('a.collection-item span.new.badge').each(function(idx, obj) {
@@ -53,6 +76,7 @@
     }
   </style>
   <%= stylesheet_link_tag "assessments" %>
+  <%= stylesheet_link_tag "assessment_date" %>
 <% end %>
 
 <%= render partial: "announcements/announcements_list",
@@ -117,23 +141,22 @@
     <h3 class="section-title"><span class="white">Assessments</span></h3>
 
     <div class="row">
-      <% @course.assessment_categories.each_with_index do |cat, idx| %>
-        <% if idx % 3 == 0 %>
-          <div class="clearfix hide-on-small-only"></div>
-        <% end %>
+      <% @course.assessment_categories.each do |cat| %>
         <% asmts = @course.assessments_with_category(cat, @cud.student?) %>
         <% if asmts.any? %>
-          <div class="col s12 l6 xl4">
+          <div class="col s12 l6 xl4 assessments">
             <div class="card hoverable date">
               <div class="card-content red darken-3">
                 <span class="card-title white-text"><%= cat %></span>
               </div>
 
               <div class="collection red darken-4 date">
                 <% asmts.each do |asmt| %>
+                  <% hoverable = @cud.user.hover_assessment_date ? 'hover' : '' %>
+                  <% asmt_class = "collection-item grey-text text-darken-4 date #{hoverable}" %>
                   <%= link_to course_assessment_path(@course, asmt),
-                              class: "collection-item grey-text text-darken-4 date" do %>
-                    <b><%= asmt.display_name %></b>
+                              class: asmt_class do %>
+                    <%= asmt.display_name %>
                     <% if !asmt.released? %>
                       <% if @cud.instructor? %>
                         <span class="new badge blue darken-4" data-badge-caption="unreleased" data-url="<%= edit_course_assessment_path(@course, asmt) %>/handin"></span>
@@ -142,8 +165,8 @@
                         <span class="new badge blue darken-4" data-badge-caption="unreleased"></span>
                       <% end %>
                     <% end %>
-                    <p class="date"><b>Start:</b>&ensp;<%= asmt.date_to_s(asmt.start_at) %>&ensp;|
-                      &ensp;<b>Due:</b>&ensp;<%= asmt.date_to_s(asmt.due_at) %></p>
+                    <% hoverable = @cud.user.hover_assessment_date ? 'hover' : '' %>
+                    <%= render partial: 'assessment_date', locals: { assessment: asmt, hover: hoverable } %>
                   <% end %>
                 <% end %>
               </div>
@@ -171,13 +194,10 @@
     <% end %>
     <div class="row">
       <% attachment_categories = @course_attachments.distinct.pluck(:category_name).sort %>
-      <% attachment_categories.each_with_index do |cat, idx| %>
-        <% if idx % 3 == 0 %>
-          <div class="clearfix hide-on-small-only"></div>
-        <% end %>
+      <% attachment_categories.each_with_index do |cat| %>
         <% attachments = @course_attachments.from_category(cat).ordered %>
         <% if attachments.any? %>
-          <div class="col s12 m4">
+          <div class="col s12 m4 attachments">
             <div class="card hoverable">
               <div class="card-content red darken-3">
                 <span class="card-title white-text"><%= cat %></span>

app/views/courses/index.html.erb

@@ -1,3 +1,7 @@
+<% content_for :stylesheets do %>
+  <%= stylesheet_link_tag "assessment_date" %>
+<% end %>
+
 <h2>Courses</h2>
 
 <% @listing.each do |category, list| %>
@@ -26,9 +30,12 @@
             <% end %>
 
             <% if category != :completed %>
-              <div class="collection red darken-3">
+              <div class="collection red darken-3 date">
                 <% course.current_assessments.ordered.each do |asmt| %>
-                  <%= link_to asmt.display_name, course_assessment_path(course, asmt), class: "collection-item grey-text text-darken-4" %>
+                  <%= link_to course_assessment_path(course, asmt), class: "collection-item grey-text text-darken-4 date" do %>
+                  <%= asmt.display_name %>
+                  <%= render partial: 'assessments/assessment_date', locals: { assessment: asmt, hover: '' } %>
+                  <% end %>
                 <% end %>
               </div>
             <% end %>

app/views/users/show.html.erb

@@ -89,4 +89,19 @@
       Managed Authorized Clients
     </span>
   <% end %>
+  <h4>Display Settings</h4>
+  <%= form_for @user, url: update_display_settings_user_path(@user) do |f| %>
+    <ul class="gray-box">
+      <li>
+        Hover to show assessment dates on course page
+        <div class="switch" style="float: right;">
+          <label>
+            <%= f.check_box :hover_assessment_date, default: false %>
+            <span class="lever" style="vertical-align: center; margin-bottom:0.5rem;"></span>
+          </label>
+        </div><br>
+      </li>
+    </ul>
+    <%= f.submit 'Save', { class: "btn primary" } %>
+  <% end %>
 <% end %>

config/routes.rb

@@ -82,6 +82,7 @@
     get "github_oauth_callback", on: :collection
     match "update_password_for_user", on: :member, via: [:get, :put]
     post "change_password_for_user", on: :member
+    patch "update_display_settings", on: :member
   end
 
   resources :courses, param: :name do

db/migrate/20240226083719_add_hover_assessment_date_to_users.rb

@@ -0,0 +1,5 @@
+class AddHoverAssessmentDateToUsers < ActiveRecord::Migration[6.1]
+  def change
+    add_column :users, :hover_assessment_date, :boolean, default: false, null: false
+  end
+end

db/schema.rb

@@ -390,6 +390,7 @@
     t.string "school"
     t.string "major"
     t.string "year"
+    t.boolean "hover_assessment_date", default: false, null: false
     t.index ["confirmation_token"], name: "index_users_on_confirmation_token", unique: true
     t.index ["email"], name: "index_users_on_email", unique: true
     t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true