Merge pull request #135 from dderbentsov/UC-47

WIP Добавила отступ на странице, отступы скролла

src/pages/calendar/TheCalendar.vue

@@ -70,7 +70,7 @@ export default {
       showModal: false,
       timeInformation: {
         dayStartTime: "08:00",
-        dayEndTime: "24:00",
+        dayEndTime: "20:00",
       },
       eventsData: [],
       employeesData: [],

src/pages/calendar/components/CalendarSchedule.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
-  .schedule.ml-2(
+  .schedule.mx-2.pb-22px(
+    ref="schedule"
     :style="scheduleWidth"
   )
     calendar-header(
@@ -9,7 +10,10 @@
       @next-date="nextDate"
       @selected-layout="selectedLayout"
     )
-    .schedule-body(@scroll="changeScrollingState", ref="scheduleBody")
+    .schedule-body(
+      @scroll="changeScrollingState"
+      ref="scheduleBody"
+    )
       .hiding-container.fixed(v-if="isScrolling")
       .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
         calendar-column(
@@ -324,6 +328,17 @@ export default {
     transmitDeleteEvent(eventData) {
       this.$emit("delete-event", eventData);
     },
+    bodyScroll() {
+      this.$nextTick(() => {
+        let presenceScroll =
+          this.$refs["scheduleBody"].scrollHeight !==
+          this.$refs["scheduleBody"].clientHeight;
+        if (presenceScroll) {
+          this.$refs["scheduleBody"].classList.add("pr-10px");
+          this.$refs["schedule"].classList.add("pr-10px");
+        }
+      });
+    },
   },
   watch: {
     currentTime() {
@@ -357,6 +372,7 @@ export default {
     this.timeCoilInitialization();
     this.startTimer();
     this.showCuttentTime();
+    this.bodyScroll();
   },
   beforeUnmount() {
     this.stopTimer();
@@ -370,7 +386,7 @@ export default {
   position: relative
   border-top-left-radius: 4px
   background-color: var(--default-white)
-  width: calc(100% - (var(--sidebar-width) + 8px))
+  width: calc(100% - (var(--sidebar-width) + 16px))
   height: calc(100vh - 56px - 8px)
 
 .time-line-indicator
@@ -398,16 +414,25 @@ export default {
 
 .schedule-body
   width: 100%
-  height: calc(100vh - 56px - 8px - 56px)
+  height: calc(100vh - 56px * 2 - 8px - 22px)
   overflow-y: auto
   overflow-x: auto
   &::-webkit-scrollbar
     width: 8px
     height: 8px
-  &::-webkit-scrollbar-track
+  &::-webkit-scrollbar-track:horizontal
-    background-color: var(--bg-ligth-blue-color)
+    margin: 0 24px 0 104px
+    pddding-bottom: 22px
     border-radius: 4px
-  &::-webkit-scrollbar-thumb
+    background-color: var(--bg-ligth-blue-color)
+  &::-webkit-scrollbar-thumb:horizontal
+    background-color: var(--btn-blue-color-2)
+    border-radius: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin: 56px 0 24px 0
+    border-radius: 4px
+    background-color: var(--bg-ligth-blue-color)
+  &::-webkit-scrollbar-thumb:vertical
     border-radius: 4px
     background-color: var(--btn-blue-color-2)