marketplace submission details: increase height of summary, add chara…

…cter counters (bug 726714, bug 729698, bug 729695)

media/css/devreg/submit-details.less

@@ -191,6 +191,18 @@ label.houdini {
             border: 0;
         }
     }
+    #trans-summary + .hint,
+    #trans-description + .hint {
+        float: left;
+    }
+    .html-support,
+    .char-count {
+        float: right;
+        margin: 2px 0 0;
+    }
+    .char-count {
+        margin-top: 4px;
+    }
 }
 
 @media (max-width: 860px) {

media/css/devreg/submit-progress.less

@@ -87,4 +87,5 @@
 
 .continue {
     float: right;
+    margin-top: 10px;
 }

media/js/devreg/devhub.js

@@ -984,7 +984,7 @@ function hideSameSizedIcons() {
 function initTruncateSummary() {
     // If the summary from a manifest is too long, truncate it!
     // EN-US only, since it'll be way too hard to accomodate all languages properly.
-    var $submit_describe = $('#submit-describe'),
+    var $submit_describe = $('#submit-describe, #submit-details'),
         $summary = $('textarea[name=summary_en-us]', $submit_describe),
         $desc = $('textarea[name=description_en-us]', $submit_describe);
 

media/js/devreg/submit-details.js

@@ -43,6 +43,9 @@ $(document).ready(function() {
         //submit_details.general();
         //submit_details.privacy();
         initCatFields();
+        initCharCount();
+        initSubmit();
+        initTruncateSummary();
     });
     submit_details.houdini();
 });

mkt/site/helpers.py

@@ -5,9 +5,12 @@
 
 
 @register.function
-def form_field(field, label=None, tag='div', req=None, hint=False, **attrs):
+def form_field(field, label=None, tag='div', req=None, hint=False,
+               some_html=False, cc_startswith=None, cc_maxlength=None,
+               **attrs):
     c = dict(field=field, label=label, tag=tag, req=req, hint=hint,
-             attrs=attrs)
+             some_html=some_html, cc_startswith=cc_startswith,
+             cc_maxlength=cc_maxlength, attrs=attrs)
     t = env.get_template('site/helpers/simple_field.html').render(**c)
     return jinja2.Markup(t)
 

mkt/site/templates/site/helpers/simple_field.html

@@ -1,6 +1,7 @@
 {% from 'includes/forms.html' import required, optional, tip %}
+{% from 'developers/includes/macros.html' import some_html_tip %}
 {% if tag %}
-  <{{ tag }} class="brform simple-field {{ class }}{{ ' error' if field.errors }}">
+  <{{ tag }} class="brform simple-field c {{ class }}{{ ' error' if field.errors }}">
 {% endif %}
 {% set choice = field|is_choice_field %}
   <label class="{{ 'choice' if choice }}" for="{{ field.auto_id }}">
@@ -21,6 +22,16 @@
     <span class="hint">{{ field.help_text }}</span>
   {% endif %}
   {{ field.errors }}
+  {% if some_html %}
+    {{ some_html_tip() }}
+  {% endif %}
+
+  {% if cc_maxlength %}
+    <div class="char-count" data-maxlength="{{ cc_maxlength }}"
+      {% if cc_startswith %}
+        data-for-startswith="{{ cc_startswith }}"
+      {% endif %}></div>
+  {% endif %}
 {% if tag %}
   </{{ tag }}>
 {% endif %}

mkt/submit/forms.py

@@ -141,7 +141,7 @@ class AppDetailsBasicForm(AddonFormBasic):
         label=_lazy(u"Provide a brief summary of your app's functionality:"),
         help_text=_lazy(u'This summary will be shown in listings and '
                          'searches.'),
-        widget=TransInput(attrs={'rows': 4, 'class': 'full'}))
+        widget=TransTextarea(attrs={'rows': 2, 'class': 'full'}))
     description = TransField(required=False,
         label=_lazy(u'Provide a more detailed description of your app:'),
         help_text=_lazy(u'This description will appear on the details page.'),

mkt/submit/templates/submit/details.html

@@ -60,7 +60,9 @@ <h2 class="output">{{ addon.name }}</h2>
         </div>
       </header>
 
-      {{ form_field(form_basic.summary, hint=True) }}
+      {{ form_field(form_basic.summary, hint=True,
+                    cc_startswith=form_basic.summary.auto_id + '_',
+                    cc_maxlength=form_basic.summary.field.max_length) }}
 
       <div id="addon-categories-edit"
            data-max-categories="{{ amo.MAX_CATEGORIES }}">
@@ -73,7 +75,7 @@ <h2 class="output">{{ addon.name }}</h2>
         {% endfor %}
       </div>
 
-      {{ form_field(form_basic.description, hint=True) }}
+      {{ form_field(form_basic.description, hint=True, some_html=True) }}
       {{ form_field(form_basic.privacy_policy, hint=True) }}
 
       {# TODO: Remove since Privacy Policy is required.
@@ -142,7 +144,6 @@ <h2 class="output">{{ addon.name }}</h2>
           <span class="hint">{{ loc('JPG, PNG, and GIF supported. Max size is 700 x 520 px.') }}</span>
         </div>
       </div>
-
       <button class="prominent continue c" type="submit">
         {{ _('Continue') }}
       </button>