From ba9f8a36bf2a490afe670dc88ee77f2db520dbaf Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 25 Oct 2022 15:43:50 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=D0=BB=D0=B0=D0=B4=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            |  4 ++--
 .../components/CalendarBackground.vue         | 14 ++++++++-----
 .../components/CalendarClockColumn.vue        |  2 ++
 .../calendar/components/CalendarColumn.vue    | 12 ++++++++++-
 .../calendar/components/CalendarEventCard.vue |  2 +-
 .../calendar/components/CalendarSchedule.vue  | 20 +++++++++++++++++--
 6 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 80b3176..993f61d 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -26,8 +26,8 @@ export default {
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
-        dayStartTime: "8:00",
-        dayEndTime: "18:00",
+        dayStartTime: "0:00",
+        dayEndTime: "20:00",
       },
       eventsData: [],
       team: [
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 8f8521b..030ee5f 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,8 +1,10 @@
 <template lang="pug">
   .calendar-background-wrapper.flex.flex-col(
     ref="backgroundWrapper"
-    :class="scrollPresence"
+    :class="horizontalScrollPresence"
     )
+    .header-wrapper
+      .header(:style="backgroundExtendedWidth")
     calendar-column(
       v-for="(owner, index) in filteredOwners"
       :key="owner.id"
@@ -10,7 +12,6 @@
       :style="calculateColumnPosition(index)"
       :day-events="filterEventsByOwner(owner)"
       )
-    .header(:style="backgroundExtendedWidth")
     .body.flex.flex-col(
       :style="backgroundExtendedWidth"
       )
@@ -58,9 +59,9 @@ export default {
     backgroundHeight() {
       return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
     },
-    scrollPresence() {
+    horizontalScrollPresence() {
       return {
-        scroll: this.ownersArrayLength > 3,
+        "scroll-x": this.ownersArrayLength > 3 && this.backgroundHeight < 855,
       };
     },
     filteredOwners() {
@@ -147,13 +148,16 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.scroll
+.scroll-x
   overflow-x: scroll
 
 .calendar-background-wrapper
   width: 100%
   position: relative
 
+.header-wrapper
+  position: relative
+
 .header
   height: 48px
 
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index f289571..5e6c424 100644
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -59,4 +59,6 @@ export default {
   width: 80px
   height: 100%
   color: var(--font-dark-blue-color)
+  position: sticky
+  left: 0
 </style>
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 70f5148..e5c566a 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -6,7 +6,7 @@
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
-    .px-1
+    .body
       calendar-event-card(
         v-for="event in dayEvents"
         :key="event.id"
@@ -45,6 +45,16 @@ export default {
 
 .header
   height: 48px
+  position: sticky
+  top: 0px
+  z-index: 3
+  width: inherit
+  border-right: 1px solid var(--border-light-grey-color)
+  background-color: var(--default-white)
+
+.body
+  position: relative
+  z-index: 3
 
 .avatar-wrapper
   width: 32px
diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue
index f68a318..46984e1 100644
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -48,7 +48,7 @@ export default {
   background-color: var(--bg-event-yellow-color)
   color: var(--font-black-color)
   position: relative
-  z-index: 2
+  z-index: 3
 
 .header
   width: 100%
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index ccf047e..685c3be 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .schedule.ml-2.w-full(:style="scheduleWidth")
+  .schedule.ml-2.pb-5.w-full(:style="scheduleWidth")
     calendar-header(
       :current-date="currentDate"
       :is-current-date="isCurrentDate"
@@ -7,7 +7,9 @@
       @next-date="nextDate"
       @selected-layout="selectedLayout"
       )
-    .schedule-body.flex
+    .schedule-body.flex(
+      :class="bodyVerticalScroll"
+      )
       div
         calendar-clock-column(
           :hours-array="hoursArray"
@@ -115,6 +117,11 @@ export default {
         "--sidebar-width": this.sidebarWidth,
       };
     },
+    bodyVerticalScroll() {
+      return {
+        "scroll-y": this.scheduleHeight > 855,
+      };
+    },
   },
   methods: {
     previousDate() {
@@ -186,6 +193,11 @@ export default {
       }
       return result;
     },
+    bodyScheduleHeight() {
+      if (this.scheduleHeight > 855) {
+        return this.scheduleHeight;
+      }
+    },
   },
   watch: {
     currentTime() {
@@ -229,6 +241,9 @@ export default {
   background-color: var(--default-white)
   width: calc(100% - (var(--sidebar-width) + 8px))
 
+.scroll-y
+  overflow-y: scroll
+
 .time-line-indicator
   width: calc(100% - 80px)
   border-top: 1px solid var(--bg-event-red-color)
@@ -243,4 +258,5 @@ export default {
 
 .schedule-body
   position: relative
+  height: 855px
 </style>