Game notes adjustments

src/components/GameDetail/GameDescription.vue

@@ -1,6 +1,7 @@
 
 <template lang="html">
   <div class="game-description" @click="expand">
+    <h3>Game description</h3>
     <p :class="{ collapsed }">
       {{ game.summary }}
     </p>
@@ -42,7 +43,7 @@ export default {
 @import "~styles/styles";
 
 .game-description {
-  margin-bottom: $gp;
+  margin: $gp 0;
 }
 
 p {

src/components/GameDetail/GameNotes.vue

@@ -20,7 +20,10 @@
         rows="5"
       />
 
-      <small><i class="fab fa-markdown"></i> Markdown supported</small>
+      <small>
+        <i class="fab fa-markdown" />
+        <a href="https://guides.github.com/features/mastering-markdown/" target="_blank">Markdown supported</a>
+      </small>
 
       <footer>
         <button class="secondary" @click="reset">

src/pages/Game.vue

@@ -45,13 +45,12 @@
                 {{ $t('tags.addTag') }}
               </button>
             </div>
-
-            <game-notes v-if="game" />
           </div>
         </div>
 
         <div class="details" v-if="game">
           <game-description />
+          <game-notes />
           <game-details />
           <game-links />
           <game-videos />
@@ -258,6 +257,10 @@ aside {
   display: flex;
   align-items: center;
 
+  @media($small) {
+    justify-content: center;
+  }
+
   button {
     margin-right: $gp / 2;
   }

src/store/getters.js

@@ -88,6 +88,15 @@ export default {
     return platforms.filter(({ id }) => id !== state.platform.id && gamePlatforms.includes(id));
   },
 
+  gameNote: ({ game, notes }) => {
+    const gameSelected = game && game.id;
+    const hasNote = gameSelected && notes[game.id];
+
+    return hasNote
+      ? notes[game.id]
+      : '';
+  },
+
   // eslint-disable-next-line
     activeList: ({ gameLists, platform, activeListIndex }) => gameLists[platform.code][activeListIndex],
 

src/styles/styles.scss

@@ -4,4 +4,5 @@
 @import "_utility";
 @import "_buttons";
 @import "_inputs";
+@import "_markdown";
 @import "_settings";