From e3d8b12f85975ed4479e0729e6286697a9c4078e Mon Sep 17 00:00:00 2001
From: Andromeda Yelton <andromeda.yelton@gmail.com>
Date: Wed, 15 Feb 2012 11:03:58 -0500
Subject: [PATCH] prettifying the pledge page a bit

---
 frontend/templates/basepledge.html      |  40 ++++++
 frontend/templates/pledge.html          | 169 +++++++++++++++---------
 frontend/templates/pledge_cancel.html   |   2 +-
 frontend/templates/pledge_complete.html |   2 +-
 static/css/campaign.css                 |  29 ++--
 static/css/pledge.css                   |  98 ++++++++++++++
 static/less/campaign.less               |   7 +-
 static/less/pledge.less                 |  30 +++++
 8 files changed, 302 insertions(+), 75 deletions(-)
 create mode 100644 frontend/templates/basepledge.html
 create mode 100644 static/css/pledge.css
 create mode 100644 static/less/pledge.less

diff --git a/frontend/templates/basepledge.html b/frontend/templates/basepledge.html
new file mode 100644
index 00000000..09a0db83
--- /dev/null
+++ b/frontend/templates/basepledge.html
@@ -0,0 +1,40 @@
+{% extends "registration/registration_base.html" %}
+{% block extra_js %}
+
+<script type="text/javascript" src="/static/js/definitions.js"></script>
+{% endblock %}
+{% block extra_extra_head %}
+<!-- extra head content in descendants goes in extra_extra_head, not extra_head, to avoid overwriting the documentation.css include -->
+{% endblock %}
+
+{% block title %}{% endblock %}
+
+{% block topsection %}
+{% endblock %}
+
+{% block content %}
+<div id="main-container">
+	<div class="js-main">
+		<div id="js-leftcol">
+			{% include "faqmenu.html" %}
+		</div>
+		<div id="js-maincol-fr" class="have-right doc">
+			<div class="js-maincol-inner">
+				<div id="content-block">
+					<div id="js-main-container">
+            			<div class="js-main-container-inner">
+
+    
+{% block doccontent %}
+{% endblock %}
+
+						</div>
+					</div>
+			</div>
+		</div>
+	</div>
+</div>    
+
+{% endblock %}
+
+
diff --git a/frontend/templates/pledge.html b/frontend/templates/pledge.html
index 80883530..e30b210c 100644
--- a/frontend/templates/pledge.html
+++ b/frontend/templates/pledge.html
@@ -1,79 +1,126 @@
-{% extends "basedocumentation.html" %}
+{% extends "basepledge.html" %}
 
 {% block title %}Pledge{% endblock %}
 
 {% block extra_extra_head %}
 <link type="text/css" rel="stylesheet" href="/static/css/campaign.css"  />
+<style>
+
+#content-block .jsmod-content, .book-detail {
+	float: left;
+	width: auto;
+}
+
+#pledgesubmit {
+	float: right;
+	font-size: 17px;
+	margin: 10px;
+	cursor: pointer;
+}
+
+.pledge_amount {
+	margin-left: 10px;
+	font-size: 17px;
+}
+
+form {
+	margin-top: 10px;
+	padding-top: 10px;
+	border-top: solid 2px #d6dde0;
+}
+
+#id_preapproval_amount {
+	width: 50%;
+	line-height: 30px;
+	font-size: 16px;
+}
+
+</style>
 {% endblock %}
 
 {% block doccontent %}
-
-<h2>Campaign: {{campaign.name}}</h2>
-    <div class="thank-you">Thank you!</div>
-            	
-            	<div class="book-detail">
-                	<div class="book-detail-img"><a href="#">
-                    	<img src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" /></a>
-                    </div>
-                    <div class="book-detail-info">
-                    	<h2 class="book-name">{{ work.title }}</h2>
-                        <h3 class="book-author">{{ work.author }}</h3>
-                        <h3 class="book-year">{{ work.publication_date }}</h3>
-                        <div class="find-book">
-                        	<label>Find it here</label>
-                        	<!-- todo: these should be a real thing -->
-                            <div class="find-link">
-                                <a class="find-google" href="{{ work.googlebooks_url }}"><img src="/static/images/supporter_icons/googlebooks_square.png" align="" title="Find on Google Books" /></a>
-                                <a rel="nofollow" class="find-openlibrary" href="{% url work_openlibrary work.id %}"><img src="/static/images/supporter_icons/openlibrary_square.png" title="Find on OpenLibrary"></a>
-                                {% if not request.user.is_anonymous %}
-                                {% if request.user.profile.goodreads_user_link %}
-                                <a rel="nofollow" class="find-goodreads" href="{% url work_goodreads work.id %}"><img src="/static/images/supporter_icons/goodreads_square.png" title="Find on GoodReads"></a>
-                                {% endif %}
-                                {% if request.user.profile.librarything_id %}
-                                <a rel="nofollow" class="find-librarything" href="{% url work_librarything work.id %}"><img src="/static/images/supporter_icons/librarything_square.png" title="Find on LibraryThing" /></a>
-                                {% endif %}
-                                {% endif %}
-                            </div>
-                        </div>
-                        <div class="pledged-info"><div class="pledged-group">{{ work.last_campaign.supporters.count }} Ungluers have pledged ${{ work.last_campaign.current_total }}</div><div class="status"><img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" /></div></div>
-                    </div>
-                </div>
+<div style="height:10px";></div>
+<div class="book-detail">
+	<div class="book-detail-img">
+		<a href="#"><img src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" /></a>
+    </div>
     
