prettifying the pledge page a bit
Andromeda Yelton
parent
5b18d47866
commit
e3d8b12f85
|
|
@ -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 %}
|
||||
|
||||
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "basedocumentation.html" %}
|
||||
{% extends "basepledge.html" %}
|
||||
|
||||
{% block title %}Pledge Cancelled{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "basedocumentation.html" %}
|
||||
{% extends "basepledge.html" %}
|
||||
|
||||
{% block title %}Pledge Completed{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue