Merge pull request #20 from cloudrac3r/refactor-settings
Refactor settings styles
This commit is contained in:
Preston
GitHub
commit
e8ec6d8a8d
|
|
@ -24,8 +24,8 @@
|
|||
.select {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
padding: 10px 10px 10px 0;
|
||||
margin-top: 10px;
|
||||
padding: 0px 10px 10px 0;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.select-text {
|
||||
|
|
@ -57,8 +57,8 @@
|
|||
|
||||
.iconSelect {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
/* Styling the down arrow */
|
||||
padding: 0;
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
margin: 12px 8px;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
|
|
|
|||
|
|
@ -1,74 +0,0 @@
|
|||
/* Thanks to Guus Lieben for the Material Design Switch */
|
||||
|
||||
.switch-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 112px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
margin: 16px;
|
||||
padding: 16px 0 16px 44px;
|
||||
}
|
||||
|
||||
.switch-label:before,
|
||||
.switch-label:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
top: 50%;
|
||||
-ms-transform: translate(0, -50%);
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.switch-label:before {
|
||||
left: 1px;
|
||||
width: 34px;
|
||||
height: 14px;
|
||||
background-color: #9E9E9E;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.switch-label:after {
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #FAFAFA;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
|
||||
}
|
||||
|
||||
.switch-label .toggle--on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.switch-label .toggle--off {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.switch-input:checked+.switch-label:before {
|
||||
background-color: var(--accent-color-light);
|
||||
}
|
||||
|
||||
.switch-input:checked+.switch-label:after {
|
||||
background-color: var(--accent-color);
|
||||
-ms-transform: translate(80%, -50%);
|
||||
-webkit-transform: translate(80%, -50%);
|
||||
transform: translate(80%, -50%);
|
||||
}
|
||||
|
||||
.switch-input:checked+.switch-label .toggle--on {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.switch-input:checked+.switch-label .toggle--off {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -10,6 +10,10 @@ export default Vue.extend({
|
|||
defaultValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
/* Thanks to Guus Lieben for the Material Design Switch */
|
||||
|
||||
.switch-input
|
||||
display: none
|
||||
|
||||
.switch-label
|
||||
position: relative
|
||||
display: inline-block
|
||||
min-width: 112px
|
||||
cursor: pointer
|
||||
font-weight: 500
|
||||
text-align: left
|
||||
margin: 16px
|
||||
padding: 16px 0 16px 44px
|
||||
|
||||
&.compact
|
||||
margin: 0px
|
||||
padding: 12px 0 12px 44px
|
||||
|
||||
&:before, &:after
|
||||
content: ""
|
||||
position: absolute
|
||||
margin: 0
|
||||
outline: 0
|
||||
top: 50%
|
||||
-ms-transform: translate(0, -50%)
|
||||
-webkit-transform: translate(0, -50%)
|
||||
transform: translate(0, -50%)
|
||||
-webkit-transition: all 0.3s ease
|
||||
transition: all 0.3s ease
|
||||
|
||||
&:before
|
||||
left: 1px
|
||||
width: 34px
|
||||
height: 14px
|
||||
background-color: #9E9E9E
|
||||
border-radius: 8px
|
||||
|
||||
.switch-input:checked + &
|
||||
background-color: var(--accent-color-light)
|
||||
|
||||
&:after
|
||||
left: 0
|
||||
width: 20px
|
||||
height: 20px
|
||||
background-color: #FAFAFA
|
||||
border-radius: 50%
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084)
|
||||
|
||||
.switch-input:checked + &
|
||||
background-color: var(--accent-color)
|
||||
-ms-transform: translate(80%, -50%)
|
||||
-webkit-transform: translate(80%, -50%)
|
||||
transform: translate(80%, -50%)
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
<label
|
||||
:for="id"
|
||||
class="switch-label"
|
||||
:class="{compact}"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
|
@ -19,4 +20,4 @@
|
|||
</template>
|
||||
|
||||
<script src="./ft-toggle-switch.js" />
|
||||
<style scoped src="./ft-toggle-switch.css" />
|
||||
<style scoped lang="sass" src="./ft-toggle-switch.sass" />
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.card {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 460px) {
|
||||
.generalSettingsFlexBox {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
@use "../../sass-partials/settings"
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<ft-card
|
||||
class="relative card">
|
||||
class="card">
|
||||
<h3
|
||||
class="videoTitle"
|
||||
>
|
||||
|
|
@ -18,8 +18,7 @@
|
|||
@change="updateCheckForUpdates"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
<br>
|
||||
<ft-flex-box>
|
||||
<div class="switchGrid">
|
||||
<ft-select
|
||||
placeholder="Preferred API Backend"
|
||||
:value="backendPreference"
|
||||
|
|
@ -55,9 +54,9 @@
|
|||
:select-values="thumbnailTypeValues"
|
||||
@change="updateThumbnailPreference"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
</div>
|
||||
</ft-card>
|
||||
</template>
|
||||
|
||||
<script src="./general-settings.js" />
|
||||
<style scoped src="./general-settings.css" />
|
||||
<style scoped lang="sass" src="./general-settings.sass" />
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.card {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 460px) {
|
||||
.playerSettingsFlexBox {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
@use "../../sass-partials/settings"
|
||||
|
|
@ -6,44 +6,54 @@
|
|||
>
|
||||
{{ title }}
|
||||
</h3>
|
||||
<ft-flex-box class="playerSettingsFlexBox">
|
||||
<div class="switchColumnGrid">
|
||||
<div class="switchColumn">
|
||||
<ft-toggle-switch
|
||||
label="Remember History"
|
||||
:compact=true
|
||||
:default-value="rememberHistory"
|
||||
@change="updateRememberHistory"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
label="Autoplay Videos"
|
||||
:default-value="autoplayVideos"
|
||||
@change="updateAutoplayVideos"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
label="Autoplay Playlists"
|
||||
:default-value="autoplayPlaylists"
|
||||
@change="updateAutoplayPlaylists"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
label="Play Next Video"
|
||||
:default-value="playNextVideo"
|
||||
@change="updatePlayNextVideo"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
label="Enable Subtitles by Default"
|
||||
:compact=true
|
||||
:default-value="enableSubtitles"
|
||||
@change="updateEnableSubtitles"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
label="Force Local Backend for Legacy Formats"
|
||||
:compact=true
|
||||
:default-value="forceLocalBackendForLegacy"
|
||||
@change="updateForceLocalBackendForLegacy"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
label="Proxy Videos Through Invidious"
|
||||
:compact=true
|
||||
:default-value="proxyVideos"
|
||||
@change="updateProxyVideos"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
<br>
|
||||
</div>
|
||||
<div class="switchColumn">
|
||||
<ft-toggle-switch
|
||||
label="Autoplay Videos"
|
||||
:compact=true
|
||||
:default-value="autoplayVideos"
|
||||
@change="updateAutoplayVideos"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
label="Autoplay Playlists"
|
||||
:compact=true
|
||||
:default-value="autoplayPlaylists"
|
||||
@change="updateAutoplayPlaylists"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
label="Play Next Video"
|
||||
:compact=true
|
||||
:default-value="playNextVideo"
|
||||
@change="updatePlayNextVideo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ft-flex-box>
|
||||
<ft-slider
|
||||
label="Default Volume"
|
||||
|
|
@ -64,7 +74,6 @@
|
|||
@change="updateDefaultPlayback"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
<br>
|
||||
<ft-flex-box>
|
||||
<ft-select
|
||||
placeholder="Default Video Format"
|
||||
|
|
@ -85,4 +94,4 @@
|
|||
</template>
|
||||
|
||||
<script src="./player-settings.js" />
|
||||
<style scoped src="./player-settings.css" />
|
||||
<style scoped lang="sass" src="./player-settings.sass" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
.switchGrid
|
||||
display: grid
|
||||
grid-template-columns: auto auto
|
||||
justify-content: space-evenly
|
||||
align-items: center
|
||||
|
||||
@media only screen and (max-width: 680px)
|
||||
grid-template-columns: auto
|
||||
|
||||
.switchColumnGrid
|
||||
@extend .switchGrid
|
||||
align-items: start
|
||||
|
||||
.switchColumn
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-items: start
|
||||
|
||||
.card
|
||||
width: 85%
|
||||
margin: 0 auto
|
||||
margin-bottom: 10px
|
||||
|
||||
@media only screen and (max-width: 680px)
|
||||
width: 90%
|
||||
|
||||
@media only screen and (max-width: 460px)
|
||||
.generalSettingsFlexBox, .playerSettingsFlexBox
|
||||
justify-content: flex-start
|
||||
Loading…
Reference in New Issue