Skip to content

Commit

Permalink
Add setting to enable full-width layout
Browse files Browse the repository at this point in the history
Implements FreeTubeApp#3918
  • Loading branch information
pkrasicki committed Nov 24, 2023
1 parent d8d6196 commit 96b2410
Show file tree
Hide file tree
Showing 53 changed files with 198 additions and 55 deletions.
4 changes: 4 additions & 0 deletions src/renderer/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,10 @@ export default defineComponent({

externalLinkHandling: function () {
return this.$store.getters.getExternalLinkHandling
},

useFullWidthLayout: function () {
return this.$store.getters.getUseFullWidthLayout
}
},
watch: {
Expand Down
12 changes: 12 additions & 0 deletions src/renderer/App.css → src/renderer/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
flex: 1 1 0%;
margin-block: 18px;
margin-inline: 10px;

&.fullWidth {
margin-block: 5px;
}
}

.banner {
Expand Down Expand Up @@ -50,6 +54,10 @@
.routerView {
margin-block: 68px;
margin-inline: 8px;

&.fullWidth {
margin-block: 68px;
}
}

.banner {
Expand All @@ -60,5 +68,9 @@
.flexBox {
margin-block-start: 60px;
margin-block-end: -75px;

&.fullWidth {
margin-block-start: 0;
}
}
}
4 changes: 3 additions & 1 deletion src/renderer/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<side-nav ref="sideNav" />
<ft-flex-box
class="flexBox routerView"
:class="{ fullWidth: useFullWidthLayout }"
role="main"
>
<div
Expand Down Expand Up @@ -41,6 +42,7 @@
<RouterView
ref="router"
class="routerView"
:class="{ fullWidth: useFullWidthLayout }"
/>
<!-- </keep-alive> -->
</transition>
Expand Down Expand Up @@ -85,4 +87,4 @@

<style src="./themes.css" />
<style src="./videoJS.css" />
<style scoped src="./App.css" />
<style scoped src="./App.scss" lang="scss" />
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@ export default defineComponent({
locale: function () {
return this.$i18n.locale.replace('_', '-')
},
useFullWidthLayout: function () {
return this.$store.getters.getUseFullWidthLayout
}
},
watch: {
profile: function () {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
.card {
inline-size: 85%;
margin-block: 0 15px;
margin-inline: auto;

&:not(.fullWidth) {
inline-size: 85%;
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<ft-card class="card">
<ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
<h2>
{{ $t("Profile.Subscription List") }}
</h2>
Expand Down Expand Up @@ -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" />
3 changes: 3 additions & 0 deletions src/renderer/components/ft-profile-edit/ft-profile-edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,9 @@ export default defineComponent({
this.$t('Yes'),
this.$t('No')
]
},
useFullWidthLayout: function () {
return this.$store.getters.getUseFullWidthLayout
}
},
watch: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
.card {
inline-size: 85%;
margin-block: 0 15px;
margin-inline: auto;

&:not(.fullWidth) {
inline-size: 85%;
}
}

.message {
Expand Down Expand Up @@ -42,7 +45,7 @@
}

@media only screen and (max-width: 680px) {
.card {
.card:not(.fullWidth) {
inline-size: 90%;
}
}
4 changes: 2 additions & 2 deletions src/renderer/components/ft-profile-edit/ft-profile-edit.vue
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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" />
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ export default defineComponent({
locale: function () {
return this.$i18n.locale.replace('_', '-')
},
useFullWidthLayout: function () {
return this.$store.getters.getUseFullWidthLayout
}
},
watch: {
profile: 'updateChannelList',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
.card {
inline-size: 85%;
margin-block: 0 30px;
margin-inline: auto;

&:not(.fullWidth) {
inline-size: 85%;
}
}

.selected {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<ft-card class="card">
<ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
<h2>
{{ $t("Profile.Other Channels") }}
</h2>
Expand Down Expand Up @@ -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" />
3 changes: 3 additions & 0 deletions src/renderer/components/password-dialog/password-dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ export default defineComponent({
computed: {
settingsPassword: function () {
return this.$store.getters.getSettingsPassword
},
useFullWidthLayout: function () {
return this.$store.getters.getUseFullWidthLayout
}
},
mounted: function () {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
.card {
inline-size: 85%;
margin: auto;
box-sizing: border-box;

&:not(.fullWidth) {
inline-size: 85%;
}
}

.passwordInput {
Expand Down
3 changes: 2 additions & 1 deletion src/renderer/components/password-dialog/password-dialog.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<ft-card
class="card"
:class="{ fullWidth: useFullWidthLayout }"
>
<h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>

Expand All @@ -16,4 +17,4 @@
</template>

<script src="./password-dialog.js" />
<style scoped src="./password-dialog.css" />
<style scoped src="./password-dialog.scss" lang="scss" />
7 changes: 6 additions & 1 deletion src/renderer/components/theme-settings/theme-settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -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?"]')
},
Expand Down Expand Up @@ -168,7 +172,8 @@ export default defineComponent({
'updateUiScale',
'updateDisableSmoothScrolling',
'updateHideLabelsSideBar',
'updateHideHeaderLogo'
'updateHideHeaderLogo',
'updateUseFullWidthLayout'
])
}
})
6 changes: 6 additions & 0 deletions src/renderer/components/theme-settings/theme-settings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/renderer/store/modules/settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ const state = {
allowDashAv1Formats: false,
commentAutoLoadEnabled: false,
useDeArrowTitles: false,
useFullWidthLayout: false,
}

const stateWithSideEffects = {
Expand Down
5 changes: 5 additions & 0 deletions src/renderer/views/About/About.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,5 +83,10 @@ export default defineComponent({
}
]
}
},
computed: {
useFullWidthLayout: function () {
return this.$store.getters.getUseFullWidthLayout
}
}
})
9 changes: 6 additions & 3 deletions src/renderer/views/About/About.scss
Original file line number Diff line number Diff line change
@@ -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%;
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/renderer/views/About/About.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<ft-card class="card">
<ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
<h1>
{{ $t("About.About") }}
</h1>
Expand Down
4 changes: 4 additions & 0 deletions src/renderer/views/Channel/Channel.js
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,10 @@ export default defineComponent({
})

return values
},

useFullWidthLayout: function () {
return this.$store.getters.getUseFullWidthLayout
}
},
watch: {
Expand Down
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -237,7 +243,7 @@
}

@media only screen and (max-width: 260px) {
.channelDetails {
.channelDetails {
max-inline-size: none;
}
}
8 changes: 4 additions & 4 deletions src/renderer/views/Channel/Channel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
/>
<ft-card
v-else-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
class="card channelDetails"
class="card channelDetails" :class="{ fullWidth: useFullWidthLayout }"
>
<div
class="channelBannerContainer"
Expand Down Expand Up @@ -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'"
Expand Down Expand Up @@ -409,7 +409,7 @@
</ft-card>
<ft-card
v-if="errorMessage"
class="card"
class="card" :class="{ fullWidth: useFullWidthLayout }"
>
<p>
{{ errorMessage }}
Expand All @@ -424,4 +424,4 @@
</template>

<script src="./Channel.js" />
<style scoped src="./Channel.css" />
<style scoped src="./Channel.scss" lang="scss" />
4 changes: 4 additions & 0 deletions src/renderer/views/Hashtag/Hashtag.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ export default defineComponent({

showFetchMoreButton() {
return !isNullOrEmpty(this.hashtagContinuationData) || this.apiUsed === 'invidious'
},

useFullWidthLayout: function () {
return this.$store.getters.getUseFullWidthLayout
}
},
watch: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
Loading

0 comments on commit 96b2410

Please sign in to comment.