aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/services
diff options
context:
space:
mode:
authorDick Wolff <dckwlff@gmail.com>2021-01-13 21:22:35 +0100
committerDick Wolff <dckwlff@gmail.com>2021-01-13 21:22:35 +0100
commitfd12de9ebd7a75ca2f31e8b28bd2c5ac10c46e21 (patch)
tree6353134af591995861cd2822e8a04cbee19ca45e /src/components/services
parentb79561bc9c59d79875a9931d235774333579a363 (diff)
downloadhomer-fd12de9ebd7a75ca2f31e8b28bd2c5ac10c46e21.tar.gz
homer-fd12de9ebd7a75ca2f31e8b28bd2c5ac10c46e21.tar.zst
homer-fd12de9ebd7a75ca2f31e8b28bd2c5ac10c46e21.zip
Improvements
Diffstat (limited to 'src/components/services')
-rw-r--r--src/components/services/OpenWeather.vue28
1 files changed, 25 insertions, 3 deletions
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index a9310ee..b1e5c57 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -4,7 +4,7 @@
4 <a :href="item.url" :target="item.target" rel="noreferrer"> 4 <a :href="item.url" :target="item.target" rel="noreferrer">
5 <div class="card-content"> 5 <div class="card-content">
6 <div class="media"> 6 <div class="media">
7 <div v-if="image" class="media-left"> 7 <div v-if="image" class="media-left" :class="item.background">
8 <figure class="image is-48x48"> 8 <figure class="image is-48x48">
9 <img 9 <img
10 :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`" 10 :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
@@ -99,7 +99,29 @@ export default {
99</script> 99</script>
100 100
101<style scoped lang="scss"> 101<style scoped lang="scss">
102.media-left img { 102.media-left {
103 max-height: 100%; 103 &.circle,
104 &.square {
105 background-color: #e4e4e4;
106 }
107
108 &.circle {
109 border-radius: 90%;
110 }
111
112 img {
113 max-height: 100%;
114 }
115}
116
117// Add a circular border around the weather image when in dark mode.
118// Otherwise the image is not distinguishable.
119.is-dark {
120 .media-left {
121 &.circle,
122 &.square {
123 background-color: #909090;
124 }
125 }
104} 126}
105</style> 127</style>