diff options
Diffstat (limited to 'src/components/services/Ping.vue')
| -rw-r--r-- | src/components/services/Ping.vue | 49 |
1 files changed, 12 insertions, 37 deletions
diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue index e693af4..6fd3ec5 100644 --- a/src/components/services/Ping.vue +++ b/src/components/services/Ping.vue | |||
| @@ -1,46 +1,24 @@ | |||
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <Generic :item="item"> |
| 3 | <div class="card" :class="item.class"> | 3 | <template #indicator> |
| 4 | <a :href="item.url" :target="item.target" rel="noreferrer"> | 4 | <div v-if="status" class="status" :class="status"> |
| 5 | <div class="card-content"> | 5 | {{ status }} |
| 6 | <div class="media"> | 6 | </div> |
| 7 | <div v-if="item.logo" class="media-left"> | 7 | </template> |
| 8 | <figure class="image is-48x48"> | 8 | </Generic> |
| 9 | <img :src="item.logo" :alt="`${item.name} logo`" /> | ||
| 10 | </figure> | ||
| 11 | </div> | ||
| 12 | <div v-if="item.icon" class="media-left"> | ||
| 13 | <figure class="image is-48x48"> | ||
| 14 | <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> | ||
| 15 | </figure> | ||
| 16 | </div> | ||
| 17 | <div class="media-content"> | ||
| 18 | <p class="title is-4">{{ item.name }}</p> | ||
| 19 | <p class="subtitle is-6"> | ||
| 20 | <template v-if="item.subtitle"> | ||
| 21 | {{ item.subtitle }} | ||
| 22 | </template> | ||
| 23 | </p> | ||
| 24 | </div> | ||
| 25 | <div v-if="status" class="status" :class="status"> | ||
| 26 | {{ status }} | ||
| 27 | </div> | ||
| 28 | </div> | ||
| 29 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | ||
| 30 | <strong class="tag-text">#{{ item.tag }}</strong> | ||
| 31 | </div> | ||
| 32 | </div> | ||
| 33 | </a> | ||
| 34 | </div> | ||
| 35 | </div> | ||
| 36 | </template> | 9 | </template> |
| 37 | 10 | ||
| 38 | <script> | 11 | <script> |
| 12 | import Generic from "./Generic.vue"; | ||
| 13 | |||
| 39 | export default { | 14 | export default { |
| 40 | name: "Ping", | 15 | name: "Ping", |
| 41 | props: { | 16 | props: { |
| 42 | item: Object, | 17 | item: Object, |
| 43 | }, | 18 | }, |
| 19 | components: { | ||
| 20 | Generic, | ||
| 21 | }, | ||
| 44 | data: () => ({ | 22 | data: () => ({ |
| 45 | status: null, | 23 | status: null, |
| 46 | }), | 24 | }), |
| @@ -70,9 +48,6 @@ export default { | |||
| 70 | </script> | 48 | </script> |
| 71 | 49 | ||
| 72 | <style scoped lang="scss"> | 50 | <style scoped lang="scss"> |
| 73 | .media-left img { | ||
| 74 | max-height: 100%; | ||
| 75 | } | ||
| 76 | .status { | 51 | .status { |
| 77 | font-size: 0.8rem; | 52 | font-size: 0.8rem; |
| 78 | color: var(--text-title); | 53 | color: var(--text-title); |