From 0fa0ed3fd9393d911790cbd84697fee31403b96b Mon Sep 17 00:00:00 2001
From: Roman Cervantes <romancm@romans-imac.lan>
Date: Thu, 22 Oct 2020 14:54:05 -0700
Subject: [PATCH 1/3] clean up boards

---
 src/components/Boards.vue | 49 +++++++++++++++++++++++++--------------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/Boards.vue b/src/components/Boards.vue
index c30a42b3..fb8c23ba 100644
--- a/src/components/Boards.vue
+++ b/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>

From 2f32c7d6c7de1adaaecee9ef4e297d26571083e1 Mon Sep 17 00:00:00 2001
From: Roman Cervantes <romancm@romans-imac.lan>
Date: Thu, 22 Oct 2020 14:54:25 -0700
Subject: [PATCH 2/3] remove time to beat

---
 src/components/Game/GameDetails.vue | 27 ++++++++-------------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/components/Game/GameDetails.vue b/src/components/Game/GameDetails.vue
index ac346646..80986dee 100644
--- a/src/components/Game/GameDetails.vue
+++ b/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(', ')

From 6cb09819f80d5b45311fc5b0d4c4aa23947b6161 Mon Sep 17 00:00:00 2001
From: Roman Cervantes <romancm@romans-imac.lan>
Date: Thu, 22 Oct 2020 17:06:56 -0700
Subject: [PATCH 3/3] todo's

---
 src/App.vue                                  | 1 +
 src/components/GameCards/GameCardDefault.vue | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index a9f4cbda..51fe3832 100644
--- a/src/App.vue
+++ b/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';
diff --git a/src/components/GameCards/GameCardDefault.vue b/src/components/GameCards/GameCardDefault.vue
index 2369e351..09d72eec 100644
--- a/src/components/GameCards/GameCardDefault.vue
+++ b/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"
         />