Skip to content
This repository has been archived by the owner on Feb 8, 2018. It is now read-only.

Commit

Permalink
Style the form
Browse files Browse the repository at this point in the history
  • Loading branch information
@chadwhitacre
chadwhitacre committed Sep 6, 2017
1 parent c1824f5 commit 2780b0f
Show file tree
Hide file tree
Showing 4 changed files with 261 additions and 37 deletions.
21 changes: 16 additions & 5 deletions js/gratipay/homepage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,25 @@ Gratipay.homepage = {}

Gratipay.homepage.initForm = function () {
$form = $('#homepage #content form');
$button = $form.find('button');
$button.on('click', Gratipay.homepage.submitForm);
$submit= $form.find('button[type=submit]');
$submit.click(Gratipay.homepage.submitForm);

$promote = $form.find('.promotion-gate button');
$promote.click(Gratipay.homepage.openPromote);

braintree.dropin.create({
authorization: 'sandbox_cr9dyy9c_bk8h97tqzyqjhtfn',
container: '#braintree-container'
}, function (createErr, instance) {
$button.click(function () {
$submit.click(function () {
instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
// Submit payload.nonce to your server
});
});
});
}

Gratipay.homepage.submitForm = function (e) {
Gratipay.homepage.submitForm = function(e) {
e.preventDefault();

$input = $(this)
Expand All @@ -40,6 +43,14 @@ Gratipay.homepage.submitForm = function (e) {
$('.application-complete').slideDown(250);
});
},
error: [Gratipay.error, function () { $input.prop('disable', false); }]
error: [Gratipay.error, function() { $input.prop('disable', false); }]
});
}

Gratipay.homepage.openPromote = function(e) {
e.preventDefault();
$('.promotion-gate').fadeOut();
$('.promotion-fields').slideDown(function() {
$('.promotion-fields input:first').focus();
});
}
161 changes: 153 additions & 8 deletions scss/pages/homepage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,22 @@
#homepage {

#banner a {
display: block;
height: 100%;
width: 100%;
h1 {
// override .really-long
font-size: 28px;
line-height: 33px;
#banner {
height: 128px;
background-size: 40%;

a {
display: block;
height: 100%;
width: 100%;
h1 { // override
font-size: 28px;
line-height: 128px;
position: static;
text-align: center;
max-width: none;
right: 0;
bottom: 0;
}
}
}

Expand All @@ -30,6 +39,142 @@
padding: 0 7px;
text-align: center;
}

&:nth-of-type(1) {
border: 0;
margin-top: 0;
padding-top: 0;
}

h2:nth-of-type(2) {
margin-top: 4em;
}

.field {
label, fieldset legend {
display: block;
text-align: left;
font: normal 10px/12px $Ideal;
text-transform: uppercase;
margin: 2em 0 0;
}
fieldset {
border: none;
position: static;
margin: 0;
padding: 0;
legend {
color: $black;
position: static;
padding: 2em 0 0;
}
}
input, select {
width: 100%;
padding: 10px;
font: normal 24px/36px $Ideal;
height: auto;
}
select {
height: 36px;
}
.fine-print{
padding: 0.5em 0 0;
margin: 0;
}
&.amount {
margin-top: 1em;

label {
display: inline;
margin: 0 0 0 -24px;
font: bold 32px/36px $Ideal;
}
input {
max-width: 160px;
width: 50%;
text-align: right;
}
}
&.email-address, &.follow-up {
.fine-print {
text-align: left;
}
}
&.email-address, &.follow-up {
.fine-print {
text-align: left;
}
}
&.follow-up {
.fancy-radio {
position: relative;
display: inline-block;
padding-right: 20px;

input {
position: absolute;
left: -99999px;

&:checked + label,
&:not(:checked) + label {
text-transform: none;
font: normal 24px/36px $Ideal;
margin: 0.5em 0 0;

position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
}

&:checked + label:before,
&:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid $brown;
border-radius: 100%;
background: $white;
}
&:not(:checked) + label:after,
&:checked + label:after {
content: '';
width: 12px;
height: 12px;
background: $green;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
transition: all 0.1s ease;
}

&:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
&:checked + label:after {
opacity: 1;
transform: scale(1);
}
}
}
}
}
.promotion-gate {
margin: 0;
button {
margin-top: 30px;
}
}
.promotion-fields {
display: none;
}
}
}
}
2 changes: 1 addition & 1 deletion templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ <h1><a href="/"><img src="{{ website.asset('gratipay.svg') }}"
{% block banner %}{% if banner %}<h1>{{ banner }}</h1>{% endif %}{% endblock %}
</div>

