first pass at prettifying stripe process

frontend/templates/fund_the_pledge.html

@@ -3,6 +3,9 @@
 
 {% block title %}Fund Your Pledge{% endblock %}
 
+{% block news %}
+{% endblock %}
+
 {% block extra_extra_head %}
 <link type="text/css" rel="stylesheet" href="/static/css/campaign.css"  />
 <link type="text/css" rel="stylesheet" href="/static/css/pledge.css"  />
@@ -13,12 +16,48 @@
 
 {% endblock %}
 
-{% block doccontent %}
+{% block content %}   
-<div style="height:15px"></div>
+<div class="jsmodule rounded clearfix central">
-    
-<div class="jsmodule rounded clearfix">
     <div class="jsmod-content">
     
+    <div class="fund_options clearfix">
+        <div>
+            <form method="GET" action="{{nonprofit.link}}">
+                {{ donate_form.non_field_errors }}
+                {{donate_form}}
+                <input name="donate_submit" type="submit" value="Donate" id="donate_submit" />
+            </form>
+        </div>
+        <div>    	
+    	    <a class="fakeinput">Pledge</a>
+    	</div>
+    </div>
+    
+    <div class="fund_options clearfix">
+        <div id="donate_explanation">
+            <ul>
+                <li>Donate to our partner charity, {{ nonprofit.name }}</li>
+                <li>Pay immediately</li>
+                <li>If the campaign succeeds, your donation will support it</li>
+                <li>If not, your donation will support {{ nonprofit.name }}</li>
+                <li><a href="#">Learn more</a></li>
+            </ul>
+        </div>
+        <div id="pledge_explanation">
+            <ul>
+                <li>Pledge toward this campaign</li>
+                <li>Pay later</li>
+                <li>If the campaign succeeds, your pledge will support it</li>
+                <li>If not, you won't be charged</li>
+                <li><a href="#">Learn more</a></li>
+            </ul>
+        </div>
+    </div>
+
+
+{% comment %}
+kept around for reference as the page is overhauled
+
 	<div><h2>Funding Your Pledge</h2>
 		<div>We're so happy that you've decided to {% if modified %}increase your pledge{% else %}join{% endif %} this campaign. 
 		{% if nonprofit.is_on %} 
@@ -49,6 +88,8 @@
 	    </div>
 	</div>
 	{% endif %}
+{% endcomment %}
+
 	<div id="authorize" class="clearfix">
 	    <h3>Pledge by Credit Card</h3>
 	    <p>Unglue.it uses Stripe to securely manage your Credit Card information.

frontend/templates/pledge.html

@@ -10,6 +10,9 @@
 <script type="text/javascript" src="/static/js/reconcile_pledge.js"></script>
 {% endblock %}
 
+{% block news %}
+{% endblock %}
+
 {% block doccontent %}
 <div style="height:15px"></div>
 <div class="book-detail">
@@ -100,7 +103,7 @@
 			<div id="ack_link" class="ack_inactive"><div class="ack_level">$50+</div><div class="ack_header">Your acknowledgement will link to your Unglue.it supporter page.{{ form.ack_link }}</div></div>
 			<div id="ack_dedication" class="ack_inactive"><div class="ack_level">$100+</div><div class="ack_header">Your acknowledgement can include a dedication (140 characters max).&nbsp;{{ form.ack_dedication.label_tag }} {{ form.ack_dedication.errors }}{{ form.ack_dedication }}</div></div>
 			</div>
-			<input name="pledge" type="submit" {% if faqmenu == 'modify' %}value="Modify Pledge"{% else %}value="Pledge Now"{% endif %} id="pledgesubmit" />
+			<input name="pledge" type="submit" {% if faqmenu == 'modify' %}value="Modify Support"{% else %}value="Unglue it!"{% endif %} id="pledgesubmit" />
 			<input name="decoy" type="submit" id="fakepledgesubmit" disabled="disabled" />
 			{% comment %}
 				When the pledge amount and premium are in an inconsistent state, the real button is disabled and (via css) hidden; instead we display this fake button with a helpful message.  It's a button so we can reuse all the existing CSS for buttons, so that it looks like the real button has just changed in appearance.  It's hidden and the other one un-disabled and un-hidden when the pledge & premium return to a correct state.  People without javascript enabled will miss out on the front-end corrections but form validation will catch it.

static/css/pledge.css

@@ -213,3 +213,31 @@ span.menu-item-price {
   border: none;
   cursor: default;
 }
+.fund_options a.fakeinput {
+  font-size: 19px;
+  margin: 10px auto;
+  float: left;
+  line-height: normal;
+}
+.fund_options input[type="submit"] {
+  float: left;
+}
+.fund_options div {
+  width: 50%;
+  float: left;
+}
+.fund_options ul {
+  padding: 5px 10px 5px 15px;
+  border: solid 1px #d6dde0;
+  margin-right: 15px;
+  list-style-type: none;
+}
+.fund_options ul li {
+  margin: 5px 0;
+}
+.fund_options ul a {
+  color: #6994a3;
+}
+#authorize {
+  display: none;
+}

static/css/sitewide.css

@@ -1066,3 +1066,7 @@ a.nounderline {
 .signuptoday a:hover {
   text-decoration: none;
 }
+.central {
+  width: 480px;
+  margin: 0 auto;
+}

static/less/pledge.less

@@ -143,3 +143,40 @@ span.menu-item-price {
 	border: none;
 	cursor: default;
 }
+
+.fund_options {
+    a.fakeinput {
+        font-size: @font-size-header;
+        margin: 10px auto;
+        float: left;
+        line-height: normal;
+    }
+    
+    input[type="submit"] {
+        float: left;
+    }
+    
+    div {
+        width: 50%;
+        float: left;
+    }
+    
+    ul {
+        padding: 5px 10px 5px 15px;
+        border: solid 1px @blue-grey;
+        margin-right: 15px;
+        list-style-type: none;
+        
+        li {
+            margin: 5px 0;
+        }
+        
+        a {
+            color: @medium-blue;
+        }
+    }
+}
+
+#authorize {
+    display: none;
+}

static/less/sitewide.less

@@ -693,3 +693,8 @@ a.nounderline {
     cursor: pointer;
     font-style: normal;
 }
+
+.central {
+    width: 480px;
+    margin: 0 auto;
+}