-            	<div class="jsmodule rounded">
-            	<div class="jsmod-content">
-                	Campaign in Progress: ${{ work.last_campaign.current_total }}/${{ work.last_campaign.target }}
-                </div>
+    <div class="book-detail-info">
+        <h2 class="book-name">{{ work.title }}</h2>
+        <h3 class="book-author">{{ work.author }}</h3>
+        <h3 class="book-year">{{ work.publication_date }}</h3>
+        
+        <div class="find-book">
+            <label>Find it here</label>
+            
+            <div class="find-link">
+                <a class="find-google" href="{{ work.googlebooks_url }}"><img src="/static/images/supporter_icons/googlebooks_square.png" align="" title="Find on Google Books" /></a>
+                <a rel="nofollow" class="find-openlibrary" href="{% url work_openlibrary work.id %}"><img src="/static/images/supporter_icons/openlibrary_square.png" title="Find on OpenLibrary"></a>
 
+                {% if not request.user.is_anonymous %}
+                {% if request.user.profile.goodreads_user_link %}
+                <a rel="nofollow" class="find-goodreads" href="{% url work_goodreads work.id %}"><img src="/static/images/supporter_icons/goodreads_square.png" title="Find on GoodReads"></a>
+                {% endif %}
+                {% if request.user.profile.librarything_id %}
+                <a rel="nofollow" class="find-librarything" href="{% url work_librarything work.id %}"><img src="/static/images/supporter_icons/librarything_square.png" title="Find on LibraryThing" /></a>
+                {% endif %}
+                {% endif %}
+            </div>
+        </div>
+        
+        <div class="pledged-info">
+        	<div class="pledged-group">
+        		{{ work.last_campaign.supporters.count }} Ungluers have pledged ${{ work.last_campaign.current_total }}
+        	</div>
+        	<div class="status">
+        		<img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" />
+        	</div>
+        </div>
+    </div>
+</div>
+    
+<div class="jsmodule rounded pledge">
+    <div class="jsmod-content">
+        ${{ work.last_campaign.target }} needed by<br />
+        {{ work.last_campaign.deadline }}
+    </div>
+</div>
 
+<div class="jsmodule rounded">
     <div class="jsmod-content">
 	
-    {% comment %}
-    Even there is a CampaignPledgeForm in frontend/forms.py , the "widget" for premium_id is implemented in HTML here for now.
-    {% endcomment %}	
+    	{% comment %}
+    	Even there is a CampaignPledgeForm in frontend/forms.py , the "widget" for premium_id is implemented in HTML here for now.
+    	{% endcomment %}	
 	
+    	<form method="POST" action="{% url pledge work_id=work.id %}">
+        	{% csrf_token %}
+			{{ form.non_field_errors }}
+        	{{ form.preapproval_amount.errors }}
+        	<div class="pledge_amount">{{ form.preapproval_amount.label_tag }}: ${{ form.preapproval_amount }}</div>
+        	{{ form.anonymous.errors }}
+        	
+        	{% comment %}
+        	not supported yet; don't display
+        	{{ form.anonymous.label_tag }}: {{ form.anonymous }}	
+        	{% endcomment %}
 
