WIP Позиционирование descriptionCard в 4 стороны

src/pages/calendar/TheCalendar.vue

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

src/pages/calendar/components/CalendarEventCard.vue

@@ -29,7 +29,6 @@
       @close-description-card="closeDescriptionCard"
       @delete-event="transmitDeleteEvent"
       :schedule-body-ref="scheduleBodyRef"
-      :event-card-size="cardSize"
     )
   </template>
 
@@ -223,12 +222,6 @@ export default {
       this.hideDescriptionCard();
       this.setDefaultTheme();
     },
-    writeCardSize() {
-      this.cardSize = {
-        width: this.$refs["eventCard"].getBoundingClientRect().width,
-        height: this.calculateCardHeight - 8,
-      };
-    },
   },
   watch: {
     changeFormWasClosed: {
@@ -241,21 +234,16 @@ export default {
       },
     },
   },
-  mounted() {
-    this.writeCardSize();
-  },
 };
 </script>
 
 <style lang="sass" scoped>
 .wrapper
   position: absolute
-  z-index: 3
   width: calc(100% - 8px)
-  height: 23px
 
 .default-theme
-  z-index: 0
+  z-index: 2
   .card
     background-color: var(--bg-color)
     border: 2px solid var(--border-color)
@@ -271,6 +259,7 @@ export default {
     background-color: var(--font-color)
 
 .active-theme
+  z-index: 3
   .card
     background-color: var(--bg-active)
     border: 2px solid var(--border-active-color)

src/pages/calendar/components/CalendarEventDescriptionCard.vue

@@ -16,7 +16,10 @@
         .icon-cancel.text-xxs.flex.items-center.cursor-pointer(@click="close")
     .body.mr-6
       span.text-base  {{ eventMember }}
-      .flex.text-xxs.mt-4.justify-between(v-if="!disabled")
+      .flex.text-xxs.justify-between(
+        v-if="!disabled",
+        :class="{'mt-4': description.length > 0}"
+        )
         .column
           ul
             li(v-for="elem in description" :key="elem") {{ elem }}
@@ -38,7 +41,6 @@ export default {
       default: false,
     },
     scheduleBodyRef: Node,
-    eventCardSize: Object,
   },
   data() {
     return {
@@ -119,19 +121,27 @@ export default {
     if (!this.$refs.descriptionCard || !this.scheduleBodyRef) return;
     const cardRect = this.$refs.descriptionCard.getBoundingClientRect();
     const bodyRect = this.scheduleBodyRef.getBoundingClientRect();
-    //const bodyHeight = this.scheduleBodyRef.clientHeight + bodyRect.y - 20;
-    const bodyWidth = this.scheduleBodyRef.clientWidth + bodyRect.x - 20;
-    if (cardRect.x + cardRect.width > bodyWidth) {
+    const bodyHeight = this.scheduleBodyRef.clientHeight + bodyRect.y - 20;
+    const bodyWidth = this.scheduleBodyRef.clientWidth;
+    console.log(cardRect.x, cardRect.width, bodyWidth);
+    if (cardRect.x + 2 * cardRect.width < bodyWidth) {
       this.position = {
-        top: `-${this.eventCardSize.height + 8}px`,
+        top: 0,
+        right: `-${cardRect.width + 8}px`,
+      };
+    } else if (cardRect.x - 84 > bodyRect.x) {
+      this.position = {
+        top: 0,
         left: `-${cardRect.width + 8}px`,
       };
-    } else {
+    } else if (cardRect.y + cardRect.height < bodyHeight) {
       this.position = {
-        top: `-${this.eventCardSize.height + 8}px`,
-        right: `-${this.eventCardSize.width + 8}px`,
+        "margin-top": "8px",
+      };
+    } else
+      this.position = {
+        top: `-${cardRect.height + 8}px`,
       };
-    }
   },
 };
 </script>

src/pages/calendar/components/CalendarSidebar.vue

@@ -21,15 +21,15 @@
         ) Создать событие
         calendar-sidebar-event(:is-open="isOpen", :event-type="eventTypes")
         calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen")
-      //- .button-wrapper.flex.justify-center.mb-23px
-      //-   base-button(
-      //-     left-icon="icon-long-arrow",
-      //-     rounded, :size="40",
-      //-     :icon-left-size="18",
-      //-     secondary,
-      //-     :style="{ transform: `rotate(${turnButton})`}",
-      //-     @click="changeSize"
-      //-   )
+        .button-wrapper.flex.justify-center.mb-23px
+          base-button(
+            left-icon="icon-long-arrow",
+            rounded, :size="40",
+            :icon-left-size="18",
+            secondary,
+            :style="{ transform: `rotate(${turnButton})`}",
+            @click="changeSize"
+          )
 </template>
 
 <script>