From 53408d3ac50fed6c26221167d0458d61868f4bce Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 24 Oct 2022 13:17:08 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9D=D0=B0=D1=81=D1=82=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80=20?=
 =?UTF-8?q?=D1=80=D0=B0=D1=81=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=B4=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                 |  1 -
 src/pages/calendar/TheCalendar.vue             | 10 ++++++++--
 .../calendar/components/CalendarSchedule.vue   | 18 ++++++++++++------
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index cc72666..582b362 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -18,7 +18,6 @@
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
   --default-white: #fff
   --btn-red-color: #ff6f6f
-  --time-indicator-color: #e93131
   --font-obligatory-color: #ff0000
   --bg-event-box-color: rgba(37, 40, 80, 0.1)
   --bg-event-green-color: #24d07d
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 12af37f..d03119c 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -5,6 +5,7 @@
       :current-date="currentDate"
       :time-information="timeInformation"
       :events-data="eventsData"
+      :sidebar-width="sidebarWidth"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
@@ -21,7 +22,7 @@ export default {
   components: { CalendarSchedule, CalendarSidebar },
   data() {
     return {
-      currentWidth: "152px",
+      sidebarWidth: "72px",
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
@@ -56,7 +57,7 @@ export default {
         .then((res) => this.saveEventsData(res));
     },
     changeWidth(value) {
-      this.currentWidth = value;
+      this.sidebarWidth = value;
     },
   },
   mounted() {
@@ -64,3 +65,8 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.calendar-container
+  width: calc(100vw - 80px)
+</style>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 74c5ce5..36d4fb2 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
+  .schedule.ml-2.w-full(:style="scheduleWidth")
     calendar-header(
       :current-date="currentDate"
       :is-current-date="isCurrentDate"
@@ -60,6 +60,7 @@ export default {
         return [];
       },
     },
+    sidebarWidth: String,
   },
   data() {
     return {
@@ -101,12 +102,17 @@ export default {
     pixelsPerMinute() {
       return this.pixelsPerHour / 60;
     },
-    scheduleSize() {
+    scheduleHeight() {
       return (
         (this.validateEndTime - this.validateStartTime) * this.pixelsPerHour +
         this.columnHeaderHeight
       );
     },
+    scheduleWidth() {
+      return {
+        "--sidebar-width": this.sidebarWidth,
+      };
+    },
   },
   methods: {
     previousDate() {
@@ -172,7 +178,7 @@ export default {
         (newTime[0] - this.validateStartTime) * this.pixelsPerHour +
         newTime[1] * this.pixelsPerMinute +
         this.columnHeaderHeight;
-      if (result > this.scheduleSize || result < 0) {
+      if (result > this.scheduleHeight || result < 0) {
         this.isShownIndicator = false;
         return 0;
       }
@@ -219,17 +225,17 @@ export default {
 <style lang="sass" scoped>
 .schedule
   background-color: var(--default-white)
-  width: calc(100% - 80px)
+  width: calc(100% - (var(--sidebar-width) + 8px))
 
 .time-line-indicator
   width: calc(100% - 80px)
-  border-top: 1px solid var(--time-indicator-color)
+  border-top: 1px solid var(--bg-event-red-color)
   position: absolute
 
 .time-circle-indicator
   width: 12px
   height: 12px
-  background-color: var(--time-indicator-color)
+  background-color: var(--bg-event-red-color)
   border-radius: 50%
   position: absolute