Improve style after vue update
All checks were successful
repod / nextcloud (push) Successful in 1m17s
repod / xml (push) Successful in 24s
repod / nodejs (push) Successful in 2m9s

This commit is contained in:
Michel Roux 2023-12-23 21:36:20 +01:00
parent dc1d189510
commit 44db2066aa
8 changed files with 52 additions and 60 deletions

View File

@ -1,22 +0,0 @@
<template>
<ul :class="episode ? 'margin' : ''">
<slot />
</ul>
</template>
<script>
export default {
name: 'List',
computed: {
episode() {
return this.$store.state.player.episode
},
},
}
</script>
<style scoped>
.margin {
margin-bottom: 6rem;
}
</style>

View File

@ -1,7 +1,6 @@
<template>
<ul>
<NcAppNavigationNewItem :loading="loading"
:name="t('Add a RSS link')"
<NcAppNavigationNewItem :name="t('Add a RSS link')"
@new-item="addSubscription">
<template #icon>
<Plus :size="20" />
@ -20,12 +19,6 @@ export default {
NcAppNavigationNewItem,
Plus,
},
data() {
return {
loading: false,
feedUrl: '',
}
},
methods: {
addSubscription(feedUrl) {
this.$router.push(btoa(feedUrl))

View File

@ -1,25 +1,27 @@
<template>
<List>
<NcListItem v-for="feed in feeds"
:key="feed.link"
:details="formatTimeAgo(new Date(feed.fetchedAtUnix*1000))"
:name="feed.title"
:to="toUrl(feed.link)">
<template #icon>
<NcAvatar :display-name="feed.author"
:is-no-user="true"
:url="feed.imageUrl" />
</template>
<template #subname>
{{ feed.author }}
</template>
</NcListItem>
</List>
<div>
<NcLoadingIcon v-if="loading" />
<ul v-if="!loading">
<NcListItem v-for="feed in feeds"
:key="feed.link"
:details="formatTimeAgo(new Date(feed.fetchedAtUnix*1000))"
:name="feed.title"
:to="toUrl(feed.link)">
<template #icon>
<NcAvatar :display-name="feed.author"
:is-no-user="true"
:url="feed.imageUrl" />
</template>
<template #subname>
{{ feed.author }}
</template>
</NcListItem>
</ul>
</div>
</template>
<script>
import { NcAvatar, NcListItem } from '@nextcloud/vue'
import List from '../Atoms/List.vue'
import { NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
import axios from '@nextcloud/axios'
import { debounce } from '../../utils/debounce.js'
import { formatTimeAgo } from '../../utils/time.js'
@ -29,9 +31,9 @@ import { showError } from '@nextcloud/dialogs'
export default {
name: 'Search',
components: {
List,
NcAvatar,
NcListItem,
NcLoadingIcon,
},
props: {
value: {
@ -42,6 +44,7 @@ export default {
data() {
return {
feeds: [],
loading: false,
}
},
watch: {
@ -53,6 +56,7 @@ export default {
formatTimeAgo,
search: debounce(async function value() {
try {
this.loading = true
const currentSearch = this.value
const feeds = await axios.get(generateUrl('/apps/repod/search?value={value}', { value: currentSearch }))
if (currentSearch === this.value) {
@ -61,6 +65,10 @@ export default {
} catch (e) {
console.error(e)
showError(t('Could not fetch search results'))
} finally {
if (this.feeds) {
this.loading = false
}
}
}, 200),
toUrl(url) {

View File

@ -5,6 +5,7 @@
<NcAvatar class="avatar"
:display-name="author"
:is-no-user="true"
:size="128"
:url="imageUrl" />
<div class="infos">
<h2>{{ title }}</h2>
@ -13,7 +14,7 @@
</a>
<br><br>
<p>
<small>{{ description }}</small>
<small>{{ description | stripHTML }}</small>
</p>
</div>
<NcAppNavigationNew v-if="!isSubscribed"

View File

@ -1,7 +1,7 @@
<template>
<div>
<NcLoadingIcon v-if="loading" />
<List v-if="!loading">
<NcLoadingIcon v-if="loading" class="loading" />
<ul v-if="!loading">
<NcListItem v-for="episode in episodes"
:key="episode.episodeGuid"
:active="isCurrentEpisode(episode)"
@ -33,14 +33,13 @@
</NcActionButton>
</template>
</NcListItem>
</List>
</ul>
</div>
</template>
<script>
import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
import { formatTimeAgo, formatTimer } from '../../utils/time.js'
import List from '../Atoms/List.vue'
import PlayButton from 'vue-material-design-icons/Play.vue'
import StopButton from 'vue-material-design-icons/Stop.vue'
import axios from '@nextcloud/axios'
@ -50,7 +49,6 @@ import { showError } from '@nextcloud/dialogs'
export default {
name: 'Episodes',
components: {
List,
NcActionButton,
NcAvatar,
NcListItem,
@ -101,4 +99,8 @@ export default {
.ended {
opacity: .5;
}
.loading {
margin: 2rem 0;
}
</style>

View File

@ -9,11 +9,11 @@
</NcAppNavigationNew>
</router-link>
<NcLoadingIcon v-if="loading" />
<List v-if="!loading">
<ul v-if="!loading">
<Item v-for="subscriptionUrl of subscriptions"
:key="subscriptionUrl"
:url="subscriptionUrl" />
</List>
</ul>
</NcAppContentList>
</NcAppNavigation>
</template>
@ -26,7 +26,6 @@ import {
NcLoadingIcon,
} from '@nextcloud/vue'
import Item from './Item.vue'
import List from '../Atoms/List.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import { showError } from '@nextcloud/dialogs'
@ -34,7 +33,6 @@ export default {
name: 'Subscriptions',
components: {
Item,
List,
NcAppContentList,
NcAppNavigation,
NcAppNavigationNew,

View File

@ -15,6 +15,12 @@ Vue.mixin({ methods: { t, n } })
Vue.prototype.AppConfig = window.oc_appconfig
Vue.filter('stripHTML', (value) => {
const div = document.createElement('div')
div.innerHTML = value
return div.textContent || div.innerText || ''
})
export default new Vue({
el: '#content',
router,

View File

@ -1,6 +1,6 @@
<template>
<NcAppContent>
<NcLoadingIcon v-if="loading" />
<NcLoadingIcon v-if="loading" class="loading" />
<NcEmptyContent v-if="failed" :name="t('Error loading feed')">
<template #icon>
<Alert />
@ -59,3 +59,9 @@ export default {
},
}
</script>
<style scoped>
.loading {
margin: 2rem 0;
}
</style>