aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorGeorgi Gardev <georgi@gardev.com>2020-12-23 16:11:47 +0200
committerGeorgi Gardev <georgi@gardev.com>2020-12-23 16:11:47 +0200
commit6f2b141bf7002810c5caa39331b1927722d42172 (patch)
tree69a38a06eed1e22b912a6781b8d99ba74de5dced
parentc1b5f6adabf6bdd35a6b562f796ffbefa77f7cbc (diff)
downloadhomer-6f2b141bf7002810c5caa39331b1927722d42172.tar.gz
homer-6f2b141bf7002810c5caa39331b1927722d42172.tar.zst
homer-6f2b141bf7002810c5caa39331b1927722d42172.zip
Fix #167: align item name when subtitle is empty
-rw-r--r--src/assets/app.scss5
-rw-r--r--src/components/services/Generic.vue35
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>
2export default {};
3</script>
4
5<style></style>
6*/
7
8<script>
9export 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>