mobilify app support FAQ pages

apps/reviews/templates/reviews/mobile/add_form.html

@@ -15,6 +15,6 @@
     </p>
     {{ field(form.rating, _('Rating:')) }}
     {{ field(form.body, _('Review:')) }}
-    <input type="submit" value="{{ _('Submit review') }}" class="button">
+    <p><input type="submit" value="{{ _('Submit review') }}" class="button"></p>
   </form>
 {% endif %}

apps/users/templates/users/support/mobile/wrapper.html

@@ -0,0 +1,9 @@
+{% extends 'mobile/base.html' %}
+
+{% block title %}{{ page_title(wizard.title) }}{% endblock %}
+
+{% block page %}
+<div id="full" class="infobox">
+  {% include content %}
+</div>
+{% endblock %}

apps/users/templates/users/support/request.html

@@ -27,12 +27,12 @@
     remove the add-on from all of your devices</b>. Open Add-ons Manager,
     select Remove next to {{ name }} and restart Firefox.{% endtrans %}</p>
   {% endif %}
-  {{ form.remove.errors }}
   {% if webapp %}
     {% set label = _('I have removed this app from all of my devices.') %}
   {% else %}
     {% set label = _('I have removed this add-on from all of my devices.') %}
   {% endif %}
   <p>{{ form.remove }} {{ label }}</p>
+  {{ form.remove.errors }}
   <p><button type="submit">{{ _('Continue') }}</button></p>
 </form>

apps/users/views.py

@@ -822,7 +822,7 @@ class SupportWizard(Wizard):
 
     @property
     def wrapper(self):
-        return self.tpl('wrapper.html')
+        return self.tpl('{mobile/}wrapper.html')
 
     @method_decorator(login_required)
     def dispatch(self, request, contribution_id, step='', *args, **kw):
@@ -833,5 +833,10 @@ class SupportWizard(Wizard):
         return super(SupportWizard, self).dispatch(request, step, *args, **kw)
 
     def render(self, request, template, context):
-        context.update(webapp=settings.APP_PREVIEW)
-        return super(SupportWizard, self).render(request, template, context)
+        fmt = {'mobile/': 'mobile/' if request.MOBILE else ''}
+        wrapper = self.wrapper.format(**fmt)
+        context.update(webapp=settings.APP_PREVIEW, wizard=self)
+        if request.is_ajax():
+            return jingo.render(request, template, context)
+        context['content'] = template
+        return jingo.render(request, wrapper, context)

media/css/mobile/listing.less

@@ -97,7 +97,7 @@ li.item {
     }
     details {
         font-size: .9em;
-        margin: 0 0 10px;
+        margin: 0 0 10px !important;
         padding: 0 10px;
     }
     .vital {

media/css/mobile/typography.less

@@ -0,0 +1,76 @@
+@import '../impala/lib';
+
+body {
+    font-family: @serif-stack;
+}
+
+a:link {
+    color: @link;
+    text-decoration: none;
+}
+
+.num_ratings,
+.review .old-version,
+.install-wrapper,
+table,
+table a:link {
+    font-family: @sans-stack;
+}
+#full h1,
+#content h2,
+#eula h2 {
+    font-style: italic;
+    margin: 0 14px 14px;
+    font-size: 1.4em;
+}
+#content #full {
+    line-height: 1.3;
+    h1 {
+        margin: 0;
+    }
+    p {
+        margin: 1em 0 0;
+    }
+    > p {
+        margin: 1em;
+    }
+}
+
+#content h3 {
+    font-size: 1.2em;
+    padding-bottom: 2px;
+}
+
+#full p,
+.copy p {
+    color: @medium-gray;
+}
+
+p strong {
+    font-weight: bold;
+}
+
+#content > {
+    details,
+    p,
+    .copy,
+    .menu {
+        margin: 0 14px;
+    }
+}
+
+.copy {
+    line-height: 1.2em;
+}
+
+#full h1,
+#content h2 {
+    padding-bottom: 4px;
+    border-bottom: 1px solid #ccc;
+    box-shadow: 0 1px #fff;
+}
+
+.htruncate {
+    white-space: nowrap;
+    overflow: hidden;
+}

media/css/zamboni/mobile-forms.less

@@ -1,19 +1,46 @@
 @import '../impala/lib';
 
