Improve style after vue update
This commit is contained in:
parent
dc1d189510
commit
44db2066aa
@ -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>
|
@ -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))
|
||||
|
@ -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) {
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user