WIP Стилизовала карточки
This commit is contained in:
Daria Golova
@@ -4,11 +4,22 @@
|
||||
:style="themeColors",
|
||||
:class="cardTheme"
|
||||
)
|
||||
.card.flex.items-start.px-2(:style="cardHeight")
|
||||
.header.flex.justify-between.items-center
|
||||
.card.flex.items-start.px-2(
|
||||
: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,
|
||||
"default-theme": !this.clicked,
|
||||
"active-theme": this.isActive,
|
||||
"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() {
|
||||
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)",
|
||||
};
|
||||
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)",
|
||||
};
|
||||
}
|
||||
changeDetailsShown() {
|
||||
this.someDetailsShown = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user