Fix bug 936456: Migrate users.css to users.styl

apps/users/forms.py

@@ -19,7 +19,6 @@
                        'It must be at least %(limit_value)s characters.')
 USERNAME_LONG = _lazy(u'Username is too long (%(show_value)s characters). '
                       'It must be %(limit_value)s characters or less.')
-USERNAME_PLACEHOLDER = _lazy(u'john_smith')
 EMAIL_REQUIRED = _lazy(u'Email address is required.')
 EMAIL_SHORT = _lazy(u'Email address is too short (%(show_value)s characters). '
                     'It must be at least %(limit_value)s characters.')
@@ -38,7 +37,7 @@ def __init__(self, *args, **kwargs):
             regex=r'^[\w.-]+$',
             help_text=_lazy(u'Required. 30 characters or fewer. '
                             'Letters, digits and ./-/_ only.'),
-            widget=forms.TextInput(attrs={'placeholder': USERNAME_PLACEHOLDER}),
+            widget=forms.TextInput(),
             error_messages={'invalid': USERNAME_INVALID,
                             'required': USERNAME_REQUIRED,
                             'min_length': USERNAME_SHORT,

apps/users/templates/users/base.html

@@ -1,7 +1,10 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
 {% extends "base.html" %}
-{% set styles = ('users',) %}
 {% set scripts = ('users',) %}
-
+{% if waffle.flag('redesign') %}
+  {% set styles = ('redesign-users',) %}
+{% else %}
+  {% set styles = ('users',) %}
+{% endif %}
 {% block breadcrumbs %}
 {% endblock %}

apps/users/templates/users/browserid_register.html

@@ -10,18 +10,18 @@
     <section id="content-main" role="main">
       <article id="browser_register" class="main">
 
-        <div class="notice">
-        <h1>{{ _('Persona is here!') }}</h1>
-        <p>{% trans browserid_href='https://persona.org/', why_browserid='http://identity.mozilla.com/post/12950196039/deploying-browserid-at-mozilla' %}
-        MDN has switched to <a href="{{ browserid_href }}" rel="external">Persona</a>,
-        a safe and simple way to sign in with just your e-mail address. <a href="{{ why_browserid }}" rel="external">Learn more about it.</a>
-        {% endtrans %}</p>
-        <p>
-        {% trans bug_href='https://bugzilla.mozilla.org/enter_bug.cgi?format=guided#h=dupes|Mozilla%20Developer%20Network|Login' %}
-        <strong>Having trouble logging in? <a href="{{ bug_href }}" rel="external">Let us know.</a></strong>
-        {% endtrans %}
-        </p>
-      </div>
+        <div id="persona-explanation">
+          <h1>{{ _('Persona is here!') }}</h1>
+          <p>{% trans browserid_href='https://persona.org/', why_browserid='http://identity.mozilla.com/post/12950196039/deploying-browserid-at-mozilla' %}
+          MDN has switched to <a href="{{ browserid_href }}" rel="external">Persona</a>,
+          a safe and simple way to sign in with just your e-mail address. <a href="{{ why_browserid }}" rel="external">Learn more about it.</a>
+          {% endtrans %}</p>
+          <p>
+          {% trans bug_href='https://bugzilla.mozilla.org/enter_bug.cgi?format=__standard__&product=Mozilla%20Developer%20Network&component=Login' %}
+          <strong>Having trouble logging in? <a href="{{ bug_href }}" rel="external">Let us know.</a></strong>
+          {% endtrans %}
+          </p>
+        </div>
 
         <form id="create_user" class="boxed" method="post" action="">
           <h2>{{ _('New MDN Members') }}</h2>
@@ -43,7 +43,7 @@ <h2>{{ _('New MDN Members') }}</h2>
               <li>
                 <label for="id_username">{{ _('Username') }}</label>
                 {{ register_form.username|safe }}
-                <p><small>{{ _("Please enter the name you'd like to display to other users to identify your contributions.") }}</small></p>
+                <p class="field-explanation"><small>{{ _("Please enter the name you'd like to display to other users to identify your contributions.") }}</small></p>
               </li>
               <li class="submit">
                 <button type="submit" name="create">{{ _('Create a New Profile') }}</button>
@@ -70,7 +70,7 @@ <h2>{{ _('Forgot your email?') }}</h2>
                 {{ login_form.username|safe }}
               </li>
               <li class="submit">
-                <button type="submit">{{ _('Log In') }}</button>
+                <button type="submit">{{ _('Send a reminder') }}</button>
               </li>
             </ul>
           </fieldset>

media/redesign/stylus/structure.styl

@@ -457,3 +457,7 @@ footer {
     display: none;
   }
 }
+
+p.field-explanation {
+    margin-bottom: 0;
+}

media/redesign/stylus/users.styl

@@ -0,0 +1,29 @@
+@import 'vars'
+
+/*
+ * Users app CSS
+ */
+
+article.main {
+    form {
+        margin: (gutter-width * 1.5) 0 !important; /* Using !important to override the compat-important() call being made from .boxed. */
+
+        ul, li {
+            padding: 0;
+            margin: 0;
+        }
+
+        li {
+            list-style: none;
+        }
+
+        label {
+            display: block;
+            font-weight: bold;
+        }
+
+        button {
+            margin: 5px 0;
+        }
+    }
+}

scripts/compile-stylesheets

@@ -14,7 +14,7 @@ if [ ! -d "$CSSDIR" ]; then
   mkdir $CSSDIR
 fi
 
-STYLESHEETS=(main wiki demo-studio profile search zones home wiki-syntax)
+STYLESHEETS=(main wiki demo-studio profile search zones home wiki-syntax users)
 if [ $WATCH ]; then
   for ss in ${STYLESHEETS[@]}; do
     (stylus $STYLUSDIR/$ss.styl --out $CSSDIR --compress --watch &) &> /dev/null

settings.py

@@ -610,6 +610,9 @@ def JINJA_CONFIG():
         'users': (
             'css/users.css',
         ),
+        'redesign-users': (
+            'redesign/css/users.css',
+        ),
         'tagit': (
             'css/jquery.tagit.css',
         ),