{% if page_id != 'npm' %}
{% if page_id not in ('homepage', 'npm') %}
<table id="notice">
<tr>
<td>&#x2605;</td>
Expand Down
114 changes: 91 additions & 23 deletions www/index.spt
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
# -*- coding: utf-8 -*-
[---]
suppress_sidebar = True
page_id = "homepage"
Expand Down Expand Up @@ -30,51 +31,118 @@ page_id = "homepage"
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">

<fieldset>
<legend>{{ _('Step 1 of 3') }}</legend>
<h2>{{ _('Which projects?') }}</h2>
<input type="file">
</fieldset>

<fieldset>
<legend>{{ _('Step 2 of 3') }}</legend>
<h2>{{ _('How much?') }}</h2>

<p class="instructions">We recommend $2,000 per technical employee per
year.</p>
<div class="field amount">
<label for="amount">$</label>
<input type="text" name="amount" id="amount" placeholder="2,000 × N" required autofocus>

<p class="fine-print">
{{ _( 'We {a}recommend{_a} $2,000 per{br}technical employee per year.'
, br='<br>'|safe
, a='<a href="https://gratipay.news/">'|safe
, _a='</a>'|safe
) }}
</p>

$ <input type="text" name="amount" required>
</div>

<div id="braintree-container"></div>
</fieldset>

<fieldset>
<legend>{{ _('Step 3 of 3') }}</legend>
<legend>{{ _('Step 2 of 3') }}</legend>
<h2>{{ _('Who are you?') }}</h2>

<label for="email">Email</label>
<input name="email" required>
<div class="field">
<label for="name">{{ _('Your Name') }}</label>
<input name="name" id="name" type="text" required>
</div>

<div class="field email-address">
<label for="email-address">{{ _('Your Email Address') }}</label>
<input name="email-address" id="email-address" type="text" required>
<p class="fine-print">{{ _('You will get a verification link.') }}</p>
</div>

<div class="field follow-up">
<fieldset>
<legend>{{ _('Follow-up') }}</legend>

<div class="fancy-radio">
<input type="radio" name="follow-up" id="follow-up-monthly" value="monthly">
<label for="follow-up-monthly">{{ _('Monthly') }}</label>
</div>

<div class="fancy-radio">
<input type="radio" name="follow-up" id="follow-up-quarterly"
value="quarterly" checked>
<label for="follow-up-quarterly">{{ _('Quarterly') }}</label>
</div>

<div class="fancy-radio">
<input type="radio" name="follow-up" id="follow-up-yearly" value="yearly">
<label for="follow-up-yearly">{{ _('Yearly') }}</label>
</div>

<div class="fancy-radio">
<input type="radio" name="follow-up" id="follow-up-never" value="never">
<label for="follow-up-never">{{ _('Never') }}</label>
</div>

<p class="fine-print">
{{ _('You will get a progress report, with a reminder to pay again.') }}
</p>
</fieldset>
</div>
</fieldset>

<fieldset>
<legend>{{ _('Optional') }}</legend>
<h2>{{ _('Preferred Ecosystems') }}</h2>
<p class="fine-print">{{ _('Which are most valuable to you?') }}</p>

<div class="important-button">
<button class="large">{{ _('Add an Ecosystem') }}</button>
</div>
<div class="preferences"></div>

<h2>May we promote you?</h2>

<label label="company">{{ _("Name") }}</label>
<input type="text" name="promote-name">
<h2>{{ _('Promotion') }}</h2>

<label label="company">{{ _("Twitter Handle") }}</label>
<input type="text" name="promote-twitter">
<div class="promotion-fields">
<p class="fine-print">{{ _('Thanks! We are excited to brag about you!') }}</p>

<label label="company">{{ _("Short message") }}</label>
<input type="text" name="promote-message">
<div class="field">
<label label="company">{{ _("Your Company Name") }}</label>
<input type="text" name="promote-name" id="promote-name">
</div>

<label label="company">{{ _("URL") }}</label>
<input type="text" name="promot-url">
<div class="field">
<label label="company">{{ _("Your Landing Page URL") }}</label>
<input type="text" name="promote-url" id="promote-url">
</div>

<div class="field">
<label label="company">{{ _("Your Company Twitter Handle") }}</label>
<input type="text" name="promote-twitter" id="promote-twitter">
</div>

<div class="field">
<label label="company">{{ _("Your Message to the Open Source Community") }}</label>
<input type="text" name="promote-message" id="promote-message">
</div>
</div>

<div class="important-button promotion-gate">
<p class="fine-print">{{ _('We want to brag about you! May we?') }}</p>
<button class="large">{{ _('Provide Promotion Details') }}</button>
</div>

</fieldset>

<fieldset>
<legend>{{ _('Review & Submit') }}</legend>
<legend>{{ _('Submit Form') }}</legend>

<div class="important-button">
<button type="submit" class="apply selected large">
Expand Down

0 comments on commit 2780b0f

Please sign in to comment.