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: 0 auto 20px;
-  margin-bottom: 20px;
 }
 
 .channelBanner {
   width: 100%;
-  position: absolute;
+  max-height: 200px;
-  top: 0px;
-  left: 0px;
-  max-height: 300px;
 }
 
 .defaultChannelBanner {
   width: 100%;
-  position: absolute;
+  max-height: 200px;
-  top: 0px;
+  height:200px;
-  left: 0px;
-  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;
+  display: flex;
-  width: 85%;
+  flex-flow: row wrap;
-  position: absolute;
+  width: 100%;
-  top: 30px;
+  justify-content: space-between;
-  left: 30px;
 }
 
 .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;
+  position: relative;
-  bottom: -16px;
   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,34 +19,47 @@
         v-else
         class="defaultChannelBanner"
       >
-      <div class="channelInfoContainer">
+      <div
-        <div class="channelInfo">
+        class="channelInfoContainer"
-          <img
+      >
-            class="channelThumbnail"
+        <div
-            :src="thumbnailUrl"
+          class="channelInfo"
+        >
+          <div
+            class="thumbnailContainer"
           >
-          <span
+            <img
-            class="channelName"
+              class="channelThumbnail"
-          >
+              :src="thumbnailUrl"
-            {{ channelName }}
+            >
-          </span>
+            <div
-          <br>
+              class="channelLineContainer"
-          <span
+            >
-            v-if="subCount !== null"
+              <span
-            class="channelSubCount"
+                class="channelName"
-          >
+              >
-            {{ formattedSubCount }}
+                {{ channelName }}
-            <span v-if="subCount === 1">{{ $t("Channel.Subscriber") }}</span>
+              </span>
-            <span v-else>{{ $t("Channel.Subscribers") }}</span>
+              <span
-          </span>
+                v-if="subCount !== null"
+                class="channelSubCount"
+              >
+                {{ formattedSubCount }}
+                <span v-if="subCount === 1">{{ $t("Channel.Subscriber") }}</span>
+                <span v-else>{{ $t("Channel.Subscribers") }}</span>
+              </span>
+            </div>
+          </div>
+
+          <ft-button
+            :label="subscribedText"
+            background-color="var(--primary-color)"
+            text-color="var(--text-with-main-color)"
+            class="subscribeButton"
+            @click="handleSubscription"
+          />
         </div>
-        <ft-button
+
-          :label="subscribedText"
-          background-color="var(--primary-color)"
-          text-color="var(--text-with-main-color)"
-          class="subscribeButton"
-          @click="handleSubscription"
-        />
         <ft-flex-box
           class="channelInfoTabs"
         >