vue-wp/vue-theme/src/components/card.vue

<template lang="pug">
.card(v-if="content")
    header
        router-link(v-if="!hideType && ['event','exhibition'].includes(type)" :to="`/${type}/sorted/by-current-and-upcoming`")
            h4.t-up {{type}}
        router-link(v-else-if="type == 'post'" :to="`/blog`")
            h4.t-up blog
        router-link(v-else-if="!hideType" :to="`/${type}`")
            h4.t-up {{type}}

    article.card--info(:class="{ 'wide': wide }")
        router-link(v-if="type == 'post'" :to="`/blog/${content.slug}`")
            featured-image(:post="content", thumbsize="'standard'")
        router-link(v-else :to="`/${type}/${content.slug}`")
            //- set image to thumbnail setting
            featured-image(:post="content", thumbsize="'standard'")

        .f-col.w-max(style="height: inherit")
            router-link(v-if="type == 'post'" :to="`/blog/${content.slug}`")
                h1.t-up.t-cntr.t-b {{ content.title }}
            router-link(v-else :to="`/${type}/${content.slug}`")
                h1.t-up.t-cntr.t-b {{ content.title }}

            p(v-if="content.end && type == 'event'" class="datetime") {{ dateFrom(content.start, type=='event') }} &ndash; {{ dateFrom(content.end, type=='event').split(',')[1] }}
            p(v-if="content.date && type == 'post'" class="datetime") {{ dateFrom((new Date(content.date).getTime()/1000), type=='post').split(',')[0] }}
            p(v-else-if="content.end && type == 'exhibition'" class="datetime") {{ dateFrom(content.start) }} &ndash; {{ dateFrom(content.end) }}
            p(v-html="content.excerpt").excerpt

            router-link(v-if="type == 'post'" :to="`/blog/${content.slug}`")
                p.read-more read more
            router-link(v-else :to="`/${type}/${content.slug}`")
                p.read-more read more
</template>

<script>
import featuredImage from '@/components/featured-image'
import { formatDate } from '@/utils/helpers'
export default {
    components: { featuredImage },
    props: ['type', 'content', 'wide', 'hide-type'],
    methods: {
        dateFrom: (unix, includeTime) => formatDate(unix, includeTime),
    }
}
</script>

<style lang="postcss">
// prettier-ignore
@import '../sss/variables.sss'
@import '../sss/theme.sss'
.card
    background-color: white
    padding: $ms--1
    min-height: 305px
    overflow: hidden
    text-overflow: clip
    &--info 
        display: flex
        flex-direction: column
        > a
            line-height: 0
        /* Force crop images */
        .featured-or-hero-image img
            object-fit: cover
            object-position: 0% 30%
            max-height: calc($max-card-img-height / 3)
            overflow-y: clip
            width: 100%
    header a
        font-size: $ms--2
        text-decoration: none
        margin: 0
        p
            margin: 0
    img
        width: 100%
        height: auto
    h1, h2, h3
        padding: $ms--3
        margin: 0
    h1
        font-size: $ms-0
        padding: 0
        line-height: initial
        display: -webkit-box
        -webkit-line-clamp: $card-line-clamp
        -webkit-box-orient: vertical
        overflow-y: clip
        margin: $ms--2 0 0 0
    p
        &.datetime
            font-size: $ms--1
            margin: $ms-0
        &.excerpt
            overflow: hidden
            margin: $ms--2 0 0 0
            -webkit-line-clamp: $card-line-clamp
            -webkit-box-orient: vertical
            display: -webkit-box
        &.read-more
            font-size: $ms--1
    
/* for widths larger than 768px */
@media (min-width: $medium)
    .is-grid .card
        &--info 
            .featured-or-hero-image img
                max-height: calc($max-card-img-height / 3)
    .card
        &--info 
            .featured-or-hero-image img
                max-height: $max-card-img-height
                
        .wide
            padding: 0
            flex-direction: row
            grid-gap: $ms--2
            /* Featured image link */
            > a
                width: 100%
</style>