Make video info section more concise (#4338)

* Implement proposed formatting changes

* Increase font-size of video metrics to 14px

* More closely colocate title and channel to compensate for larger video metrics font size

* Update breakpoint for single column template to 1000px to minimize icon wrapping

* Fix like icon being on a different line from the text on smaller screen widths

* Update all Watch breakpoints to 1050px from 900px

Author: kommunarr

src/renderer/components/watch-video-info/watch-video-info.scss

@@ -1,27 +1,30 @@
 .watchVideoInfo {
-  column-gap: 15px;
-  display: grid;
-  grid-template-columns: auto minmax(min-content, 1fr);
+  display: flex;
+  flex-direction: column;
   padding: 16px;
-
-  @media screen and (max-width: 680px) {
-    grid-template-columns: auto;
-  }
+  gap: 8px;
 }
 
 .videoTitle {
   display: block;
   font-size: 22px;
   font-weight: normal;
-  margin-block: 0 24px;
+  margin-block: 0;
   margin-inline: 0;
-  margin-block-end: 1em;
   word-break: break-word;
 }
 
-.channelInformation {
+.videoMetrics, .videoButtons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.videoButtons {
   .profileRow {
     display: flex;
+    align-items: center;
   }
 
   .channelThumbnail {
@@ -36,6 +39,7 @@
     cursor: pointer;
     display: block;
     margin-inline-start: 6px;
+    margin-block-end: 3px;
     position: relative;
     text-decoration: inherit;
     inset-block-start: -2px;
@@ -44,41 +48,33 @@
   .subscribeButton {
     font-size: 14px;
     margin-inline-start: 6px;
-    margin-block-start: 6px;
+    margin-block: 0;
     padding: 6px;
   }
-}
 
-.viewCount,
-.datePublished {
-  color: var(--secondary-text-color);
-  font-size: 15px;
-  text-align: end;
-
-  @media screen and (max-width: 680px) {
-    text-align: start;
+  .videoOptions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 4px;
+
+    @media screen and (max-width: 680px) {
+      :deep(.iconDropdown) {
+        inset-inline-start: calc(50% - 20px);
+        inset-inline-end: auto;
+      }
+    }
   }
 }
 
-.viewCount {
-  margin-block: 18px 0;
-  margin-inline: 0;
-}
-
-.datePublished {
-  margin-block: 4px 0;
-  margin-inline: 0;
-
-  @media screen and (max-width: 680px) {
-    margin-block-start: 16px;
-  }
-}
+.videoMetrics {
+  font-size: 14px;
+  color: var(--tertiary-text-color);
 
-.likeSection {
+  .likeSection {
   color: var(--tertiary-text-color);
   display: flex;
   flex-direction: column;
-  font-size: 16px;
   margin-inline-start: auto;
   margin-block-start: 4px;
   max-inline-size: 210px;
@@ -97,24 +93,8 @@
 
   .likeCount {
     margin-inline-end: 0;
+    display: flex;
+    gap: 3px;
   }
 }
-
-.videoOptions {
-  display: flex;
-  justify-content: flex-end;
-  margin-block-start: 16px;
-
-  .option:not(:first-child) {
-    margin-inline-start: 4px;
-  }
-
-  @media screen and (max-width: 680px) {
-    justify-content: flex-start;
-
-    :deep(.iconDropdown) {
-      inset-inline-start: calc(50% - 20px);
-      inset-inline-end: auto;
-    }
-  }
 }

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -6,47 +6,10 @@
       >
         {{ title }}
       </h1>
-      <div
-        class="channelInformation"
-      >
-        <div
-          class="profileRow"
-        >
-          <div>
-            <router-link
-              :to="`/channel/${channelId}`"
-            >
-              <img
-                :src="channelThumbnail"
-                class="channelThumbnail"
-                alt=""
-              >
-            </router-link>
-          </div>
-          <div>
-            <router-link
-              :to="`/channel/${channelId}`"
-              class="channelName"
-            >
-              {{ channelName }}
-            </router-link>
-            <ft-subscribe-button
-              v-if="!hideUnsubscribeButton"
-              :channel-id="channelId"
-              :channel-name="channelName"
-              :channel-thumbnail="channelThumbnail"
-              :subscription-count-text="subscriptionCountText"
-            />
-          </div>
-        </div>
-      </div>
     </div>
-    <div>
-      <div class="datePublished">
-        {{ publishedString }} {{ dateString }}
-      </div>
-      <div class="viewCount">
-        {{ parsedViewCount }}
+    <div class="videoMetrics">
+      <div class="datePublishedAndViewCount">
+        {{ publishedString }} {{ dateString }} • {{ parsedViewCount }}
       </div>
       <div
         v-if="!hideVideoLikesAndDislikes"
@@ -55,9 +18,7 @@
         <div
           class="likeSection"
         >
-          <div>
-            <span class="likeCount"><font-awesome-icon :icon="['fas', 'thumbs-up']" /> {{ parsedLikeCount }}</span>
-          </div>
+          <span class="likeCount"><font-awesome-icon :icon="['fas', 'thumbs-up']" /> {{ parsedLikeCount }}</span>
         </div>
       </div>
       <!--
@@ -80,6 +41,38 @@
         </div>
       </div>
       -->
+    </div>
+    <div class="videoButtons">
+      <div
+        class="profileRow"
+      >
+        <div>
+          <router-link
+            :to="`/channel/${channelId}`"
+          >
+            <img
+              :src="channelThumbnail"
+              class="channelThumbnail"
+              alt=""
+            >
+          </router-link>
+        </div>
+        <div>
+          <router-link
+            :to="`/channel/${channelId}`"
+            class="channelName"
+          >
+            {{ channelName }}
+          </router-link>
+          <ft-subscribe-button
+            v-if="!hideUnsubscribeButton"
+            :channel-id="channelId"
+            :channel-name="channelName"
+            :channel-thumbnail="channelThumbnail"
+            :subscription-count-text="subscriptionCountText"
+          />
+        </div>
+      </div>
       <div class="videoOptions">
         <ft-icon-button
           v-if="showPlaylists && !isUpcoming"

src/renderer/views/Watch/Watch.scss

@@ -16,7 +16,7 @@
   display: inline-block;
   max-inline-size: calc(80vh * 1.78);
 
-  @media only screen and (min-width: 901px) {
+  @media only screen and (min-width: 1051px) {
     inline-size: 300%;
   }
 }
@@ -99,7 +99,7 @@
   .sidebarArea {
     grid-area: sidebar;
 
-    @media only screen and (min-width: 901px) {
+    @media only screen and (min-width: 1051px) {
       min-inline-size: 380px;
     }
 
@@ -135,7 +135,7 @@
     margin-block: 0 16px;
     margin-inline: 0;
 
-    @media only screen and (min-width: 901px) {
+    @media only screen and (min-width: 1051px) {
       margin-block: 0 16px;
       margin-inline: 8px;
     }
@@ -145,17 +145,17 @@
     @include theatre-mode-template;
   }
 
-  @media only screen and (min-width: 901px) {
+  @media only screen and (min-width: 1051px) {
     &.useTheatreMode {
       @include theatre-mode-template;
     }
   }
 
-  @media only screen and (max-width: 900px) {
+  @media only screen and (max-width: 1050px) {
     @include single-column-template;
   }
 
-  @media only screen and (min-width: 901px) {
+  @media only screen and (min-width: 1051px) {
     .infoArea {
       scroll-margin-block-start: 76px;
     }