Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add setting to enable full-width layout #4379

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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" />
7 changes: 0 additions & 7 deletions src/renderer/components/ft-card/ft-card.css

This file was deleted.

13 changes: 12 additions & 1 deletion src/renderer/components/ft-card/ft-card.js
Original file line number Diff line number Diff line change
@@ -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
}
}
})
17 changes: 17 additions & 0 deletions src/renderer/components/ft-card/ft-card.scss
Original file line number Diff line number Diff line change
@@ -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%;
}
}
}
3 changes: 2 additions & 1 deletion src/renderer/components/ft-card/ft-card.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<template>
<div
class="ft-card"
:class="{ fullWidth: useFullWidthLayout, big }"
@focusout="$emit('focusout')"
>
<slot />
</div>
</template>

<script src="./ft-card.js" />
<style scoped src="./ft-card.css" />
<style scoped src="./ft-card.scss" lang="scss" />
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ h2, .selectedCount {
}

.card {
inline-size: 85%;
margin-block: 0 15px;
margin-inline: auto;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default defineComponent({
},
locale: function () {
return this.$i18n.locale.replace('_', '-')
},
}
},
watch: {
profile: function () {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div>
<ft-card class="card">
<ft-card
big
class="card"
>
<h2>
{{ $t("Profile.Subscription List") }}
</h2>
Expand Down
9 changes: 1 addition & 8 deletions src/renderer/components/ft-profile-edit/ft-profile-edit.css
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,6 @@ h3 {
}

.card {
inline-size: 85%;
margin-block: 0 60px;
margin-inline: auto;
}

@media only screen and (max-width: 680px) {
.card {
inline-size: 90%;
}
}
}
5 changes: 4 additions & 1 deletion src/renderer/components/ft-profile-edit/ft-profile-edit.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div>
<ft-card class="card">
<ft-card
big
class="card"
>
<h2>{{ editOrCreateProfileLabel }}</h2>
<ft-flex-box class="profileEdit">
<div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,6 @@ h2 {
}

.card {
inline-size: 85%;
margin-block: 0 15px;
margin-inline: auto;
}

@media only screen and (max-width: 680px) {
.card {
inline-size: 90%;
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div>
<ft-card class="card">
<ft-card
big
class="card"
>
<h2>
{{ $t("Profile.Other Channels") }}
</h2>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.card {
inline-size: 85%;
margin: auto;
box-sizing: border-box;
}
Expand Down
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 @@ -299,6 +299,7 @@ const state = {
allowDashAv1Formats: false,
commentAutoLoadEnabled: false,
useDeArrowTitles: false,
useFullWidthLayout: false,
}

const stateWithSideEffects = {
Expand Down
5 changes: 0 additions & 5 deletions src/renderer/views/About/About.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
.card {
margin-block: 0 60px;
margin-inline: auto;
inline-size: 85%;

@media only screen and (max-width: 680px) {
inline-size: 90%;
}
}

.brand {
Expand Down
5 changes: 4 additions & 1 deletion src/renderer/views/About/About.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div>
<ft-card class="card">
<ft-card
big
class="card"
>
<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,16 @@
.card {
position: relative;
inline-size: 85%;
margin-block: 0 20px;
margin-inline: auto;
box-sizing: border-box;
}

.channelDetails {
padding: 0;
max-inline-size: 92vw;

&:not(.fullWidth) {
max-inline-size: 92vw;
}
}

.channelBannerContainer {
Expand Down Expand Up @@ -237,7 +239,7 @@
}

@media only screen and (max-width: 260px) {
.channelDetails {
.channelDetails {
max-inline-size: none;
}
}
6 changes: 5 additions & 1 deletion src/renderer/views/Channel/Channel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
/>
<ft-card
v-else-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
big
class="card channelDetails"
:class="{ fullWidth: useFullWidthLayout }"
>
<div
class="channelBannerContainer"
Expand Down Expand Up @@ -216,6 +218,7 @@
</ft-card>
<ft-card
v-if="!isLoading && !errorMessage && (isFamilyFriendly || !showFamilyFriendlyOnly)"
big
class="card"
>
<channel-about
Expand Down Expand Up @@ -409,6 +412,7 @@
</ft-card>
<ft-card
v-if="errorMessage"
big
class="card"
>
<p>
Expand All @@ -424,4 +428,4 @@
</template>

<script src="./Channel.js" />
<style scoped src="./Channel.css" />
<style scoped src="./Channel.scss" lang="scss" />
7 changes: 0 additions & 7 deletions src/renderer/views/Hashtag/Hashtag.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,4 @@
.card {
margin-block: 0 20px;
margin-inline: auto;
inline-size: 85%;
}

@media only screen and (max-width: 680px) {
.card {
inline-size: 90%;
}
}
1 change: 1 addition & 0 deletions src/renderer/views/Hashtag/Hashtag.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
/>
<ft-card
v-else
big
class="card"
>
<h2>{{ hashtag }}</h2>
Expand Down
9 changes: 1 addition & 8 deletions src/renderer/views/History/History.css
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
.card {
inline-size: 85%;
margin-block: 0 60px;
margin-inline: auto;
}

.message {
color: var(--tertiary-text-color);
}

@media only screen and (max-width: 680px) {
.card {
inline-size: 90%;
}
}
}
1 change: 1 addition & 0 deletions src/renderer/views/History/History.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
/>
<ft-card
v-show="!isLoading"
big
class="card"
>
<h2>{{ $t("History.History") }}</h2>
Expand Down
Loading
Loading