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-row>
-          <b-col md="3" v-if="board.wallpaper">
+          <b-col md="3">
-            <b-card-img
+            <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-col md="9" class="p-2" >
-            <b-card-body :title="board.name" title-tag="h5">
+            <h6 class="m-0">{{ board.name }}</h6>
-              <b-card-text v-if="board.description">
-                {{ board.description }}
-              </b-card-text>
 
-              <span :id="board.id">
+            <small :id="board.id">
               {{ board.platforms.length }} {{ $t('boards.platforms') }}
-              </span>
+            </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>
+
+            <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>
+      <dt class="col-sm-5">{{ $t('board.gameModal.platforms') }}</dt>
-      <dd class="col-sm-9">{{ platforms }}</dd>
+      <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>
+      <dd class="col-sm-9 text-wrap">{{ playerPerspectives }}</dd>
-
-      <dt class="col-sm-3">{{ $t('board.gameModal.timeToBeat') }}</dt>
-      <dd class="col-sm-9">{{ timeToBeat }}</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/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"
         />