From b392112b54cf644dd531d85ad7c6edc861bacec7 Mon Sep 17 00:00:00 2001
From: Patrick Kontschak <github@patrickkontschak.com>
Date: Wed, 22 Jan 2020 17:39:16 +0100
Subject: [PATCH] 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                                   | 44 +++++++++++++++++--
 .../GameBoard/GameBoardPlaceholder.vue        |  6 +--
 src/components/GameCards/GameCardCompact.vue  |  2 +-
 src/components/GameCards/GameCardDefault.vue  |  2 +-
 src/components/GameCards/GameCardGrid.vue     |  6 +--
 src/components/GameCards/GameCardMasonry.vue  |  2 +-
 src/components/GameCards/GameCardSearch.vue   |  2 +-
 src/components/GameCards/GameCardText.vue     |  2 +-
 .../GameDetail/GameDetailPlaceholder.vue      |  2 +-
 src/components/GameDetail/GameProgress.vue    |  2 +-
 src/components/GameDetail/GameScreenshots.vue |  4 +-
 src/components/IgdbCredit.vue                 |  2 +-
 src/components/Lists/List.vue                 | 15 +++++--
 src/components/Modal.vue                      |  2 +-
 src/components/Placeholder.vue                |  4 +-
 src/components/Platforms/PlatformsGrid.vue    |  4 +-
 src/components/Platforms/PlatformsList.vue    |  4 +-
 src/components/Settings/GameBoardSettings.vue | 44 ++++++++++++++++++-
 src/components/Toast.vue                      |  2 +-
 src/components/WallpaperUpload.vue            |  2 +-
 src/pages/Game.vue                            |  2 +-
 src/pages/GameBoard.vue                       |  6 +++
 src/pages/Settings.vue                        | 12 ++++-
 src/positions.js                              | 10 +++++
 src/styles/_buttons.scss                      |  2 +-
 src/styles/_inputs.scss                       | 18 +++++---
 src/styles/_markdown.scss                     |  2 +-
 src/styles/_vars.scss                         |  1 -
 28 files changed, 161 insertions(+), 45 deletions(-)
 create mode 100644 src/positions.js

