(fix) calendar views now honor "breakpoints"

We also now use again the default top nav toolbar and we
hide the fab button on sm devices. This of course needs a bit
more work but we are getting there!

UI/Templates/SchedulerUI/UIxCalDayView.wox

@@ -18,28 +18,30 @@
         <li><var:string label:value="Copy event to my calendar"/></li>
         <li><var:string label:value="View Raw Source"/></li>
       </ul>
-    </div>-->
-    <div layout="row" layout-align="center">
-      <h5>
-        <md-button
-            class="sg-icon-button"
-            label:aria-label="Previous Day"
-            var:date="prevDayQueryParameters.day"
-            ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
-        <var:string value="currentDayName" />
-        <md-button
-            class="sg-icon-button"
-            label:aria-label="Next Day"
-            var:date="nextDayQueryParameters.day"
-            ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
-      </h5>
-    </div>
-    <div id="calendarContent">
-      <var:component
-          className="UIxCalDayTable"
-          startDate="startDate"
-          const:CSSClass="dayOverview"
-          const:numberOfDays="1"
-          const:currentView="dayview"/>
-    </div>
+      </div>-->
+    <md-content>
+      <div layout="row" layout-align="center">
+        <h5>
+          <md-button
+              class="sg-icon-button"
+              label:aria-label="Previous Day"
+              var:date="prevDayQueryParameters.day"
+              ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
+          <var:string value="currentDayName" />
+          <md-button
+              class="sg-icon-button"
+              label:aria-label="Next Day"
+              var:date="nextDayQueryParameters.day"
+              ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
+        </h5>
+      </div>
+      <div id="calendarContent">
+        <var:component
+            className="UIxCalDayTable"
+            startDate="startDate"
+            const:CSSClass="dayOverview"
+            const:numberOfDays="1"
+            const:currentView="dayview"/>
+      </div>
+    </md-content>
   </container>

UI/Templates/SchedulerUI/UIxCalMainView.wox

@@ -312,12 +312,12 @@
              ng-controller="CalendarListController as list">
       <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
         <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
-          <!-- <var:component className="UIxTopnavToolbarTemplate" /> -->
-          <div class="sg-toolbar-group-2">
+          <var:component className="UIxTopnavToolbarTemplate" />
+          <!-- <div class="sg-toolbar-group-2">
             <md-button class="sg-icon-button" label:aria-label="Search">
               <md-icon>search</md-icon>
             </md-button>
-          </div>
+          </div> -->
         </div><!-- .md-toolbar-tools -->
         <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
           <!-- sort/filter mode -->
@@ -582,12 +582,13 @@
             </md-tab>
           </md-tabs>
           <md-button class="md-fab md-fab-bottom-right"
+                     hide-sm="hide-sm"
                      label:aria-label="New Appointment"
                      ng-click="list.newComponent($event)">
             <md-icon>add</md-icon>
           </md-button>
         </md-content>
-        <md-content class="view-detail sg-padded" ui-view="calendarView"><!-- calendar view --></md-content>
+        <div id="detailView" class="view-detail" layout="column" ui-view="calendarView"><!-- calendar view --></div>
       </md-content>
     </section>
   </script>

UI/Templates/SchedulerUI/UIxCalMonthView.wox

@@ -21,21 +21,22 @@
       </ul>
     </div>
 
-    <div layout="row" layout-align="center">
-      <h5>
-        <md-button
-            class="sg-icon-button"
-            label:aria-label="Previous Month"
-            var:date="prevMonthQueryParameters.day"
-            ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
-        <var:string value="monthNameOfThisMonth" />
-        <md-button
-            class="sg-icon-button"
-            label:aria-label="Next Month"
-            var:date="nextMonthQueryParameters.day"
-            ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
-      </h5>
-    </div>
+    <md-content>
+      <div layout="row" layout-align="center">
+        <h5>
+          <md-button
+              class="sg-icon-button"
+              label:aria-label="Previous Month"
+              var:date="prevMonthQueryParameters.day"
+              ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
+          <var:string value="monthNameOfThisMonth" />
+          <md-button
+              class="sg-icon-button"
+              label:aria-label="Next Month"
+              var:date="nextMonthQueryParameters.day"
+              ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
+        </h5>
+      </div>
       <div class="monthView">
         <div layout="row" layout-align="center center">
           <var:foreach list="headerDaysToDisplay" item="currentTableDay">
@@ -66,4 +67,5 @@
           </var:foreach>
         </md-grid-list>
       </div>
+    </md-content>
   </container>

UI/Templates/SchedulerUI/UIxCalWeekView.wox

@@ -6,27 +6,29 @@
       xmlns:rsrc="OGo:url"
       xmlns:label="OGo:label">
 
-    <div layout="row" layout-align="center">
-      <h5>
-        <md-button
-            class="sg-icon-button"
-            label:aria-label="Previous Week"
-            var:date="prevWeekQueryParameters.day"
-            ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
-        <var:string value="currentWeekName" />
-        <md-button
-            class="sg-icon-button"
-            label:aria-label="Next Week"
-            var:date="nextWeekQueryParameters.day"
-            ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
-      </h5>
-    </div>
-    <div id="calendarContent">
-      <var:component
-          className="UIxCalDayTable"
-          startDate="startDate"
-          const:CSSClass="weekOverview"
-          const:numberOfDays="7"
-          const:currentView="weekview"/>
-    </div>
+    <md-content>
+      <div layout="row" layout-align="center">
+        <h5>
+          <md-button
+              class="sg-icon-button"
+              label:aria-label="Previous Week"
+              var:date="prevWeekQueryParameters.day"
+              ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
+          <var:string value="currentWeekName" />
+          <md-button
+              class="sg-icon-button"
+              label:aria-label="Next Week"
+              var:date="nextWeekQueryParameters.day"
+              ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
+        </h5>
+      </div>
+      <div id="calendarContent">
+        <var:component
+            className="UIxCalDayTable"
+            startDate="startDate"
+            const:CSSClass="weekOverview"
+            const:numberOfDays="7"
+            const:currentView="weekview"/>
+      </div>
+    </md-content>
   </container>