Fix css

lib/Core/EpisodeAction/EpisodeActionReader.php

@@ -107,7 +107,10 @@ class EpisodeActionReader extends GPodderSyncEpisodeActionReader
 		return $episodes;
 	}
 
-	private function stringOrNull(mixed $value): ?string
+	/**
+	 * @param null|\SimpleXMLElement|string $value
+	 */
+	private function stringOrNull($value): ?string
 	{
 		if ($value) {
 			return (string) $value;

src/components/Discover/TopList.vue

@@ -1,21 +1,18 @@
 <template>
-	<fragment>
+	<div>
-		<p>
+		<NcLoadingIcon v-if="loading" />
-			<span>{{ t('Discover') }}</span>
+		<ul v-if="!loading" class="tops">
+			<li v-for="top in tops" :key="top.link">
+				<TopItem :author="top.author"
+					:image-url="top.imageUrl"
+					:link="top.link"
+					:title="top.title" />
+			</li>
+		</ul>
+		<p v-if="!loading" class="caption">
+			{{ t('Suggests by fyyd') }}
 		</p>
-		<p>
+	</div>
-			<NcLoadingIcon v-if="loading" />
-			<ul v-if="!loading" class="tops">
-				<li v-for="top in tops" :key="top.link">
-					<TopItem :author="top.author"
-						:image-url="top.imageUrl"
-						:link="top.link"
-						:title="top.title" />
-				</li>
-			</ul>
-			<span class="caption">{{ t('Suggests by fyyd') }}</span>
-		</p>
-	</fragment>
 </template>
 
 <script>
@@ -53,20 +50,24 @@ export default {
 </script>
 
 <style scoped>
-	.caption {
+	div {
-		float: right;
+		margin: 2rem 0;
-		font-size: small;
-		margin: .5rem;
 	}
 
-	.tops {
+	li {
+		flex-basis: 15%;
+	}
+
+	p {
+		font-size: small;
+		margin: .5rem;
+		text-align: right;
+	}
+
+	ul {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 2rem 5%;
 		justify-content: center;
 	}
-
-	.tops li {
-		flex-basis: 15%;
-	}
 </style>

src/components/Feed/Banner.vue

@@ -107,6 +107,7 @@ export default {
 
 	.header {
 		height: 14rem;
+		overflow: hidden;
 		padding: 2rem;
 		position: relative;
 	}

src/components/Feed/List.vue

@@ -46,11 +46,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-	ul {
-		background-color: rgba(0, 0, 0, .9);
-		height: 100%;
-		overflow: auto;
-	}
-</style>

src/views/Discover.vue

@@ -1,20 +1,18 @@
 <template>
-	<div class="main">
+	<NcAppContent class="main">
-		<p>
+		<NcTextField class="search" :label="t('Find a podcast')" :value.sync="search">
-			<NcTextField :label="t('Find a podcast')" :value.sync="search">
+			<Magnify :size="20" />
-				<Magnify :size="20" />
+		</NcTextField>
-			</NcTextField>
-		</p>
 		<Search v-if="search" :value="search" />
 		<TopList v-if="!search" />
 		<AddRss v-if="!search" />
-	</div>
+	</NcAppContent>
 </template>
 
 <script>
+import { NcAppContent, NcTextField } from '@nextcloud/vue'
 import AddRss from '../components/Discover/AddRss.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
-import { NcTextField } from '@nextcloud/vue'
 import Search from '../components/Discover/Search.vue'
 import TopList from '../components/Discover/TopList.vue'
 
@@ -23,6 +21,7 @@ export default {
 	components: {
 		AddRss,
 		Magnify,
+		NcAppContent,
 		NcTextField,
 		Search,
 		TopList,
@@ -37,9 +36,11 @@ export default {
 
 <style scoped>
 	.main {
-		display: flex;
+		padding: 15px 51px;
-		flex-direction: column;
+		overflow: hidden;
-		gap: 1rem;
+	}
-		margin: 15px 51px;
+
+	.search {
+		margin-bottom: 1rem;
 	}
 </style>

src/views/Feed.vue

@@ -1,5 +1,5 @@
 <template>
-	<fragment>
+	<NcAppContent>
 		<NcLoadingIcon v-if="loading" />
 		<NcEmptyContent v-if="failed" :name="t('Error loading feed')">
 			<template #icon>
@@ -13,11 +13,11 @@
 			:link="feed.link"
 			:title="feed.title" />
 		<List v-if="feed" />
-	</fragment>
+	</NcAppContent>
 </template>
 
 <script>
-import { NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { NcAppContent, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
 import Banner from '../components/Feed/Banner.vue'
 import List from '../components/Feed/List.vue'
@@ -29,6 +29,7 @@ export default {
 	components: {
 		Alert,
 		Banner,
+		NcAppContent,
 		NcEmptyContent,
 		NcLoadingIcon,
 		List,

src/views/Index.vue

@@ -17,15 +17,12 @@
 				</ul>
 			</NcAppContentList>
 		</NcAppNavigation>
-		<NcAppContent>
+		<router-view />
-			<router-view />
-		</NcAppContent>
 	</fragment>
 </template>
 
 <script>
 import {
-	NcAppContent,
 	NcAppContentList,
 	NcAppNavigation,
 	NcAppNavigationNew,
@@ -39,7 +36,6 @@ export default {
 	name: 'Index',
 	components: {
 		Item,
-		NcAppContent,
 		NcAppContentList,
 		NcAppNavigation,
 		NcAppNavigationNew,