Merge branch 'master' into pro

src/App.vue

@@ -55,6 +55,7 @@ export default {
     },
 
     dir() {
+      // TODO: find out all rtl languages and store in const
       return this.settings && this.settings.language === 'ar'
         ? 'rtl'
         : 'ltr';

src/components/Boards.vue

@@ -21,30 +21,45 @@
         class="overflow-hidden clickable mt-3"
         @click="viewBoard(board.id)"
       >
-        <b-row no-gutters>
-          <b-col md="3" v-if="board.wallpaper">
-            <b-card-img
+        <b-row>
+          <b-col md="3">
+            <b-img
+              v-if="board.wallpaper"
+              rounded
+              class="m-2 w-100"
               :src="getWallpaper(board)"
               :alt="board.name"
             />
+
+            <b-img
+              v-else
+              rounded
+              :alt="board.name"
+              class="m-2 w-100"
+              width="150"
+              height="84"
+              blank
+              blank-color="darkgray"
+              fluid
+            />
           </b-col>
 
-          <b-col md="9" >
-            <b-card-body :title="board.name" title-tag="h5">
-              <b-card-text v-if="board.description">
-                {{ board.description }}
-              </b-card-text>
+          <b-col md="9" class="p-2" >
+            <h6 class="m-0">{{ board.name }}</h6>
 
-              <span :id="board.id">
-                {{ board.platforms.length }} {{ $t('boards.platforms') }}
-              </span>
+            <small :id="board.id">
+              {{ board.platforms.length }} {{ $t('boards.platforms') }}
+            </small>
 
-              <b-popover :target="board.id" triggers="hover">
-                <div v-for="id in board.platforms" :key="id">
-                  {{ platformNames[id].name }}
-                </div>
-              </b-popover>
-            </b-card-body>
+            <b-popover :target="board.id" triggers="hover">
+              <div v-for="id in board.platforms" :key="id">
+                {{ platformNames[id].name }}
+              </div>
+            </b-popover>
+
+            <p class="text-muted small" v-if="board.description">
+              {{ board.description }}
+            </p>
           </b-col>
         </b-row>
       </b-card>

src/components/Game/GameDetails.vue

@@ -2,29 +2,26 @@
   <div>
     <dl class="row">
       <!-- TODO: plural vs singular translations? -->
-      <dt class="col-sm-3">{{ $t('board.gameModal.platforms') }}</dt>
-      <dd class="col-sm-9">{{ platforms }}</dd>
+      <dt class="col-sm-5">{{ $t('board.gameModal.platforms') }}</dt>
+      <dd class="col-sm-9 text-wrap">{{ platforms }}</dd>
 
       <dt class="col-sm-3">{{ $t('board.gameModal.genres') }}</dt>
-      <dd class="col-sm-9">{{ genres }}</dd>
+      <dd class="col-sm-9 text-wrap">{{ genres }}</dd>
 
       <dt class="col-sm-3">{{ $t('board.gameModal.gameModes') }}</dt>
-      <dd class="col-sm-9">{{ gameModes }}</dd>
+      <dd class="col-sm-9 text-wrap">{{ gameModes }}</dd>
 
       <dt class="col-sm-3">{{ $t('board.gameModal.developers') }}</dt>
-      <dd class="col-sm-9">{{ gameDevelopers }}</dd>
+      <dd class="col-sm-9 text-wrap">{{ gameDevelopers }}</dd>
 
       <dt class="col-sm-3">{{ $t('board.gameModal.publishers') }}</dt>
-      <dd class="col-sm-9">{{ gamePublishers }}</dd>
+      <dd class="col-sm-9 text-wrap">{{ gamePublishers }}</dd>
 
       <dt class="col-sm-3">{{ $t('board.gameModal.perspective') }}</dt>
-      <dd class="col-sm-9">{{ playerPerspectives }}</dd>
-
-      <dt class="col-sm-3">{{ $t('board.gameModal.timeToBeat') }}</dt>
-      <dd class="col-sm-9">{{ timeToBeat }}</dd>
+      <dd class="col-sm-9 text-wrap">{{ playerPerspectives }}</dd>
 
       <dt class="col-sm-3">{{ $t('board.gameModal.ageRatings') }}</dt>
-      <dd class="col-sm-9">{{ ageRatings }}</dd>
+      <dd class="col-sm-9 text-wrap">{{ ageRatings }}</dd>
 
       <!-- TODO: add release dates -->
       <!-- {{ $t('board.gameModal.releaseDate') }} -->
@@ -34,8 +31,6 @@
 </template>
 
 <script>
-import moment from 'moment';
-
 export default {
   props: {
     game: Object,
@@ -73,12 +68,6 @@ export default {
         : 'N/A';
     },
 
-    timeToBeat() {
-      return this.game && this.game.time_to_beat
-        ? moment.unix(this.game.time_to_beat).format('h[h] m[m]')
-        : 'N/A';
-    },
-
     platforms() {
       return this.game && this.game.platforms
         ? this.game.platforms.map(({ name }) => name).join(', ')

src/components/Game/GameModal.vue

@@ -21,8 +21,7 @@
       <modal-header
         :title="game.name"
         :subtitle="gameModalData.list.name"
-        @close="close"
-      />
+      >
         <b-button-group>
           <b-button
             size="sm"
@@ -42,6 +41,7 @@
             <icon name="triangle-right" />
           </b-button>
         </b-button-group>
+      </modal-header>
     </template>
 
     <b-container v-if="game.name" class="m-0 p-0">

src/components/GameCards/GameCardDefault.vue

@@ -17,9 +17,11 @@
           v-if="showCompletedBadge"
         />
 
+        <!-- TODO: handle rtl -->
         <b-img
           fluid
           blank-color="#ccc"
+          rounded="left"
           :src="coverUrl"
           :alt="game.name"
         />

src/components/ModalHeader.vue

@@ -5,16 +5,18 @@
       <small>{{ subtitle }}</small>
     </div>
 
-    <slot />
+    <div class="actions">
+      <slot />
 
-    <b-button
-      :variant="nightMode ? 'dark' : 'light'"
-      size="sm"
-      class="ml-auto"
-      @click="$emit('close')"
-    >
-      <icon name="x" />
-    </b-button>
+      <b-button
+        :variant="nightMode ? 'dark' : 'light'"
+        size="sm"
+        class="ml-auto"
+        @click="$emit('close')"
+      >
+        <icon name="x" />
+      </b-button>
+    </div>
   </header>
 </template>