allow markdown in mod description

3 files changed, 40 insertions, 11 deletions

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 36c2635..84db2c1 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -71,4 +71,29 @@
 </script>
 
 <style>
+  .indent {
+    margin-left: 1rem;
+  }
+
+  .markdown h1 {
+    font-size: 1.1rem;
+    font-style: italic;
+    font-weight: bold;
+  }
+
+  .markdown h2 {
+    font-size: 1.1rem;
+    font-style: italic;
+    font-weight: 500;
+  }
+
+  .markdown h3 {
+    font-size: 1.1rem;
+    font-style: italic;
+  }
+
+  .markdown h4, .markdown h5, .markdown h6 {
+    font-size: 1.0rem;
+    font-style: italic;
+  }
 </style>
diff --git a/src/pages/UploadCreate.vue b/src/pages/UploadCreate.vue
index 26e7703..1c2506a 100644
--- a/src/pages/UploadCreate.vue
+++ b/src/pages/UploadCreate.vue
@@ -14,20 +14,22 @@
                      icon="fa-pencil">
               <q-input v-model="title" float-label="Title" />
             </q-field>
-            <q-field :error="errors.description !== undefined"
-                     :error-label="errors.description"
-                     icon="fa-bars">
-              <q-input v-model="description" type="textarea" float-label="Description" />
-            </q-field>
             <q-field :error="errors.tags !== undefined"
                      :error-label="errors.tags"
                      icon="fa-tags">
               <q-chips-input v-model="tags" float-label="Tags"></q-chips-input>
             </q-field>
+            <q-field :error="errors.description !== undefined"
+                     :error-label="errors.description"
+                     icon="fa-bars">
+              <q-input v-model="description" type="textarea" float-label="Description (Markdown possible)" />
+            </q-field>
           </div>
           <q-stepper-navigation>
             <q-btn color="primary" :disabled="!description || !title" @click="$refs.stepper.next()">Next</q-btn>
           </q-stepper-navigation>
+          <h5>Description Preview</h5>
+          <vue-markdown class="markdown indent" :html="false" :source="description"></vue-markdown>
         </q-step>
         <q-step name="pic" title="Add image">
           <p>You can upload an image, e.g. a screenshot, that will be used as a preview for your mod</p>
@@ -128,6 +130,7 @@
 <script>
   import Dropzone from 'vue2-dropzone'
   import 'vue2-dropzone/dist/vue2Dropzone.css'
+  import VueMarkdown from 'vue-markdown'
 
   import {
     LocalStorage,
@@ -136,6 +139,7 @@
   export default {
     components: {
       Dropzone,
+      VueMarkdown,
     },
     data () {
       return {
@@ -264,8 +268,3 @@
     },
   }
 </script>
-
-<style lang="styl" type="text/stylus" scoped>
-  .indent
-    margin: 1rem 3rem 2rem 3rem
-</style>
diff --git a/src/pages/UploadDetail.vue b/src/pages/UploadDetail.vue
index d85e3cc..223ad35 100644
--- a/src/pages/UploadDetail.vue
+++ b/src/pages/UploadDetail.vue
@@ -35,8 +35,11 @@
         </q-card-actions>
         <q-card-main>
           <p class="text-faded">
-            {{ upload.description }}
+            <vue-markdown class="markdown" :html="false" :source="upload.description"></vue-markdown>
           </p>
+        </q-card-main>
+        <q-card-title>Tags</q-card-title>
+        <q-card-main>
           <div class="group">
             <q-chip v-for="tag of upload.tags" :key="tag">{{ tag }}</q-chip>
           </div>
@@ -180,11 +183,13 @@
   import UploadVoter from 'components/UploadVoter'
   import CommentVoter from 'components/CommentVoter'
   import FileSaver from 'file-saver'
+  import VueMarkdown from 'vue-markdown'
 
   export default {
     components: {
       CommentVoter,
       UploadVoter,
+      VueMarkdown,
     },
     computed: {
       routeId () {