report abuse page mobilification (bug 758702)

media/css/mkt/abuse.less

@@ -5,6 +5,7 @@
 }
 
 #abuse {
+    padding: 0 15px;
     form, form .simple-field {
         margin: 0;
     }
@@ -19,26 +20,86 @@
         font-weight: normal;
         margin-bottom: 15px;
     }
+    .form-footer button {
+        margin-bottom: 15px;
+    }
 }
 
 #recap-container {
     .border-radius(5px);
-    background: @yellow;
-    border: 1px solid darken(@yellow, 60%);
-    padding: 1em;
-    margin-bottom: 1em;
+    border: 1px solid @border-blue;
+    background: @white;
+    margin-bottom: 10px;
     position: relative;
-    label {
-        color: @gold;
-        font-weight: bold;
+    padding: 10px;
+    color: @text;
+    p, label {
+        font-weight: 300;
+        font-size: 14px;
+        line-height: 20px;
     }
-    input {
-        width: 300px;
+    label:first-child {
+        font-weight: bold;
+        a {
+            font-weight: 300;
+        }
+    }
+    a {
+        text-decoration: underline;
     }
 }
 
+#recaptcha_table {
+    color: @text;
+    tr {
+        td {
+            background: #fff;
+        }
+        &:nth-child(4) {
+            td {
+                display: none;
+            }
+            td:first-child {
+                display: table-cell;
+                width: 290px;
+            }
+        }
+        &:nth-child(5), &:nth-child(6) {
+            td {
+                display: none;
+            }
+        }
+    }
+    // This will be fun if we have to resize later!
+    .recaptcha_image_cell {
+        #recaptcha_image, img {
+            width: 278px !important;
+        }
+    }
+    .recaptcha_input_area {
+        width: auto !important;
+    }
+    .recaptcha_input_area #recaptcha_response_field {
+        border: 1px solid @note-gray !important;
+        width: 225px !important;
+        position: static !important;
+        height: 30px;
+        font-size: 16px;
+    }
+    .recaptcha_input_area_text span {
+        font-size: 12px;
+    }
+}
+
+#recaptcha_div {
+    position: relative;
+}
+
+#abuse #recaptcha_area, #abuse #recaptcha_table {
+    width: auto !important;
+}
+
 #recaptcha_help {
-    color: @gray;
     float: right;
     font-size: 11px;
 }
@@ -46,12 +107,3 @@
 #recaptcha_widget_div {
     display: none !important;
 }
-
-@media (max-width: @4col) {
-    #recaptcha_area,
-    #recaptcha_table,
-    #recaptcha_div,
-    #recaptcha_image {
-        width: 100% !important;
-    }
-}

media/css/mkt/forms.less

@@ -2,8 +2,11 @@
 
 .friendly {
     p, ul, label {
-        font-size: 18px;
-        line-height: 24px;
+        font-size: 16px;
+        line-height: 22px;
+        &.intro {
+            margin-top: 0;
+        }
     }
     .req,
     .errorlist {
@@ -26,6 +29,7 @@
     input, textarea {
         color: @note-gray;
         font-size: 16px;
+        max-height: 160px;
         &:focus {
             color: @medium-gray;
         }

mkt/detail/templates/detail/abuse.html

@@ -7,11 +7,10 @@
 {% endblock %}
 
 {% block content %}
-  {{ mkt_breadcrumbs(product, [(None, title)]) }}
   <section id="abuse" class="friendly">
     <div>
-      <h1>{{ title }}</h1>
-      <p>
+      <h1 id="top">{{ title }}</h1>
+      <p class="intro">
         <label id="recap-label" for="{{ abuse_form.text.auto_id }}">
           {% trans policies_url='https://developer.mozilla.org/en/Apps/'
                                 'Marketplace_Review' %}

mkt/site/templates/site/helpers/abuse.html

@@ -4,7 +4,7 @@
 {% from 'includes/forms.html' import required %}
   <div id="recap-container">
     <label for="recaptcha_response_field">
-      {{ _('Are you human?') }} {{ required() }}
+      {{ _('Are you human?') }}
       <a href="#" id="recaptcha_help">{{ _("What's this?") }}</a>
     </label>
     <div class="recaptcha-container">