further tidying up panel view hover state and making sure it works properly in widget form too

pull/1/head
Andromeda Yelton 2011-12-27 19:17:44 -05:00
parent 5fb28b709f
commit 50aae788c6
9 changed files with 121 additions and 48 deletions

View File

@ -13,7 +13,7 @@
}
</style>
<script src="/static/js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/jquery-1.6.3.min.js" ></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<!-- toggle to panelview state instead of listview default -->
@ -33,7 +33,9 @@
<!--- editions --->
{% if work %}
{% with work.editions.all.0.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}
{% else %}
<p class="classname">No work corresponding to ISBN {{isbn}} available</p>
{% endif %}

View File

@ -1,40 +1,58 @@
<div class="listview tabs {% if status == 'SUCCESSFUL' %}tabs-1{% else %}{% if status == 'ACTIVE' %}tabs-2{% else %}tabs-3{% endif %}{% endif %}">
<div class="thewholebook listview tabs {% if status == 'SUCCESSFUL' %}tabs-1{% else %}{% if status == 'ACTIVE' %}tabs-2{% else %}tabs-3{% endif %}{% endif %}">
<div class="listview book-list">
<div class="listview panelback side2">
<div class="greenpanel2">
<div class="greenpanel_top">
<div class="unglued_white">
{% if work.first_pdf_url or work.first_epub_url %}
<b>AVAILABLE!</b>
{% else %}
{% if status == 'SUCCESSFUL' %}
<b>UNGLUED!</b>
<p><b>On:</b> {{ deadline|date:"M d, Y" }}</p>
<p><b>Raised:</b> {{ work.last_campaign.current_total }}</p>
{% else %}{% if status == 'ACTIVE' %}
<b>UNGLUE IT!</b>
<p><b>${{ work.last_campaign.current_total }}</b> raised</p><p><b>${{ work.last_campaign.target }}</b> needed</p>
<p>by {{ deadline|date:"M d, Y" }}</p>
{% else %}{% if status == 'INITIALIZED' %}
<p>Campaign coming soon!</p>
{% else %}{% if status == 'SUSPENDED' %}
<p>This campaign has been suspended }.</p>
{% else %}{% if status == 'WITHDRAWN' %}
<p>This campaign has been withdrawn.</p>
{% else %}{% if status == 'UNSUCCESSFUL' %}
<p>{{ deadline }}</p>
<p>Watch for a new campaign.</p>
{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}
</div>
<!-- top section: campaign info + optional action button. Varies by campaign status. -->
{% if work.first_pdf_url or work.first_epub_url %}
<div class="read_itbutton">{% if work.first_epub_url %}<a href="{{ work.first_epub_url }}">{% else %}<a href="{{ work.first_pdf_url }}">{% endif %}Read it Now</a></div>
<b>AVAILABLE!</b>
</div>
<div class="read_itbutton">{% if work.first_epub_url %}<a href="{{ work.first_epub_url }}">{% else %}<a href="{{ work.first_pdf_url }}">{% endif %}Read it Now</a></div>
{% else %}{% if status == 'SUCCESSFUL' %}
<b>UNGLUED!</b>
<p><b>On:</b> {{ deadline|date:"M d, Y" }}</p>
<p><b>Raised:</b> {{ work.last_campaign.current_total }}</p>
</div>
<div class="read_itbutton">{% if work.first_epub_url %}<a href="{{ work.first_epub_url }}">{% else %}<a href="{{ work.first_pdf_url }}">{% endif %}Read it Now</a></div>
{% else %}{% if status == 'ACTIVE' %}
<div class="read_itbutton pledge"><a href="/pledge/{{work.id}}">Support</a></div>
{% endif %}{% endif %}
<b>UNGLUE IT!</b>
<p><b>${{ work.last_campaign.current_total }}</b> raised</p><p><b>${{ work.last_campaign.target }}</b> needed</p>
<p>by {{ deadline|date:"M d, Y" }}</p>
</div>
<div class="read_itbutton pledge"><a href="/pledge/{{work.id}}">Support</a></div>
{% else %}{% if status == 'INITIALIZED' %}
<p>Campaign coming soon!</p>
</div>
{% else %}{% if status == 'SUSPENDED' %}
<p>This campaign has been suspended.</p><br /><p>See the <a href="{{faqurl}}">FAQ</a> for details.</p>
</div>
{% else %}{% if status == 'WITHDRAWN' %}
<p>This campaign has been withdrawn.</p><br /><p>See the <a href="{{faqurl}}">FAQ</a> for details.</p>
</div>
{% else %}{% if status == 'UNSUCCESSFUL' %}
<p>{{ deadline }}</p>
<p>Watch for a new campaign.</p>
</div>
{% else %}
<p>No campaign yet.</p><br /><p>But if lots of ungluers wishlist this book, maybe there will be!</p>
</div>
{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}
</div>
<!-- status of book vis-a-vis user's wishlist -->
{% ifequal supporter request.user %}
<div class="moreinfo remove-wishlist">
<a id="{{ work.id }}">Remove This</a>
<span id="{{ work.id }}">Remove This</span>
</div>
{% else %}{% if request.user.is_anonymous %}
<div class="moreinfo create-account">
@ -49,13 +67,18 @@
<span id="{{ googlebooks_id }}">Add&nbsp;to&nbsp;Wishlist</span>
</div>
{% endif %}{% endif %}{% endifequal %}
<!-- bibliographic data -->
<div class="white_text">
<p><a href="{% if work.id %}{% url work work.id %}{% else %}{% url googlebooks work.googlebooks_id %}{% endif %}">{{ work.title }}</a></p>
<p>{{ work.author }}</p>
</div>
<!-- link to work page -->
<div class="moreinfo">
<a href="{% if work.id %}{% url work work.id %}{% else %}{% url googlebooks work.googlebooks_id %}{% endif %}">More Info</a>
<a href="{% if work.id %}{% url work work.id %}{% else %}{% url googlebooks work.googlebooks_id %}{% endif %}" target="_top">More Info</a>
</div>
</div>
</div>
<div class="listview panelfront side1 book-thumb">

