#69: Adjustable list width (#109)

* Added Autosorting

* When list set to sort new games now properly sorted

* Custom by default on new lists

* Apply suggestions from code review

Will look at recommended changes to <i> as they are more involved

Co-Authored-By: Roman Cervantes <roman.cervantes@keap.com>

* Made rest of formatting changes

* Added width selector and associated data in ListSettings

* Moved selectedWidth up a level

* Width now changes width, doesn't change card size

* Mostly working, covers are just giant for no particular reason right now

* Removed hard coded Strings in ListSettings

src/components/Lists/List.vue

@@ -1,6 +1,9 @@
 <!-- eslint-disable max-len -->
 <template lang="html">
-    <div :class="['list', viewClass, { dark: darkModeEnabled }, transparent]">
+    <div 
+        :class="['list', viewClass, { dark: darkModeEnabled }, transparent]"
+        :style="[{ width: calculatedWidth}]"
+    >
         <div class="list-header" :class="{ searching, editing }">
             <div v-if="searching">
                 {{ $t('gameSearch.title') }}
@@ -37,6 +40,7 @@
         <draggable
             v-else
             :class="['games', { 'empty': isEmpty }]"
+            :style="[{'grid-template-columns': calculatedColumns}]"
             :list="games"
             :id="listIndex"
             :move="validateMove"
@@ -160,6 +164,21 @@ export default {
                 ? 'transparent'
                 : '';
         },
