1
1
<template >
2
- <div class =" apod-wrapper" v-if =" image " >
2
+ <div class =" apod-wrapper" v-if =" url " >
3
3
<a :href =" link" class =" title" target =" __blank" title =" View Article" >
4
4
{{ title }}
5
5
</a >
6
- <a :href =" hdImage " title =" View HD Image" class =" picture" target =" __blank" >
7
- <img :src =" image " :alt =" title" />
6
+ <a :href =" hdurl " title =" View HD Image" class =" picture" target =" __blank" >
7
+ <img :src =" url " :alt =" title" />
8
8
</a >
9
9
<p class =" copyright" >{{ copyright }}</p >
10
- <p class =" description " >{{ truncatedDescription }}</p >
10
+ <p class =" explanation " >{{ truncatedExplanation }}</p >
11
11
<p @click =" toggleShowFull" class =" expend-details-btn" >
12
- {{ showFullDesc ? $t('widgets.general.show-less') : $t('widgets.general.show-more') }}
12
+ {{ showFullExp ? $t('widgets.general.show-less') : $t('widgets.general.show-more') }}
13
13
</p >
14
14
</div >
15
15
</template >
@@ -24,17 +24,17 @@ export default {
24
24
data () {
25
25
return {
26
26
title: null ,
27
- image : null ,
28
- hdImage : null ,
29
- link: null ,
30
- description : null ,
27
+ url : null ,
28
+ hdurl : null ,
29
+ link: ' https://apod.nasa.gov/apod/astropix.html ' ,
30
+ explanation : null ,
31
31
copyright: null ,
32
- showFullDesc : false ,
32
+ showFullExp : false ,
33
33
};
34
34
},
35
35
computed: {
36
- truncatedDescription () {
37
- return this .showFullDesc ? this .description : ` ${ this .description .substring (0 , 100 )} ...` ;
36
+ truncatedExplanation () {
37
+ return this .showFullExp ? this .explanation : ` ${ this .explanation .substring (0 , 100 )} ...` ;
38
38
},
39
39
},
40
40
methods: {
@@ -52,14 +52,14 @@ export default {
52
52
},
53
53
processData (data ) {
54
54
this .title = data .title ;
55
- this .image = data .url ;
56
- this .hdImage = data .hdurl ;
57
- this .link = data .apod_site ;
58
- this .description = data .description ;
55
+ this .url = data .url ;
56
+ this .hdurl = data .hdurl ;
57
+ this .link = data .link ;
58
+ this .explanation = data .explanation ;
59
59
this .copyright = data .copyright ;
60
60
},
61
61
toggleShowFull () {
62
- this .showFullDesc = ! this .showFullDesc ;
62
+ this .showFullExp = ! this .showFullExp ;
63
63
},
64
64
},
65
65
};
@@ -85,7 +85,7 @@ export default {
85
85
opacity : var (--dimming-factor );
86
86
color : var (--widget-text-color );
87
87
}
88
- p .description {
88
+ p .explanation {
89
89
color : var (--widget-text-color );
90
90
font-size : 1rem ;
91
91
margin : 0.5rem 0 ;
0 commit comments