From 7aa18937b0a9114c28847d74b23213b5f9869fa2 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 17 Nov 2022 16:08:11 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=BE=D1=82=D1=81=D1=82=D1=83=D0=BF=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5,=20?=
 =?UTF-8?q?=D0=BE=D1=82=D1=81=D1=82=D1=83=D0=BF=D1=8B=20=D1=81=D0=BA=D1=80?=
 =?UTF-8?q?=D0=BE=D0=BB=D0=BB=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            |  2 +-
 .../calendar/components/CalendarSchedule.vue  | 41 ++++++++++++-------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 0856765..0961584 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/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: [],
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 828d70c..4e09036 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/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,30 +414,27 @@ export default {
 
 .schedule-body
   width: 100%
-  height: calc(100vh - 56px - 8px - 56px - 2px)
+  height: calc(100vh - 56px * 2 - 8px - 22px)
   overflow-y: auto
   overflow-x: auto
   &::-webkit-scrollbar
-    width: 52px
-    height: 30px
+    width: 8px
+    height: 8px
   &::-webkit-scrollbar-track:horizontal
     margin: 0 24px 0 104px
-    background-color: var(--bg-ligth-blue-color)
+    pddding-bottom: 22px
     border-radius: 4px
-    border-bottom: 22px solid var(--default-white)
+    background-color: var(--bg-ligth-blue-color)
   &::-webkit-scrollbar-thumb:horizontal
     background-color: var(--btn-blue-color-2)
     border-radius: 4px
-    border-bottom: 22px solid var(--default-white)
   &::-webkit-scrollbar-track:vertical
-    margin: 72px 0 24px 0
+    margin: 56px 0 24px 0
+    border-radius: 4px
     background-color: var(--bg-ligth-blue-color)
-    border-left: 22px solid var(--default-white)
-    border-right: 22px solid var(--default-white)
   &::-webkit-scrollbar-thumb:vertical
+    border-radius: 4px
     background-color: var(--btn-blue-color-2)
-    border-left: 22px solid var(--default-white)
-    border-right: 22px solid var(--default-white)
 
 .hiding-container
   width: 80px