From 32fd61c8f487e42bd6b8dd5037fb53ef841577d0 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 6 Feb 2018 14:13:40 -0500
Subject: [PATCH] Improve display of overlapping events

Categories were hidden because of overlapping boxes.
---
 NEWS                                               |  1 +
 .../js/Scheduler/sgCalendarDayBlock.directive.js   | 14 +++-----------
 UI/WebServerResources/scss/views/SchedulerUI.scss  |  5 +++--
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/NEWS b/NEWS
index b644db821..5b89eec67 100644
--- a/NEWS
+++ b/NEWS
@@ -23,6 +23,7 @@ Enhancements
  - [web] lower constraints on dates range of auto-reply message (#4161)
  - [web] sort categories in event and task editors (#4349)
  - [web] show weekday in headers of day view
+ - [web] improve display of overlapping events with categories
  - [web] updated Angular Material to version 1.1.6
 
 Bug fixes
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
index c7cdb5a96..c90b17b1a 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
@@ -77,22 +77,14 @@
 
       if (!_.has(attrs, 'sgCalendarGhost')) {
 
-        // Compute overlapping (2%)
+        // Compute position
         pc = 100 / scope.block.siblings;
         left = scope.block.position * pc;
         right = 100 - (scope.block.position + 1) * pc;
-        if (pc < 100) {
-          if (left > 0)
-            left -= 2;
-          if (right > 0)
-            right -= 2;
-        }
 
-        // Add some padding (2%)
-        if (left === 0)
-          left = 2;
+        // Add right margin (10%) for easier creation of events by mouse dragging
         if (right === 0)
-          right = 2;
+          right = 10;
 
         // Set position
         iElement.css('left', left + '%');
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index f5e39fa33..88c5ef35f 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -285,13 +285,14 @@ $quarter_height: 10px;
 
   // The outer event container
   .sg-event {
-    font-size: $sg-font-size-2;
+    font-size: $sg-font-size-1;
     font-weight: $sg-font-medium;
     border-radius: $block_radius;
     //overflow: hidden;
     position: absolute;
     left: 0;
     right: 0;
+    margin-left: 1px;
     opacity: 0.9; // When events from a same calendar overlap, it creates a border to help distinguish the events
     outline: none;
     user-select: none;
@@ -299,7 +300,7 @@ $quarter_height: 10px;
     $i: 0;
     @while $i <= 96 { // number of 15-minutes blocks in a day
       &.starts#{$i} { top: $quarter_height * $i; }
-      &.lasts#{$i} { height: $quarter_height * $i; }
+      &.lasts#{$i} { height: $quarter_height * $i - 1; }
       $i: $i + 1;
     }