+
+        calculatedWidth() {
+            let currentListWidth = this.list[this.listIndex].selectedWidth;
+            let myCalc = ((currentListWidth == null ? 1 : currentListWidth) * (this.gameCardComponent === "GameCardWide" ? 340 : 300) + 'px');
+            return myCalc;
+        },
+
+        calculatedColumns() {
+            let currentListWidth = this.list[this.listIndex].selectedWidth;
+            let ans = "1fr";
+            for (let i = 1; i < currentListWidth; i++) {
+                ans += " 1fr";
+            }
+            return ans;
+        }
     },
 
     methods: {
@@ -217,26 +236,23 @@ export default {
         flex-shrink: 0;
         cursor: default;
         position: relative;
-        width: 300px;
         background-color: $color-light-gray;
         border-radius: $border-radius;
         overflow: hidden;
         margin-right: $gp;
         max-height: calc(100vh - 81px);
 
-        &.transparent {
+        .games {
-            background-color: $color-light-gray-transparent;
+            display: grid;
         }
 
-        &.wide {
+        &.transparent {
-            width: $list-width-wide;
+            background-color: $color-light-gray-transparent;
         }
 
         &.covers {
             .games {
                 padding-top: $gp / 2;
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
                 grid-gap: $gp / 4;
             }
         }

src/components/Lists/ListSettings.vue

@@ -1,7 +1,7 @@
 <template lang="html">
     <div class="list-settings">
         <section>
-            <h4>Move list</h4>
+            <h4>{{ $t('list.moveList') }}</h4>
 
             <button
                 class="small primary hollow"
@@ -27,7 +27,7 @@
         </section>
 
         <section>
-            <h4>Change view</h4>
+            <h4>{{ $t('list.changeView') }}</h4>
 
             <button
                 v-for="(icon, view) in views"
@@ -42,7 +42,7 @@
         </section>
 
         <section v-if="hasMultipleGames">
-            <h4>Sort List</h4>
+            <h4>{{ $t('list.sortList') }}</h4>
 
             <button
                 v-for="(icon, sortOrder) in sortOrders"
@@ -56,6 +56,23 @@
             </button>
         </section>
 
+        <section v-if="hasMultipleGames">
+            <h4>{{ $t('list.width') }}</h4>
+
+            <select 
+                v-model="activeList.selectedWidth"
+                class="small primary hollow"
+                @change="setListWidth(activeList.selectedWidth)"
+            >
+                <option 
+                    v-for="width in widths" 
+                    :selected="activeList.selectedWidth === width"
+                >
+                    {{ width }}
+                </option>
+            </select>
+        </section>
+
         <footer>
             <button
                 class="filled small tiny info hollow"
@@ -65,7 +82,7 @@
                 @click="cancel"
             >
                 <i class="fas fa-chevron-left" />
-                Back
+                {{ $t('back') }}
             </button>
 
             <modal
@@ -125,6 +142,7 @@ export default {
                 sortByRating: 'fas fa-sort-numeric-up',
                 sortByCustom: 'fas fa-sort-custom',
             },
+            widths: [1, 2, 3, 4, 5],
         };
     },
 
@@ -201,6 +219,15 @@ export default {
             this.$emit('update');
         },
 
+        setListWidth(selectedWidth) {
+            this.$store.commit('UPDATE_LIST_WIDTH', {
+                listIndex: this.activeListIndex,
+                selectedWidth,
+            });
+
+            this.$emit('update');
+        },
+
         sort(sortOrder) {
             if (sortOrder === 'sortByName') {
                 this.$store.commit('SORT_LIST_ALPHABETICALLY', this.activeListIndex);

src/i18n/de.js

@@ -45,6 +45,11 @@ module.exports = {
         moveLeft: 'Geh nach links',
         moveRight: 'Nach rechts bewegen',
         emptyList: 'Diese Liste ist leer',
+        // TODO: Translate From English
+        /* changeView: 'Change view',
+        moveList: 'Move list',
+        sortList: 'Sort list',
+        width: 'List width', */
     },
     settings: {
         global: 'Global',

src/i18n/en.js

@@ -45,6 +45,10 @@ module.exports = {
         moveRight: 'Move right',
         emptyList: 'This list is empty',
         addGame: 'Add game',
+        changeView: 'Change view',
+        moveList: 'Move list',
+        sortList: 'Sort list',
+        width: 'List width',
     },
     settings: {
         global: 'Global',

src/i18n/es.js

@@ -45,6 +45,11 @@ module.exports = {
         moveLeft: 'Mover hacia la izquierda',
         moveRight: 'Mover a la derecha',
         emptyList: 'Esta lista esta vacia',
+        // TODO: Translate From English
+        /* changeView: 'Change view',
+        moveList: 'Move list',
+        sortList: 'Sort list',
+        width: 'List width', */
     },
     settings: {
         global: 'Global',

src/i18n/fr.js

@@ -45,6 +45,11 @@ module.exports = {
         moveLeft: 'Se déplacer à gauche',
         moveRight: 'Déplacer vers la droite',
         emptyList: 'Cette liste est vide',
+        // TODO: Translate From English
+        /* changeView: 'Change view',
+        moveList: 'Move list',
+        sortList: 'Sort list',
+        width: 'List width', */
     },
     settings: {
         global: 'Global',

src/i18n/it.js

@@ -45,6 +45,11 @@ module.exports = {
         moveLeft: 'Muovere a sinistra',
         moveRight: 'Vai a destra',
         emptyList: 'Questa lista è vuota',
+        // TODO: Translate From English
+        /* changeView: 'Change view',
+        moveList: 'Move list',
+        sortList: 'Sort list',
+        width: 'List width', */
     },
     settings: {
         global: 'Globale',

src/i18n/pt.js

@@ -45,6 +45,11 @@ module.exports = {
         moveLeft: 'Mova à esquerda',
         moveRight: 'Mover para a direita',
         emptyList: 'Esta lista está vazia',
+        // TODO: Translate From English
+        /* changeView: 'Change view',
+        moveList: 'Move list',
+        sortList: 'Sort list',
+        width: 'List width', */
     },
     settings: {
         global: 'Global',

src/store/mutations.js

@@ -149,6 +149,10 @@ export default {
         state.gameLists[state.platform.code][listIndex].sortOrder = sortOrder;
     },
 
+    UPDATE_LIST_WIDTH(state, { listIndex, selectedWidth }) {
+        state.gameLists[state.platform.code][listIndex].selectedWidth = selectedWidth;
+    },
+
     SET_SETTINGS(state, settings) {
         state.settings = settings;
     },