Review calendar views templates

Changed month view to a md-grid-list.
Added some colors.

UI/Templates/SchedulerUI/UIxCalDayTable.wox

@@ -6,7 +6,7 @@
   xmlns:const="http://www.skyrix.com/od/constant"
   xmlns:rsrc="OGo:url"
   xmlns:label="OGo:label">
-  <div id="calendarHeader" var:class="daysViewClasses">
+  <div var:class="daysViewClasses">
 
 <!-- MultiColumnView -->
     <!-- Display the name of the calendar -->
@@ -20,7 +20,7 @@
       </div>
       
       <!-- Display today abreviation and date -->
-      <div class="dayLabels">
+      <div class="days dayLabels">
         <var:foreach list="daysToDisplay" item="currentTableDay">
           <div var:class="dayClasses">
             <var:string value="labelForDate"/><br/>
@@ -42,7 +42,7 @@
 <!-- DayView or WeekView -->
     <var:if condition="isNotMultiColumnView">
       <!-- Display today abreviation and date -->
-      <div class="dayLabels">
+      <div class="days dayLabels">
         <var:foreach list="daysToDisplay" item="currentTableDay">
           <div var:class="dayClasses">
             <var:string value="labelForDate"/><br/>
@@ -62,7 +62,7 @@
   
   
   <!-- The hours cells -->
-  <div id="daysView" var:class="daysViewClasses">
+  <div var:class="daysViewClasses">
     <div class="hours">
       <var:foreach list="hoursToDisplay" item="currentTableHour">
         <div class="hour" var:id="currentHourId">

UI/Templates/SchedulerUI/UIxCalMonthView.wox

@@ -36,30 +36,32 @@
             ng-click="calendar.changeView($event)"><i class="md-icon-chevron-right"><!--icon--></i></md-button>
       </h5>
     </div>
-    <div id="calendarContent">
       <div class="monthView">
-        <div id="calendarHeader" layout="row" layout-align="center center">
-        <var:foreach list="headerDaysToDisplay" item="currentTableDay">
-          <div class="md-flex"><var:string value="labelForCurrentDayToDisplay"/></div>
-        </var:foreach>
-        </div>
-        <div id="monthDaysView">
-          <var:foreach list="weeksToDisplay" item="currentWeek">
-            <div layout="row">
-            <var:foreach list="currentWeek" item="currentTableDay">
-              <div class="md-flex"
-                    var:day="currentTableDay.shortDateString"
-                    var:day-number="currentDayNumber"
-                    var:id="currentDayId">
-                <div class="dayHeader"><var:string value="dayHeaderNumber"/></div>
-                <sg-calendar-month-day
-                    sg-blocks="calendar.blocks"
-                    var:sg-day="currentTableDay.shortDateString" />
-              </div>
-            </var:foreach>
-            </div>
+        <div layout="row" layout-align="center center">
+          <var:foreach list="headerDaysToDisplay" item="currentTableDay">
+            <div class="md-flex-fix dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
           </var:foreach>
         </div>
+        <md-grid-list
+            md-cols="7"
+            md-row-height="1:1">
+          <var:foreach list="weeksToDisplay" item="currentWeek">
+            <var:foreach list="currentWeek" item="currentTableDay">
+              <md-grid-tile
+                  md-rowspan="1"
+                  md-colspan="1"
+                  class="day"
+                  var:day="currentTableDay.shortDateString"
+                  var:day-number="currentDayNumber"
+                  var:id="currentDayId">
+                <div layout="column" layout-fill="true">
+                <div class="sg-calendar-tile-header"><var:string value="dayHeaderNumber"/></div>
+                <sg-calendar-month-day
+                    sg-blocks="calendar.blocks"
+                    var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day></div>
+              </md-grid-tile>
+            </var:foreach>
+          </var:foreach>
+        </md-grid-list>
       </div>
-    </div>
   </container>

UI/WebServerResources/scss/core/layout.scss

@@ -126,6 +126,10 @@ flex, hide, show, show-sm;
   flex: 1 1 auto;
 }
 
