diff --git a/src/components/Project/Detail/ProjectHeader.vue b/src/components/Project/Detail/ProjectHeader.vue index 7a6006c6690e367a141262e3b64c2754ec85c915..c9588d7a414bf0bace02235f02b105b7fb50b144 100644 --- a/src/components/Project/Detail/ProjectHeader.vue +++ b/src/components/Project/Detail/ProjectHeader.vue @@ -304,7 +304,7 @@ export default { } #preview { - height: 10em; + max-height: 10em; overflow: scroll; } diff --git a/src/components/Projects/ProjectsListItem.vue b/src/components/Projects/ProjectsListItem.vue index 983186fe97b8adbe9363b8071e465896aad1ddeb..37d03f00fa41b3dd90b186e78f239a449cba028c 100644 --- a/src/components/Projects/ProjectsListItem.vue +++ b/src/components/Projects/ProjectsListItem.vue @@ -21,7 +21,16 @@ {{ project.title }} </router-link> <div class="description"> - <p>{{ project.description }}</p> + <textarea + :id="`editor-${project.slug}`" + :value="project.description" + :data-preview="`#preview-${project.slug}`" + hidden + /> + <div + :id="`preview-${project.slug}`" + class="preview" + /> </div> <div class="meta"> <span class="right floated"> @@ -74,6 +83,7 @@ </template> <script> +import TextareaMarkdown from 'textarea-markdown'; import { mapState } from 'vuex'; @@ -100,6 +110,11 @@ export default { }, }, + mounted() { + let textarea = document.getElementById(`editor-${this.project.slug}`); + new TextareaMarkdown(textarea); + }, + methods: { refreshId() { const crypto = window.crypto || window.msCrypto; @@ -110,3 +125,11 @@ export default { }; </script> + +<style lang="less" scoped> +.preview { + max-height: 10em; + overflow: scroll; + margin-bottom: 0.8em; +} +</style>