diff options
Diffstat (limited to 'src/components/services/Generic.vue')
-rw-r--r-- | src/components/services/Generic.vue | 35 |
1 files changed, 18 insertions, 17 deletions
diff --git a/src/components/services/Generic.vue b/src/components/services/Generic.vue index 3238ead..08bd3f6 100644 --- a/src/components/services/Generic.vue +++ b/src/components/services/Generic.vue | |||
@@ -1,16 +1,3 @@ | |||
1 | <script> | ||
2 | export default {}; | ||
3 | </script> | ||
4 | |||
5 | <style></style> | ||
6 | */ | ||
7 | |||
8 | <script> | ||
9 | export default {}; | ||
10 | </script> | ||
11 | |||
12 | <style></style> | ||
13 | |||
14 | <template> | 1 | <template> |
15 | <div> | 2 | <div> |
16 | <div | 3 | <div |
@@ -20,7 +7,7 @@ export default {}; | |||
20 | > | 7 | > |
21 | <a :href="item.url" :target="item.target" rel="noreferrer"> | 8 | <a :href="item.url" :target="item.target" rel="noreferrer"> |
22 | <div class="card-content"> | 9 | <div class="card-content"> |
23 | <div class="media"> | 10 | <div :class="mediaClass"> |
24 | <div v-if="item.logo" class="media-left"> | 11 | <div v-if="item.logo" class="media-left"> |
25 | <figure class="image is-48x48"> | 12 | <figure class="image is-48x48"> |
26 | <img :src="item.logo" :alt="`${item.name} logo`" /> | 13 | <img :src="item.logo" :alt="`${item.name} logo`" /> |
@@ -33,7 +20,9 @@ export default {}; | |||
33 | </div> | 20 | </div> |
34 | <div class="media-content"> | 21 | <div class="media-content"> |
35 | <p class="title is-4">{{ item.name }}</p> | 22 | <p class="title is-4">{{ item.name }}</p> |
36 | <p class="subtitle is-6">{{ item.subtitle }}</p> | 23 | <p class="subtitle is-6" v-if="item.subtitle"> |
24 | {{ item.subtitle }} | ||
25 | </p> | ||
37 | </div> | 26 | </div> |
38 | </div> | 27 | </div> |
39 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | 28 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> |
@@ -51,11 +40,23 @@ export default { | |||
51 | props: { | 40 | props: { |
52 | item: Object, | 41 | item: Object, |
53 | }, | 42 | }, |
43 | computed: { | ||
44 | mediaClass: function () { | ||
45 | return { media: true, "no-subtitle": !this.item.subtitle }; | ||
46 | }, | ||
47 | }, | ||
54 | }; | 48 | }; |
55 | </script> | 49 | </script> |
56 | 50 | ||
57 | <style scoped lang="scss"> | 51 | <style scoped lang="scss"> |
58 | .media-left img { | 52 | .media-left { |
59 | max-height: 100%; | 53 | .image { |
54 | display: flex; | ||
55 | align-items: center; | ||
56 | } | ||
57 | |||
58 | img { | ||
59 | max-height: 100%; | ||
60 | } | ||
60 | } | 61 | } |
61 | </style> | 62 | </style> |