зеркало из https://github.com/mozilla/bedrock.git
Styles and open/close behaviour for Get Involed form
(Bug 731369)
This commit is contained in:
Steven Garrity
Родитель
a766ed0ae3
Коммит
abfb976227
|
|
@ -21,7 +21,7 @@ class PrivacyWidget(widgets.CheckboxInput):
|
|||
attrs['required'] = 'true'
|
||||
input_txt = super(PrivacyWidget, self).render(name, value, attrs)
|
||||
return mark_safe(
|
||||
'<label for="privacy-check" class="privacy-check-label">'
|
||||
'<label for="id_privacy" class="privacy-check-label">'
|
||||
'%s '
|
||||
'<span class="title">I agree to the '
|
||||
'<a href="/en-US/privacy-policy">Privacy Policy</a>'
|
||||
|
|
@ -37,7 +37,7 @@ class NewsletterForm(forms.Form):
|
|||
initial='H')
|
||||
privacy = forms.BooleanField(widget=PrivacyWidget)
|
||||
|
||||
INTEREST_CHOICES = (('', 'Interest'),
|
||||
INTEREST_CHOICES = (('', 'Area of Interest'),
|
||||
('Support', 'Helping Users'),
|
||||
('Localization', 'Localization'),
|
||||
('QA', 'Testing and QA'),
|
||||
|
|
|
|||
|
|
@ -9,42 +9,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('video') }}
|
||||
{{ js('pager') }}
|
||||
<script>
|
||||
|
||||
$(document).ready(function() {
|
||||
var $opportunities = $('#opportunities');
|
||||
function scrollTo($el) {
|
||||
var top = $el.offset().top;
|
||||
$("html:not(:animated),body:not(:animated)").animate(
|
||||
{ scrollTop: top - 20 },
|
||||
100
|
||||
);
|
||||
}
|
||||
|
||||
var pager = Mozilla.Pager.rootPagers[0];
|
||||
|
||||
$('#interest-header').click(function(e) {
|
||||
e.preventDefault();
|
||||
pager.setPageWithAnimation(pager.pagesById['interest']);
|
||||
scrollTo($opportunities);
|
||||
});
|
||||
|
||||
$('#location-header').click(function(e) {
|
||||
e.preventDefault();
|
||||
pager.setPageWithAnimation(pager.pagesById['location']);
|
||||
scrollTo($opportunities);
|
||||
});
|
||||
|
||||
$('#time-header').click(function(e) {
|
||||
e.preventDefault();
|
||||
pager.setPageWithAnimation(pager.pagesById['time']);
|
||||
scrollTo($opportunities);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
{{ js('contribute') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
@ -80,48 +45,73 @@
|
|||
</p>
|
||||
</section>
|
||||
|
||||
<div class="billboard">
|
||||
{% if not success %}
|
||||
<form action="#help-form" id="help-form" method="post">
|
||||
{% if form.errors %}
|
||||
{{ form.non_field_errors()|safe }}
|
||||
{% if not success %}
|
||||
{% if form.errors %}
|
||||
{{ form.non_field_errors()|safe }}
|
||||
|
||||
<ul class="errorlist">
|
||||
{% if form.email.errors %}
|
||||
<li>Please enter a valid email address</li>
|
||||
{% endif %}
|
||||
|
||||
{% if form.privacy.errors %}
|
||||
<li>You must agree to the privacy policy</li>
|
||||
{% endif %}
|
||||
|
||||
{% if form.interest.errors %}
|
||||
<li>Please select an interest</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<ul class="errorlist container" id="help-email-errors">
|
||||
{% if form.email.errors %}
|
||||
<li>Please enter a valid email address</li>
|
||||
{% endif %}
|
||||
|
||||
{{ csrf() }}
|
||||
<h3>Want to help?</h3>
|
||||
<p>Send us a note and we can get you started right away.</p>
|
||||
{{ field_with_attrs(form.email, placeholder='YOUR EMAIL HERE')|safe }}
|
||||
{{ form.interest }}
|
||||
<input type="submit" class="button-blue" value="Submit">
|
||||
<div>
|
||||
{{ form.newsletter|safe }} I want to optin
|
||||
</div>
|
||||
{% if form.privacy.errors %}
|
||||
<li>You must agree to the privacy policy</li>
|
||||
{% endif %}
|
||||
|
||||
<div class="field field-privacy {% if form.privacy.errors%}field-error{% endif %}">
|
||||
{{ form.privacy|safe }}
|
||||
</div>
|
||||
{% if form.interest.errors %}
|
||||
<li>Please select an interest</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
<form class="billboard{% if form.errors %} has-errors{% endif%}"
|
||||
action="#help-form" id="help-form" method="post">
|
||||
|
||||
</form>
|
||||
{% else %}
|
||||
<div id="help-form" class="thank">
|
||||
<h3>Thank you for your submission!</h3>
|
||||
{{ csrf() }}
|
||||
<div class="row">
|
||||
<div class="form-column-1">
|
||||
<h3>Want to help?</h3>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="form-column-2">
|
||||
<div class="field field-email">
|
||||
{{ field_with_attrs(form.email, placeholder='YOUR EMAIL HERE')|safe }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-column-3">
|
||||
<div class="field field-interest">
|
||||
{{ form.interest }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-submit">
|
||||
<input type="submit" class="button-blue" id="form-submit" value="Sign me up »">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="form-details">
|
||||
<div class="form-column-1">
|
||||
<p>Send us a note and we can get you started right away.</p>
|
||||
</div>
|
||||
<div class="form-column-2">
|
||||
<div class="field field-comments form-details">
|
||||
<textarea placeholder="SHARE YOUR THOUGHTS, OR ASK US A QUESTION"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-column-3">
|
||||
<div class="field field-newsletter form-details">
|
||||
<label for="id_newsletter">
|
||||
{{ form.newsletter|safe }}
|
||||
I’d like to receive regular contribution news by email
|
||||
</label>
|
||||
</div>
|
||||
<div class="field field-privacy form-details {% if form.privacy.errors%}field-error{% endif %}">
|
||||
{{ form.privacy|safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% else %}
|
||||
<div id="help-form" class="billboard thank">
|
||||
<h3>Thank you for your submission!</h3>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<section id="opportunities">
|
||||
|
||||
|
|
|
|||
|
|
@ -35,24 +35,76 @@
|
|||
}
|
||||
|
||||
#help-form {
|
||||
padding: @baseLine /2 @gridGutterWidth * 2;
|
||||
padding-top: @baseLine;
|
||||
padding-bottom: @baseLine;
|
||||
margin-bottom: @baseLine * 2;
|
||||
|
||||
h3,
|
||||
input,
|
||||
select {
|
||||
.inline-block;
|
||||
margin: @baseLine /2 @gridGutterWidth @baseLine / 2 0;
|
||||
width: @gridColumnWidth * 3;
|
||||
.form-column-1 {
|
||||
.span(2);
|
||||
h3 {
|
||||
padding-top: 4px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: auto;
|
||||
.form-column-2 {
|
||||
.span(3);
|
||||
}
|
||||
|
||||
.form-column-3 {
|
||||
.span(3);
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
.span(2);
|
||||
}
|
||||
|
||||
.field-interest {
|
||||
min-height: 36px;
|
||||
select {
|
||||
margin-top: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
padding: @baseLine / 4 0;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type=email] {
|
||||
width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - 20px;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
width: (@gridColumnWidth * 2) + (@gridGutterWidth);
|
||||
}
|
||||
|
||||
.field-newsletter label,
|
||||
.field-privacy label {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
display: block;
|
||||
font-size: @smallFontSize;
|
||||
line-height: 18px;
|
||||
input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#help-email-errors {
|
||||
background: #AF3232;
|
||||
color: #fff;
|
||||
padding-top: @baseLine / 2;
|
||||
padding-bottom: @baseLine / 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#opportunities {
|
||||
padding-bottom: @baseLine * 2;
|
||||
nav {
|
||||
|
|
@ -146,3 +198,6 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.js #form-details { display: none; }
|
||||
|
||||
|
|
|
|||
|
|
@ -167,6 +167,7 @@ code {
|
|||
/* }}} */
|
||||
/* {{{ Forms */
|
||||
|
||||
textarea,
|
||||
input[type=email],
|
||||
input[type=password],
|
||||
input[type=text] {
|
||||
|
|
@ -182,6 +183,9 @@ input[type=text] {
|
|||
.transition(all linear .1s);
|
||||
}
|
||||
|
||||
textarea { height: auto; }
|
||||
|
||||
textarea:focus,
|
||||
input[type=email]:focus,
|
||||
input[type=password]:focus,
|
||||
input[type=text]:focus {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
$(document).ready(function() {
|
||||
var $opportunities = $('#opportunities');
|
||||
function scrollTo($el) {
|
||||
var top = $el.offset().top;
|
||||
$("html:not(:animated),body:not(:animated)").animate(
|
||||
{ scrollTop: top - 20 },
|
||||
100
|
||||
);
|
||||
}
|
||||
|
||||
var pager = Mozilla.Pager.rootPagers[0];
|
||||
|
||||
$('#interest-header').click(function(e) {
|
||||
e.preventDefault();
|
||||
pager.setPageWithAnimation(pager.pagesById['interest']);
|
||||
scrollTo($opportunities);
|
||||
});
|
||||
|
||||
$('#location-header').click(function(e) {
|
||||
e.preventDefault();
|
||||
pager.setPageWithAnimation(pager.pagesById['location']);
|
||||
scrollTo($opportunities);
|
||||
});
|
||||
|
||||
$('#time-header').click(function(e) {
|
||||
e.preventDefault();
|
||||
pager.setPageWithAnimation(pager.pagesById['time']);
|
||||
scrollTo($opportunities);
|
||||
});
|
||||
|
||||
$('#id_email, #form-submit, #id_interest').focus(function () {
|
||||
$('.form-details').slideDown();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -1,10 +1,6 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
$('#id_email').focus(function () {
|
||||
$('#form-details').slideDown();
|
||||
});
|
||||
|
||||
$('#footer_email_submit').focus(function () {
|
||||
$('#id_email,#footer_email_submit,#id_interest').focus(function () {
|
||||
$('#form-details').slideDown();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
/* Fake the placeholder attribute since Firefox doesn't support it. */
|
||||
jQuery.fn.placeholder = function(new_value) {
|
||||
|
||||
if (new_value) {
|
||||
this.attr('placeholder', new_value);
|
||||
}
|
||||
|
||||
/* Bail early if we have built-in placeholder support. */
|
||||
if ('placeholder' in document.createElement('input')) {
|
||||
return this;
|
||||
}
|
||||
|
||||
if (new_value && this.hasClass('placeholder')) {
|
||||
this.val('').blur();
|
||||
}
|
||||
|
||||
return this.focus(function() {
|
||||
var $this = $(this),
|
||||
text = $this.attr('placeholder');
|
||||
|
||||
if ($this.val() == text) {
|
||||
$this.val('').removeClass('placeholder');
|
||||
}
|
||||
}).blur(function() {
|
||||
var $this = $(this),
|
||||
text = $this.attr('placeholder');
|
||||
|
||||
if ($this.val() == '') {
|
||||
$this.val(text).addClass('placeholder');
|
||||
}
|
||||
}).each(function(){
|
||||
/* Remove the placeholder text before submitting the form. */
|
||||
var self = $(this);
|
||||
self.closest('form').submit(function() {
|
||||
if (self.hasClass('placeholder')) {
|
||||
self.val('');
|
||||
}
|
||||
});
|
||||
}).blur();
|
||||
};
|
||||
|
||||
$("input[placeholder], textarea[placeholder]").placeholder();
|
||||
|
|
@ -159,6 +159,12 @@ MINIFY_BUNDLES = {
|
|||
'js/download.js',
|
||||
'js/footer-email-form.js',
|
||||
),
|
||||
'contribute': (
|
||||
'js/contribute-page.js',
|
||||
'js/mozilla-input-placeholder.js',
|
||||
'js/mozilla-pager.js',
|
||||
'js/mozilla-video-tools.js',
|
||||
),
|
||||
'expanders': (
|
||||
'js/mozilla-expanders.js',
|
||||
),
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче