Merge pull request #20 from cloudrac3r/refactor-settings

Refactor settings styles

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

@@ -24,8 +24,8 @@
 .select {
   position: relative;
   width: 200px;
-	padding: 10px 10px 10px 0;
+  padding: 0px 10px 10px 0;
-  margin-top: 10px;
+  margin-top: 30px;
 }
 
 .select-text {
@@ -57,8 +57,8 @@
 
 .iconSelect {
   position: absolute;
-	top: 18px;
+  top: 10px;
-	right: 10px;
+  right: 15px;
   /* Styling the down arrow */
   padding: 0;
   content: '';

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

@@ -10,6 +10,7 @@
     font-size: 16px;
     line-height: 1.5;
     padding: 5px;
+    margin: 12px 8px;
 }
 
 /* Input */

src/renderer/components/ft-toggle-switch/ft-toggle-switch.css

@@ -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;
-}

src/renderer/components/ft-toggle-switch/ft-toggle-switch.js

@@ -10,6 +10,10 @@ export default Vue.extend({
     defaultValue: {
       type: Boolean,
       default: false
+    },
+    compact: {
+      type: Boolean,
+      default: false
     }
   },
   data: function () {

src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass

@@ -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%)

src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue

@@ -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" />

src/renderer/components/general-settings/general-settings.css

@@ -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;
-  }
-}

src/renderer/components/general-settings/general-settings.sass

@@ -0,0 +1 @@
+@use "../../sass-partials/settings"

src/renderer/components/general-settings/general-settings.vue

@@ -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>
+    <div class="switchGrid">
-    <ft-flex-box>
       <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" />

src/renderer/components/player-settings/player-settings.css

@@ -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;
-  }
-}

src/renderer/components/player-settings/player-settings.sass

@@ -0,0 +1 @@
+@use "../../sass-partials/settings"

src/renderer/components/player-settings/player-settings.vue

@@ -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>
+      </div>
-    <br>
+      <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" />

src/renderer/sass-partials/_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