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