Tweak @hairlessbear's pr

* Simplify chat button stylings
* Add formatting help to send gift modal
* Clean up formatting of table
* Add example for unordered lists
* Remove ! from `env.t` that do not have html characters
* Use https instead of http in link
* Format markdown blurb
* Use ng-if instead of ng-show
* Collapse show help link into single element

common/locales/en/generic.json

@@ -14,9 +14,11 @@
     "bold": "**Bold**",
     "strikethrough": "~~Strikethrough~~",
     "emojiExample": ":smile:",
-    "habitrpgIsGreat": "[HabitRPG is great!](http://habitrpg.com)",
+    "habitrpgIsGreat": "[HabitRPG is great!](https://habitrpg.com)",
     "markdownImageExample": "![mandatory alt text](imageURL \"optional mouseover title\")",
     "markdownImageCode": "![a](http://vignette2.wikia.nocookie.net/habitrpg/images/9/96/Icon.png)",
+    "unorderedListHTML": "+ First item<br>+ Second item<br>+ Third item",
+    "unorderedListMarkdown": "+ First item\n+ Second item\n+ Third item",
     "code": "`code`",
     "achievements": "Achievements",
     "modalAchievement": "Achievement!",

website/public/css/game-pane.styl

@@ -21,18 +21,13 @@
   padding: 1em;
   margin-bottom: 0.5em;
 
-.chat-controls
-  > div
-    display: inline-block
-    vertical-align: top
-    &:nth-of-type(1)
-      width: 50%
-    &:nth-of-type(2)
-      width: 50%
+.formatting-help
+  clear: both
+  padding-top: 0.618em
 
 .chat-buttons
   @extend $hrpg-button
-  text-align: right;
+  float: right;
   input
     margin-right: 0.618em
 

website/views/options/social/chat-box.jade

@@ -17,9 +17,8 @@ form.chat-form(ng-if='user.flags.communityGuidelinesAccepted' ng-submit='postCha
       ul.list-at-user(ng-show="query")
         li(ng-repeat='msg in response | filter:filterUser | limitTo: 5', ng-click='performCompletion(msg)')
           span.username.label.label-default(ng-class=':: userLevelStyle(msg)') {{::msg.user}}
-  .chat-controls
-    .chat-formatting
-      include ../../shared/formatting-help
+  .chat-controls.clearfix
     .chat-buttons
       input(type='submit', value=env.t('sendChat'), ng-class='{disabled: _sending == true}')
       button(type="button", ng-click='sync(group)')=env.t('toolTipMsg')
+    include ../../shared/formatting-help

website/views/shared/formatting-help.jade

@@ -1,40 +1,36 @@
-small(ng-init='showHelp = false')
-  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')
+small.btn-link(ng-init='showHelp = false', ng-click='showHelp = !showHelp') 
+  | {{showHelp ? env.t('hideFormattingHelp') : env.t('showFormattingHelp')}}
+
+.formatting-help(ng-if='showHelp')
   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')")
+      td=env.t('italics')
+      td #[markdown(text="env.t('italics')")]
     tr
-      td!=env.t('bold')
-      td
-        markdown(text="env.t('bold')")
+      td=env.t('bold')
+      td #[markdown(text="env.t('bold')")]
     tr
-      td!=env.t('strikethrough')
-      td
-        markdown(text="env.t('strikethrough')")
+      td=env.t('strikethrough')
+      td #[markdown(text="env.t('strikethrough')")]
     tr
-      td!=env.t('emojiExample')
-      td
-        markdown(text="env.t('emojiExample')")
+      td=env.t('emojiExample')
+      td #[markdown(text="env.t('emojiExample')")]
     tr
-      td!=env.t('habitrpgIsGreat')
-      td
-        markdown(text="env.t('habitrpgIsGreat')")
+      td=env.t('habitrpgIsGreat')
+      td #[markdown(text="env.t('habitrpgIsGreat')")]
     //tr
-      td!=env.t('markdownImageExample')
-      td
-        markdown(text="env.t('markdownImageCode')")
+      td=env.t('markdownImageExample')
+      td #[markdown(text="env.t('markdownImageCode')")]
     tr
-      td!=env.t('code')
-      td
-        markdown(text="env.t('code')")
+      td!=env.t('unorderedListHTML')
+      td #[markdown(text="env.t('unorderedListMarkdown')")]
+    tr
+      td=env.t('code')
+      td #[markdown(text="env.t('code')")]
+
+  hr
+  p.text-center.muted!=env.t('markdownBlurb')
+  hr

website/views/shared/modals/members.jade

@@ -90,6 +90,7 @@ script(type='text/ng-template', id='modals/send-gift.html')
               | {{block.months}} Month(s): ${{block.price}}
 
     textarea.form-control(rows='3', ng-model='gift.message', placeholder='Personal message (optional)')
+    include ../formatting-help
 
   .modal-footer
     - var fromBal = "gift.type=='gems' && gift.gems.fromBalance"