Add setting to enable full-width layout

Implements FreeTubeApp#3918

Author: pkrasicki

src/renderer/App.js

@@ -121,6 +121,10 @@ export default defineComponent({
 
     externalLinkHandling: function () {
       return this.$store.getters.getExternalLinkHandling
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {

src/renderer/App.css src/renderer/App.scss

@@ -14,6 +14,10 @@
   flex: 1 1 0%;
   margin-block: 18px;
   margin-inline: 10px;
+
+  &.fullWidth {
+    margin-block: 5px;
+  }
 }
 
 .banner {
@@ -50,6 +54,10 @@
   .routerView {
     margin-block: 68px;
     margin-inline: 8px;
+
+    &.fullWidth {
+      margin-block: 68px;
+    }
   }
 
   .banner {
@@ -60,5 +68,9 @@
   .flexBox {
     margin-block-start: 60px;
     margin-block-end: -75px;
+
+    &.fullWidth {
+      margin-block-start: 0;
+    }
   }
 }

src/renderer/App.vue

@@ -11,6 +11,7 @@
     <side-nav ref="sideNav" />
     <ft-flex-box
       class="flexBox routerView"
+      :class="{ fullWidth: useFullWidthLayout }"
       role="main"
     >
       <div
@@ -41,6 +42,7 @@
         <RouterView
           ref="router"
           class="routerView"
+          :class="{ fullWidth: useFullWidthLayout }"
         />
       <!-- </keep-alive> -->
       </transition>
@@ -85,4 +87,4 @@
 
 <style src="./themes.css" />
 <style src="./videoJS.css" />
-<style scoped src="./App.css" />
+<style scoped src="./App.scss" lang="scss" />

src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js

@@ -68,6 +68,9 @@ export default defineComponent({
     locale: function () {
       return this.$i18n.locale.replace('_', '-')
     },
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    }
   },
   watch: {
     profile: function () {

src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss

@@ -1,5 +1,8 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 15px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }

src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h2>
         {{ $t("Profile.Subscription List") }}
       </h2>
@@ -47,4 +47,4 @@
 </template>
 
 <script src="./ft-profile-channel-list.js" />
-<style scoped src="./ft-profile-channel-list.css" />
+<style scoped src="./ft-profile-channel-list.scss" lang="scss" />

src/renderer/components/ft-profile-edit/ft-profile-edit.js

@@ -65,6 +65,9 @@ export default defineComponent({
         this.$t('Yes'),
         this.$t('No')
       ]
+    },
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {

src/renderer/components/ft-profile-edit/ft-profile-edit.css src/renderer/components/ft-profile-edit/ft-profile-edit.scss

@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 15px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .message {
@@ -42,7 +45,7 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }

src/renderer/components/ft-profile-edit/ft-profile-edit.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h2>{{ $t("Profile.Edit Profile") }}</h2>
       <ft-flex-box>
         <ft-input
@@ -102,4 +102,4 @@
 </template>
 
 <script src="./ft-profile-edit.js" />
-<style scoped src="./ft-profile-edit.css" />
+<style scoped src="./ft-profile-edit.scss" lang="scss" />

src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js

@@ -50,6 +50,9 @@ export default defineComponent({
     locale: function () {
       return this.$i18n.locale.replace('_', '-')
     },
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    }
   },
   watch: {
     profile: 'updateChannelList',

src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss

@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin-block: 0 30px;
   margin-inline: auto;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .selected {

src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h2>
         {{ $t("Profile.Other Channels") }}
       </h2>
@@ -49,4 +49,4 @@
 </template>
 
 <script src="./ft-profile-filter-channels-list.js" />
-<style scoped src="./ft-profile-filter-channels-list.css" />
+<style scoped src="./ft-profile-filter-channels-list.scss" lang="scss" />

src/renderer/components/password-dialog/password-dialog.js

@@ -12,6 +12,9 @@ export default defineComponent({
   computed: {
     settingsPassword: function () {
       return this.$store.getters.getSettingsPassword
+    },
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {

src/renderer/components/password-dialog/password-dialog.css src/renderer/components/password-dialog/password-dialog.scss

@@ -1,7 +1,10 @@
 .card {
-  inline-size: 85%;
   margin: auto;
   box-sizing: border-box;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .passwordInput {

src/renderer/components/password-dialog/password-dialog.vue

@@ -1,6 +1,7 @@
 <template>
   <ft-card
     class="card"
+    :class="{ fullWidth: useFullWidthLayout }"
   >
     <h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>
 
@@ -16,4 +17,4 @@
 </template>
 
 <script src="./password-dialog.js" />
-<style scoped src="./password-dialog.css" />
+<style scoped src="./password-dialog.scss" lang="scss" />

src/renderer/components/theme-settings/theme-settings.js

@@ -82,6 +82,10 @@ export default defineComponent({
       return this.$store.getters.getHideHeaderLogo
     },
 
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    },
+
     restartPromptMessage: function () {
       return this.$t('Settings["The app needs to restart for changes to take effect. Restart and apply change?"]')
     },
@@ -168,7 +172,8 @@ export default defineComponent({
       'updateUiScale',
       'updateDisableSmoothScrolling',
       'updateHideLabelsSideBar',
-      'updateHideHeaderLogo'
+      'updateHideHeaderLogo',
+      'updateUseFullWidthLayout'
     ])
   }
 })

src/renderer/components/theme-settings/theme-settings.vue

@@ -37,6 +37,12 @@
           :default-value="hideHeaderLogo"
           @change="updateHideHeaderLogo"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Theme Settings.Use Full-Width Layout')"
+          :compact="true"
+          :default-value="useFullWidthLayout"
+          @change="updateUseFullWidthLayout"
+        />
       </div>
     </div>
     <ft-flex-box>

src/renderer/store/modules/settings.js

@@ -297,6 +297,7 @@ const state = {
   allowDashAv1Formats: false,
   commentAutoLoadEnabled: false,
   useDeArrowTitles: false,
+  useFullWidthLayout: false,
 }
 
 const stateWithSideEffects = {

src/renderer/views/About/About.js

@@ -83,5 +83,10 @@ export default defineComponent({
         }
       ]
     }
+  },
+  computed: {
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    }
   }
 })

src/renderer/views/About/About.scss

@@ -1,10 +1,13 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-  inline-size: 85%;
 
-  @media only screen and (max-width: 680px) {
-    inline-size: 90%;
+  &:not(.fullWidth) {
+    inline-size: 85%;
+
+    @media only screen and (max-width: 680px) {
+      inline-size: 90%;
+    }
   }
 }
 

src/renderer/views/About/About.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card">
+    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
       <h1>
         {{ $t("About.About") }}
       </h1>

src/renderer/views/Channel/Channel.js

@@ -288,6 +288,10 @@ export default defineComponent({
       })
 
       return values
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {

src/renderer/views/Channel/Channel.css src/renderer/views/Channel/Channel.scss

@@ -1,14 +1,20 @@
 .card {
   position: relative;
-  inline-size: 85%;
   margin-block: 0 20px;
   margin-inline: auto;
   box-sizing: border-box;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 .channelDetails {
   padding: 0;
-  max-inline-size: 92vw;
+
+  &:not(.fullWidth) {
+    max-inline-size: 92vw;
+  }
 }
 
 .channelBannerContainer {
@@ -237,7 +243,7 @@
 }
 
 @media only screen and (max-width: 260px) {
-   .channelDetails {
+  .channelDetails {
     max-inline-size: none;
   }
 }

src/renderer/views/Channel/Channel.vue

@@ -8,7 +8,7 @@
     />
     <ft-card
       v-else-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card channelDetails"
+      class="card channelDetails" :class="{ fullWidth: useFullWidthLayout }"
     >
       <div
         class="channelBannerContainer"
@@ -216,7 +216,7 @@
     </ft-card>
     <ft-card
       v-if="!isLoading && !errorMessage && (isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card"
+      class="card" :class="{ fullWidth: useFullWidthLayout }"
     >
       <channel-about
         v-if="currentTab === 'about'"
@@ -409,7 +409,7 @@
     </ft-card>
     <ft-card
       v-if="errorMessage"
-      class="card"
+      class="card" :class="{ fullWidth: useFullWidthLayout }"
     >
       <p>
         {{ errorMessage }}
@@ -424,4 +424,4 @@
 </template>
 
 <script src="./Channel.js" />
-<style scoped src="./Channel.css" />
+<style scoped src="./Channel.scss" lang="scss" />

src/renderer/views/Hashtag/Hashtag.js

@@ -38,6 +38,10 @@ export default defineComponent({
 
     showFetchMoreButton() {
       return !isNullOrEmpty(this.hashtagContinuationData) || this.apiUsed === 'invidious'
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {

src/renderer/views/Hashtag/Hashtag.css src/renderer/views/Hashtag/Hashtag.scss

@@ -16,11 +16,14 @@
 .card {
   margin-block: 0 20px;
   margin-inline: auto;
-  inline-size: 85%;
+
+  &:not(.fullWidth) {
+    inline-size: 85%;
+  }
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     inline-size: 90%;
   }
 }