]> git.immae.eu Git - github/bastienwirtz/homer.git/blame - src/components/services/Generic.vue
Initial Emby service commit
[github/bastienwirtz/homer.git] / src / components / services / Generic.vue
CommitLineData
9a14de00
BW
1<template>
2 <div>
23eb5b3f
TG
3 <div
4 class="card"
5 :style="`background-color:${item.background};`"
6 :class="item.class"
7 >
9a14de00
BW
8 <a :href="item.url" :target="item.target" rel="noreferrer">
9 <div class="card-content">
6f2b141b 10 <div :class="mediaClass">
2ca4faad
BW
11 <slot name="icon">
12 <div v-if="item.logo" class="media-left">
13 <figure class="image is-48x48">
14 <img :src="item.logo" :alt="`${item.name} logo`" />
15 </figure>
16 </div>
17 <div v-if="item.icon" class="media-left">
18 <figure class="image is-48x48">
19 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
20 </figure>
21 </div>
22 </slot>
9a14de00 23 <div class="media-content">
2ca4faad
BW
24 <slot name="content">
25 <p class="title is-4">{{ item.name }}</p>
26 <p class="subtitle is-6" v-if="item.subtitle">
27 {{ item.subtitle }}
28 </p>
29 </slot>
9a14de00 30 </div>
2ca4faad 31 <slot name="indicator" class="indicator"></slot>
9a14de00
BW
32 </div>
33 <div class="tag" :class="item.tagstyle" v-if="item.tag">
34 <strong class="tag-text">#{{ item.tag }}</strong>
35 </div>
36 </div>
37 </a>
38 </div>
39 </div>
40</template>
41
42<script>
43export default {
44 name: "Generic",
45 props: {
46 item: Object,
47 },
6f2b141b
GG
48 computed: {
49 mediaClass: function () {
50 return { media: true, "no-subtitle": !this.item.subtitle };
51 },
52 },
9a14de00
BW
53};
54</script>
55
56<style scoped lang="scss">
6f2b141b
GG
57.media-left {
58 .image {
59 display: flex;
60 align-items: center;
61 }
62
63 img {
64 max-height: 100%;
65 }
9a14de00
BW
66}
67</style>