💄 Update Apod.vue to new API

This commit is contained in:
k073l 2022-06-21 13:57:33 +02:00
parent bbb0f16ead
commit 45900da025
1 changed files with 18 additions and 18 deletions

View File

@ -1,15 +1,15 @@
<template> <template>
<div class="apod-wrapper" v-if="image"> <div class="apod-wrapper" v-if="url">
<a :href="link" class="title" target="__blank" title="View Article"> <a :href="link" class="title" target="__blank" title="View Article">
{{ title }} {{ title }}
</a> </a>
<a :href="hdImage" title="View HD Image" class="picture" target="__blank"> <a :href="hdurl" title="View HD Image" class="picture" target="__blank">
<img :src="image" :alt="title" /> <img :src="url" :alt="title" />
</a> </a>
<p class="copyright">{{ copyright }}</p> <p class="copyright">{{ copyright }}</p>
<p class="description">{{ truncatedDescription }}</p> <p class="explanation">{{ truncatedExplanation }}</p>
<p @click="toggleShowFull" class="expend-details-btn"> <p @click="toggleShowFull" class="expend-details-btn">
{{ showFullDesc ? $t('widgets.general.show-less') : $t('widgets.general.show-more') }} {{ showFullExp ? $t('widgets.general.show-less') : $t('widgets.general.show-more') }}
</p> </p>
</div> </div>
</template> </template>
@ -24,17 +24,17 @@ export default {
data() { data() {
return { return {
title: null, title: null,
image: null, url: null,
hdImage: null, hdurl: null,
link: null, link: 'https://apod.nasa.gov/apod/astropix.html',
description: null, explanation: null,
copyright: null, copyright: null,
showFullDesc: false, showFullExp: false,
}; };
}, },
computed: { computed: {
truncatedDescription() { truncatedExplanation() {
return this.showFullDesc ? this.description : `${this.description.substring(0, 100)}...`; return this.showFullExp ? this.explanation : `${this.explanation.substring(0, 100)}...`;
}, },
}, },
methods: { methods: {
@ -52,14 +52,14 @@ export default {
}, },
processData(data) { processData(data) {
this.title = data.title; this.title = data.title;
this.image = data.url; this.url = data.url;
this.hdImage = data.hdurl; this.hdurl = data.hdurl;
this.link = data.apod_site; this.link = data.link;
this.description = data.description; this.explanation = data.explanation;
this.copyright = data.copyright; this.copyright = data.copyright;
}, },
toggleShowFull() { toggleShowFull() {
this.showFullDesc = !this.showFullDesc; this.showFullExp = !this.showFullExp;
}, },
}, },
}; };
@ -85,7 +85,7 @@ export default {
opacity: var(--dimming-factor); opacity: var(--dimming-factor);
color: var(--widget-text-color); color: var(--widget-text-color);
} }
p.description { p.explanation {
color: var(--widget-text-color); color: var(--widget-text-color);
font-size: 1rem; font-size: 1rem;
margin: 0.5rem 0; margin: 0.5rem 0;