View File

@ -5,6 +5,14 @@
<h2>FAQ</h2>
<dl>
<dt>I know a book that should be unglued.</dt>
<dd>Great! Find it in our database (using the search box above) and add it to your wishlist, so we know it should be on our list, too. You can also contact us: <!-- info? --></dd>
<dt>I know a book that should be unglued, and I own its electronic rights.</dt>
<dd>Fabulous! Please refer to the <a href="/stub/rhfaq">Rights Holder FAQ</a> and then contact us.</dd><!-- which contact info? -->
<dt>How much does a book cost?</dt>
<dd>The author or publisher set a price for giving the book to the world. Once you and your fellow ungluers raise enough money to meet that price, the Unglued ebook is available at no charge, for everyone, everywhere!</dd>
@ -12,6 +20,21 @@
<dt>Are the unglued ebooks compatible with my reader?</dt>
<dd>Unglued ebooks are distributed with NO DRM, so they'll work on Kindle, iPad, Kobo, Mac, Windows, Linux... you get the idea. And if the ePub format isn't best for your device, you're free to shift unglued books to a format that works better for you.</dd>
<dt>Why does it say a book's campaign has been suspended or withdrawn?</dt>
<dd>If there is a dispute between Gluejar and the book's rights holder, or if we discover evidence that a book's rights are in dispute after launching a campaign, it may be necessary for us to withdraw or suspend the campaign.</dd>
<dt>If I pledged to a suspended or withdrawn campaign, what happens to my pledge?</dt>
<dd>Your pledge will time out according to its original time limit. If the campaign is resolved and reactivated before your pledge has timed out, your pledge will become active again. If the campaign is not reactivated before your pledge's time limit, your pledge will expire and you will not be charged. As always, you will only be charged if a campaign is successful, within its original time limit.</dd>
<dt>What if I want to change or cancel a pledge?</dt>
<dt>Does Gluejar help to fund self-published books?</dt>
<dd>No.</dd><!-- should we provide pointers to other resources? encourage people to CC-license their own works?-->
</dl>
{% endblock %}

View File

