/developers/ x-tag content updates (bug 786859)

media/css/ecosystem/documentation.less

@@ -87,20 +87,16 @@ pre {
     margin-left: 20px;
     width: 95%;
 
-    > ul {
+    ul {
         clear: both;
         display: block;
         float: left;
-        padding: 0 0 20px;
+        list-style: disc;
         width: 95%;
     }
 
     li {
-        clear: both;
-        display: block;
-        float: left;
         line-height: 23px;
-        width: 100%;
     }
 }
 

mkt/ecosystem/templates/ecosystem/design/xtag.html

@@ -24,11 +24,6 @@
     <article class="marketing-block">
       <h1>{{ title }}</h1>
 
-      <h2>{{ _('Description') }}</h2>
-      <p>
-        {% block description %}{% endblock %}
-      </p>
-
       <h2>{{ _('Use It') }}</h2>
       <p>
         {% block use_it %}{% endblock %}

mkt/ecosystem/templates/ecosystem/design/xtag_alert.html

@@ -1,11 +1,5 @@
 {% extends "ecosystem/design/xtag.html" %}
 
-{% block description %}
-  An alert popup dialog is a small window which demands user input related
-  to the current activity. It disables all current activities and only
-  disappears after the user confirms an action or dismisses the dialog.
-{% endblock %}
-
 {% block use_it %}
   When the current activity absolutely requires user input, usually validation
   (e.g."delete all contacts?") or authorization (e.g. "enable

mkt/ecosystem/templates/ecosystem/design/xtag_dropdown.html

@@ -1,11 +1,5 @@
 {% extends "ecosystem/design/xtag.html" %}
 
-{% block description %}
-  A dropdown menu presents a list of options related to the current activity.
-  It is opened when the user touches the dropdown icon. It can include text,
-  image or both.
-{% endblock %}
-
 {% block use_it %}
   When the user has to choose one item from a list.
 {% endblock %}

mkt/ecosystem/templates/ecosystem/design/xtag_list.html

@@ -1,11 +1,5 @@
 {% extends "ecosystem/design/xtag.html" %}
 
-{% block description %}
-  A list is a group of vertically arranged elements which can consists
-  of text, icons, checkboxes, radio buttons, etc. A list often has a
-  title and separators.
-{% endblock %}
-
 {% block use_it %}
   When you want to organize information for scanning and/or to present options.
 {% endblock %}

mkt/ecosystem/templates/ecosystem/design/xtag_picker.html

@@ -1,11 +1,5 @@
 {% extends "ecosystem/design/xtag.html" %}
 
-{% block description %}
-  A picker lets the user quickly choose time, date or other information
-  such as a location from a predefined set of values. It also ensures the
-  data is entered in the correct format.
-{% endblock %}
-
 {% block use_it %}
   When you want the user to pick a time, date or other information from
   a set of values.

mkt/ecosystem/templates/ecosystem/design/xtag_select_list.html

@@ -1,13 +1,5 @@
 {% extends "ecosystem/design/xtag.html" %}
 
-{% block description %}
-  A select list is a popup dialog that presents a list of options related
-  to the current activity. It disables all current activities and only
-  disappears after the user confirms an action or dismisses the dialog. A
-  normal list allows the user to select one item, and a multi-select list
-  allows multiple selections. It can include text, image, or both.
-{% endblock %}
-
 {% block use_it %}
   When the user has to choose one or more items from a list.
 {% endblock %}

mkt/ecosystem/templates/ecosystem/design/xtag_slidebox.html

@@ -1,10 +1,5 @@
 {% extends "ecosystem/design/xtag.html" %}
 
-{% block description %}
-  A slide box is a rotating slide display with previous/ next navigation
-  that moves either horizontally or vertically, but not both.
-{% endblock %}
-
 {% block use_it %}
   When you want the users to browse through multiple slides (e.g. an image
   gallery), where user has actively selected a slide-viewing activity

mkt/ecosystem/templates/ecosystem/design/xtag_slider.html

@@ -1,12 +1,5 @@
 {% extends "ecosystem/design/xtag.html" %}
 
-{% block description %}
-  A slider lets the user adjust and select a value from a predefined range
-  by moving a handle. Changes are immediately noticeable so that the user
-  can fine-tune the values accordingly (e.g. brightness). When it is easier
-  for the user to enter a value directly, use a text box.
-{% endblock %}
-
 {% block use_it %}
   When the values are relative to the user and you can provide immediate
   feedback on the user's action.

mkt/ecosystem/templates/ecosystem/design/xtag_tabbox.html

@@ -1,9 +1,5 @@
 {% extends "ecosystem/design/xtag.html" %}
 
-{% block description %}
-  Tabs are usually used in a group to switch between different display panes.
-{% endblock %}
-
 {% block use_it %}
   When tabs are usually used in a group to switch between different display
   panes.

mkt/ecosystem/templates/ecosystem/design/xtag_toast.html

@@ -1,15 +1,5 @@
 {% extends "ecosystem/design/xtag.html" %}
 
-{% block description %}
-  <p>A toast is a small popup that either provides notification of an event
-    (new email) or immediate and non-intrusive feedback on the user's action
-    (email saved).</p>
-
-  <p>It contains minimal text, does not require user interaction, and
-    automatically disappears after a few seconds. It can include text, image,
-    or both.</p>
-{% endblock %}
-
 {% block use_it %}
   When you want to provide information that does not require user input and
   when you are certain the user is focusing on the screen.

mkt/ecosystem/templates/ecosystem/design/xtag_toggle.html

@@ -1,10 +1,5 @@
 {% extends "ecosystem/design/xtag.html" %}
 
-{% block description %}
-  A toggle switch allows the user to choose between two states. Changes are
-  immediate and the user can switch back and forth.
-{% endblock %}
-
 {% block use_it %}
   When you have a binary setting.
 {% endblock %}

mkt/ecosystem/templates/ecosystem/header.html

@@ -9,7 +9,7 @@
         </a>
         <a href="{{ url('ecosystem.partners') }}">{{ _('Partners') }}</a>
         <a href="{{ url('ecosystem.support') }}">{{ _('Support') }}</a>
-        <a href="{{ url('submit.app') }}">Submit an App</a>
+        <a href="{{ url('submit.app') }}">{{ _('Submit an App') }}</a>
       </nav>
     </div>
   </section>

mkt/ecosystem/templates/ecosystem/mdn_documentation/xtag_links.html

@@ -1,7 +1,7 @@
 <ul>
   <li>
     <a href="{{ url('ecosystem.building_xtag', xtag='list') }}">
-      {{ _('View List') }}
+      {{ _('Display List') }}
     </a>
   </li>
   <li>

mkt/ecosystem/views.py

@@ -4,7 +4,7 @@ import commonware.log
 import jingo
 
 from .models import MdnCache
-from .tasks import locales, refresh_mdn_cache, tutorials
+from .tasks import locales
 
 
 log = commonware.log.getLogger('z.ecosystem')
@@ -32,11 +32,24 @@ def building_xtag(request, xtag=None):
     are not yet on MDN. Once they are officially on there, then we can pull
     everything directly from the database instead.
     """
-    if not xtag:
+    titles = {
+        'list': 'Display List',
+        'alert': 'Alert Popup',
+        'toggle': 'Toggle Switch',
+        'tabbox': 'Tab box',
+        'picker': 'Date/Time Picker',
+        'slider': 'Slider',
+        'slidebox': 'Slidebox',
+        'dropdown': 'Dropdown',
+        'select_list': 'Select List',
+        'toast': 'Toast',
+    }
+
+    if xtag not in titles:
         xtag = 'list'
 
     return jingo.render(request, 'ecosystem/design/xtag_%s.html' % xtag,
-                        {'title': xtag.replace('_', ' ').capitalize()})
+                        {'title': titles[xtag]})
 
 
 def partners(request):