TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2204 from rramiachraf/channel-page-ui

Browse source 
Tweak channel page layout
This commit is contained in:
Bnyro 2023-03-16 16:30:08 +01:00 committed by GitHub
commit 914ea5f624
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/ChannelPage.vue
View file

@ -2,17 +2,22 @@
<ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" /> <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
<LoadingIndicatorPage :show-content="channel != null && !channel.error"> <LoadingIndicatorPage :show-content="channel != null && !channel.error">
<div class="flex justify-center place-items-center"> <img
v-if="channel.bannerUrl"
:src="channel.bannerUrl"
class="w-full py-1.5 h-30 md:h-50 object-cover"
loading="lazy"
/>
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex place-items-center">
<img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" /> <img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
<h1 v-text="channel.name" /> <div class="flex gap-1 items-center">
<font-awesome-icon class="ml-1.5 !text-3xl" v-if="channel.verified" icon="check" /> <h1 v-text="channel.name" class="!text-xl" />
<font-awesome-icon class="!text-xl" v-if="channel.verified" icon="check" />
</div>
</div> </div>
<img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" />
<!-- eslint-disable-next-line vue/no-v-html -->
<p class="whitespace-pre-wrap">
<span v-html="purifyHTML(rewriteDescription(channel.description))" />
</p>
<div class="flex gap-2">
<button <button
class="btn" class="btn"
@click="subscribeHandler" @click="subscribeHandler"
@ -30,14 +35,28 @@
v-if="channel.id" v-if="channel.id"
:href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`" :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
target="_blank" target="_blank"
class="btn flex-col mx-3" class="btn flex-col"
> >
<font-awesome-icon icon="rss" /> <font-awesome-icon icon="rss" />
</a> </a>
</div>
</div>
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="whitespace-pre-wrap py-2 mx-1">
<span v-if="fullDescription" v-html="purifyHTML(rewriteDescription(channel.description))" />
<span v-html="purifyHTML(rewriteDescription(channel.description.slice(0, 100))) + '...'" v-else />
<button
class="hover:underline font-semibold text-neutral-500 block whitespace-normal"
@click="fullDescription = !fullDescription"
>
[{{ fullDescription ? $t("actions.show_less") : $t("actions.show_more") }}]
</button>
</div>
<WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" /> <WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" />
<div class="flex mt-4 mb-2"> <div class="flex my-2 mx-1">
<button <button
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
:key="tab.name" :key="tab.name"
@ -84,6 +103,7 @@ export default {
tabs: [], tabs: [],
selectedTab: 0, selectedTab: 0,
contentItems: [], contentItems: [],
fullDescription: false,
}; };
}, },
mounted() { mounted() {

4
src/locales/en.json
View file

@ -127,7 +127,9 @@
"no_valid_playlists": "The file doesn't contain valid playlists!", "no_valid_playlists": "The file doesn't contain valid playlists!",
"with_playlist": "Share with playlist", "with_playlist": "Share with playlist",
"bookmark_playlist": "Bookmark", "bookmark_playlist": "Bookmark",
"playlist_bookmarked": "Bookmarked" "playlist_bookmarked": "Bookmarked",
"show_more": "Show more",
"show_less": "Show less"
}, },
"comment": { "comment": {
"pinned_by": "Pinned by {author}", "pinned_by": "Pinned by {author}",