list updates

src/components/Lists/List.vue

@@ -1,24 +1,32 @@
 <template lang="html">
   <div
-    :class="['list mr-3', viewClass, { dragging }]"
+    :class="['list mr-3', viewClass, { dragging, 'single': singleBoard }]"
     :id="listIndex"
   >
-    <b-card no-body>
+    <b-card
+      no-body
+      :bg-variant="nightMode ? 'dark' : null"
+      :text-variant="nightMode ? 'white' : null"
+    >
       <b-card-header
         class="py-0 pr-0 pl-2 d-flex justify-content-between align-items-center"
         :header-bg-variant="showDuplicateWarning ? 'warning' : null"
       >
-        <h6 class="m-0" v-b-modal="`rename-list-${listIndex}`">
-          <b-badge v-if="showGameCount">
-              {{ list.games.length }}
-          </b-badge>
+        <p class="list-name p-0 m-0">
+          <span v-b-modal="`rename-list-${listIndex}`">
+            {{ showDuplicateWarning ? 'Game already in list' : list.name }}
+          </span>
 
-          <b-badge v-if="autoSortEnabled">
-            <icon small white name="list-ordered" />
-          </b-badge>
+          <br />
 
-          {{ showDuplicateWarning ? 'Game already in list' : list.name }}
-        </h6>
+          <small v-if="showGameCount">
+              {{ list.games.length }} games
+          </small>
+
+          <small v-if="autoSortEnabled" class="text-muted" v-b-modal="`sort-list-${listIndex}`">
+            Sorted by {{ $t(`board.list.${list.settings.sortOrder}`) }}
+          </small>
+        </p>
 
         <list-settings :list="list" :list-index="listIndex" />
       </b-card-header>
@@ -64,7 +72,7 @@ import GameCardCompact from '@/components/GameCards/GameCardCompact';
 import GameCardText from '@/components/GameCards/GameCardText';
 import orderby from 'lodash.orderby';
 import { DEFAULT_LIST_VIEW } from '@/constants';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -110,6 +118,7 @@ export default {
 
   computed: {
     ...mapState(['games', 'dragging', 'progresses', 'board', 'duplicatedGame']),
+    ...mapGetters(['nightMode']),
 
     autoSortEnabled() {
       const { settings } = this.list;
@@ -146,6 +155,10 @@ export default {
       return this.list.games.length === 0;
     },
 
+    singleBoard() {
+      return this.list.games.length === 1;
+    },
+
     view() {
       const { settings } = this.list;
 
@@ -227,6 +240,12 @@ export default {
     width: 300px;
     border-radius: 3px;
 
+    &.single {
+      @media(max-width: 780px) {
+        width: calc(100vw - 140px);
+      }
+    }
+
     .games {
       display: grid;
       height: 100%;
@@ -270,4 +289,8 @@ export default {
   opacity: .1;
   background: #000;
 }
+
+.list-name {
+  line-height: 0.9rem;
+}
 </style>

src/components/Lists/ListSettings.vue

@@ -1,35 +1,43 @@
 <template lang="html">
-  <b-dropdown size="sm" class="m-1" right variant="transparent">
+  <b-dropdown size="sm" class="m-1" right variant="transparent" no-caret>
+    <template v-slot:button-content>
+      <icon name="triangle-down" small />
+    </template>
+
     <add-game-modal :list="list" />
     <b-dd-divider />
     <sort-list :list="list" :list-index="listIndex" />
     <rename-list :list="list" :list-index="listIndex" />
     <change-list-view :list="list" :list-index="listIndex" />
     <list-preferences :list="list" :list-index="listIndex" />
-    <b-dropdown-divider />
-    <b-dropdown-item>
-      <b-button-group size="sm">
-        <b-button
-          v-b-tooltip.hover
-          :title="$t('board.list.moveLeft')"
-          :disabled="isFirst"
-          variant="light"
-          @click="moveList(listIndex, listIndex - 1)"
-        >
-          <icon name="triangle-left" />
-        </b-button>
 
-        <b-button
-          v-b-tooltip.hover
-          :title="$t('board.list.moveRight')"
-          :disabled="isLast"
-          variant="light"
-          @click="moveList(listIndex, listIndex + 1)"
-        >
-          <icon name="triangle-right" />
-        </b-button>
-      </b-button-group>
-    </b-dropdown-item>
+    <template v-if="board.lists.length > 1">
+      <b-dropdown-divider />
+      <b-dropdown-item>
+        <b-button-group size="sm" class="w-100">
+          <b-button
+            v-b-tooltip.hover
+            :title="$t('board.list.moveLeft')"
+            :disabled="isFirst"
+            variant="light"
+            @click="moveList(listIndex, listIndex - 1)"
+          >
+            <icon name="triangle-left" />
+          </b-button>
+
+          <b-button
+            v-b-tooltip.hover
+            :title="$t('board.list.moveRight')"
+            :disabled="isLast"
+            variant="light"
+            @click="moveList(listIndex, listIndex + 1)"
+          >
+            <icon name="triangle-right" />
+          </b-button>
+        </b-button-group>
+      </b-dropdown-item>
+    </template>
+
     <b-dropdown-divider />
 
     <b-dropdown-item
@@ -91,6 +99,8 @@ export default {
         okVariant: 'danger',
         okTitle: this.$t('board.list.deleteWarning.buttonLabel'),
         cancelTitle: this.$t('global.cancel'),
+        headerClass: 'pb-0 border-0',
+        footerClass: 'pt-0 border-0',
       })
         .then((value) => {
           if (value) {

src/components/Lists/SortList.vue

@@ -5,21 +5,37 @@
 
     <b-modal
       :id="modalId"
-      :title="$t('board.list.sortList')"
       @show="getSortValue"
     >
-      <form ref="renameListForm" @submit.stop.prevent="save">
-        <b-form-group :label="$t('board.list.sortList')" block>
-          <b-form-radio-group
-            v-model="sortOrder"
-            buttons
-            stacked
-            variant="primary"
-            :options="sortingOptions"
-          />
-        </b-form-group>
+      <template v-slot:modal-header="{ close }">
+        <modal-header
+          :title="$t('board.list.sortList')"
+        >
+          <b-button
+            variant="light"
+            size="sm"
+            @click="close"
+          >
+            <icon name="x" />
+          </b-button>
+        </modal-header>
+      </template>
 
-        <b-alert show variant="warning" class="m-0" v-if="sortOrder !== 'sortByCustom'">
+      <form ref="renameListForm" @submit.stop.prevent="save">
+        <b-form-radio-group
+          v-model="sortOrder"
+          buttons
+          stacked
+          variant="primary"
+          :options="sortingOptions"
+        />
+
+        <b-alert
+          v-if="sortOrder !== 'sortByCustom'"
+          show
+          variant="warning"
+          class="m-0 mt-3"
+        >
           {{ $t('board.list.sortWarning') }}
         </b-alert>
       </form>

src/i18n/en.json

@@ -99,7 +99,7 @@
             "duplicateWarning": "You already have a list with this name",
             "getStarted": "Get started!",
             "addFirstTime": "Welcome, add your first list!",
-            "sortByName": "THE",
+            "sortByName": "Name",
             "sortByProgress": "Progress",
             "sortByRating": "Score",
             "sortByReleaseDate": "Date",