Move changes to card component

2024-11-25 11:19:59 +01:00 · 2023-11-25 12:00:06 +00:00 · 2023-11-25 12:00:06 +00:00 · 7da85e49bd
commit 7da85e49bd
parent 96b2410bcc
48 changed files with 73 additions and 204 deletions
--- a/src/renderer/components/ft-card/ft-card.css
+++ b/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);
-}
--- a/src/renderer/components/ft-card/ft-card.js
+++ b/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
+    }
+  }
 })
--- a/src/renderer/components/ft-card/ft-card.scss
+++ b/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%;
+    }
+  }
+}
--- a/src/renderer/components/ft-card/ft-card.vue
+++ b/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" />
--- 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
@ -67,9 +67,6 @@ export default defineComponent({
    },
    locale: function () {
      return this.$i18n.locale.replace('_', '-')
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
    }
  },
  watch: {
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
+++ b/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%;
-  }
 }
--- 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,9 @@
 <template>
  <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
      <h2>
        {{ $t("Profile.Subscription List") }}
      </h2>
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.js
+++ b/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: {
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.scss
+++ b/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%;
-  }
-}
--- 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,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
--- 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
@ -49,9 +49,6 @@ export default defineComponent({
    },
    locale: function () {
      return this.$i18n.locale.replace('_', '-')
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
    }
  },
  watch: {
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
+++ b/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 {
--- 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,9 @@
 <template>
  <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
      <h2>
        {{ $t("Profile.Other Channels") }}
      </h2>
--- a/src/renderer/components/password-dialog/password-dialog.js
+++ b/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 () {
--- a/src/renderer/components/password-dialog/password-dialog.scss
+++ b/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 {
--- a/src/renderer/components/password-dialog/password-dialog.vue
+++ b/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>

--- a/src/renderer/views/About/About.js
+++ b/src/renderer/views/About/About.js
@ -83,10 +83,5 @@ export default defineComponent({
        }
      ]
    }
-  },
-  computed: {
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
-    }
  }
 })
--- a/src/renderer/views/About/About.scss
+++ b/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 {
--- a/src/renderer/views/About/About.vue
+++ b/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>
--- a/src/renderer/views/Channel/Channel.scss
+++ b/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 {
--- a/src/renderer/views/Channel/Channel.vue
+++ b/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 }}
--- a/src/renderer/views/Hashtag/Hashtag.js
+++ b/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: {
--- a/src/renderer/views/Hashtag/Hashtag.scss
+++ b/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%;
-  }
 }
--- a/src/renderer/views/Hashtag/Hashtag.vue
+++ b/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
--- a/src/renderer/views/History/History.js
+++ b/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: {
--- a/src/renderer/views/History/History.scss
+++ b/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%;
-  }
-}
+}
--- a/src/renderer/views/History/History.vue
+++ b/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
--- a/src/renderer/views/Popular/Popular.js
+++ b/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 () {
--- a/src/renderer/views/Popular/Popular.scss
+++ b/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%;
-  }
-}
+}
--- a/src/renderer/views/Popular/Popular.vue
+++ b/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
--- a/src/renderer/views/ProfileSettings/ProfileSettings.js
+++ b/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: {
--- a/src/renderer/views/ProfileSettings/ProfileSettings.scss
+++ b/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%;
-  }
-}
+}
--- a/src/renderer/views/ProfileSettings/ProfileSettings.vue
+++ b/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"
--- a/src/renderer/views/Search/Search.js
+++ b/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: {
--- a/src/renderer/views/Search/Search.scss
+++ b/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%;
-  }
-}
+}
--- a/src/renderer/views/Search/Search.vue
+++ b/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
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.js
+++ b/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: {
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.scss
+++ b/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;
  }
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
+++ b/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"
--- a/src/renderer/views/Subscriptions/Subscriptions.js
+++ b/src/renderer/views/Subscriptions/Subscriptions.js
@ -68,10 +68,6 @@ export default defineComponent({
      }

      return tabs
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
    }
  },
  watch: {
--- a/src/renderer/views/Subscriptions/Subscriptions.scss
+++ b/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%;
-  }
-}
--- a/src/renderer/views/Subscriptions/Subscriptions.vue
+++ b/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"
--- a/src/renderer/views/Trending/Trending.js
+++ b/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 () {
--- a/src/renderer/views/Trending/Trending.scss
+++ b/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%;
-  }
-}
--- a/src/renderer/views/Trending/Trending.vue
+++ b/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
--- a/src/renderer/views/UserPlaylists/UserPlaylists.js
+++ b/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: {
--- a/src/renderer/views/UserPlaylists/UserPlaylists.scss
+++ b/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%;
-  }
-}
--- a/src/renderer/views/UserPlaylists/UserPlaylists.vue
+++ b/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") }}