New client misc with some more misc (#8929)

* Added markdown

* Added styles and option for debug menu

* Added sm icons

* Began styling autocomplete

* Added autocomplete styles

* Added more challenge categories

* Updated challenge participants modal

* Fixed challenge list updating without reload

* Added close and delete challenge

* Fixed form placeholder, adjusted desc style and fixed create button style

* Fixed faq collapsing and style

* Fixed repeating ending

* Fixed delete account

* Fixed party fetch issue

* Fixed scope issue

* Added member count filters

* Fixed create button style

* Fixed badge color display

* Updated tavern styles

* Fixed some party styles

* Updated login styles

* Fixed login redirect

* Fixed initial login process

* Added done local

website/client/components/static/faq.vue

@@ -3,30 +3,54 @@
   .col-6.offset-3
     .page-header
       h1 {{ $t('frequentlyAskedQuestions') }}
-    p.pagemeta
-      | {{ $t('lastUpdated') }}
-      | 
-      | {{ $t('January') }}
-      | 5, 2016
-    div(v-for='(heading, index) in headings')
+    .faq-question(v-for='(heading, index) in headings')
       h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
-      // @TODO: Markdown
-      div(v-if='activePage === heading', v-html="$t('webFaqAnswer' + index, replacements)")
-
+      div(v-if='pageState[heading]', v-markdown="$t('webFaqAnswer' + index, replacements)")
     hr
-    // @TODO markdown
-    div(v-html="$t('webFaqStillNeedHelp')")
+    div(v-markdown="$t('webFaqStillNeedHelp')")
 </template>
 
+<style scoped>
+  .faq-question {
+    margin-bottom: 1em;
+  }
+</style>
+
 <script>
 // @TODO:  env.EMAILS.TECH_ASSISTANCE_EMAIL
 const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
+import markdownDirective from 'client/directives/markdown';
 
 export default {
+  directives: {
+    markdown: markdownDirective,
+  },
   data () {
+    let headings = [
+      'overview',
+      'set-up-tasks',
+      'sample-tasks',
+      'task-color',
+      'health',
+      'party-with-friends',
+      'pets-mounts',
+      'character-classes',
+      'blue-mana-bar',
+      'monsters-quests',
+      'gems',
+      'bugs-features',
+      'world-boss',
+    ];
+
+    let pageState = {};
+    for (let index in headings) {
+      let heading = headings[index];
+      pageState[heading] = false;
+    }
+
     return {
-      activePage: '',
-      headings: ['overview', 'set-up-tasks', 'sample-tasks', 'task-color', 'health', 'party-with-friends', 'pets-mounts', 'character-classes', 'blue-mana-bar', 'monsters-quests', 'gems', 'bugs-features', 'world-boss'],
+      pageState,
+      headings,
       replacements: {
         techAssistanceEmail: TECH_ASSISTANCE_EMAIL,
         wikiTechAssistanceEmail: `mailto:${TECH_ASSISTANCE_EMAIL}`,
@@ -35,7 +59,7 @@ export default {
   },
   methods: {
     setActivePage (page) {
-      this.activePage = page;
+      this.pageState[page] = !this.pageState[page];
     },
   },
 };