diff options
author | Devlin Junker <devlin.junker@gmail.com> | 2023-10-04 15:02:39 -0700 |
---|---|---|
committer | Benjamin Brahmer <info@b-brahmer.de> | 2023-10-11 18:41:33 +0200 |
commit | ed62d3eb3d0bb10733d9bc3c6d816f2a063fa2d7 (patch) | |
tree | 7680348d752a4e876f512f7eda5f1bd604973fdf /src | |
parent | 60f319fe8aec339a26fb287fff94d6ab4a544795 (diff) |
cleaning up explore page
Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/AddFeed.vue | 13 | ||||
-rw-r--r-- | src/components/routes/Explore.vue | 44 |
2 files changed, 43 insertions, 14 deletions
diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue index 77f5e5b6e..79f359b24 100644 --- a/src/components/AddFeed.vue +++ b/src/components/AddFeed.vue @@ -127,6 +127,15 @@ export default Vue.extend({ NcButton, NcSelect, }, + props: { + feed: { + type: Object, + required: false, + default: () => { + return { url: '' } + }, + }, + }, data: (): AddFeedState => { return { folder: undefined, @@ -152,7 +161,9 @@ export default Vue.extend({ }, }, created() { - if (this.$route.query.subscribe_to) { + if (this.feed.feed) { + this.feedUrl = this.feed.feed + } else if (this.$route.query.subscribe_to) { this.feedUrl = this.$route.query.subscribe_to as string } }, diff --git a/src/components/routes/Explore.vue b/src/components/routes/Explore.vue index 5edca3dfe..837314f27 100644 --- a/src/components/routes/Explore.vue +++ b/src/components/routes/Explore.vue @@ -1,9 +1,13 @@ <template> - <div id="explore"> + <div id="explore" style="display: flex; justify-items: center;"> <AddFeed v-if="showAddFeed" :feed="feed" @close="closeShowAddFeed()" /> - <div class="grid-container"> + <div v-if="!exploreSites" style="margin: auto;"> + {{ t('news', 'No feeds found to add') }} + </div> + <div v-else class="grid-container" style="display:flex;flex-wrap: wrap;"> <div v-for="entry in exploreSites" :key="entry.title" + style="flex-grow: 1; max-width: calc(50% - 24px); min-width: 300px; display: flex; flex-direction: column;" class="explore-feed grid-item"> <h2 v-if="entry.favicon" class="explore-title" @@ -15,14 +19,14 @@ <h2 v-if="!entry.favicon" class="icon-rss explore-title"> {{ entry.title }} </h2> - <div class="explore-content"> + <div class="explore-content" style="flex-grow: 1"> <p>{{ entry.description }}</p> <div class="explore-logo"> <img :src="entry.image"> </div> </div> - <NcButton @click="subscribe(entry.feed)"> + <NcButton style="max-width: 100%;" @click="subscribe(entry)"> {{ t("news", "Subscribe to") }} {{ entry.title }} </NcButton> </div> @@ -48,8 +52,12 @@ const ExploreComponent = Vue.extend({ NcButton, AddFeed, }, - data: () => { - const exploreSites: ExploreSite[] = [] + data: (): { + exploreSites: ExploreSite[] | undefined; + feed: Feed; + showAddFeed: boolean; + } => { + const exploreSites: ExploreSite[] | undefined = [] const feed: Feed = {} as Feed const showAddFeed = false @@ -68,15 +76,25 @@ const ExploreComponent = Vue.extend({ const settings = await axios.get(router.generateUrl('/apps/news/settings')) const exploreUrl = settings.data.settings?.exploreUrl + 'feeds.en.json' - const explore = await axios.get(exploreUrl) + try { + const explore = await axios.get(exploreUrl) + + Object.keys(explore.data).forEach((key) => + explore.data[key].forEach((value: ExploreSite) => { + if (this.exploreSites) { + this.exploreSites.push(value) + } else { + this.exploreSites = [value] + } + }, + ), + ) + } catch { + this.exploreSites = undefined + } - Object.keys(explore.data).forEach((key) => - explore.data[key].forEach((value: ExploreSite) => - this.exploreSites.push(value), - ), - ) }, - async subscribe(feed: Feed) { + subscribe(feed: Feed) { this.feed = feed this.showAddFeed = true }, |