mealie/frontend/components/Domain/Recipe/RecipeCard.vue

<template>
  <v-lazy>
    <v-hover v-slot="{ hover }" :open-delay="50">
      <v-card
        :class="{ 'on-hover': hover }"
        :elevation="hover ? 12 : 2"
        :to="route ? `/recipe/${slug}` : ''"
        min-height="275"
        @click="$emit('click')"
      >
        <RecipeCardImage icon-size="200" :slug="slug" small :image-version="image">
          <v-expand-transition v-if="description">
            <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal" style="height: 100%">
              <v-card-text class="v-card--text-show white--text">
                {{ description }}
              </v-card-text>
            </div>
          </v-expand-transition>
        </RecipeCardImage>
        <v-card-title class="my-n3 mb-n6">
          <div class="headerClass">
            {{ name }}
          </div>
        </v-card-title>

        <v-card-actions>
          <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
          <RecipeRating :value="rating" :name="name" :slug="slug" :small="true" />
          <v-spacer></v-spacer>
          <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :is-category="false" />
          <RecipeContextMenu :slug="slug" :name="name" />
        </v-card-actions>
      </v-card>
    </v-hover>
  </v-lazy>
</template>

<script>
import RecipeFavoriteBadge from "./RecipeFavoriteBadge";
import RecipeChips from "./RecipeChips";
import RecipeContextMenu from "./RecipeContextMenu";
import RecipeCardImage from "./RecipeCardImage";
import RecipeRating from "./RecipeRating";
export default {
  components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage },
  props: {
    name: {
      type: String,
      required: true,
    },
    slug: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      default: null,
    },
    rating: {
      type: Number,
      default: 0,
    },
    image: {
      type: String,
      default: null,
    },
    route: {
      type: Boolean,
      default: true,
    },
    tags: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      fallBackImage: false,
    };
  },
  computed: {
    loggedIn() {
      return this.$store.getters.getIsLoggedIn;
    },
  },
};
</script>

<style>
.v-card--reveal {
  align-items: center;
  bottom: 0;
  justify-content: center;
  opacity: 0.8;
  position: absolute;
  width: 100%;
}
.v-card--text-show {
  opacity: 1 !important;
}
.headerClass {
  white-space: nowrap;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>