diff options
author | Georgi Gardev <georgi@gardev.com> | 2020-12-23 16:11:47 +0200 |
---|---|---|
committer | Georgi Gardev <georgi@gardev.com> | 2020-12-23 16:11:47 +0200 |
commit | 6f2b141bf7002810c5caa39331b1927722d42172 (patch) | |
tree | 69a38a06eed1e22b912a6781b8d99ba74de5dced /src | |
parent | c1b5f6adabf6bdd35a6b562f796ffbefa77f7cbc (diff) | |
download | homer-6f2b141bf7002810c5caa39331b1927722d42172.tar.gz homer-6f2b141bf7002810c5caa39331b1927722d42172.tar.zst homer-6f2b141bf7002810c5caa39331b1927722d42172.zip |
Fix #167: align item name when subtitle is empty
Diffstat (limited to 'src')
-rw-r--r-- | src/assets/app.scss | 5 | ||||
-rw-r--r-- | src/components/services/Generic.vue | 35 |
2 files changed, 23 insertions, 17 deletions
diff --git a/src/assets/app.scss b/src/assets/app.scss index c246500..d602170 100644 --- a/src/assets/app.scss +++ b/src/assets/app.scss | |||
@@ -197,6 +197,11 @@ body { | |||
197 | } | 197 | } |
198 | } | 198 | } |
199 | 199 | ||
200 | .media.no-subtitle { | ||
201 | display: flex; | ||
202 | align-items: center; | ||
203 | } | ||
204 | |||
200 | .media-content { | 205 | .media-content { |
201 | overflow: hidden; | 206 | overflow: hidden; |
202 | text-overflow: inherit; | 207 | text-overflow: inherit; |
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> |