Update CSS and date

ui/app/ot/controller/otCalendarController.js

@@ -105,7 +105,7 @@ angular.module('bahmni.ot')
                     $scope.emptyNoteError = true;
                     return;
                 }
-                if($scope.isDayView){
+                if ($scope.isDayView) {
                     await surgicalAppointmentService.saveNoteForADay($scope.viewDate, $scope.otNotesField);
                 }
                 $state.go("otScheduling", {viewDate: $scope.viewDate}, {reload: true});

ui/app/ot/views/otCalendar.html

@@ -1,19 +1,25 @@
 <div on-Scroll class="calendar" ng-switch="providerToggle">
     <!-- Please dont remove or alter the below class name -->
-    <div class="calendar-location">
-        <p ng-switch-default bindonce="locations" class="heading-cell" ng-repeat="location in locations">
-            {{location.name}}
-        </p>
-        <p ng-switch-when="true" bindonce="surgeons" class="heading-cell" ng-repeat="surgeon in surgeons">
-            {{surgeon.person.display}}
-        </p>
+    <div class="calendar-location"><div class="heading-ot-block">
+        <p class="heading-ot">{{viewDate | bahmniDateTimeWithFormat: 'ddd'}}</p>
+        <p class="heading-ot heading-ot-date">{{viewDate | bahmniDateTimeWithFormat: 'DD'}}</p>
     </div>
-    <div class="notesTab"  ng-click="showNotesPopup(viewDate)" style="border: .5px solid lightgrey" ng-if="(!noteForTheDay)">
-    </div>
-    <div class="notesTab notes-text" ng-if="noteForTheDay" ng-click="showNotesPopupEdit(viewDate, 0, noteForTheDay)"
-         title="{{noteForTheDay}}">
-        {{noteForTheDay}}
+        <div class="notesTab"  ng-click="showNotesPopup(viewDate)" style="border: .5px solid lightgrey" ng-if="(!noteForTheDay)"></div>
+        <div class="notesTab notes-text" ng-if="noteForTheDay" ng-click="showNotesPopupEdit(viewDate, 0, noteForTheDay)"
+             title="{{noteForTheDay}}">
+            {{noteForTheDay}}
+        </div>
+        <hr/>
+        <div style="display: flex;">
+            <p ng-switch-default bindonce="locations" class="heading-cell" ng-repeat="location in locations">
+                {{location.name}}
+            </p>
+            <p ng-switch-when="true" bindonce="surgeons" class="heading-cell" ng-repeat="surgeon in surgeons">
+                {{surgeon.person.display}}
+            </p>
+        </div>
     </div>
+
     <div class="table-block">
         <!-- Please dont remove or alter the below class name -->
         <div class="calendar-time-container">

ui/app/ot/views/otWeeklyCalendar.html

@@ -1,7 +1,8 @@
 <div on-Scroll class="calendar">
     <div class="calendar-location">
         <div class="weekly-heading-cell" ng-repeat="index in [0, 1, 2, 3, 4, 5, 6]">
-            <p class="heading-ot-date">{{weekStartDate | addDays: index | bahmniDateTimeWithFormat: 'Do MMM, ddd'}}</p>
+            <p class="heading-ot">{{weekStartDate | addDays: index | bahmniDateTimeWithFormat: 'ddd'}}</p>
+            <p class="heading-ot heading-ot-date">{{weekStartDate | addDays: index | bahmniDateTimeWithFormat: 'DD'}}</p>
             <div class="note" ng-if="(!getNotesForDay(weekStartDate, index))" ng-style="styleForBlock(index)" ng-click="showNotesPopup(weekStartDate, index)"></div>
             <div ng-if="getNotesForDay(weekStartDate, index)" class="notes-text" ng-click="showNotesPopupEdit(weekStartDate, index, notesForWeek[index])" title="{{getNotesForDay(weekStartDate, index)}}">
                 {{getNotesForDay(weekStartDate, index)}}

ui/app/styles/ot/_otCalendar.scss

@@ -15,42 +15,57 @@
   .calendar-location {
     padding-left: 80px;
     overflow: hidden;
-    display: flex;
     background: #fff;
     width: 94%;
+    float: left;
+    position: absolute;
+    z-index: 20;
     .heading-cell {
       width: 300px;
       box-sizing: border-box;
       text-align: center;
       float: left;
-      padding: 10px 0;
+      padding-bottom: 10px;
       font-family: OpenSansSemiBold;
     }
   }
+  .day-heading{
+    position: absolute;
+    top: 55px;
+  }
   .error{
     color: #da1e28;
     padding-top: 5px;
   }
+  .heading-ot-date{
+    font-size: 24px;
+  }
+  .heading-ot{
+    padding-bottom: 10px;
+  }
+  .heading-ot-block{
+    padding: 10px 0;
+    display: inline-block;
+    position: absolute;
+    left: 24px;
+  }
   .notesTab{
-    top: 40px;
-    left: 80px;
-    width: calc(99% - 90px);
+    width: calc(100% - 24px);
     height: 30px;
-    position: absolute;
     color: #161616;
-    border-radius: 4px;
     overflow: scroll;
   }
   .notes-text{
     background-color: #EDF5FF;
-    padding: 5px;
-    height: 16px;
+    padding: 8px;
+    height: auto;
     border: 1px solid #0043CE;
+    border-left: 4px solid #0043CE;
   }
   .calendar-time-container {
     clear: left;
     position: absolute;
-    top: 75px;
+    top: 100px;
     background: #fff;
     z-index: 19;
 
@@ -73,7 +88,7 @@
         left: 80px;
         overflow: auto;
         padding-bottom: 5px;
-        top: 75px;
+        top: 100px;
         width: calc(100% - 90px);
         right: 0;
       }
@@ -325,3 +340,8 @@
     position: absolute;
     z-index: 20;
 }
+hr{
+  border: 0;
+  border-bottom: 1px solid #ddd;
+  margin-top: 15px;
+}

ui/app/styles/ot/_otWeeklyCalendar.scss

@@ -13,16 +13,18 @@
         height: 30px;
       }
       .heading-ot-date{
-        font-family: OpenSansSemiBold;
-        padding-bottom: 5px;
+        font-size: 24px;
+      }
+      .heading-ot{
+        padding-bottom: 10px;
       }
       .notes-text{
         background-color: #EDF5FF;
-        padding: 5px;
-        height: 16px;
+        padding: 8px;
+        height: auto;
         border: 1px solid #0043CE;
+        border-left: 3px solid #0043CE;
         color: #161616;
-        border-radius: 4px;
         text-align: left;
         overflow: scroll;
       }