benny/wishlist-app
1
0
Fork 0
mirror of https://github.com/ThisIsBenny/wishlist-app.git synced 2025-04-19 15:27:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Open product page when clicking on image, title or description

Browse source
This commit is contained in:
Benny Samir Hierl 2022-03-04 19:21:09 +01:00
parent 78a8d39ea6
commit 4210053907
1 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/WishlistItem.vue
View file

@ -2,10 +2,14 @@
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import IconCart from './icons/IconCart.vue' import IconCart from './icons/IconCart.vue'
import { WishlistItem } from '@/types' import { WishlistItem } from '@/types'
defineProps<{ const props = defineProps<{
item: WishlistItem item: WishlistItem
}>() }>()
const { t } = useI18n() const { t } = useI18n()
const openUrl = (): void => {
props.item.url && window?.open(props.item.url, '_blank')?.focus()
}
</script> </script>
<template> <template>
@ -16,12 +20,24 @@ const { t } = useI18n()
class="max-h-44 flex-shrink-0 flex-grow-0 object-cover sm:w-1/4" class="max-h-44 flex-shrink-0 flex-grow-0 object-cover sm:w-1/4"
:src="item.imageSrc" :src="item.imageSrc"
:alt="item.title" :alt="item.title"
:class="{ 'cursor-pointer': item.url }"
@click.prevent="openUrl()"
/> />
<div class="flex flex-col justify-between p-2"> <div class="flex flex-col justify-between p-2">
<div> <div>
<h1 class="mb-1 text-lg font-bold">{{ item.title }}</h1> <h1
<p class="text-sm sm:line-clamp-3"> @click.prevent="openUrl()"
class="mb-1 text-lg font-bold"
:class="{ 'cursor-pointer': item.url }"
>
{{ item.title }}
</h1>
<p
@click.prevent="openUrl()"
class="text-sm sm:line-clamp-3"
:class="{ 'cursor-pointer': item.url }"
>
{{ item.description }} {{ item.description }}
</p> </p>
</div> </div>