-    <form method="POST" action="{% url pledge work_id=work.id %}">
-        {% csrf_token %}
-	{{ form.non_field_errors }}
-        {{ form.preapproval_amount.errors }}
-        {{ form.preapproval_amount.label_tag }}: {{ form.preapproval_amount }}
-        {{ form.anonymous.errors }}
-        {% comment %}
-        not supported yet; don't display
-        {{ form.anonymous.label_tag }}: {{ form.anonymous }}	
-        {% endcomment %}
-       <input type="submit" value="Pledge" />
-    
-        <ul class="support menu">
-            {% for premium in premiums %}
-            <li class="{% if forloop.first %}first{% else %}{% if forloop.last %}last{% endif %}{% endif %}">
-                <input type="radio" name="premium_id" value="{{premium.id}}" {% ifequal request.REQUEST.premium_id premium.id|stringformat:"s"  %}checked="checked"{% endifequal %}" />
-                    <span class="menu-item-price">${{ premium.amount }}</span>
-                <span class="menu-item-desc">{{ premium.description }}</span>
-            </a></li>
-            {% endfor %}
-         </ul>
-    </form>
+        	<ul class="support menu">
+            	{% for premium in premiums %}
+            	<li class="{% if forloop.first %}first{% else %}{% if forloop.last %}last{% endif %}{% endif %}">
+                	<input type="radio" name="premium_id" value="{{premium.id}}" {% ifequal request.REQUEST.premium_id premium.id|stringformat:"s"  %}checked="checked"{% endifequal %}" />
+                    <span class="menu-item-price">
+                    	${{ premium.amount }}
+                    </span>
+                	<span class="menu-item-desc">
+                		{{ premium.description }}
+                	</span>
+           		</a></li>
+            	{% endfor %}
+         	</ul>
+
+	       <input type="submit" value="Pledge" id="pledgesubmit"/>    
+    	</form>
     </div>
 
 {% endblock %}
diff --git a/frontend/templates/pledge_cancel.html b/frontend/templates/pledge_cancel.html
index 8d0d7748..ed7b68a0 100644
--- a/frontend/templates/pledge_cancel.html
+++ b/frontend/templates/pledge_cancel.html
@@ -1,4 +1,4 @@
-{% extends "basedocumentation.html" %}
+{% extends "basepledge.html" %}
 
 {% block title %}Pledge Cancelled{% endblock %}
 
diff --git a/frontend/templates/pledge_complete.html b/frontend/templates/pledge_complete.html
index 49a59e4a..cda9d933 100644
--- a/frontend/templates/pledge_complete.html
+++ b/frontend/templates/pledge_complete.html
@@ -1,4 +1,4 @@
-{% extends "basedocumentation.html" %}
+{% extends "basepledge.html" %}
 
 {% block title %}Pledge Completed{% endblock %}
 
diff --git a/static/css/campaign.css b/static/css/campaign.css
index 223a9de2..9c665b3b 100755
--- a/static/css/campaign.css
+++ b/static/css/campaign.css
@@ -78,10 +78,10 @@
 #main-container {
   margin-top: 20px;
 }
-#js-leftcol .jsmodule {
+#js-leftcol .jsmodule, .pledge.jsmodule {
   margin-bottom: 10px;
 }
-#js-leftcol .jsmodule.rounded .jsmod-content {
+#js-leftcol .jsmodule.rounded .jsmod-content, .pledge.jsmodule.rounded .jsmod-content {
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border-radius: 20px;
@@ -92,34 +92,41 @@
   border: none;
   margin: 0;
 }
-#js-leftcol .jsmodule.rounded .jsmod-content.active0, #js-leftcol .jsmodule.rounded .jsmod-content.active1 {
+#js-leftcol .jsmodule.rounded .jsmod-content.active0,
+.pledge.jsmodule.rounded .jsmod-content.active0,
+#js-leftcol .jsmodule.rounded .jsmod-content.active1,
+.pledge.jsmodule.rounded .jsmod-content.active1 {
   background: #e35351;
 }
-#js-leftcol .jsmodule.rounded .jsmod-content.active2 {
+#js-leftcol .jsmodule.rounded .jsmod-content.active2, .pledge.jsmodule.rounded .jsmod-content.active2 {
   background: #e18551;
 }
-#js-leftcol .jsmodule.rounded .jsmod-content.active3 {
+#js-leftcol .jsmodule.rounded .jsmod-content.active3, .pledge.jsmodule.rounded .jsmod-content.active3 {
   background: #e5a956;
 }
-#js-leftcol .jsmodule.rounded .jsmod-content.active4 {
+#js-leftcol .jsmodule.rounded .jsmod-content.active4, .pledge.jsmodule.rounded .jsmod-content.active4 {
   background: #efd45e;
 }
-#js-leftcol .jsmodule.rounded .jsmod-content.active5 {
+#js-leftcol .jsmodule.rounded .jsmod-content.active5, .pledge.jsmodule.rounded .jsmod-content.active5 {
   background: #bbcf67;
 }
-#js-leftcol .jsmodule.rounded .jsmod-content.active6 {
+#js-leftcol .jsmodule.rounded .jsmod-content.active6, .pledge.jsmodule.rounded .jsmod-content.active6 {
   background: #8dc63f;
 }
