From 6a1e81d5a8996dc7769015624279d54da6089613 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sun, 5 Jun 2022 04:51:49 +0200
Subject: [PATCH] Fix channel banner padding (#2288)

* Fix channel banner padding

* Add banner as background image for cover

* Fix lint warnings

* Fix ugly default channel banner
---
 src/renderer/views/Channel/Channel.css | 27 +++++++++++++++++--------
 src/renderer/views/Channel/Channel.vue | 28 +++++++++++++-------------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 42a2699d..1c7109bc 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -2,26 +2,32 @@
   position: relative;
   width: 85%;
   margin: 0 auto 20px;
+  box-sizing: border-box;
 }
 
-.channelBanner {
-  width: 100%;
-  max-height: 200px;
+.channelDetails {
+  padding: 0 0 16px;
 }
 
-.defaultChannelBanner {
+.channelBannerContainer {
+  background: center / cover no-repeat var(--banner-url, transparent);
+  height: 13vw;
+  min-height: 110px;
+  max-height: 32vh;
   width: 100%;
-  max-height: 200px;
-  height:200px;
-  background-color: black;
+}
+
+.channelBannerContainer.default {
   background-image: url("images/defaultBanner.png");
+  background-repeat: repeat;
+  background-size: contain;
 }
 
 .channelInfoContainer {
-  width: 100%;
   position: relative;
   background-color: var(--card-bg-color);
   margin-top: 10px;
+  padding: 0 16px;
 }
 
 .channelInfo {
@@ -143,3 +149,8 @@
   flex-direction: column;
   padding-left: 1em;
 }
+
+.channelLineContainer h1,
+.channelLineContainer p {
+  margin: 0;
+}
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index 50765254..1d6c3195 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -8,17 +8,16 @@
     />
     <ft-card
       v-else
-      class="card"
+      class="card channelDetails"
     >
-      <img
-        v-if="bannerUrl !== null"
-        class="channelBanner"
-        :src="bannerUrl"
-      >
-      <img
-        v-else
-        class="defaultChannelBanner"
-      >
+      <div
+        class="channelBannerContainer"
+        :class="{
+          default: !bannerUrl
+        }"
+        :style="{ '--banner-url': `url('${bannerUrl}')` }"
+      />
+
       <div
         class="channelInfoContainer"
       >
@@ -35,19 +34,20 @@
             <div
               class="channelLineContainer"
             >
-              <span
+              <h1
                 class="channelName"
               >
                 {{ channelName }}
-              </span>
-              <span
+              </h1>
+
+              <p
                 v-if="subCount !== null"
                 class="channelSubCount"
               >
                 {{ formattedSubCount }}
                 <span v-if="subCount === 1">{{ $t("Channel.Subscriber") }}</span>
                 <span v-else>{{ $t("Channel.Subscribers") }}</span>
-              </span>
+              </p>
             </div>
           </div>