diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css index c964a3fef..1aa35c574 100644 --- a/src/renderer/views/Channel/Channel.css +++ b/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; +} diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue index b56831d5c..622bc249c 100644 --- a/src/renderer/views/Channel/Channel.vue +++ b/src/renderer/views/Channel/Channel.vue @@ -19,34 +19,47 @@ v-else class="defaultChannelBanner" > -
-
- +
+
- - {{ channelName }} - -
- - {{ formattedSubCount }} - {{ $t("Channel.Subscriber") }} - {{ $t("Channel.Subscribers") }} - + +
+ + {{ channelName }} + + + {{ formattedSubCount }} + {{ $t("Channel.Subscriber") }} + {{ $t("Channel.Subscribers") }} + +
+
+ +
-