diff --git a/src/App.vue b/src/App.vue
index 97ad72c0..5099bd4c 100644
--- a/src/App.vue
+++ b/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
-        ? `background-image: url('${this.wallpaperUrl}')`
-        : null;
+      return {
+        'background-image':
+          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>
diff --git a/src/components/GameBoard/GameBoardPlaceholder.vue b/src/components/GameBoard/GameBoardPlaceholder.vue
index 94397d6d..9ac8ecdd 100644
--- a/src/components/GameBoard/GameBoardPlaceholder.vue
+++ b/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>
diff --git a/src/components/GameCards/GameCardCompact.vue b/src/components/GameCards/GameCardCompact.vue
index 8e1f5884..3da06bec 100644
--- a/src/components/GameCards/GameCardCompact.vue
+++ b/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 {
diff --git a/src/components/GameCards/GameCardDefault.vue b/src/components/GameCards/GameCardDefault.vue
index 5a447821..d5265b96 100644
--- a/src/components/GameCards/GameCardDefault.vue
+++ b/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 {
diff --git a/src/components/GameCards/GameCardGrid.vue b/src/components/GameCards/GameCardGrid.vue
index 2dd92ede..8eb30fd1 100644
--- a/src/components/GameCards/GameCardGrid.vue
+++ b/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-right-radius: $border-radius;
+    border-bottom-left-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
     flex-direction: column;
     background: var(--game-card-background);
 
diff --git a/src/components/GameCards/GameCardMasonry.vue b/src/components/GameCards/GameCardMasonry.vue
index 6550e521..9ad82b41 100644
--- a/src/components/GameCards/GameCardMasonry.vue
+++ b/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;
 
diff --git a/src/components/GameCards/GameCardSearch.vue b/src/components/GameCards/GameCardSearch.vue
index 41b2d80f..ece0df9c 100644
--- a/src/components/GameCards/GameCardSearch.vue
+++ b/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 {
diff --git a/src/components/GameCards/GameCardText.vue b/src/components/GameCards/GameCardText.vue
index 9abec29c..b6b20aa1 100644
--- a/src/components/GameCards/GameCardText.vue
+++ b/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 {
diff --git a/src/components/GameDetail/GameDetailPlaceholder.vue b/src/components/GameDetail/GameDetailPlaceholder.vue
index bcd64a0b..b8fb58af 100644
--- a/src/components/GameDetail/GameDetailPlaceholder.vue
+++ b/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;
diff --git a/src/components/GameDetail/GameProgress.vue b/src/components/GameDetail/GameProgress.vue
index f629fc13..312d73c2 100644
--- a/src/components/GameDetail/GameProgress.vue
+++ b/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 {
diff --git a/src/components/GameDetail/GameScreenshots.vue b/src/components/GameDetail/GameScreenshots.vue
index 7cf455ab..453b733f 100644
--- a/src/components/GameDetail/GameScreenshots.vue
+++ b/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;
diff --git a/src/components/IgdbCredit.vue b/src/components/IgdbCredit.vue
index b33ebb56..b5cf4c43 100644
--- a/src/components/IgdbCredit.vue
+++ b/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;
diff --git a/src/components/Lists/List.vue b/src/components/Lists/List.vue
index 49dccc7d..feb1682c 100644
--- a/src/components/Lists/List.vue
+++ b/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%;
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 00cdfca2..85dd6f8c 100644
--- a/src/components/Modal.vue
+++ b/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) {
diff --git a/src/components/Placeholder.vue b/src/components/Placeholder.vue
index ca3730dd..dabf6013 100644
--- a/src/components/Placeholder.vue
+++ b/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>
diff --git a/src/components/Platforms/PlatformsGrid.vue b/src/components/Platforms/PlatformsGrid.vue
index 5e8b9388..7a55edf5 100644
--- a/src/components/Platforms/PlatformsGrid.vue
+++ b/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);
     }
   }
 
diff --git a/src/components/Platforms/PlatformsList.vue b/src/components/Platforms/PlatformsList.vue
index 99159130..eae8a280 100644
--- a/src/components/Platforms/PlatformsList.vue
+++ b/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 {
diff --git a/src/components/Settings/GameBoardSettings.vue b/src/components/Settings/GameBoardSettings.vue
index 19213f05..98bbde49 100644
--- a/src/components/Settings/GameBoardSettings.vue
+++ b/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,
     };
   },
 
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index 5b03e18c..82ebeb8c 100644
--- a/src/components/Toast.vue
+++ b/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;
 
diff --git a/src/components/WallpaperUpload.vue b/src/components/WallpaperUpload.vue
index ab04a589..54cbfcb8 100644
--- a/src/components/WallpaperUpload.vue
+++ b/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);
diff --git a/src/pages/Game.vue b/src/pages/Game.vue
index aa89f060..854332e6 100644
--- a/src/pages/Game.vue
+++ b/src/pages/Game.vue
@@ -183,7 +183,7 @@ aside {
 }
 
 .game-cover {
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
 }
 
 .game-title {
diff --git a/src/pages/GameBoard.vue b/src/pages/GameBoard.vue
index 5adc0251..4beb1e24 100755
--- a/src/pages/GameBoard.vue
+++ b/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;
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index ef93581f..d8a7e323 100644
--- a/src/pages/Settings.vue
+++ b/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>
diff --git a/src/positions.js b/src/positions.js
new file mode 100644
index 00000000..8e53c4bf
--- /dev/null
+++ b/src/positions.js
@@ -0,0 +1,10 @@
+export default [
+  {
+    name: 'Top',
+    id: 'top',
+  },
+  {
+    name: 'Bottom',
+    id: 'bottom',
+  },
+];
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
index b55733a9..9e604298 100644
--- a/src/styles/_buttons.scss
+++ b/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;
diff --git a/src/styles/_inputs.scss b/src/styles/_inputs.scss
index 956a942a..774ac68e 100644
--- a/src/styles/_inputs.scss
+++ b/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: $border-radius;
+    border-radius: var(--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 {
diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss
index 26e4c000..85c4e00a 100644
--- a/src/styles/_markdown.scss
+++ b/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 {
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
index bb26f58f..0579b76a 100644
--- a/src/styles/_vars.scss
+++ b/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;