Channel view layout issue (#1591)

* #1499. On channel page. Change absolute css to display flex

* Inline css move to file

* Update Channel.css

* Class additions and inline css removal

* empty line

* Update Channel.css

Co-authored-by: Preston <freetubeapp@protonmail.com>
Co-authored-by: peepopoggers <72892531+peepopoggers@users.noreply.github.com>

src/renderer/views/Channel/Channel.css

@@ -1,42 +1,33 @@
 .card {
   position: relative;
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 20px;
+  margin: 0 auto 20px;
 }
 
 .channelBanner {
   width: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  max-height: 300px;
+  max-height: 200px;
 }
 
 .defaultChannelBanner {
   width: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  height: 200px;
+  max-height: 200px;
+  height:200px;
   background-color: black;
-  background-image: url("~images/defaultBanner.png");
+  background-image: url("images/defaultBanner.png");
 }
 
 .channelInfoContainer {
   width: 100%;
-  height: 200px;
-  margin-top: 300px;
   position: relative;
   background-color: var(--card-bg-color);
 }
 
 .channelInfo {
-  height: 100px;
-  width: 85%;
-  position: absolute;
-  top: 30px;
-  left: 30px;
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+  justify-content: space-between;
 }
 
 .channelThumbnail {
@@ -50,24 +41,18 @@
   font-weight: bold;
   width: 100%;
   font-size: 25px;
-  position: absolute;
-  top: 20px;
-  left: 120px;
 }
 
 .channelSubCount {
-  position: absolute;
   color: var(--tertiary-text-color);
   top: 50px;
   left: 120px;
 }
 
 .subscribeButton {
-  position: absolute;
-  top: 50px;
-  right: 20px;
   height: 50px;
   min-width: 150px;
+  align-self: center
 }
 
 .channelSearch {
@@ -80,8 +65,7 @@
 }
 
 .channelInfoTabs {
-  position: absolute;
-  bottom: -16px;
+  position: relative;
   width: 100%;
 }
 
@@ -139,3 +123,14 @@
   cursor: pointer;
   margin-top: 16px;
 }
+
+.thumbnailContainer {
+  display: flex
+}
+
+.channelLineContainer {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  padding-left: 1em;
+}

src/renderer/views/Channel/Channel.vue

@@ -19,18 +19,27 @@
         v-else
         class="defaultChannelBanner"
       >
-      <div class="channelInfoContainer">
-        <div class="channelInfo">
+      <div
+        class="channelInfoContainer"
+      >
+        <div
+          class="channelInfo"
+        >
+          <div
+            class="thumbnailContainer"
+          >
             <img
               class="channelThumbnail"
               :src="thumbnailUrl"
+            >
+            <div
+              class="channelLineContainer"
             >
               <span
                 class="channelName"
               >
                 {{ channelName }}
               </span>
-          <br>
               <span
                 v-if="subCount !== null"
                 class="channelSubCount"
@@ -40,6 +49,8 @@
                 <span v-else>{{ $t("Channel.Subscribers") }}</span>
               </span>
             </div>
+          </div>
+
           <ft-button
             :label="subscribedText"
             background-color="var(--primary-color)"
@@ -47,6 +58,8 @@
             class="subscribeButton"
             @click="handleSubscription"
           />
+        </div>
+
         <ft-flex-box
           class="channelInfoTabs"
         >