-#js-leftcol .jsmodule.rounded .jsmod-content span {
+#js-leftcol .jsmodule.rounded .jsmod-content span, .pledge.jsmodule.rounded .jsmod-content span {
   display: inline-block;
   vertical-align: middle;
 }
-#js-leftcol .jsmodule.rounded .jsmod-content span.spacer {
+#js-leftcol .jsmodule.rounded .jsmod-content span.spacer, .pledge.jsmodule.rounded .jsmod-content span.spacer {
   visibility: none;
 }
-#js-leftcol .jsmodule.rounded .jsmod-content span.findtheungluers {
+#js-leftcol .jsmodule.rounded .jsmod-content span.findtheungluers, .pledge.jsmodule.rounded .jsmod-content span.findtheungluers {
   cursor: pointer;
 }
+.jsmodule.pledge {
+  float: left;
+  margin-left: 10px;
+}
 .book-detail {
   float: left;
   width: 100%;
diff --git a/static/css/pledge.css b/static/css/pledge.css
new file mode 100644
index 00000000..aaac9569
--- /dev/null
+++ b/static/css/pledge.css
@@ -0,0 +1,98 @@
+/* variables and mixins used in multiple less files go here */
+.header-text {
+  height: 36px;
+  line-height: 36px;
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 13px;
+  letter-spacing: -0.05em;
+}
+.panelborders {
+  border-width: 1px 0px;
+  border-style: solid none;
+  border-color: #FFFFFF;
+}
+.roundedspan {
+  border: 1px solid #d4d4d4;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7px;
+  border-radius: 7px;
+  padding: 1px;
+  color: #fff;
+  margin: 0 8px 0 0;
+  display: inline-block;
+}
+.roundedspan > span {
+  padding: 7px 7px;
+  min-width: 15px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  text-align: center;
+  display: inline-block;
+}
+.roundedspan > span .hovertext {
+  display: none;
+}
+.roundedspan > span:hover .hovertext {
+  display: inline;
+}
+.mediaborder {
+  padding: 5px;
+  border: solid 5px #EDF3F4;
+}
+.google_signup_div {
+  padding: 14px 0;
+}
+.google_signup_div div {
+  height: 24px;
+  line-height: 24px;
+  float: left;
+  padding-left: 5px;
+}
+.google_signup_div img {
+  float: left;
+  height: 24px;
+  width: 24px;
+}
+.actionbuttons {
+  width: auto;
+  height: 36px;
+  line-height: 36px;
+  background: #8dc63f;
+  -moz-border-radius: 32px;
+  -webkit-border-radius: 32px;
+  border-radius: 32px;
+  color: white;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: bold;
+  padding: 0 15px;
+  border: none;
+  margin: 5px 0;
+}
+#content-block .jsmod-content, .book-detail {
+  float: left;
+  width: auto;
+}
+#pledgesubmit {
+  float: right;
+  font-size: 17px;
+  margin: 10px;
+  cursor: pointer;
+}
+.pledge_amount {
+  margin: auto auto 10px 10px;
+  font-size: 17px;
+}
+form {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: solid 2px #d6dde0;
+}
+#id_preapproval_amount {
+  width: 50%;
+  line-height: 30px;
+  font-size: 16px;
+}
diff --git a/static/less/campaign.less b/static/less/campaign.less
index ea48e163..7900ad02 100644
--- a/static/less/campaign.less
+++ b/static/less/campaign.less
@@ -25,7 +25,7 @@
 	margin-top:20px;
 }
 
-#js-leftcol .jsmodule {
+#js-leftcol .jsmodule, .pledge.jsmodule {
 	margin-bottom:10px;
 
 	&.rounded .jsmod-content {
@@ -77,6 +77,11 @@
 		}
 }
 
+.jsmodule.pledge {
+	float: left;
+	margin-left: 10px;
+}
+
 .book-detail {
 	float:left;
 	width:100%;
diff --git a/static/less/pledge.less b/static/less/pledge.less
new file mode 100644
index 00000000..9cb86ff3
--- /dev/null
+++ b/static/less/pledge.less
@@ -0,0 +1,30 @@
+@import "variables.less";
+
+#content-block .jsmod-content, .book-detail {
+	float: left;
+	width: auto;
+}
+
+#pledgesubmit {
+	float: right;
+	font-size: 17px;
+	margin: 10px;
+	cursor: pointer;
+}
+
+.pledge_amount {
+	margin: auto auto 10px 10px;
+	font-size: 17px;
+}
+
+form {
+	margin-top: 10px;
+	padding-top: 10px;
+	border-top: solid 2px @blue-grey;
+}
+
+#id_preapproval_amount {
+	width: 50%;
+	line-height: 30px;
+	font-size: 16px;
+}