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

@@ -2,26 +2,32 @@
   position: relative;
   width: 85%;
   margin: 0 auto 20px;
+  box-sizing: border-box;
 }
 
-.channelBanner {
+.channelDetails {
-  width: 100%;
+  padding: 0 0 16px;
-  max-height: 200px;
 }
 
-.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;
+}

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>
+              </h1>
-              <span
+
+              <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>