-.form-mobile {
+.req,
+.errorlist,
+.error {
+    color: @error-red !important;
+}
+
+.form-mobile,
+#full form {
     padding: 1em;
+    &.form-mobile {
+        label, .errorlist {
+            font-family: @sans-stack;
+        }
+    }
     label {
         color: @medium-gray;
-        font-family: @sans-stack;
         display: block;
         padding-bottom: 6px;
         &.check {
             margin-bottom: 1em;
         }
     }
+    .errorlist {
+        font-weight: bold;
+        margin: 0 0 1em;
+        + p {
+            input, textarea {
+                border-color: red;
+                background-color: #FFEBEB;
+            }
+        }
+    }
+    input[type=checkbox] {
+        margin-bottom: .5em;
+    }
     input[type=text], input[type=password], select, textarea {
         margin-bottom: 1em;
         font-size: 1.3em;
+        + .errorlist {
+            margin-top: -.5em;
+        }
     }
     textarea, input[type=text], input[type=password] {
         border: 1px solid #ccc;
@@ -22,18 +49,6 @@
         .border-box;
         width: 100%;
     }
-    .errorlist {
-        color: @red;
-        font-family: @sans-stack;
-        font-weight: bold;
-        margin: -.5em 0 1em;
-        + p {
-            input, textarea {
-                border-color: red;
-                background-color: #FFEBEB;
-            }
-        }
-    }
     .stars {
         background-image: url("../../img/icons/stars-big.png");
         label {
@@ -77,13 +92,13 @@
 }
 
 .loading-submit:after {
-  background-image: url("../../img/zamboni/loading-white.gif");
-  content: "";
-  display: block;
-  height: 16px;
-  margin-left: 10px;
-  position: absolute;
-  right: -10px;
-  top: 0;
-  width: 16px;
+    background-image: url("../../img/zamboni/loading-white.gif");
+    content: "";
+    display: block;
+    height: 16px;
+    margin-left: 10px;
+    position: absolute;
+    right: -10px;
+    top: 0;
+    width: 16px;
 }

media/css/zamboni/mobile.css

@@ -80,43 +80,6 @@ section:after,
     display: none;
 }
 
-/************************************/
-/*             TYPOGRAPHY           */
-/************************************/
-
-html, body {
-    height: 100%;
-}
-
-body {
-    font-family: Georgia, serif;
-}
-a:link {
-    color: #447bc4;
-    text-decoration: none;
-}
-.num_ratings,
-.review .old-version,
-.install-wrapper,
-.install-wrapper a,
-table,
-table a:link {
-    font-family: "Droid Sans", Helvetica, sans-serif;
-}
-#content h2,
-#eula h2 {
-    font-style: italic;
-    margin: 0 14px 14px;
-    font-size: 1.4em;
-}
-#content h3 {
-    font-size: 1.2em;
-    padding-bottom: 2px;
-}
-.copy p {
-    color: #444;
-}
-
 /************************************/
 /*             GRADIENTS            */
 /************************************/
@@ -157,9 +120,9 @@ footer:before,
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAYAAAASC7TOAAAAEElEQVQIHWP8//8/Aw7wHwBR6AP+G53o6QAAAABJRU5ErkJggg=='),
                       -webkit-gradient(linear, left top, left 200, from(#dcedfd), to(#fff));
     margin-bottom: 30px;
+    min-height: 430px;
 }
 
-
 /************************************/
 /*            FANCY ARROW           */
 /************************************/
@@ -187,9 +150,8 @@ footer:before,
 /*              GENERAL             */
 /************************************/
 
-.htruncate {
-    white-space: nowrap;
-    overflow: hidden;
+html, body {
+    height: 100%;
 }
 
 table {
@@ -224,23 +186,6 @@ table th {
     padding: 8px 0 16px;
 }
 
-#content > details,
-#content > p,
-#content > .copy,
-#content > .menu {
-    margin: 0 14px;
-}
-
-.copy {
-    line-height: 1.2em;
-}
-
-#content h2 {
-    padding-bottom: 4px;
-    border-bottom: 1px solid #ccc;
-    box-shadow: 0 1px #fff;
-}
-
 .paginator {
     display: -moz-box;
     display: -webkit-box;
@@ -297,7 +242,7 @@ table th {
     background-position: -moz-calc(100% - 10px) center;
 }
 
-#search button[type=submit] {
+#search button {
     height: 45px;
     width: 56px;
     background-color: #83c53c;
@@ -310,11 +255,13 @@ table th {
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     border-radius: 6px;
+    display: inline-block;
+    padding: 0;
 }
-.noInlineSVG #search button[type=submit] {
+.noInlineSVG #search button {
     background: #83c53c url(../../img/zamboni/mobile/arrow.png) center no-repeat;
 }
-.html-rtl #search button[type=submit] {
+.html-rtl #search button {
     -moz-transform: scaleX(-1);
     -webkit-transform: scaleX(-1);
 }
@@ -917,7 +864,7 @@ li.persona-previewer {
     box-shadow: none;
 }
 
-.button, a.button {
+button, .button, a.button {
     -moz-transition: -moz-box-shadow 0.3s ease 0s;
     background-color: #669BE1;
     border: 0;
@@ -928,8 +875,7 @@ li.persona-previewer {
     -moz-box-shadow: 0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset;
     -webkit-box-shadow: 0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset;
     color: #FFFFFF;
-    display: inline-block;
-    font-family: "Droid Sans", "Trebuchet MS", sans-serif;
+    font-family: "Trebuchet MS", sans-serif;
     font-size: 20px;
     font-weight: bold;
     line-height: 1;
@@ -941,6 +887,7 @@ li.persona-previewer {
     text-decoration: none;
 }
 
+button:active,
 .button:active,
 .button.selected {
     top: 2px;

settings.py

@@ -525,6 +525,7 @@ MINIFY_BUNDLES = {
         ),
         'zamboni/mobile': (
             'css/zamboni/mobile.css',
+            'css/mobile/typography.less',
             'css/zamboni/mobile-forms.less',
             'css/mobile/header.less',
             'css/mobile/listing.less',