+.md-flex-fix {
+  flex: 1 1 0;
+}
+
 // Generate responsive columns
 // ----------------------------------------------------------------------------
 @mixin responsive-columns($breakpoint, $query) {

UI/WebServerResources/scss/views/SchedulerUI.scss

@@ -1,25 +1,46 @@
-#calendarHeader {
+$hours_margin: 50px;
+
+.dayLabels {
+    color: sg-color($sogoBlue, 700);
+    height: 35px;
+    left: 0;
+    overflow: hidden;
     position: relative;
+    .day {
+        height: 100%;
+        position: absolute;
+        text-align: center;
+    }
+}
+
+.days {
+    left: 0;
+    right: 0;
     top: 0;
-    height: 38px;
-    right: 0px;
-    .dayLabels {
-        height: 35px;
-        left: 0;
-        margin-left: 50px;
-        overflow: hidden;
-        position: relative;
-        .day {
-            height: 100%;
-            position: absolute;
-            text-align: center;
+    margin-left: $hours_margin;
+    position: relative;
+    .day {
+        border-left: 1px solid sg-color($sogoPaper, 300);
+        position: absolute;
+        .clickableHourCell {
+            height: 40px;
+            border-bottom: 1px solid sg-color($sogoPaper, 300);
         }
     }
 }
 
-.monthView, .daysViewFor7Days {
+.daysViewFor1Days {
     .day {
-        width: 14.2857%;
+        width: 100%;
+    }
+    .days {
+        margin-left: 0;
+    }
+}
+
+.daysViewFor7Days {
+    .day {
+        width: (100% / 7);
     }
     $i: 0;
     @while $i < 7 {
@@ -28,52 +49,40 @@
     }
 }
 
-.daysViewFor1Days {
-    .day {
-        width: 100%;
-    }
+.sg-calendar-tile-header {
+    color: sg-color($sogoPaper, 800);
+    font-size: $sg-font-size-2;
+    font-weight: $sg-font-light;
+    overflow: hidden;
+    padding: 2px;
 }
 
-#daysView {
+.daysView {
+    bottom: 0;
+    overflow-x: hidden;
+    overflow: auto;
     position: relative;
     top: 0;
-    bottom: 0;
-    overflow: auto;
-    overflow-x: hidden;
     .hours {
-        height: auto;
+        color: sg-color($sogoBlue, 700);
         display: inline-block;
-        position: relative;
         float: left;
-        top: 0;
+        font-weight: $sg-font-light;
+        height: auto;
         left: 0;
-        width: 50px;
+        position: relative;
+        top: 0;
+        width: $hours_margin;
         .hour {
-            border-bottom: 1px solid #ccc;
+            border-bottom: 1px solid sg-color($sogoPaper, 300);
             height: 40px;
             left: 0;
-            padding-right: 2px;
-            //padding-top: 2px;
+            padding: 2px;
             position: relative;
             right: 0;
             top: 0;
         }
     }
-    .days {
-        left: 0;
-        right: 0;
-        top: 0;
-        margin-left: 50px;
-        position: relative;
-        .day {
-            border-left: 1px solid #ccc;
-            position: absolute;
-            .clickableHourCell {
-                height: 40px;
-                border-bottom: 1px solid #ccc;
-            }
-        }
-    }
     .event {
         cursor: default;
         margin-right: 1px;
@@ -81,7 +90,7 @@
         left: 0%;
         right: 0%;
         $i: 0;
-        @while $i < 96 {
+        @while $i < 96 { // number of 15-minutes blocks in a day
             &.starts#{$i} { top: 10px * $i; }
             &.lasts#{$i} { height: 10px * $i; }
             $i: $i + 1;
@@ -100,13 +109,32 @@
     }
 }
 
+.monthView {
+    md-grid-tile {
+        border: 1px solid sg-color($sogoPaper, 300);
+        overflow: auto;
+    }
+    .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 {
+            font-weight: $sg-font-light;
+        }
+    }
+}
+
 .minutes15, .minutes30, .minutes45 {
     display: block;
     height: 25%;
 }
 
 .minutes30 {
-    border-bottom: 1px dotted #ccc;
+    border-bottom: 1px dotted sg-color($sogoPaper, 300);
 }
 
 .gradient, .text {