From 6a6045e9abb141cee8a7501e8edbeecf43ccc973 Mon Sep 17 00:00:00 2001
From: Andromeda Yelton <andromeda.yelton@gmail.com>
Date: Mon, 1 Oct 2012 15:31:17 -0400
Subject: [PATCH] first pass at prettifying stripe process

---
 frontend/templates/fund_the_pledge.html | 49 +++++++++++++++++++++++--
 frontend/templates/pledge.html          |  5 ++-
 static/css/pledge.css                   | 28 ++++++++++++++
 static/css/sitewide.css                 |  4 ++
 static/less/pledge.less                 | 37 +++++++++++++++++++
 static/less/sitewide.less               |  5 +++
 6 files changed, 123 insertions(+), 5 deletions(-)

diff --git a/frontend/templates/fund_the_pledge.html b/frontend/templates/fund_the_pledge.html
index d49a44c3..17b62af0 100644
--- a/frontend/templates/fund_the_pledge.html
+++ b/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,11 +16,47 @@
 
 {% endblock %}
 
-{% block doccontent %}
-<div style="height:15px"></div>
-    
-<div class="jsmodule rounded clearfix">
+{% block content %}   
+<div class="jsmodule rounded clearfix central">
     <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. 
@@ -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.
diff --git a/frontend/templates/pledge.html b/frontend/templates/pledge.html
index e6274f7c..9864007f 100644
--- a/frontend/templates/pledge.html
+++ b/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.
diff --git a/static/css/pledge.css b/static/css/pledge.css
index 0a8fd96c..6076769e 100644
--- a/static/css/pledge.css
+++ b/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;
+}
diff --git a/static/css/sitewide.css b/static/css/sitewide.css
index 0dbbfa00..1d8c4a83 100644
--- a/static/css/sitewide.css
+++ b/static/css/sitewide.css
@@ -1066,3 +1066,7 @@ a.nounderline {
 .signuptoday a:hover {
   text-decoration: none;
 }
+.central {
+  width: 480px;
+  margin: 0 auto;
+}
diff --git a/static/less/pledge.less b/static/less/pledge.less
index 03ce8dda..9cc2c7d1 100644
--- a/static/less/pledge.less
+++ b/static/less/pledge.less
@@ -142,4 +142,41 @@ span.menu-item-price {
 #id_ack_link {
 	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;
 }
\ No newline at end of file
diff --git a/static/less/sitewide.less b/static/less/sitewide.less
index 56e9fd1a..929a27c1 100644
--- a/static/less/sitewide.less
+++ b/static/less/sitewide.less
@@ -692,4 +692,9 @@ a.nounderline {
     margin: 10px auto;
     cursor: pointer;
     font-style: normal;
+}
+
+.central {
+    width: 480px;
+    margin: 0 auto;
 }
\ No newline at end of file