Add advanced theme settings (#157)

* Add advanced theme settings

- header position
- border-radius
- list background
- amount of games next to list title
- settings section headlines

* Linting

* Linting: indent

* keep options consistent

switching from "hide this" and "display this" is bad UX.

* Hide number of games in lists by default

* reverse header position with css

* border-radius

* remove transparent background setting

this will be handled by themes

* only affect top/bottom settings on mobile

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="app"
-    :class="theme"
+    :class="[theme, headerPosition]"
     :style="style"
     :dir="dir"
   >
@@ -53,9 +53,20 @@ export default {
     },
 
     style() {
-      return this.$route.name === 'game-board' && this.wallpaperUrl
+      return {
-        ? `background-image: url('${this.wallpaperUrl}')`
+        'background-image':
-        : null;
+          this.$route.name === 'game-board' &&
+          this.wallpaperUrl
+            ? `url('${this.wallpaperUrl}')`
+            : null,
+        '--border-radius':
+          this.settings &&
+          this.platform &&
+          this.settings[this.platform.code] &&
+          !this.settings[this.platform.code].borderRadius
+            ? '0px'
+            : null,
+      };
     },
 
     customWallpaper() {
@@ -80,6 +91,22 @@ export default {
         ? `theme-${this.settings[this.platform.code].theme}`
         : 'theme-default';
     },
+
+    headerPosition() {
+      const hasPlatform = this.platform && this.platform.code;
+      const hasPosition = hasPlatform
+      && this.settings
+      && this.settings[this.platform.code]
+      && this.settings[this.platform.code].position;
+
+      const isGameBoard = this.$route.name === 'game-board';
+
+      const hasPlatformPosition = hasPlatform && hasPosition;
+
+      return isGameBoard && hasPlatformPosition
+        ? `${this.settings[this.platform.code].position}`
+        : 'top';
+    },
   },
 
   watch: {
@@ -292,8 +319,17 @@ export default {
   @import "~styles/styles";
 
   #app {
+    display: flex;
+    flex-direction: column;
     background: var(--body-background);
     background-size: cover;
     overflow-x: hidden;
+    --border-radius: 4px;
+
+    @media($small) {
+      &.bottom {
+        flex-direction: column-reverse;
+      }
+    }
   }
 </style>

src/components/GameBoard/GameBoardPlaceholder.vue

@@ -59,7 +59,7 @@ export default {
   .list {
     flex-shrink: 0;
     cursor: default;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     background: var(--list-background);
     overflow: hidden;
     position: relative;
@@ -83,7 +83,7 @@ export default {
 
     &.single {
       --placeholder-text-margin: #{$gp / 2} #{$gp / 2} 0 0;
-      border-radius: $border-radius;
+      border-radius: var(--border-radius);
     }
 
     &.masonry {
@@ -115,7 +115,7 @@ export default {
 
   .game {
     background: var(--game-card-background);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow: hidden;
   }
 </style>

src/components/GameCards/GameCardCompact.vue

@@ -83,7 +83,7 @@ export default {
     position: relative;
     display: grid;
     grid-template-columns: 50px auto;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow: hidden;
 
     img {

src/components/GameCards/GameCardDefault.vue

@@ -86,7 +86,7 @@ export default {
     position: relative;
     display: grid;
     grid-template-columns: $gameCoverWidth auto;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow: hidden;
 
     &.card-placeholder {

src/components/GameCards/GameCardGrid.vue

@@ -75,7 +75,7 @@ export default {
   display: flex;
   flex-direction: column;
   position: relative;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   overflow: hidden;
   cursor: pointer;
 
@@ -105,8 +105,8 @@ export default {
     padding: $gp / 2;
     width: 100%;
     display: flex;
-    border-bottom-left-radius: $border-radius;
+    border-bottom-left-radius: var(--border-radius);
-    border-bottom-right-radius: $border-radius;
+    border-bottom-right-radius: var(--border-radius);
     flex-direction: column;
     background: var(--game-card-background);
 

src/components/GameCards/GameCardMasonry.vue

@@ -28,7 +28,7 @@ export default {
   position: relative;
   width: calc((100%/3) - 5.5px);
   margin-bottom: 4px;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   overflow: hidden;
   cursor: pointer;
 

src/components/GameCards/GameCardSearch.vue

@@ -47,7 +47,7 @@ $gameCoverWidth: 80px;
   position: relative;
   display: grid;
   grid-template-columns: $gameCoverWidth auto;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   overflow: hidden;
 
   img {

src/components/GameCards/GameCardText.vue

@@ -74,7 +74,7 @@ export default {
     background: var(--game-card-background);
     margin-bottom: $gp / 2;
     position: relative;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     min-height: 50px;
 
     &.card-placeholder {

src/components/GameDetail/GameDetailPlaceholder.vue

@@ -98,7 +98,7 @@ export default {
     z-index: 1;
     margin: $gp * 3;
     padding: $gp 0;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
 
     @media($small) {
       margin: 0;

src/components/GameDetail/GameProgress.vue

@@ -67,7 +67,7 @@ export default {
       width: 100%;
       margin: $gp / 4 0;
       overflow: hidden;
-      border-radius: $border-radius / 2;
+      border-radius: var(--border-radius) / 2;
     }
 
     .progress-bar-label {

src/components/GameDetail/GameScreenshots.vue

@@ -92,7 +92,7 @@ export default {
     img {
       margin: 0 $gp / 4 $gp / 4;
       cursor: pointer;
-      border-radius: $border-radius;
+      border-radius: var(--border-radius);
     }
   }
 </style>
@@ -144,7 +144,7 @@ export default {
         font-family: "Font Awesome 5 Free";
         content: "\f00d";
         border: 1px solid #a5a2a2;
-        border-radius: $border-radius;
+        border-radius: var(--border-radius);
         position: fixed;
         right: $gp / 2;
         top: $gp / 2;

src/components/IgdbCredit.vue

@@ -29,7 +29,7 @@ export default {
 
 .igdb-credit {
   color: var(--primary-text-color);
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   display: flex;
   align-items: center;
   text-decoration: none;

src/components/Lists/List.vue

@@ -8,7 +8,12 @@
           title="List sorted automatically"
         />
 
-        {{ list[listIndex].name }} ({{ gameList.length }})
+        {{ list[listIndex].name }}
+        <span
+          v-if="showGameCount"
+        >
+          ({{ gameList.length }})
+        </span>
       </span>
 
       <list-settings-modal :list-index="listIndex" />
@@ -201,6 +206,10 @@ export default {
       return this.list.length === 1;
     },
 
+    showGameCount() {
+      return this.settings[this.platform.code].showGameCount;
+    },
+
     gameCardComponent() {
       return this.view && Object.keys(this.gameCardComponents).includes(this.view)
         ? this.gameCardComponents[this.view]
@@ -281,7 +290,7 @@ export default {
     position: relative;
     width: 300px;
     background: var(--list-background);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow: hidden;
     margin-right: $gp;
     max-height: calc(100vh - 100px);
@@ -314,7 +323,7 @@ export default {
       justify-content: space-between;
       padding-left: $gp / 2;
       position: absolute;
-      border-radius: $border-radius;
+      border-radius: var(--border-radius);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       width: 100%;

src/components/Modal.vue

@@ -131,7 +131,7 @@ export default {
     overflow-y: auto;
     margin: $gp * 2 auto $gp;
     padding: 0;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     cursor: default;
 
     @media($small) {

src/components/Placeholder.vue

@@ -77,7 +77,7 @@ export default {
   width: var(--placeholder-image-width, 80px);
   height: var(--placeholder-image-height, 120px);
   @extend .animated-background;
-  border-radius: $border-radius / 2;
+  border-radius: var(--border-radius) / 2;
 }
 
 .text {
@@ -88,7 +88,7 @@ export default {
   width: var(--placeholder-text-width, 100%);
   height: var(--placeholder-text-height, 12px);
   margin-bottom: $gp / 2;
-  border-radius: $border-radius / 2;
+  border-radius: var(--border-radius) / 2;
   @extend .animated-background;
 }
 </style>

src/components/Platforms/PlatformsGrid.vue

@@ -92,7 +92,7 @@ export default {
     margin-bottom: $gp;
     align-items: center;
     justify-content: center;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow: hidden;
     width: 180px;
     height: 100px;
@@ -135,7 +135,7 @@ export default {
       padding: 0 $gp / 4;
       color: var(--primary-text-color);
       font-size: 10px;
-      border-bottom-left-radius: $border-radius;
+      border-bottom-left-radius: var(--border-radius);
     }
   }
 

src/components/Platforms/PlatformsList.vue

@@ -72,7 +72,7 @@ export default {
 
   .thumbnail {
     padding: $gp;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     justify-content: center;
     text-align: center;
     display: flex;
@@ -114,7 +114,7 @@ export default {
       max-width: 100%;
       align-self: center;
       max-height: 50px;
-      border-radius: $border-radius;
+      border-radius: var(--border-radius);
   }
 
   .has-lists-badge {

src/components/Settings/GameBoardSettings.vue

@@ -10,11 +10,13 @@
     />
   </div> -->
 
+    <h3>Theme</h3>
+
     <wallpaper-upload />
 
     <div class="setting" v-if="value[platform.code]">
       <i class="fas fa-palette" />
-      <h5>Global theme</h5>
+      <h5>Theme</h5>
 
       <select v-model="value[platform.code].theme" @change="$emit('save')">
         <option
@@ -27,6 +29,44 @@
       </select>
     </div>
 
+    <div class="setting">
+      <i class="fas fa-bars" />
+      <h5>Header position (only affects mobile)</h5>
+
+      <select v-model="value[platform.code].position" @change="$emit('save')">
+        <option
+          v-for="{ id, name } in positions"
+          :key="id"
+          :value="id"
+        >
+          {{ name }}
+        </option>
+      </select>
+    </div>
+
+    <div class="setting">
+      <i class="fas fa-shapes" />
+      <h5>Border Radius</h5>
+
+      <toggle-switch
+        id="borderRadius"
+        @change="$emit('save')"
+        v-model="value[platform.code].borderRadius"
+      />
+    </div>
+
+    <h3>Gameboard</h3>
+    <div class="setting">
+      <i class="fas fa-heading" />
+      <h5>Show amount of games next to list title</h5>
+
+      <toggle-switch
+        id="showGameCount"
+        @change="$emit('save')"
+        v-model="value[platform.code].showGameCount"
+      />
+    </div>
+
     <div class="setting">
       <i class="fas fa-exclamation-triangle" />
       <h5>{{ $t('gameBoard.settings.dangerZone') }}</h5>
@@ -53,6 +93,7 @@
 <script>
 import { mapState } from 'vuex';
 import themes from '@/themes';
+import positions from '@/positions';
 import Modal from '@/components/Modal';
 import WallpaperUpload from '@/components/WallpaperUpload';
 import ToggleSwitch from '@/components/ToggleSwitch';
@@ -74,6 +115,7 @@ export default {
   data() {
     return {
       themes,
+      positions,
     };
   },
 

src/components/Toast.vue

@@ -87,7 +87,7 @@ export default {
     max-width: 300px;
     opacity: 0;
     z-index: 1;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     padding: $gp;
     transition: all 200ms linear;
 

src/components/WallpaperUpload.vue

@@ -165,7 +165,7 @@ export default {
     cursor: pointer;
     height: auto;
     border: 1px solid transparent;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
 
     &:hover {
       border-color: var(--accent-color);

src/pages/Game.vue

@@ -183,7 +183,7 @@ aside {
 }
 
 .game-cover {
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
 }
 
 .game-title {

src/pages/GameBoard.vue

@@ -140,6 +140,12 @@ export default {
   overflow-x: overlay;
   display: flex;
 
+  @media($small) {
+    .bottom & {
+      padding: $gp $gp 0;
+    }
+  }
+
   @media($small) {
     &:not(.dragging) {
       scroll-snap-type: mandatory;

src/pages/Settings.vue

@@ -7,6 +7,8 @@
       class="settings"
     >
       <game-board-settings v-model="localSettings" @save="save" v-if="isGameBoard" />
+
+      <h3>Global</h3>
       <tags-settings v-model="localSettings" />
 
       <div class="setting">
@@ -78,6 +80,11 @@ export default {
         theme: {
           global: 'default',
         },
+        position: {
+          global: 'top',
+        },
+        borderRadius: true,
+        showGameCount: false,
       },
     };
   },
@@ -109,6 +116,9 @@ export default {
     if (this.platform && !this.localSettings[this.platform.code]) {
       this.localSettings[this.platform.code] = {
         theme: 'default',
+        position: 'top',
+        borderRadius: true,
+        showGameCount: false,
       };
     }
   },
@@ -180,7 +190,7 @@ export default {
   .avatar {
     width: $avatarSize;
     height: $avatarSize;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow: hidden;
   }
 </style>

src/positions.js

@@ -0,0 +1,10 @@
+export default [
+  {
+    name: 'Top',
+    id: 'top',
+  },
+  {
+    name: 'Bottom',
+    id: 'bottom',
+  },
+];

src/styles/_buttons.scss

@@ -20,7 +20,7 @@ button, a.link {
   background: transparent;
   color: inherit;
   font: inherit;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   line-height: normal;
   -webkit-font-smoothing: inherit;
   -moz-osx-font-smoothing: inherit;

src/styles/_inputs.scss

@@ -1,7 +1,7 @@
 textarea, input, select {
   border: 1px solid #555555;
   background: #fff;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   height: 40px;
   padding: 0 $gp / 2;
   width: 100%;
@@ -83,7 +83,7 @@ input[type=range] {
   width: 100%;
   height: 36px;
   border: 0;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   padding: 0;
   background: transparent;
   overflow: hidden;
@@ -106,7 +106,7 @@ input[type=range] {
     cursor: pointer;
     animate: 0.2s;
     background: var(--progress-primary-color);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow: hidden;
   }
 
@@ -127,7 +127,7 @@ input[type=range] {
     animate: 0.2s;
     overflow: hidden;
     background: var(--progress-secondary-color);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
   }
 
   &::-moz-range-thumb {
@@ -160,13 +160,17 @@ input[type=range] {
   }
 
   &::-ms-fill-lower {
-    background: var(--progress-primary-color);
+    border-radius: var(--border-radius);
-    border-radius: $border-radius;
   }
 
   &::-ms-fill-upper {
     background: var(--progress-primary-color);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
+  }
+
+  &::-ms-fill-upper {
+    background: var(--progress-primary-color);
+    border-radius: var(--border-radius);
   }
 
   &::-ms-thumb {

src/styles/_markdown.scss

@@ -7,7 +7,7 @@
   background-color: rgba(255, 255, 255, .1);
   padding: $gp / 2;
   margin-top: $gp / 2;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
 }
 
 .markdown .octicon {

src/styles/_vars.scss

@@ -8,7 +8,6 @@ $font-size-large: 18px;
 $font-size-xlarge: 24px;
 
 // Measurements
-$border-radius: 4px;
 $gp: 16px;
 $navHeight: 48px;
 $container-width: 900px;