Improve display of overlapping events

Categories were hidden because of overlapping boxes.

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

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 + '%');

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;
     }