WIP Стилизовала карточки

src/pages/calendar/components/CalendarEventCard.vue

@@ -4,11 +4,22 @@
     :style="themeColors",
     :class="cardTheme"
   )
-    .card.flex.items-start.px-2(:style="cardHeight")
+    .card.flex.items-start.px-2(
-      .header.flex.justify-between.items-center
+      :class="{'py-6px flex-col': longCard}",
+      :style="cardHeight"
+    )
+      .header.flex.justify-between.items-center(:class="{'items-start': longCard}")
         .header-text
           span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
           span.inline-block.align-middle.font-medium.text-base {{ eventMember }}
+        .details-count.flex.justify-center.items-center.text-xxs.font-medium(v-if="someDetailsShown") {{ `+${detailsCount}` }}
+      .body.flex.text-xxs.font-medium(v-if="longCard")
+        .col.mr-22px
+          ul
+            li.mt-2(v-for="elem in descriptionColumns.leftColumn" :key="elem") {{ elem }}
+        .col
+          ul
+            li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
   </template>
 
 <script>
@@ -16,12 +27,18 @@ export default {
   name: "CalendarEventCard",
   props: {
     ownerEvent: Object,
-    eventTypes: Array,
+    eventTypes: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
   },
   data() {
     return {
       pixelsPerHour: 62,
-      clicked: false,
+      isActive: false,
+      someDetailsShown: true,
     };
   },
   computed: {
@@ -62,10 +79,94 @@ export default {
     },
     cardTheme() {
       return {
-        "active-theme": this.clicked,
+        "active-theme": this.isActive,
-        "default-theme": !this.clicked,
+        "default-theme": !this.isActive,
+        "long-card": this.longCard,
       };
     },
+    themeColors() {
+      switch (this.ownerEvent.kind) {
+        case this.eventTypes[0].label:
+          return {
+            "--bg-color": "var(--bg-event-green-color-0)",
+            "--bg-active": this.eventTypes[0].color,
+            "--bg-hover": "var(--bg-event-green-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[0].color,
+          };
+        case this.eventTypes[1].label:
+          return {
+            "--bg-color": "var(--bg-event-red-color-0)",
+            "--bg-active": this.eventTypes[1].color,
+            "--bg-hover": "var(--bg-event-red-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[1].color,
+          };
+        case this.eventTypes[2].label:
+          return {
+            "--bg-color": "var(--bg-event-yellow-color-0)",
+            "--bg-active": this.eventTypes[2].color,
+            "--bg-hover": "var(--bg-event-yellow-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--font-black-color)",
+            "--count-color": "var(--font-black-color)",
+          };
+        case this.eventTypes[3].label:
+          return {
+            "--bg-color": "var(--bg-event-blue-color-0)",
+            "--bg-active": this.eventTypes[3].color,
+            "--bg-hover": "var(--bg-event-blue-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[3].color,
+          };
+        default:
+          return {
+            "--bg-color": "var(--default-white)",
+            "--bg-active": "var(--btn-blue-color)",
+            "--bg-hover": "var(--bg-event-default-hover-color)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--border-color": "#b3c3f3",
+            "--border-active-color": "var(--btn-blue-color)",
+            "--count-color": "var(--btn-blue-color)",
+          };
+      }
+    },
+    description() {
+      return this.ownerEvent.description.split(", ");
+    },
+    descriptionColumns() {
+      let leftCol = [],
+        rightCol = [],
+        heightParts = parseInt((this.calculateCardHeight - 8) / 23);
+      if (this.ownerEvent.description && heightParts > 1) {
+        let n = heightParts;
+        for (let i = 0; i < n * 2 - 2; i++) {
+          if (!this.description[i]) break;
+          i % 2 === 0
+            ? leftCol.push(this.description[i])
+            : rightCol.push(this.description[i]);
+        }
+      }
+      return {
+        leftColumn: leftCol,
+        rightColumn: rightCol,
+      };
+    },
+    longCard() {
+      return parseInt((this.calculateCardHeight - 8) / 23) > 1 ? true : false;
+    },
+    detailsCount() {
+      let columnsLength =
+          this.descriptionColumns.leftColumn.length +
+          this.descriptionColumns.rightColumn.length,
+        remainingDetails = this.description.length - columnsLength;
+      if (!remainingDetails) this.changeDetailsShown();
+      return remainingDetails;
+    },
   },
   methods: {
     trimTime(time) {
@@ -79,41 +180,10 @@ export default {
       this.$emit("selected-event", this.ownerEvent);
     },
     changeTheme() {
-      this.clicked = !this.clicked;
+      this.isActive = !this.isActive;
     },
-    themeColors() {
+    changeDetailsShown() {
-      switch (this.ownerEvent.kind) {
+      this.someDetailsShown = false;
-        case this.eventTypes[0].label:
-          return {
-            "--bg-color": "var(--bg-event-green-color-0)",
-            "--bg-active": this.eventTypes[0].color,
-            "--bg-hover": "var(--bg-event-green-color-1)",
-          };
-        case this.eventTypes[1].label:
-          return {
-            "--bg-color": "var(--bg-event-red-color-0)",
-            "--bg-active": this.eventTypes[1].color,
-            "--bg-hover": "var(--bg-event-red-color-1)",
-          };
-        case this.eventTypes[2].label:
-          return {
-            "--bg-color": "var(--bg-event-yellow-color-0)",
-            "--bg-active": this.eventTypes[2].color,
-            "--bg-hover": "var(--bg-event-yellow-color-1)",
-          };
-        case this.eventTypes[3].label:
-          return {
-            "--bg-color": "var(--bg-event-blue-color-0)",
-            "--bg-active": this.eventTypes[3].color,
-            "--bg-hover": "var(--bg-event-blue-color-1)",
-          };
-        default:
-          return {
-            "--bg-color": "var(--default-white)",
-            "--bg-active": "var(--btn-blue-color)",
-            "--bg-hover": "var(--bg-event-default-hover-color)",
-          };
-      }
     },
   },
 };
@@ -129,19 +199,73 @@ export default {
 .default-theme
   .card
     background-color: var(--bg-color)
+    border: 2px solid var(--border-color)
     border-left: 4px solid var(--bg-active)
+  .header-text, .body
+    color: var(--font-color)
+  .details-count
+    background-color: var(--bg-active)
+    color: var(--font-active-color)
+  li:before
+    background-color: var(--font-color)
 
 .active-theme
   .card
     background-color: var(--bg-active)
+    border: 2px solid var(--border-active-color)
     border-left: 4px solid var(--bg-active)
+  .header-text, .body
+    color: var(--font-active-color)
+  .details-count
+    background-color: var(--default-white)
+    color: var(--count-color)
+  li:before
+    background-color: var(--font-active-color)
 
 .card
   border-radius: 4px
-  color: var(--font-black-color)
+  min-height: 23px
   &:hover
     background-color: var(--bg-hover)
+    border: 2px solid var(--border-color)
     border-left: 4px solid var(--bg-active)
+  &:hover .header-text
+    color: var(--font-color)
+  &:hover .details-count
+    background-color: var(--bg-active)
+    color: var(--font-active-color)
+  &:hover .body
+    color: var(--font-color)
+  &:hover li:before
+    background-color: var(--font-color)
+
 .header
   width: 100%
+
+.details-count
+  width: 24px
+  height: 16px
+  border-radius: 16px
+
+.col
+  max-width: calc(462px/2 - 22px)
+
+ul
+  list-style-type: none
+  margin: 0
+  padding: 0
+
+li
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+li:before
+  content: ''
+  display: inline-block
+  height: 8px
+  width: 8px
+  border-radius: 50%
+  background-color : var(--font-black-color)
+  margin-right: 4px
 </style>

tailwind.config.js

@@ -37,6 +37,7 @@ module.exports = {
         "14px": "14px",
         "15px": "15px",
         "19px": "19px",
+        "22px": "22px",
         "23px": "23px",
         "29_25px": "29.25px",
         "45px": "45px",