moved support button on work page to be more prominent and align better with other icons

frontend/templates/work.html

@@ -71,9 +71,16 @@ jQuery(document).ready(function(){
                         <img src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" /></a>
                     </div>
                     <div class="book-detail-info">
+                      <div class="layout">
                         <h2 class="book-name">{{ work.title }}</h2>
-                        <h3 class="book-author">{{ work.author }}</h3>
+                        <div>
-                        <h3 class="book-year">{{ work.editions.all.0.publication_date }}</h3>
+                          <div class="pubinfo">
+                            <h3 class="book-author">{{ work.author }}</h3>
+                            <h3 class="book-year">{{ work.editions.all.0.publication_date }}</h3>
+					      </div>
+                          {% if status == 'ACTIVE' %}<div class="btn_support"><form action="{% url pledge work_id=work.id %}" method="get"><input type="submit" value="Support"/></form></div>{% endif %}
+					  </div>
+					  </div>
                         <div class="find-book">
                             <label>Find it:</label>
                             <div class="find-link">
@@ -91,7 +98,6 @@ jQuery(document).ready(function(){
                         </div>
                         {% if status == 'ACTIVE' %}
                         <div class="pledged-info"><div class="pledged-group">{% if work.last_campaign.supporters.count == 1 %}One Ungluer has {% else %} {{ work.last_campaign.supporters.count }} Ungluers have {% endif %}pledged ${{ work.last_campaign.current_total }}<br />toward a ${{ work.last_campaign.target }} goal </div><div class="status"><img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" /></div></div>
-                        <div class="btn_support"><form action="{% url pledge work_id=work.id %}" method="get"><input type="submit" value="Support"/></form></div>
                         {% else %}
                         <div class="pledged-info"><div class="pledged-group">
                             {% if wishers == 1 %}
@@ -99,7 +105,7 @@ jQuery(document).ready(function(){
                             {% else %}
                                 {{ wishers }} Ungluers have
                             {% endif %}wished for this Work</div><div class="status"><img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" /></div></div>
-                        <div class="btn_support">
+                        <div class="btn_wishlist">
                             {% if request.user.is_anonymous %}
                                 <div class="create-account">
                                     <span title="{% url work work.id %}">Login to Add</span>

static/css/campaign.css

@@ -107,6 +107,28 @@
   border-top: 1px solid #edf3f4;
   padding: 10px 0;
 }
+.book-detail-info > div.layout {
+  border: none;
+  padding-bottom: 0;
+}
+.book-detail-info > div.layout div.pubinfo {
+  float: left;
+  width: auto;
+}
+.book-detail-info > div.layout div.btn_support {
+  float: right;
+}
+.book-detail-info > div.layout div.btn_support input {
+  background: url("/static/images/btn_bg.png") 0 0 no-repeat;
+  width: 104px;
+  height: 41px;
+  display: block;
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+  border: none;
+  padding: 0;
+}
 .book-detail-info .find-book {
   margin-top: 15px;
 }
@@ -122,24 +144,18 @@
 }
 .book-detail-info .pledged-info {
   padding: 0;
+  position: relative;
 }
 .book-detail-info .pledged-group {
   padding: 10px 40px 10px 0;
   float: left;
 }
 .book-detail-info .status {
-  float: right;
+  position: absolute;
-  margin-top: 11px;
+  top: 50%;
-}
+  right: 0%;
-.book-detail-info .btn_support input {
+  height: 25px;
-  background: url("/static/images/btn_bg.png") 0 0 no-repeat;
+  margin-top: -12px;
-  width: 104px;
-  height: 41px;
-  display: block;
-  color: #fff;
-  font-weight: bold;
-  text-align: center;
-  border: none;
 }
 #tabs {
   border-bottom: 4px solid #6994a3;

static/less/campaign.less

@@ -127,6 +127,31 @@
 		padding:10px 0;
 	}
 	
+	> div.layout {
+		border: none;
+		padding-bottom: 0;
+		
+		div.pubinfo {
+			float: left;
+			width: auto;
+		}
+		
+		div.btn_support {
+			float: right;
+			
+			input {
+				background:url("@{image-base}btn_bg.png") 0 0 no-repeat;
+				width:104px;
+				height:41px;
+				display:block;
+				color:#fff;
+				font-weight:bold;
+				text-align:center;
+				border:none;
+				padding:0;
+			}
+		}
+	}
 	.find-book {
 		margin-top:15px;
 		
@@ -146,6 +171,7 @@
 	
 	.pledged-info {
 		padding:0;
+		position: relative;
 	}
 	
 	.pledged-group {
@@ -154,21 +180,13 @@
 	}
 	
 	.status {
-		float: right;
+		position: absolute;
-		margin-top: 11px;
+		top:50%;
+		right:0%;
+		height: 25px;
+		margin-top: -12px;
 	}
 	
-	.btn_support input {
-		background:url("@{image-base}btn_bg.png") 0 0 no-repeat;
-		width:104px;
-		height:41px;
-		display:block;
-		color:#fff;
-		font-weight:bold;
-		text-align:center;
-		border:none;
-	}
-
 }