Move changes to card component

src/renderer/components/ft-card/ft-card.css

@@ -1,7 +0,0 @@
-.ft-card {
-  background-color: var(--card-bg-color);
-  margin: 8px;
-  padding-block: 3px 16px;
-  padding-inline: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
-}

src/renderer/components/ft-card/ft-card.js

@@ -1,5 +1,16 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'FtCard'
+  name: 'FtCard',
+  props: {
+    big: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    }
+  }
 })

src/renderer/components/ft-card/ft-card.scss

@@ -0,0 +1,17 @@
+.ft-card {
+  background-color: var(--card-bg-color);
+  margin: 8px;
+  padding-block: 3px 16px;
+  padding-inline: 16px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+
+  &.big:not(.fullWidth) {
+    inline-size: 85%;
+  }
+
+  @media only screen and (max-width: 680px) {
+    &.big:not(.fullWidth) {
+      inline-size: 90%;
+    }
+  }
+}

src/renderer/components/ft-card/ft-card.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="ft-card"
+    :class="{ fullWidth: useFullWidthLayout, big }"
     @focusout="$emit('focusout')"
   >
     <slot />
@@ -8,4 +9,4 @@
 </template>
 
 <script src="./ft-card.js" />
-<style scoped src="./ft-card.css" />
+<style scoped src="./ft-card.scss" lang="scss" />

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

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

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

@@ -1,8 +1,4 @@
 .card {
   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,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>
         {{ $t("Profile.Subscription List") }}
       </h2>

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

@@ -65,9 +65,6 @@ 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.scss

@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 15px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -43,9 +39,3 @@
   user-select: none;
   -webkit-user-select: none;
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}

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

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>{{ $t("Profile.Edit Profile") }}</h2>
       <ft-flex-box>
         <ft-input

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

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

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

@@ -1,10 +1,6 @@
 .card {
   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,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>
         {{ $t("Profile.Other Channels") }}
       </h2>

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

@@ -12,9 +12,6 @@ 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.scss

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

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

@@ -1,7 +1,6 @@
 <template>
   <ft-card
     class="card"
-    :class="{ fullWidth: useFullWidthLayout }"
   >
     <h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>
 

src/renderer/views/About/About.js

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

src/renderer/views/About/About.scss

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

src/renderer/views/About/About.vue

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

src/renderer/views/Channel/Channel.scss

@@ -3,10 +3,6 @@
   margin-block: 0 20px;
   margin-inline: auto;
   box-sizing: border-box;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .channelDetails {

src/renderer/views/Channel/Channel.vue

@@ -8,7 +8,9 @@
     />
     <ft-card
       v-else-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card channelDetails" :class="{ fullWidth: useFullWidthLayout }"
+      big
+      class="card channelDetails"
+      :class="{ fullWidth: useFullWidthLayout }"
     >
       <div
         class="channelBannerContainer"
@@ -216,7 +218,8 @@
     </ft-card>
     <ft-card
       v-if="!isLoading && !errorMessage && (isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card" :class="{ fullWidth: useFullWidthLayout }"
+      big
+      class="card"
     >
       <channel-about
         v-if="currentTab === 'about'"
@@ -409,7 +412,8 @@
     </ft-card>
     <ft-card
       v-if="errorMessage"
-      class="card" :class="{ fullWidth: useFullWidthLayout }"
+      big
+      class="card"
     >
       <p>
         {{ errorMessage }}

src/renderer/views/Hashtag/Hashtag.js

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

src/renderer/views/Hashtag/Hashtag.scss

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

src/renderer/views/Hashtag/Hashtag.vue

@@ -6,8 +6,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ hashtag }}</h2>
       <ft-element-list

src/renderer/views/History/History.js

@@ -38,10 +38,6 @@ export default defineComponent({
       } else {
         return this.historyCacheSorted.slice(0, this.dataLimit)
       }
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {

src/renderer/views/History/History.scss

@@ -1,18 +1,8 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
   color: var(--tertiary-text-color);
-}
+}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}

src/renderer/views/History/History.vue

@@ -6,8 +6,8 @@
     />
     <ft-card
       v-show="!isLoading"
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("History.History") }}</h2>
       <ft-input

src/renderer/views/Popular/Popular.js

@@ -24,10 +24,6 @@ export default defineComponent({
   computed: {
     popularCache: function () {
       return this.$store.getters.getPopularCache
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {

src/renderer/views/Popular/Popular.scss

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

src/renderer/views/Popular/Popular.vue

@@ -6,8 +6,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Most Popular") }}</h2>
       <ft-element-list

src/renderer/views/ProfileSettings/ProfileSettings.js

@@ -15,10 +15,6 @@ export default defineComponent({
   computed: {
     profileList: function () {
       return this.$store.getters.getProfileList
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   methods: {

src/renderer/views/ProfileSettings/ProfileSettings.scss

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

src/renderer/views/ProfileSettings/ProfileSettings.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card big class="card">
       <h2>{{ $t("Profile.Profile Manager") }}</h2>
       <ft-flex-box
         class="profileList"

src/renderer/views/Search/Search.js

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

src/renderer/views/Search/Search.scss

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

src/renderer/views/Search/Search.vue

@@ -8,8 +8,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Search Filters.Search Results") }}</h2>
       <ft-element-list

src/renderer/views/SubscribedChannels/SubscribedChannels.js

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

src/renderer/views/SubscribedChannels/SubscribedChannels.scss

@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -70,10 +66,6 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-
   .channels {
     gap: 1.5rem;
   }

src/renderer/views/SubscribedChannels/SubscribedChannels.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>{{ $t('Channels.Title') }}</h2>
       <ft-input
         v-show="subscribedChannels.length > 0"

src/renderer/views/Subscriptions/Subscriptions.js

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

src/renderer/views/Subscriptions/Subscriptions.scss

@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -37,9 +33,3 @@
 .tab:hover {
   font-weight: bold;
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}

src/renderer/views/Subscriptions/Subscriptions.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>{{ $t("Subscriptions.Subscriptions") }}</h2>
       <ft-flex-box
         class="subscriptionTabs"

src/renderer/views/Trending/Trending.js

@@ -39,9 +39,6 @@ export default defineComponent({
     },
     trendingCache () {
       return this.$store.getters.getTrendingCache
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {

src/renderer/views/Trending/Trending.scss

@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .floatingTopButton {
@@ -47,9 +43,3 @@
     position: absolute
   }
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}

src/renderer/views/Trending/Trending.vue

@@ -6,8 +6,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Trending.Trending") }}</h2>
       <ft-flex-box

src/renderer/views/UserPlaylists/UserPlaylists.js

@@ -41,10 +41,6 @@ export default defineComponent({
       } else {
         return data.slice(0, this.dataLimit)
       }
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {

src/renderer/views/UserPlaylists/UserPlaylists.scss

@@ -1,18 +1,8 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
   color: var(--tertiary-text-color);
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}

src/renderer/views/UserPlaylists/UserPlaylists.vue

@@ -6,8 +6,8 @@
     />
     <ft-card
       v-show="!isLoading"
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>
         {{ $t("User Playlists.Your Playlists") }}