UX: show short flag descriptions in the flag modal on mobile

app/assets/javascripts/discourse/components/flag-action-type.js.es6

@@ -26,6 +26,11 @@ export default Ember.Component.extend({
   showDescription: Em.computed.not('showMessageInput'),
   isNotifyUser: Em.computed.equal('flag.name_key', 'notify_user'),
 
+  @computed('flag.description', 'flag.short_description')
+  description(long_description, short_description) {
+    return this.site.mobileView ? short_description : long_description;
+  },
+
   @computed('message.length')
   customMessageLengthClasses(messageLength) {
     return (messageLength < Discourse.SiteSettings.min_private_message_post_length) ? "too-short" : "ok";

app/assets/javascripts/discourse/templates/components/flag-action-type.hbs

@@ -16,7 +16,7 @@
     <label class='radio'>
       <input type='radio' id="radio_{{unbound flag.name_key}}" {{action "changePostActionType" flag}} name='post_action_type_index'> <strong>{{formattedName}}</strong>
       {{#if showDescription}}
-        <div class='description'>{{{flag.description}}}</div>
+        <div class='description'>{{{description}}}</div>
       {{/if}}
     </label>
     {{#if showMessageInput}}

app/serializers/post_action_type_serializer.rb

@@ -2,7 +2,7 @@ require_dependency 'configurable_urls'
 
 class PostActionTypeSerializer < ApplicationSerializer
 
-  attributes :name_key, :name, :description, :long_form, :is_flag, :icon, :id, :is_custom_flag
+  attributes :name_key, :name, :description, :short_description, :long_form, :is_flag, :icon, :id, :is_custom_flag
 
   include ConfigurableUrls
 
@@ -23,6 +23,10 @@ class PostActionTypeSerializer < ApplicationSerializer
     i18n('description', {tos_url: tos_path})
   end
 
+  def short_description
+    i18n('short_description', {tos_url: tos_path})
+  end
+
   protected
 
     def i18n(field, vars=nil)

config/locales/server.en.yml

@@ -639,40 +639,48 @@ en:
     off_topic:
       title: 'Off-Topic'
       description: 'This post is not relevant to the current discussion as defined by the title and first post, and should probably be moved elsewhere.'
+      short_description: 'Not relevant to the discussion'
       long_form: 'flagged this as off-topic'
     spam:
       title: 'Spam'
       description: 'This post is an advertisement. It is not useful or relevant to the current topic, but promotional in nature.'
+      short_description: 'This is an advertisement'
       long_form: 'flagged this as spam'
       email_title: '"%{title}" was flagged as spam'
       email_body: "%{link}\n\n%{message}"
     inappropriate:
       title: 'Inappropriate'
       description: 'This post contains content that a reasonable person would consider offensive, abusive, or a violation of <a href="/guidelines">our community guidelines</a>.'
+      short_description: 'A violation of <a href="/guidelines">our community guidelines</a>'
       long_form: 'flagged this as inappropriate'
     notify_user:
       title: 'Send @{{username}} a message'
       description: 'I want to talk to this person directly and privately about their post.'
+      short_description: 'I want to talk to this person directly and privately about their post.'
       long_form: 'messaged user'
       email_title: 'Your post in "%{title}"'
       email_body: "%{link}\n\n%{message}"
     notify_moderators:
       title: "Something Else"
       description: 'This post requires staff attention for another reason not listed above.'
+      short_description: 'Requires staff attention for another reason'
       long_form: 'flagged this for staff attention'
       email_title: 'A post in "%{title}" requires staff attention'
       email_body: "%{link}\n\n%{message}"
     bookmark:
       title: 'Bookmark'
       description: 'Bookmark this post'
+      short_description: 'Bookmark this post'
       long_form: 'bookmarked this post'
     like:
       title: 'Like'
       description: 'Like this post'
+      short_description: 'Like this post'
       long_form: 'liked this'
     vote:
       title: 'Vote'
       description: 'Vote for this post'
+      short_description: 'Vote for this post'
       long_form: 'voted for this post'
 
   user_activity:

test/javascripts/fixtures/site-fixtures.js.es6

@@ -459,6 +459,7 @@ export default {
           "name_key":"bookmark",
           "name":"Bookmark",
           "description":"Bookmark this post",
+          "short_description":"Bookmark this post",
           "long_form":"bookmarked this post",
           "is_flag":false,
           "icon":null,
@@ -469,6 +470,7 @@ export default {
           "name_key":"like",
           "name":"Like",
           "description":"Like this post",
+          "short_description":"Like this post",
           "long_form":"liked this",
           "is_flag":false,
           "icon":"heart",
@@ -479,6 +481,7 @@ export default {
           "name_key":"off_topic",
           "name":"Off-Topic",
           "description":"This post is radically off-topic in the current topic, and should probably be moved. If this is a topic, perhaps it does not belong here.",
+          "short_description":"Not relevant to the discussion",
           "long_form":"flagged this as off-topic",
           "is_flag":true,
           "icon":null,
@@ -489,6 +492,7 @@ export default {
           "name_key":"inappropriate",
           "name":"Inappropriate",
           "description":"This post contains content that a reasonable person would consider offensive, abusive, or a violation of <a href=\"/guidelines\">our community guidelines</a>.",
+          "short_description":'A violation of <a href="/guidelines">our community guidelines</a>',
           "long_form":"flagged this as inappropriate",
           "is_flag":true,
           "icon":null,
@@ -499,6 +503,7 @@ export default {
           "name_key":"vote",
           "name":"Vote",
           "description":"Vote for this post",
+          "short_description":'Vote for this post',
           "long_form":"voted for this post",
           "is_flag":false,
           "icon":null,
@@ -509,6 +514,7 @@ export default {
           "name_key":"spam",
           "name":"Spam",
           "description":"This post is an advertisement. It is not useful or relevant to the current topic, but promotional in nature.",
+          "short_description":'This is an advertisement',
           "long_form":"flagged this as spam",
           "is_flag":true,
           "icon":null,
@@ -519,6 +525,7 @@ export default {
           "name_key":"notify_user",
           "name":"Notify {{username}}",
           "description":"This post contains something I want to talk to this person directly and privately about. Does not cast a flag.",
+          "short_description":'I want to talk to this person directly and privately about their post.',
           "long_form":"notified user",
           "is_flag":true,
           "icon":null,
@@ -529,6 +536,7 @@ export default {
           "name_key":"notify_moderators",
           "name":"Notify moderators",
           "description":"This post requires general moderator attention based on the <a href=\"/guidelines\">guidelines</a>, <a href=\"/tos\">TOS</a>, or for another reason not listed above.",
+          "short_description":'Requires staff attention for another reason',
           "long_form":"notified moderators",
           "is_flag":true,
           "icon":null,