From 725b9d2c484c2d93b22a421d1c434b07bfba3e35 Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Wed, 15 Mar 2023 15:38:30 +0100
Subject: [PATCH 1/4] Tweak channel page layout

---
 src/components/ChannelPage.vue | 72 ++++++++++++++++++++--------------
 1 file changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 46d161f9..f78c9de1 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -2,38 +2,49 @@
     <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
 
     <LoadingIndicatorPage :show-content="channel != null && !channel.error">
-        <div class="flex justify-center place-items-center">
-            <img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
-            <h1 v-text="channel.name" />
-            <font-awesome-icon class="ml-1.5 !text-3xl" v-if="channel.verified" icon="check" />
-        </div>
         <img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" />
+        <div class="flex justify-between items-center">
+            <div class="flex place-items-center">
+                <img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
+                <div class="flex gap-1 items-center">
+                    <h1 v-text="channel.name" class="!text-xl" />
+                    <font-awesome-icon class="!text-xl" v-if="channel.verified" icon="check" />
+                </div>
+            </div>
+
+            <div class="flex gap-2">
+                <button
+                    class="btn"
+                    @click="subscribeHandler"
+                    v-t="{
+                        path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
+                        args: { count: numberFormat(channel.subscriberCount) },
+                    }"
+                ></button>
+
+                <!-- RSS Feed button -->
+                <a
+                    aria-label="RSS feed"
+                    title="RSS feed"
+                    role="button"
+                    v-if="channel.id"
+                    :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
+                    target="_blank"
+                    class="btn flex-col"
+                >
+                    <font-awesome-icon icon="rss" />
+                </a>
+            </div>
+        </div>
+
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <p class="whitespace-pre-wrap">
-            <span v-html="purifyHTML(rewriteDescription(channel.description))" />
-        </p>
-
-        <button
-            class="btn"
-            @click="subscribeHandler"
-            v-t="{
-                path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
-                args: { count: numberFormat(channel.subscriberCount) },
-            }"
-        ></button>
-
-        <!-- RSS Feed button -->
-        <a
-            aria-label="RSS feed"
-            title="RSS feed"
-            role="button"
-            v-if="channel.id"
-            :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
-            target="_blank"
-            class="btn flex-col mx-3"
-        >
-            <font-awesome-icon icon="rss" />
-        </a>
+        <div class="whitespace-pre-wrap py-3">
+            <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 ml-1" @click="fullDescription = !fullDescription">
+                [{{ fullDescription ? "Show less" : "Show more" }}]
+            </button>
+        </div>
 
         <WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" />
 
@@ -84,6 +95,7 @@ export default {
             tabs: [],
             selectedTab: 0,
             contentItems: [],
+            fullDescription: false,
         };
     },
     mounted() {

From 7e173e6c12a4c33a13a865f8436af6439c50e0bd Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Thu, 16 Mar 2023 00:27:52 +0100
Subject: [PATCH 2/4] Fix small banner on mobile devices and localize `show
 more`/`show less`

---
 src/components/ChannelPage.vue | 11 +++++++----
 src/locales/en.json            |  4 +++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index f78c9de1..24155b96 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -2,8 +2,8 @@
     <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
 
     <LoadingIndicatorPage :show-content="channel != null && !channel.error">
-        <img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" />
-        <div class="flex justify-between items-center">
+        <img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full py-1.5 h-30 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" />
                 <div class="flex gap-1 items-center">
@@ -41,8 +41,11 @@
         <div class="whitespace-pre-wrap py-3">
             <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 ml-1" @click="fullDescription = !fullDescription">
-                [{{ fullDescription ? "Show less" : "Show more" }}]
+            <button
+                class="hover:underline font-semibold text-neutral-500 ml-1"
+                @click="fullDescription = !fullDescription"
+            >
+                [{{ fullDescription ? $t("actions.show_less") : $t("actions.show_more") }}]
             </button>
         </div>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 6ddfab97..9575915c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -127,7 +127,9 @@
         "no_valid_playlists": "The file doesn't contain valid playlists!",
         "with_playlist": "Share with playlist",
         "bookmark_playlist": "Bookmark",
-        "playlist_bookmarked": "Bookmarked"
+        "playlist_bookmarked": "Bookmarked",
+	"show_more": "Show more",
+	"show_less": "Show less"
     },
     "comment": {
         "pinned_by": "Pinned by {author}",

From d9e4192de44a027abec1fdf10eeeac5c0f455e47 Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Thu, 16 Mar 2023 00:38:29 +0100
Subject: [PATCH 3/4] Decrease margin and padding from tabs and description

---
 src/components/ChannelPage.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 24155b96..1963090b 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -2,7 +2,12 @@
     <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
 
     <LoadingIndicatorPage :show-content="channel != null && !channel.error">
-        <img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full py-1.5 h-30 object-cover" loading="lazy" />
+        <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" />
@@ -38,7 +43,7 @@
         </div>
 
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="whitespace-pre-wrap py-3">
+        <div class="whitespace-pre-wrap py-2">
             <span v-if="fullDescription" v-html="purifyHTML(rewriteDescription(channel.description))" />
             <span v-html="purifyHTML(rewriteDescription(channel.description.slice(0, 100))) + '...'" v-else />
             <button
@@ -51,7 +56,7 @@
 
         <WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" />
 
-        <div class="flex mt-4 mb-2">
+        <div class="flex my-2">
             <button
                 v-for="(tab, index) in tabs"
                 :key="tab.name"

From f556d37fafe4bd385f121869a47a9cc6c46469e8 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 16 Mar 2023 16:26:09 +0100
Subject: [PATCH 4/4] Minor visual improvements to the channel page

---
 src/components/ChannelPage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 1963090b..6bcbed31 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -43,11 +43,11 @@
         </div>
 
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="whitespace-pre-wrap py-2">
+        <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 ml-1"
+                class="hover:underline font-semibold text-neutral-500 block whitespace-normal"
                 @click="fullDescription = !fullDescription"
             >
                 [{{ fullDescription ? $t("actions.show_less") : $t("actions.show_more") }}]
@@ -56,7 +56,7 @@
 
         <WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" />
 
-        <div class="flex my-2">
+        <div class="flex my-2 mx-1">
             <button
                 v-for="(tab, index) in tabs"
                 :key="tab.name"