From 02ddb5cb834d4b59f524958ef016a9473f8439bb Mon Sep 17 00:00:00 2001
From: Roman Cervantes <romancm@gmail.com>
Date: Thu, 21 Nov 2019 13:49:58 -0700
Subject: [PATCH] Move game description to its own component and clamp extra
 long text

---
 src/components/GameDetail/GameDescription.vue | 73 +++++++++++++++++++
 src/pages/GameDetail.vue                      | 12 +--
 2 files changed, 77 insertions(+), 8 deletions(-)
 create mode 100644 src/components/GameDetail/GameDescription.vue

diff --git a/src/components/GameDetail/GameDescription.vue b/src/components/GameDetail/GameDescription.vue
new file mode 100644
index 00000000..ef5de02f
--- /dev/null
+++ b/src/components/GameDetail/GameDescription.vue
@@ -0,0 +1,73 @@
+
+<template lang="html">
+  <div class="game-description" @click="expand">
+    <p :class="{ collapsed }">
+      {{ game.summary }}
+    </p>
+
+    <a class="read-more" v-if="collapsed">Read more</a>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  data() {
+    return {
+      expanded: false,
+      characterLimit: 500,
+    };
+  },
+
+  computed: {
+    ...mapState(['game']),
+
+    collapsed() {
+      return !this.expanded && this.game.summary && this.game.summary.length > this.characterLimit;
+    }
+  },
+
+  methods: {
+      expand() {
+        if (this.collapsed) {
+          this.expanded = true
+        };
+      },
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+@import "~styles/styles";
+
+.game-description {
+  margin-bottom: $gp;
+}
+
+p {
+  line-height: 1.4rem;
+  font-size: 16px;
+  letter-spacing: .01em;
+
+  &.collapsed {
+    margin-bottom: $gp / 2;
+
+    @media($small) {
+      overflow : hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 6;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+
+.read-more {
+  display: none;
+
+  @media($small) {
+    display: inline;
+  }
+}
+</style>
diff --git a/src/pages/GameDetail.vue b/src/pages/GameDetail.vue
index 585a21ad..b00b93c1 100644
--- a/src/pages/GameDetail.vue
+++ b/src/pages/GameDetail.vue
@@ -1,3 +1,4 @@
+<!-- TODO: rename to Game.vue -->
 <template lang="html">
   <div class="game-detail">
     <header>
@@ -30,8 +31,7 @@
         </div>
 
         <div v-if="game" class="details">
-
-          <p class="game-description" v-html="game.summary" />
+          <game-description />
 
           <div class="actions">
             <button
@@ -93,6 +93,7 @@ import GameNotes from '@/components/GameNotes';
 import GameTags from '@/components/GameDetail/GameTags';
 import GameRating from '@/components/GameDetail/GameRating';
 import GameLinks from '@/components/GameDetail/GameLinks';
+import GameDescription from '@/components/GameDetail/GameDescription';
 import GameVideos from '@/components/GameDetail/GameVideos';
 import GameDetails from '@/components/GameDetail/GameDetails';
 import Platform from '@/components/Platforms/Platform';
@@ -105,6 +106,7 @@ export default {
     IgdbCredit,
     GameRating,
     GameLinks,
+    GameDescription,
     Placeholder,
     GameScreenshots,
     GameNotes,
@@ -231,12 +233,6 @@ aside {
   }
 }
 
-.game-description {
-  line-height: 1.4rem;
-  font-size: 16px;
-  letter-spacing: .01em
-}
-
 .actions {
   display: flex;
   align-items: center;