From 7b8db909fc45e1bf69e847d311d0d8deadd16771 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 26 Oct 2022 16:01:39 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=D1=8B,=20=D0=B7?=
 =?UTF-8?q?=D0=B0=D1=84=D0=B8=D0=BA=D1=81=D0=B8=D1=80=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CalendarBackground.vue         | 15 +++++-----
 .../calendar/components/CalendarColumn.vue    |  7 +++--
 .../calendar/components/CalendarHeader.vue    |  4 ++-
 .../calendar/components/CalendarSchedule.vue  | 30 ++++++-------------
 4 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index b6155f4..9b036ce 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -64,17 +64,17 @@ export default {
     backgroundHeight() {
       return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
     },
-    horizontalScrollPresence() {
-      return {
-        "scroll-x": this.ownersArrayLength > 3 && this.backgroundHeight < 855,
-      };
-    },
     filteredEventsByDate() {
       return this.eventsData.filter(
         ({ start }) =>
           start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
       );
     },
+    horizontalScrollPresence() {
+      return {
+        "scroll-x": this.ownersArrayLength > 3,
+      };
+    },
   },
   methods: {
     calculateColumnPosition(elemIndex) {
@@ -95,7 +95,7 @@ export default {
       };
     },
     calculateBackgroundWidth() {
-      this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
+      this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
     },
     filterEventsByOwner(owner) {
       let filteredArray = [];
@@ -118,8 +118,7 @@ export default {
 
 <style lang="sass" scoped>
 .scroll-x
-  overflow-x: scroll
-  overflow-y: hidden
+  overflow-x: auto
 
 .calendar-background-wrapper
   width: 100%
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 9cfcfe1..732f9f8 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .calendar-column-wrapper.flex.flex-col
-    .header.flex.items-center.justify-between.py-2.px-6
+    .header.flex.items-center.justify-between.py-2.px-6.top-0
       .flex.items-center
         img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
@@ -77,11 +77,14 @@ export default {
 .calendar-column-wrapper
   position: absolute
   border-right: 1px solid var(--border-light-grey-color)
+  &:nth-last-child(2) .header
+    border-right: none
+  &:nth-last-child(2)
+    border-right: none
 
 .header
   height: 48px
   position: sticky
-  top: 0px
   z-index: 5
   width: inherit
   border-right: 1px solid var(--border-light-grey-color)
diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
index 0c7a328..cf49d22 100644
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
+  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6.top-0
     .flex
       base-arrow-button.left-arrow.mr-4(@click="previousHandler")
       base-arrow-button.right-arrow.mr-6(@click="nextHandler")
@@ -51,6 +51,8 @@ export default {
   background-color: var(--default-white)
   height: 56px
   border-radius: 4px
+  position: sticky
+  z-index: 10
 
 .left-arrow
   transform: rotate(90deg)
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index bc9cdb5..fd23b45 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -1,5 +1,8 @@
 <template lang="pug">
-  .schedule.ml-2.pb-5.w-full(:style="scheduleWidth")
+  .schedule.ml-2(
+    :style="scheduleWidth"
+    ref="shedule"
+    )
     calendar-header(
       :current-date="currentDate"
       :is-current-date="isCurrentDate"
@@ -8,8 +11,6 @@
       @selected-layout="selectedLayout"
       )
     .schedule-body.flex(
-      :class="bodyVerticalScroll"
-      :style="setBodySize"
       )
       div
         calendar-clock-column(
@@ -80,6 +81,7 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
+      sheduleHeight: 0,
     };
   },
   computed: {
@@ -128,21 +130,6 @@ export default {
         "--sidebar-width": this.sidebarWidth,
       };
     },
-    bodyVerticalScroll() {
-      return {
-        "scroll-y": this.scheduleHeight > 855,
-      };
-    },
-    setBodySize() {
-      if (this.validateEndTime - this.validateStartTime > 13) {
-        return {
-          height: "855px",
-        };
-      }
-      return {
-        width: "auto",
-      };
-    },
     filteredOwners() {
       let filteredArray = [];
       let ownerAbsence = {
@@ -290,11 +277,12 @@ export default {
 
 <style lang="sass" scoped>
 .schedule
+  position: relative
   background-color: var(--default-white)
   width: calc(100% - (var(--sidebar-width) + 8px))
-
-.scroll-y
-  overflow-y: scroll
+  height: calc(100vh - 56px - 8px)
+  overflow-y: auto
+  overflow-x: hidden
 
 .time-line-indicator
   width: calc(100% - 80px)