@ -105,6 +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>
{% endif %}
<div class="btn_wishlist">
{% if request.user.is_anonymous %}
<div class="create-account">
@ -120,7 +121,6 @@ jQuery(document).ready(function(){
</div>
{% endif %}{% endif %}
</div>
{% endif %}
</div>
</div>
<!-- needed to put 10px padding on this for supporter page but hurts here. disentangle. -->

View File

@ -157,7 +157,7 @@ div.panelview.side2 {
background-color: #8dc63f;
color: #fff;
position: absolute;
top: -6px;
top: -5px;
left: -10px;
}
.greenpanel_top {
@ -197,6 +197,10 @@ div.panelview.side2 {
.read_itbutton a:hover {
text-decoration: none;
}
.read_itbutton a:hover {
text-decoration: none;
color: #3d4e53;
}
.read_itbutton.pledge {
background-image: url("/static/images/icons/pledgearrow-green.png");
background-repeat: no-repeat;
@ -217,6 +221,10 @@ div.panelview.side2 {
.read_itbutton.pledge a:hover {
text-decoration: none;
}
.read_itbutton.pledge a:hover {
text-decoration: none;
color: #3d4e53;
}
.read_itbutton_fail {
width: 118px;
height: 35px;
@ -269,7 +277,7 @@ div.panelview.side2 {
.Unglue_itbutton a:hover {
text-decoration: none;
}
.moreinfo.add-wishlist {
.moreinfo.add-wishlist, .moreinfo.create-account {
width: 120px;
height: 30px;
padding: 0px;
@ -283,7 +291,10 @@ div.panelview.side2 {
background: url("/static/images/book-panel/add_wish_icon.png") no-repeat left center;
padding-right: 0;
}
.moreinfo.add-wishlist a, .moreinfo.add-wishlist span {
.moreinfo.add-wishlist a,
.moreinfo.create-account a,
.moreinfo.add-wishlist span,
.moreinfo.create-account span {
line-height: 30px;
font-size: 11px;
background-repeat: no-repeat;
@ -294,7 +305,10 @@ div.panelview.side2 {
padding: 0 5px 0 21px;
color: #FFF;
}
.moreinfo.add-wishlist a:hover, .moreinfo.add-wishlist span:hover {
.moreinfo.add-wishlist a:hover,
.moreinfo.create-account a:hover,
.moreinfo.add-wishlist span:hover,
.moreinfo.create-account span:hover {
text-decoration: none;
color: #3d4e53;
}
@ -388,6 +402,7 @@ div.panelview.side2 {
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
background: url("/static/images/book-panel/more_icon.png") no-repeat left center;
cursor: pointer;
}
.moreinfo a, .moreinfo span {
line-height: 30px;

View File

@ -109,7 +109,7 @@
}
.book-detail-info > div.layout {
border: none;
padding-bottom: 0;
padding: 0;
}
.book-detail-info > div.layout div.pubinfo {
float: left;
@ -130,6 +130,9 @@
padding: 0;
cursor: pointer;
}
.book-detail-info .btn_wishlist span {
text-align: right;
}
.book-detail-info .find-book {
margin-top: 15px;
}
@ -369,10 +372,7 @@ a {
.remove-wishlist,
.on-wishlist,
.create-account {
margin-right: 10px;
padding-right: 10px;
width: 136px;
float: left;
float: right;
cursor: pointer;
}
.add-wishlist span,

View File

@ -9,7 +9,7 @@ $j(document).ready(function() {
if (!gb_id) return;
jQuery.post('/wishlist/', {'googlebooks_id': gb_id}, function(data) {
span.fadeOut();
var newSpan = $j('<span class="on-wishlist">On Your Wishlist!</span>').hide();
var newSpan = $j('<span class="on-wishlist">On Wishlist!</span>').hide();
span.replaceWith(newSpan);
newSpan.fadeIn('slow');
newSpan.removeAttr("id");
@ -22,7 +22,7 @@ $j(document).ready(function() {
var span = $j(element).find("span");
var work_id = span.attr('id')
jQuery.post('/wishlist/', {'remove_work_id': work_id}, function(data) {
var book = $j(element).parent();
var book = $j(element).closest('.thewholebook');
book.fadeOut();
});
});

View File

@ -196,7 +196,7 @@ div.panelview.side2 {
background-color: @green;
color: #fff;
position:absolute;
top:-6px;
top:-5px;
left:-10px;
}
@ -218,12 +218,16 @@ div.panelview.side2 {
a {
.readit_inner(30px, 40px);
background: url("@{image-base}book-panel/book_icon.png") no-repeat 10% center;
&:hover { .panelhoverlink; }
}
&.pledge {
a {
.readit_inner(25px, 35px);
background: none;
&:hover { .panelhoverlink; }
}
background-image: url("@{image-base}icons/pledgearrow-green.png");
@ -250,7 +254,7 @@ div.panelview.side2 {
}
}
.moreinfo.add-wishlist {
.moreinfo.add-wishlist, .moreinfo.create-account {
.banners(5px);
background: url("@{image-base}book-panel/add_wish_icon.png") no-repeat left center;
padding-right:0;
@ -291,6 +295,7 @@ div.panelview.side2 {
.moreinfo {
.banners(0);
background: url("@{image-base}book-panel/more_icon.png") no-repeat left center;
cursor: pointer;
> div {
.height(30px);

View File

@ -129,7 +129,7 @@
> div.layout {
border: none;
padding-bottom: 0;
padding: 0;
div.pubinfo {
float: left;
@ -153,6 +153,11 @@
}
}
}
.btn_wishlist span {
text-align: right;
}
.find-book {
margin-top:15px;
@ -377,10 +382,10 @@ ul.support li {
a{ color:#3d4e53; font-size:12px;}
.add-wishlist, &.remove-wishlist, &.on-wishlist, &.create-account {
margin-right: 10px;
padding-right: 10px;
width: 136px;
float: left;
//margin-right: 10px;
//padding-right: 10px;
//width: 136px;
float: right;
cursor: pointer;
span {