From 32c71e8b57bce2f4bfc5b485c227a6faf5bd5c2f Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Fri, 25 Dec 2020 00:27:13 +0100
Subject: [PATCH] further work on browse page
---
src/components/MediaHeader.vue | 10 +++-
src/views/Browse.vue | 95 ++++++++++++++++++++++++++--------
src/views/Episode.vue | 31 +++++++----
src/views/Show.vue | 3 +-
4 files changed, 102 insertions(+), 37 deletions(-)
diff --git a/src/components/MediaHeader.vue b/src/components/MediaHeader.vue
index afb21a4..d7a38d4 100644
--- a/src/components/MediaHeader.vue
+++ b/src/components/MediaHeader.vue
@@ -32,7 +32,9 @@
<div class="podcastAuthor">
by <a :href="htmlURL" target="_blank">{{ author }}</a>
</div>
- <div class="podcastControls">
+ <div
+ v-show="isshow"
+ class="podcastControls">
<button class="icon-add-white podcastButton button primary new-button">
{{ t('podcast', 'Subscribe') }}
</button>
@@ -91,6 +93,10 @@ export default {
type: String,
default: '',
},
+ isshow: {
+ type: Boolean,
+ default: false,
+ },
},
methods: {
getCategoryName(categoryid) {
@@ -148,7 +154,7 @@ export default {
}
.podcastAuthor {
- padding-bottom: 7px;
+ padding-bottom: 10px;
a {
color: white;
diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index 1e41dcb..1758159 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -22,8 +22,13 @@
<template>
<div class="mainContent">
<div class="podcastSection">
- <h1>Hot podcasts</h1>
+ <div class="podcastSectionHeader">
+ <h1>Hot podcasts</h1>
+ <a href="">Show all</a>
+ </div>
<div class="podcastSlider">
+ <div class="navPrev" />
+ <div class="navNext" />
<div
v-for="(podcast, idx) in podcastsHot"
:key="idx"
@@ -44,27 +49,35 @@
</div>
<div class="podcastSection">
- <h1>New podcasts</h1>
+ <div class="podcastSectionHeader">
+ <h1>New podcasts</h1>
+ <a href="">Show all</a>
+ </div>
<div class="podcastSlider">
<div
- v-for="(podcast, idx) in podcastsHot"
+ v-for="(podcast, idx) in podcastsLatest"
:key="idx"
class="podcastCard">
- <div
- class="podcastImage"
- :style="{ backgroundImage: `url(${podcast.smallImageURL})` }" />
- <span class="title">
- {{ podcast.title }}
- </span>
- <span class="subtitle">
- {{ podcast.author }}
- </span>
+ <router-link :to="{ path: `/browse/show/${podcast.id}`}">
+ <div
+ class="podcastImage"
+ :style="{ backgroundImage: `url(${podcast.smallImageURL})` }" />
+ <span class="title">
+ {{ podcast.title }}
+ </span>
+ <span class="subtitle">
+ {{ podcast.author }}
+ </span>
+ </router-link>
</div>
</div>
</div>
<div class="podcastSection">
- <h1>Podcast charts</h1>
+ <div class="podcastSectionHeader">
+ <h1>Podcast charts</h1>
+ <a href="">Show all</a>
+ </div>
<div class="podcastSlider">
<div
v-for="(podcast, idx) in podcastsHot"
@@ -93,6 +106,7 @@ export default {
name: 'Browse',
data: () => ({
podcastsHot: {},
+ podcastsLatest: {},
}),
mounted() {
this.queryTopPodcasts()
@@ -103,20 +117,27 @@ export default {
const vm = this
- const queryURI = 'https://api.fyyd.de/0.2/feature/podcast/hot'
+ let queryURI = 'https://api.fyyd.de/0.2/feature/podcast/hot'
try {
delete axios.defaults.headers.requesttoken
await axios.get(queryURI)
.then(function(response) {
- vm.processPodcasts(response.data)
+ vm.podcastsHot = response.data.data
})
} catch (error) {
showError(t('podcast', 'Could not fetch podcasts from remote API'))
}
- },
- processPodcasts(podcast) {
- this.podcastsHot = podcast.data
+ queryURI = 'https://api.fyyd.de/0.2/podcast/latest'
+ try {
+ delete axios.defaults.headers.requesttoken
+ await axios.get(queryURI)
+ .then(function(response) {
+ vm.podcastsLatest = response.data.data
+ })
+ } catch (error) {
+ showError(t('podcast', 'Could not fetch podcasts from remote API'))
+ }
},
},
@@ -137,6 +158,26 @@ export default {
margin-bottom: 30px;
}
+.podcastSectionHeader {
+ padding: 10px 0px;
+ z-index: 60;
+ position: sticky;
+ top: 50px;
+ background: white;
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+
+ h1 {
+ flex-grow: 1;
+ margin-bottom: 0px;
+ }
+ a {
+ color: #1976d2;
+ cursor: pointer;
+ }
+}
+
.podcastSlider {
width: 100%;
display: flex;
@@ -149,7 +190,7 @@ export default {
display: block;
position: absolute;
left: 30px;
- height: 190px;
+ height: 220px;
width: 100px;
background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
}
@@ -159,17 +200,21 @@ export default {
display: block;
position: absolute;
right: 30px;
- height: 190px;
+ height: 220px;
width: 100px;
background-image: linear-gradient(to left, white 0%, rgba(255,255,255,0) 100%);
}
}
.podcastCard {
- width: 140px;
- height: 190px;
- margin-right: 20px;
+ width: 170px;
+ height: 220px;
+ margin-right: 15px;
flex-shrink: 0;
+ background: rgba(241, 241, 241, 0.6);
+ border-radius: 3px;
+ padding: 15px;
+ transition: all 0.2s ease-in-out;
* {
cursor: pointer;
@@ -200,4 +245,8 @@ export default {
color: #b5b1b1;
}
}
+
+.podcastCard:hover {
+ background: rgb(236, 236, 236);
+}
</style>
diff --git a/src/views/Episode.vue b/src/views/Episode.vue
index 6e5919f..fc8d914 100644
--- a/src/views/Episode.vue
+++ b/src/views/Episode.vue
@@ -28,20 +28,21 @@
:imgurl="episode.imgURL"
:title="episode.title"
:author="episode.author"
- :html-url="episode.htmlURL">
+ :html-url="episode.htmlURL"
+ :isshow="false">
<button class="icon-play-white podcastButton button primary new-button">
{{ t('podcast', 'Play episode') }}
</button>
- <br><br>
- <span>
- <b>Duration:</b>
- {{ episode.duration_string }}
- </span>
- <br>
- <span>
- <b>Publication date:</b>
- {{ readableDate(episode.pubdate) }}
- </span>
+ <div class="episodeDetails">
+ <span>
+ <b>Duration:</b>
+ {{ episode.duration_string }}
+ </span>
+ <span>
+ <b>Publication date:</b>
+ {{ readableDate(episode.pubdate) }}
+ </span>
+ </div>
</MediaHeader>
<ContentCollapsable
title="Episode notes">
@@ -140,6 +141,14 @@ export default {
<style lang="scss">
+.episodeDetails {
+ display: block;
+ margin-top: 10px;
+ span {
+ display: block;
+ }
+}
+
.episodeContent {
p {
padding: 10px 30px;
diff --git a/src/views/Show.vue b/src/views/Show.vue
index 9c42efe..857ebe4 100644
--- a/src/views/Show.vue
+++ b/src/views/Show.vue
@@ -30,7 +30,8 @@
:author="podcast.author"
:html-url="podcast.htmlURL"
:categories="podcast.categories"
- :description="podcast.description" />
+ :description="podcast.description"
+ :isshow="true" />
<Table
v-resize="onResize"
:episodes="podcast.episodes"
--
GitLab