gamebrary/src/components/GameDetail/GameDetailPlaceholder.vue

<template lang="html">
  <b-card class="mt-4" no-body>
    <b-tabs card>
      <b-tab title="Game details" active>
        <template v-slot:title>
          <placeholder class="w-10 h-100" />
        </template>
        <dl class="row">
          <dt class="col-sm-3">{{ $t('gameDetail.platforms') }}</dt>
          <dd class="col-sm-9">
            <placeholder class="w-75" />
          </dd>

          <dt class="col-sm-3">{{ $t('gameDetail.genres') }}</dt>
          <dd class="col-sm-9">
            <placeholder class="w-75" />
          </dd>

          <dt class="col-sm-3">{{ $t('gameDetail.gameModes') }}</dt>
          <dd class="col-sm-9">
            <placeholder class="w-75" />
          </dd>

          <dt class="col-sm-3">{{ $t('gameDetail.developers') }}</dt>
          <dd class="col-sm-9">
            <placeholder class="w-75" />
          </dd>

          <dt class="col-sm-3">{{ $t('gameDetail.publishers') }}</dt>
          <dd class="col-sm-9">
            <placeholder class="w-75" />
          </dd>

          <dt class="col-sm-3">{{ $t('gameDetail.perspective') }}</dt>
          <dd class="col-sm-9">
            <placeholder class="w-75" />
          </dd>

          <dt class="col-sm-3">{{ $t('gameDetail.timeToBeat') }}</dt>
          <dd class="col-sm-9">
            <placeholder class="w-75" />
          </dd>

          <dt class="col-sm-3">{{ $t('gameDetail.ageRatings') }}</dt>
          <dd class="col-sm-9">
            <placeholder class="w-75" />
          </dd>
        </dl>
      </b-tab>

      <b-tab title="Game details">
        <template v-slot:title>
          <placeholder class="w-10 h-100" />
        </template>
      </b-tab>

      <b-tab title="Game details">
        <template v-slot:title>
          <placeholder class="w-10 h-100" />
        </template>
      </b-tab>
    </b-tabs>
  </b-card>
  <!-- <div class="game-detail-placeholder">
    <div class="game-hero" />

    <div class="game-detail-container">
      <div class="game-detail">
        <img :src="coverUrl" :alt="gamePreviewData.name" class="game-cover">

        <div>
          <h2>{{ gamePreviewData.name }}</h2>
          <placeholder :lines="3" />
        </div>

      </div>
    </div>
  </div> -->
</template>

<script>
import { mapState } from 'vuex';
import Placeholder from '@/components/Placeholder';

export default {
  components: {
    Placeholder,
  },

  props: {
    id: {
      type: [Number, String],
      default: null,
    },
  },

  computed: {
    ...mapState(['games']),

    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>
  // @import "~styles/styles";

  .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>