report abuse page mobilification (bug 758702)

This commit is contained in:
Davor Spasovski 2012-09-11 11:43:18 -07:00
Родитель 2003a0519b
Коммит 7a3f6686e0
4 изменённых файлов: 80 добавлений и 25 удалений

Просмотреть файл

@ -5,6 +5,7 @@
} }
#abuse { #abuse {
padding: 0 15px;
form, form .simple-field { form, form .simple-field {
margin: 0; margin: 0;
} }
@ -19,26 +20,86 @@
font-weight: normal; font-weight: normal;
margin-bottom: 15px; margin-bottom: 15px;
} }
.form-footer button {
margin-bottom: 15px;
}
} }
#recap-container { #recap-container {
.border-radius(5px); .border-radius(5px);
background: @yellow; border: 1px solid @border-blue;
border: 1px solid darken(@yellow, 60%); background: @white;
padding: 1em; margin-bottom: 10px;
margin-bottom: 1em;
position: relative; position: relative;
label { padding: 10px;
color: @gold; color: @text;
font-weight: bold; p, label {
font-weight: 300;
font-size: 14px;
line-height: 20px;
} }
input { label:first-child {
width: 300px; 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 { #recaptcha_help {
color: @gray;
float: right; float: right;
font-size: 11px; font-size: 11px;
} }
@ -46,12 +107,3 @@
#recaptcha_widget_div { #recaptcha_widget_div {
display: none !important; display: none !important;
} }
@media (max-width: @4col) {
#recaptcha_area,
#recaptcha_table,
#recaptcha_div,
#recaptcha_image {
width: 100% !important;
}
}

Просмотреть файл

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

Просмотреть файл

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

Просмотреть файл

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