Added hidable markdown help menu and adding to private messages

common/locales/en/generic.json

@@ -5,7 +5,19 @@
     "habitica": "Habitica",
     "expandToolbar": "Expand Toolbar",
     "collapseToolbar": "Collapse Toolbar",
-    "formattingMarkdown": "Markdown formatting allowed",
+    "markdownBlurb": "HabitRPG uses markdown for message formatting. See the <a href='http://habitrpg.wikia.com/wiki/Markdown_Cheat_Sheet' target='_blank'>Markdown Cheat Sheet</a> for more info.",
+    "showFormattingHelp": "Show formatting help",
+    "hideFormattingHelp": "Hide formatting help",
+    "youType": "You type:",
+    "youSee": "You see:",
+    "italics": "*Italics*",
+    "bold": "**Bold**",
+    "strikethrough": "~~Strikethrough~~",
+    "emojiExample": ":smile:",
+    "habitrpgIsGreat": "[HabitRPG is great!](http://habitrpg.com)",
+    "markdownImageExample": "![mandatory alt text](imageURL \"optional mouseover title\")",
+    "markdownImageCode": "![a](http://vignette2.wikia.nocookie.net/habitrpg/images/9/96/Icon.png)",
+    "code": "`code`",
     "achievements": "Achievements",
     "modalAchievement": "Achievement!",
     "special": "Special",

website/public/css/game-pane.styl

@@ -24,11 +24,11 @@
 .chat-controls
   > div
     display: inline-block
-    vertical-align: middle
+    vertical-align: top
     &:nth-of-type(1)
-      width: 40%
+      width: 50%
     &:nth-of-type(2)
-      width: 60%
+      width: 50%
 
 .chat-buttons
   @extend $hrpg-button

website/views/shared/formatting-help.jade

@@ -1,2 +1,41 @@
-small
-  a(target='_blank', href='http://habitrpg.wikia.com/wiki/Markdown_Cheat_Sheet')=env.t('formattingMarkdown')
+small(ng-init='showHelp = false')
+  // a(target='_blank', href='http://habitrpg.wikia.com/wiki/Markdown_Cheat_Sheet')=env.t('formattingMarkdown')
+  a(ng-click='showHelp = !showHelp', ng-show='!showHelp')
+    =env.t('showFormattingHelp')
+  a(ng-click='showHelp = !showHelp', ng-show='showHelp')
+    =env.t('hideFormattingHelp')
+div(ng-show='showHelp')
+  br
+  p!=env.t('markdownBlurb')
+  table.table.table-striped
+    tr.info
+      td #[b=env.t('youType')]
+      td #[b=env.t('youSee')]
+    tr
+      td!=env.t('italics')
+      td
+        markdown(text="env.t('italics')")
+    tr
+      td!=env.t('bold')
+      td
+        markdown(text="env.t('bold')")
+    tr
+      td!=env.t('strikethrough')
+      td
+        markdown(text="env.t('strikethrough')")
+    tr
+      td!=env.t('emojiExample')
+      td
+        markdown(text="env.t('emojiExample')")
+    tr
+      td!=env.t('habitrpgIsGreat')
+      td
+        markdown(text="env.t('habitrpgIsGreat')")
+    //tr
+      td!=env.t('markdownImageExample')
+      td
+        markdown(text="env.t('markdownImageCode')")
+    tr
+      td!=env.t('code')
+      td
+        markdown(text="env.t('code')")

website/views/shared/modals/members.jade

@@ -48,6 +48,7 @@ script(type='text/ng-template', id='modals/private-message.html')
     h4=env.t('pmHeading', {name: "{{profile.profile.name}}"})
   .modal-body
     textarea.form-control(type='text',rows='5',ui-keydown='{"meta-enter":"sendPrivateMessage(profile._id, _message)"}',placeholder=env.t('needsTextPlaceholder'),ng-model='_message', focus-me)
+    include ../formatting-help
   .modal-footer
     //- Due to a quirk in Bootstrap UI, we need to wrap this so the tooltip can
     //- appear when the button is disabled.