Add setting to enable full-width layout

Implements FreeTubeApp#3918
pkrasicki · Oct 20, 2023 · 91de6a8 · 91de6a8
1 parent a8658a7
commit 91de6a8
Show file tree

Hide file tree

Showing 53 changed files with 198 additions and 54 deletions.
diff --git a/src/renderer/App.css b/src/renderer/App.css
@@ -13,6 +13,10 @@
 .routerView {
   flex: 1 1 0%;
   margin: 18px 10px;
+
+  &.fullWidth {
+    margin: 5px 10px;
+  }
 }
 
 .banner {
@@ -53,6 +57,11 @@
 
   .flexBox {
     margin-top: 60px;
+
+    &.fullWidth {
+      margin-top: 0;
+    }
+
     margin-bottom: -75px;
   }
 }
diff --git a/src/renderer/App.js b/src/renderer/App.js
@@ -119,6 +119,10 @@ export default defineComponent({
 
     externalLinkHandling: function () {
       return this.$store.getters.getExternalLinkHandling
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {

diff --git a/src/renderer/App.vue b/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" />
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js b/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 () {

diff --git a/...-channel-list/ft-profile-channel-list.css → ...channel-list/ft-profile-channel-list.scss b/...-channel-list/ft-profile-channel-list.css → ...channel-list/ft-profile-channel-list.scss
@@ -1,5 +1,8 @@
 .card {
-  width: 85%;
   margin: 0 auto;
   margin-bottom: 15px;
+
+  &:not(.fullWidth) {
+    width: 85%;
+  }
 }
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue b/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" />
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.js b/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: {

diff --git a/...nents/ft-profile-edit/ft-profile-edit.css → ...ents/ft-profile-edit/ft-profile-edit.scss b/...nents/ft-profile-edit/ft-profile-edit.css → ...ents/ft-profile-edit/ft-profile-edit.scss
@@ -1,7 +1,10 @@
 .card {
-  width: 85%;
   margin: 0 auto;
   margin-bottom: 15px;
+
+  &:not(.fullWidth) {
+    width: 85%;
+  }
 }
 
 .message {
@@ -39,7 +42,7 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     width: 90%;
   }
 }
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/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" />
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js b/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',

diff --git a/...-list/ft-profile-filter-channels-list.css → ...list/ft-profile-filter-channels-list.scss b/...-list/ft-profile-filter-channels-list.css → ...list/ft-profile-filter-channels-list.scss
@@ -1,7 +1,10 @@
 .card {
-  width: 85%;
   margin: 0 auto;
   margin-bottom: 30px;
+
+  &:not(.fullWidth) {
+    width: 85%;
+  }
 }
 
 .selected {

diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue b/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" />
diff --git a/src/renderer/components/password-dialog/password-dialog.js b/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 () {

diff --git a/...nents/password-dialog/password-dialog.css → ...ents/password-dialog/password-dialog.scss b/...nents/password-dialog/password-dialog.css → ...ents/password-dialog/password-dialog.scss
@@ -1,7 +1,10 @@
 .card {
-  width: 85%;
   margin: auto;
   box-sizing: border-box;
+
+  &:not(.fullWidth) {
+    width: 85%;
+  }
 }
 
 .passwordInput {

diff --git a/src/renderer/components/password-dialog/password-dialog.vue b/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" />
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
@@ -80,6 +80,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?"]')
     },
@@ -159,7 +163,8 @@ export default defineComponent({
       'updateUiScale',
       'updateDisableSmoothScrolling',
       'updateHideLabelsSideBar',
-      'updateHideHeaderLogo'
+      'updateHideHeaderLogo',
+      'updateUseFullWidthLayout'
     ])
   }
 })
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/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>

diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
@@ -292,6 +292,7 @@ const state = {
   allowDashAv1Formats: false,
   commentAutoLoadEnabled: false,
   useDeArrowTitles: false,
+  useFullWidthLayout: false,
 }
 
 const stateWithSideEffects = {

diff --git a/src/renderer/views/About/About.js b/src/renderer/views/About/About.js
@@ -83,5 +83,10 @@ export default defineComponent({
         }
       ]
     }
+  },
+  computed: {
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    }
   }
 })
diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
@@ -1,10 +1,13 @@
 .card {
   margin: 0 auto;
   margin-bottom: 60px;
-  width: 85%;
 
-  @media only screen and (max-width: 680px) {
-    width: 90%;
+  &:not(.fullWidth) {
+    width: 85%;
+
+    @media only screen and (max-width: 680px) {
+      width: 90%;
+    }
   }
 }
 

diff --git a/src/renderer/views/About/About.vue b/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>

diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
@@ -292,6 +292,10 @@ export default defineComponent({
       })
 
       return values
+    },
+
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {

diff --git a/src/renderer/views/Channel/Channel.css → src/renderer/views/Channel/Channel.scss b/src/renderer/views/Channel/Channel.css → src/renderer/views/Channel/Channel.scss
@@ -1,13 +1,19 @@
 .card {
   position: relative;
-  width: 85%;
   margin: 0 auto 20px;
   box-sizing: border-box;
+
+  &:not(.fullWidth) {
+    width: 85%;
+  }
 }
 
 .channelDetails {
   padding: 0;
-  max-width: 92vw;
+
+  &:not(.fullWidth) {
+    max-width: 92vw;
+  }
 }
 
 .channelBannerContainer {
@@ -197,4 +203,8 @@
   #communityPanel {
     margin-top: 1rem;
   }
+
+  .channelDetails {
+    max-width: 92vw;
+  }
 }
diff --git a/src/renderer/views/Channel/Channel.vue b/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"
@@ -218,7 +218,7 @@
     </ft-card>
     <ft-card
       v-if="!isLoading && !errorMessage && (isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card"
+      class="card" :class="{ fullWidth: useFullWidthLayout }"
     >
       <channel-about
         v-if="currentTab === 'about'"
@@ -411,7 +411,7 @@
     </ft-card>
     <ft-card
       v-if="errorMessage"
-      class="card"
+      class="card" :class="{ fullWidth: useFullWidthLayout }"
     >
       <p>
         {{ errorMessage }}
@@ -426,4 +426,4 @@
 </template>
 
 <script src="./Channel.js" />
-<style scoped src="./Channel.css" />
+<style scoped src="./Channel.scss" lang="scss" />
diff --git a/src/renderer/views/Hashtag/Hashtag.js b/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: {

diff --git a/src/renderer/views/Hashtag/Hashtag.css → src/renderer/views/Hashtag/Hashtag.scss b/src/renderer/views/Hashtag/Hashtag.css → src/renderer/views/Hashtag/Hashtag.scss
@@ -14,11 +14,14 @@
 
 .card {
   margin: 0 auto 20px;
-  width: 85%;
+
+  &:not(.fullWidth) {
+    width: 85%;
+  }
 }
 
 @media only screen and (max-width: 680px) {
-  .card {
+  .card:not(.fullWidth) {
     width: 90%;
   }
 }