From 18b5cb6eaafcc46e45bc2abf7a7233617474da23 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Sun, 1 Nov 2020 09:54:19 -0700
Subject: [PATCH] game modal clean up

---
 src/components/Game/GameDetailPlaceholder.vue | 170 ------------------
 src/components/Game/GameDetails.vue           |  42 +++--
 src/components/Game/GameModal.vue             |   4 -
 src/components/Game/GameWebsitesTab.vue       |   6 +-
 4 files changed, 23 insertions(+), 199 deletions(-)
 delete mode 100644 src/components/Game/GameDetailPlaceholder.vue

diff --git a/src/components/Game/GameDetailPlaceholder.vue b/src/components/Game/GameDetailPlaceholder.vue
deleted file mode 100644
index ee6d3ec0..00000000
--- a/src/components/Game/GameDetailPlaceholder.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template lang="html">
-  <b-card
-    class="mt-4"
-    no-body
-    :bg-variant="nightMode ? 'dark' : ''"
-    :text-variant="nightMode ? 'white' : ''"
-  >
-    <dl class="row">
-      <dt class="col-sm-3">{{ $t('board.gameModal.platforms') }}</dt>
-      <dd class="col-sm-9">
-        <b-skeleton />
-      </dd>
-
-      <dt class="col-sm-3">{{ $t('board.gameModal.genres') }}</dt>
-      <dd class="col-sm-9">
-        <b-skeleton />
-      </dd>
-
-      <dt class="col-sm-3">{{ $t('board.gameModal.gameModes') }}</dt>
-      <dd class="col-sm-9">
-        <b-skeleton />
-      </dd>
-
-      <dt class="col-sm-3">{{ $t('board.gameModal.developers') }}</dt>
-      <dd class="col-sm-9">
-        <b-skeleton />
-      </dd>
-
-      <dt class="col-sm-3">{{ $t('board.gameModal.publishers') }}</dt>
-      <dd class="col-sm-9">
-        <b-skeleton />
-      </dd>
-
-      <dt class="col-sm-3">{{ $t('board.gameModal.perspective') }}</dt>
-      <dd class="col-sm-9">
-        <b-skeleton />
-      </dd>
-
-      <dt class="col-sm-3">{{ $t('board.gameModal.timeToBeat') }}</dt>
-      <dd class="col-sm-9">
-        <b-skeleton />
-      </dd>
-
-      <dt class="col-sm-3">{{ $t('board.gameModal.ageRatings') }}</dt>
-      <dd class="col-sm-9">
-        <b-skeleton />
-      </dd>
-    </dl>
-  </b-card>
-</template>
-
-<script>
-import { mapState, mapGetters } from 'vuex';
-
-export default {
-  props: {
-    id: {
-      type: [Number, String],
-      default: null,
-    },
-  },
-
-  computed: {
-    ...mapState(['games']),
-    ...mapGetters(['nightMode']),
-
-    gamePreviewData() {
-      return this.games[this.id];
-    },
-
-    coverUrl() {
-      const game = this.games[this.id];
-
-      return game.cover && game.cover.image_id
-        ? `https://images.igdb.com/igdb/image/upload/t_cover_small_2x/${game.cover.image_id}.jpg`
-        : '/static/no-image.jpg';
-    },
-  },
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-  .game-detail-placeholder {
-    display: flex;
-    justify-content: center;
-    background: var(--modal-background);
-    min-height: calc(100vh - 48px);
-  }
-
-  .game-hero {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    height: 400px;
-    z-index: 2;
-
-    @media(max-width: 780px) {
-      display: none;
-    }
-  }
-
-  .game-cover {
-    border: 5px solid #a5a2a2;
-    background-size: contain;
-    width: 100%;
-    height: auto;
-
-    @media(max-width: 780px) {
-      border: 3px solid #a5a2a2;
-      height: auto;
-      width: auto;
-      min-width: auto;
-      max-width: 100%;
-    }
-  }
-
-  .game-detail-container {
-    -webkit-box-shadow: 0 0 2px 0 #a5a2a2;
-    box-shadow: 0 0 2px 0 #a5a2a2;
-    width: 900px;
-    max-width: 100%;
-    z-index: 2;
-    margin: 3rem;
-    padding: 1rem 0;
-    border-radius: var(--border-radius);
-
-    @media(max-width: 780px) {
-      margin: 0;
-      padding-top: 3rem;
-      border-radius: 0;
-    }
-  }
-
-  .game-detail {
-    display: grid;
-    grid-template-columns: 180px auto;
-    grid-gap: 2rem;
-    margin: 0 1rem;
-
-    @media(max-width: 780px) {
-      grid-template-columns: auto;
-    }
-  }
-
-  .game-cover {
-    --placeholder-image-width: 175px;
-    --placeholder-image-height: 220px;
-
-    @media(max-width: 780px) {
-      --placeholder-image-width: 240px;
-      --placeholder-image-height: 300px;
-      width: 240px;
-      margin: 0 auto;
-    }
-  }
-
-  .game-title {
-    --placeholder-text-height: 30px;
-    width: 50%;
-
-    @media(max-width: 780px) {
-      width: 50%;
-      margin: 0 auto;
-    }
-  }
-
-  .game-rating {
-    margin-bottom: 1rem;
-  }
-</style>
diff --git a/src/components/Game/GameDetails.vue b/src/components/Game/GameDetails.vue
index 80986dee..4d31d887 100644
--- a/src/components/Game/GameDetails.vue
+++ b/src/components/Game/GameDetails.vue
@@ -1,33 +1,31 @@
 <template lang="html">
-  <div>
-    <dl class="row">
-      <!-- TODO: plural vs singular translations? -->
-      <dt class="col-sm-5">{{ $t('board.gameModal.platforms') }}</dt>
-      <dd class="col-sm-9 text-wrap">{{ platforms }}</dd>
+  <dl>
+    <!-- TODO: plural vs singular translations? -->
+    <dt class="w-100">{{ $t('board.gameModal.platforms') }}</dt>
+    <dd class="text-wrap">{{ platforms }}</dd>
 
-      <dt class="col-sm-3">{{ $t('board.gameModal.genres') }}</dt>
-      <dd class="col-sm-9 text-wrap">{{ genres }}</dd>
+    <dt class="w-100">{{ $t('board.gameModal.genres') }}</dt>
+    <dd class="text-wrap">{{ genres }}</dd>
 
-      <dt class="col-sm-3">{{ $t('board.gameModal.gameModes') }}</dt>
-      <dd class="col-sm-9 text-wrap">{{ gameModes }}</dd>
+    <dt class="w-100">{{ $t('board.gameModal.gameModes') }}</dt>
+    <dd class="text-wrap">{{ gameModes }}</dd>
 
-      <dt class="col-sm-3">{{ $t('board.gameModal.developers') }}</dt>
-      <dd class="col-sm-9 text-wrap">{{ gameDevelopers }}</dd>
+    <dt class="w-100">{{ $t('board.gameModal.developers') }}</dt>
+    <dd class="text-wrap">{{ gameDevelopers }}</dd>
 
-      <dt class="col-sm-3">{{ $t('board.gameModal.publishers') }}</dt>
-      <dd class="col-sm-9 text-wrap">{{ gamePublishers }}</dd>
+    <dt class="w-100">{{ $t('board.gameModal.publishers') }}</dt>
+    <dd class="text-wrap">{{ gamePublishers }}</dd>
 
-      <dt class="col-sm-3">{{ $t('board.gameModal.perspective') }}</dt>
-      <dd class="col-sm-9 text-wrap">{{ playerPerspectives }}</dd>
+    <dt class="w-100">{{ $t('board.gameModal.perspective') }}</dt>
+    <dd class="text-wrap">{{ playerPerspectives }}</dd>
 
-      <dt class="col-sm-3">{{ $t('board.gameModal.ageRatings') }}</dt>
-      <dd class="col-sm-9 text-wrap">{{ ageRatings }}</dd>
+    <dt class="w-100">{{ $t('board.gameModal.ageRatings') }}</dt>
+    <dd class="text-wrap">{{ ageRatings }}</dd>
 
-      <!-- TODO: add release dates -->
-      <!-- {{ $t('board.gameModal.releaseDate') }} -->
-      <!-- <pre>{{ game.release_dates }}</pre> -->
-    </dl>
-  </div>
+    <!-- TODO: add release dates -->
+    <!-- {{ $t('board.gameModal.releaseDate') }} -->
+    <!-- <pre>{{ game.release_dates }}</pre> -->
+  </dl>
 </template>
 
 <script>
diff --git a/src/components/Game/GameModal.vue b/src/components/Game/GameModal.vue
index 43b36700..413cb080 100644
--- a/src/components/Game/GameModal.vue
+++ b/src/components/Game/GameModal.vue
@@ -117,8 +117,6 @@
 
           <template v-if="loading">
             <b-skeleton v-for="n in 3" :key="n" />
-
-            <game-detail-placeholder />
           </template>
 
           <template v-else>
@@ -139,7 +137,6 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex';
-import GameDetailPlaceholder from '@/components/Game/GameDetailPlaceholder';
 import GameDetails from '@/components/Game/GameDetails';
 import GameNotesTab from '@/components/Game/GameNotesTab';
 import GameScreenshots from '@/components/Game/GameScreenshots';
@@ -155,7 +152,6 @@ export default {
   components: {
     GameTags,
     IgdbLogo,
-    GameDetailPlaceholder,
     GameDetails,
     GameNotesTab,
     GameScreenshots,
diff --git a/src/components/Game/GameWebsitesTab.vue b/src/components/Game/GameWebsitesTab.vue
index 59e774aa..4d3947f8 100644
--- a/src/components/Game/GameWebsitesTab.vue
+++ b/src/components/Game/GameWebsitesTab.vue
@@ -1,10 +1,10 @@
 <template lang="html">
   <div v-if="game.websites">
-    <dl class="row mb-0" v-for="link in game.websites" :key="link.id">
+    <dl v-for="link in game.websites" :key="link.id">
       <!-- TODO: research which links can be leveraged to get API data,
        e.g. wikipedia article, wikia, etc -->
-      <dt class="col-sm-3">{{ linkTypes[link.category]}}</dt>
-      <dd class="col-sm-9"><a :href="link.url" target="_blank">{{ link.url }}</a></dd>
+      <dt class="w-100">{{ linkTypes[link.category]}}</dt>
+      <dd class="text-truncate d-block"><a :href="link.url" target="_blank">{{ link.url }}</a></dd>
     </dl>
   </div>
 </template>