improving gradient

pull/1/head
Andromeda Yelton 2013-02-07 14:10:00 -05:00
parent cf58570c2e
commit a060cf0f51
5 changed files with 29 additions and 12 deletions

View File

@ -96,10 +96,16 @@ $j(document).ready(function(){
{% ifequal status 'ACTIVE' %} {% ifequal status 'ACTIVE' %}
<div class="thermometer"> <div class="thermometer">
<div class="cover" style="width:{% widthratio work.percent_of_goal 100 298 %}px;"> <div class="cover" style="width: {{ cover_width }}%;">
</div> </div>
</div> </div>
<div class="pledged-info noborder"> <div class="pledged-info noborder">
<div class="campaign-status-info">
<span>${{ work.last_campaign.current_total|floatformat:0|intcomma }}</span> pledged
</div>
<div class="campaign-status-info">
<span>${{ work.last_campaign.target|floatformat:0|intcomma }}</span> goal
</div>
<div class="campaign-status-info"> <div class="campaign-status-info">
{% if work.last_campaign.supporters_count == 1 %} {% if work.last_campaign.supporters_count == 1 %}
<span>1</span> ungluer <span>1</span> ungluer
@ -107,12 +113,6 @@ $j(document).ready(function(){
<span> {{ work.last_campaign.supporters_count }}</span> ungluers <span> {{ work.last_campaign.supporters_count }}</span> ungluers
{% endif %} {% endif %}
</div> </div>
<div class="campaign-status-info">
<span>${{ work.last_campaign.current_total|floatformat:0|intcomma }}</span> pledged
</div>
<div class="campaign-status-info">
<span>${{ work.last_campaign.target|floatformat:0|intcomma }}</span> goal
</div>
<div class="campaign-status-info"> <div class="campaign-status-info">
<span>{{ countdown }}</span> to go <span>{{ countdown }}</span> to go
</div> </div>

View File

@ -162,6 +162,7 @@ def work(request, work_id, action='display'):
logger.info("pledged: {0}".format(pledged)) logger.info("pledged: {0}".format(pledged))
countdown = "" countdown = ""
cover_width = 0
try: try:
assert not (work.last_campaign_status() == 'ACTIVE' and work.first_ebook()) assert not (work.last_campaign_status() == 'ACTIVE' and work.first_ebook())
@ -188,6 +189,11 @@ def work(request, work_id, action='display'):
countdown = "%s minutes" % str(time_remaining.seconds/60 + 1) countdown = "%s minutes" % str(time_remaining.seconds/60 + 1)
else: else:
countdown = "Seconds" countdown = "Seconds"
if work.percent_of_goal() < 100:
cover_width = 100 - work.percent_of_goal()
else:
cover_width = 0
if action == 'preview': if action == 'preview':
work.last_campaign_status = 'ACTIVE' work.last_campaign_status = 'ACTIVE'
@ -251,6 +257,7 @@ def work(request, work_id, action='display'):
'claimstatus': claimstatus, 'claimstatus': claimstatus,
'rights_holder_name': rights_holder_name, 'rights_holder_name': rights_holder_name,
'countdown': countdown, 'countdown': countdown,
'cover_width': cover_width
}) })
def new_edition(request, work_id, edition_id, by=None): def new_edition(request, work_id, edition_id, by=None):

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -109,8 +109,8 @@
position: relative; position: relative;
/* looks better if we start the gradient a little closer to the success color */ /* looks better if we start the gradient a little closer to the success color */
@greener-than-alert: #DC5D4E; @greener-than-alert: #CF6944;
background: -webkit-gradient(linear, left top, right top, from(@call-to-action), to(@greener-than-alert)); background: -webkit-gradient(linear, left top, right top, from(@call-to-action), to(@greener-than-alert));
background: -webkit-linear-gradient(left, @greener-than-alert, @call-to-action); background: -webkit-linear-gradient(left, @greener-than-alert, @call-to-action);
background: -moz-linear-gradient(left, @greener-than-alert, @call-to-action); background: -moz-linear-gradient(left, @greener-than-alert, @call-to-action);
@ -124,7 +124,17 @@
&.successful { &.successful {
border-color: @bright-blue; border-color: @bright-blue;
background: @pale-blue; background: @pale-blue;
} }
.cover {
position: absolute;
right: 0;
.border-radius(0, 10px, 10px, 0);
width: 50px;
height: 14px;
margin-top: -7px;
background: lighten(@blue-grey, 10%);
}
} }
.status { .status {