From 2a5e19a7624b7a1245c5da96c87af63ca9c964c1 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 18 Sep 2015 21:08:01 -0400
Subject: [PATCH] (css) Improve Calendar views

---
 .../Scheduler/sgCalendarDayBlock.directive.js |  6 ++++
 .../sgCalendarMonthEvent.directive.js         |  6 ++--
 .../scss/views/SchedulerUI.scss               | 33 ++++++++++++++-----
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
index 204a64631..8f976d43b 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
@@ -62,6 +62,12 @@
           right -= 5;
       }
 
+      // Add some padding (2%)
+      if (left === 0)
+        left = 2;
+      if (right === 0)
+        right = 2;
+
       // Set position
       iElement.css('left', left + '%');
       iElement.css('right', right + '%');
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js
index d799a8509..54f25045c 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js
@@ -28,9 +28,9 @@
         '  <span ng-if="!block.component.c_isallday">{{ block.starthour }} - </span>',
         '  {{ block.component.c_title }}',
         '  <span class="icons">',
-        '    <i ng-if="block.component.c_nextalarm" class="md-icon-alarm"></i>',
-        '    <i ng-if="block.component.c_classification == 1" class="md-icon-visibility-off"></i>',
-        '    <i ng-if="block.component.c_classification == 2" class="md-icon-vpn-key"></i>',
+        '    <md-icon ng-if="block.component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
+        '    <md-icon ng-if="block.component.c_classification == 1" class="material-icons icon-visibility-off"></md-icon>',
+        '    <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
         '  </span>',
         '  <div class="leftDragGrip"></div>',
         '  <div class="rightDragGrip"></div>',
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index 46579d467..367305f97 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -13,6 +13,10 @@ $hours_margin: 50px;
   }
 }
 
+.allDays {
+  border-bottom: 1px solid sg-color($sogoPaper, 300);
+}
+
 .days {
   display: flex;
   flex-direction: row;
@@ -68,6 +72,20 @@ $hours_margin: 50px;
   }
 }
 
+.sg-event {
+  font-size: $sg-font-size-2;
+  &, md-icon {
+    color: #fff;
+  }
+  .material-icons {
+    font-size: $sg-font-size-2;
+  }
+  .allDays & {
+    margin: 2%; // See sgCalendarDayBlock.directive.js
+    line-height: initial;
+  }
+}
+
 .daysView {
   bottom: 0;
   overflow-x: hidden;
@@ -77,11 +95,11 @@ $hours_margin: 50px;
     position: relative;
   }
   .sg-event {
-    border-radius: 10px;
-    margin-right: 1px;
+    border-radius: 3px;
     position: absolute;
-    left: 0%;
-    right: 0%;
+    left: 0;
+    right: 0;
+    opacity: 0.9; // When events from a same calendar overlap, it creates a border to help distinguish the events
     overflow: hidden;
     $i: 0;
     @while $i < 96 { // number of 15-minutes blocks in a day
@@ -107,13 +125,12 @@ $hours_margin: 50px;
   }
   .sg-event {
     border-radius: 1px;
-    font-size: $sg-font-size-2;
     overflow: hidden;
     padding: 2px;
     margin-bottom: 1px;
     text-overflow: ellipsis;
     white-space: nowrap;
-    span {
+    span { // hours
       font-weight: $sg-font-light;
     }
   }
@@ -131,8 +148,8 @@ $hours_margin: 50px;
 .gradient, .text {
   position: absolute;
   top: 1px;
-  left: 1px;
-  right: 1px;
+  left: 4px;
+  right: 2px;
   bottom: 1px;
   overflow: hidden;
   .allDays & {