you can now toggle the supporter page between list and panel views. it's pretty badass.
Andromeda Yelton
parent
cba17474c9
commit
852125ff8a
|
|
@ -52,7 +52,19 @@
|
|||
});
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="/static/css/book_list.css">
|
||||
|
||||
<!-- Beware of fadeIn/fadeOut jQuery animations; they add an inline "display: block"
|
||||
which overrides display: none in the stylesheet. Sneaky! -->
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('#toggle-list').click(function(){
|
||||
$('div.panelview').addClass("listview").removeClass("panelview");
|
||||
});
|
||||
$('#toggle-panel').click(function(){
|
||||
$('div.listview').addClass("panelview").removeClass("listview");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -204,20 +216,15 @@ how do I integrate the your wishlist thing with the tabs thing?
|
|||
<ul class="book-list-view">
|
||||
<li>View As:</li>
|
||||
<li class="view-list">
|
||||
<a href="#view-list">
|
||||
<a href="#" id="toggle-list">
|
||||
<img src="/static/images/booklist/view-list.png" align="view list" title="view list" height="21" width="24" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="view-list">
|
||||
<a href="#view-icon">
|
||||
<a href="#" id="toggle-panel">
|
||||
<img src="/static/images/booklist/view-icon.png" align="view icon" title="view icon" height="22" width="22" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="view-list">
|
||||
<a href="#view-icon-small">
|
||||
<img src="/static/images/booklist/view-small-icon.png" align="view icon small" title="view icon small" height="22" width="22" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-block-content">
|
||||
|
|
@ -239,44 +246,51 @@ how do I integrate the your wishlist thing with the tabs thing?
|
|||
{% for work in wishlist.works.all %}
|
||||
<!-- classify which tab depending on work.last_campaign_status -->
|
||||
{% if work.last_campaign_status == 'SUCCESSFUL' %}
|
||||
<div class="tabs tabs-1">
|
||||
<div class="listview tabs tabs-1">
|
||||
{% else %}{% if work.last_campaign_status == 'ACTIVE' %}
|
||||
<div class="tabs tabs-2">
|
||||
<div class="listview tabs tabs-2">
|
||||
{% else %}
|
||||
<div class="tabs tabs-3">
|
||||
<div class="listview tabs tabs-3">
|
||||
{% endif %}{% endif %}
|
||||
<div class="book-list {% cycle 'row1' 'row2' %}">
|
||||
<div class="book-thumb">
|
||||
<a href="#"><img src="{{ work.cover_image_small }}" alt="Book name" title="book name" /></a>
|
||||
<div class="listview book-list {% cycle 'row1' 'row2' %}">
|
||||
<div class="listview book-thumb">
|
||||
<a href="#"><img src="{{ work.cover_image_thumbnail }}" alt="Book name" title="book name" /></a>
|
||||
</div>
|
||||
<div class="book-name">
|
||||
<span>
|
||||
<a href="{% url work work.id %}">{{ work.title }}</a>
|
||||
</span>
|
||||
<div class="listview book-name">
|
||||
<span>
|
||||
<a href="{% url work work.id %}">{{ work.title }}</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="listview author">
|
||||
<span id="{{ work.author }}">James K. Polk</span>
|
||||
</div>
|
||||
{% ifequal supporter request.user %}
|
||||
<div class="remove-wishlist">
|
||||
<div class="listview remove-wishlist">
|
||||
<span id="{{ work.id }}">Remove from Wishlist</span>
|
||||
</div>
|
||||
{% else %}{% if work in shared_works %}
|
||||
<div>
|
||||
<div class="listview on-wishlist">
|
||||
<span>On Your Wishlist!</span>
|
||||
</div>
|
||||
{% else %}{% if request.user.is_anonymous %}
|
||||
<div class="create-account">
|
||||
<div class="listview create-account">
|
||||
<span>Add to Wishlist</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="add-wishlist">
|
||||
<div class="listview add-wishlist">
|
||||
<span id="{{ work.editions.all.0.googlebooks_id }}">Add to Wishlist</span>
|
||||
</div>
|
||||
{% endif %}{% endif %}{% endifequal %}
|
||||
<div class="booklist-status">
|
||||
<span class="booklist-status-text">{{ work.last_campaign_status }}</span>
|
||||
<span class="booklist-status-img">
|
||||
<img src="/static/images/icon-book{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="listview booklist-status">
|
||||
<span class="booklist-status-label">Status: </span><span class="booklist-status-text">{{ work.last_campaign_status }}</span>
|
||||
</div>
|
||||
<div class="listview icons">
|
||||
<div class="booklist-status-img">
|
||||
<img src="/static/images/images/icon-book-37by25-4.png" title="book list status" alt="book list status" />
|
||||
</div>
|
||||
<div class="booklist-status-label">100%</div>
|
||||
<div class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></div>
|
||||
</div>
|
||||
<div class="unglue-this none">
|
||||
<div class="unglue-this-inner1">
|
||||
<div class="unglue-this-inner2">
|
||||
|
|
|
|||
|
|
@ -72,9 +72,6 @@ div.book-list.listview div.booklist-status {
|
|||
padding-right: 5px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.booklist-status.listview .booklist-status-img p {
|
||||
display: none;
|
||||
}
|
||||
div.unglue-this a {
|
||||
text-transform: uppercase;
|
||||
color: #3d4e53;
|
||||
|
|
@ -176,9 +173,31 @@ ul.navigation li a:hover, ul.navigation li.active a {
|
|||
}
|
||||
.book-thumb.listview a img {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -50px;
|
||||
/* the excerpt you get looks cooler if you select from the middle, but
|
||||
the popup version doesn't extend past the containing div's boundaries,
|
||||
so the positioned part is cut off.
|
||||
top:-20px;
|
||||
left:-50px;
|
||||
*/
|
||||
|
||||
}
|
||||
.listview.author {
|
||||
display: none;
|
||||
}
|
||||
.listview.icons {
|
||||
float: left;
|
||||
}
|
||||
.listview.icons .booklist-status-img {
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background-color: #fff;
|
||||
margin-top: 4px;
|
||||
height: 37px;
|
||||
}
|
||||
.listview.icons .booklist-status-img img {
|
||||
padding: 5px;
|
||||
}
|
||||
.listview.icons .booklist-status-label, .listview.icons .right_add {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@
|
|||
background-color: #ffffff;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
position: relative;
|
||||
/* might need this for panel hover state; don't want it for nonhover. hm.
|
||||
a {
|
||||
color: @dark-green;
|
||||
|
|
@ -84,7 +85,10 @@
|
|||
padding: 5px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
div.remove-wishlist.panelview {
|
||||
.panelview.remove-wishlist,
|
||||
.panelview.on-wishlist,
|
||||
.panelview.create-account,
|
||||
.panelview.add-wishlist {
|
||||
display: none;
|
||||
}
|
||||
.panelview.book-name, .panelview.author {
|
||||
|
|
@ -101,6 +105,26 @@ div.remove-wishlist.panelview {
|
|||
float: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
.panelview.icons {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 140px;
|
||||
}
|
||||
.panelview.icons .booklist-status-img {
|
||||
float: left;
|
||||
}
|
||||
.panelview.icons .booklist-status-label {
|
||||
position: absolute;
|
||||
color: #8dc63f;
|
||||
padding-left: 5px;
|
||||
left: 40px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.panelview.icons .right_add {
|
||||
float: right;
|
||||
padding: 10px 10px 0 0;
|
||||
width: 24px;
|
||||
}
|
||||
/*2 start*/
|
||||
.greenpanel2 {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
|
|
|
|||
|
|
@ -70,10 +70,6 @@ div.book-list.listview{
|
|||
padding-right:5px;
|
||||
text-transform:capitalize;
|
||||
}
|
||||
|
||||
.booklist-status-img p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.unglue-this {
|
||||
|
|
@ -190,11 +186,32 @@ ul.navigation li a:hover, ul.navigation li.active a {
|
|||
|
||||
img {
|
||||
position:absolute;
|
||||
/* the excerpt you get looks cooler if you select from the middle, but
|
||||
the popup version doesn't extend past the containing div's boundaries,
|
||||
so the positioned part is cut off.
|
||||
top:-20px;
|
||||
left:-50px;
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
.listview.author {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.listview.icons {
|
||||
float: left;
|
||||
.booklist-status-img {
|
||||
.border-radius(4px, 4px, 4px, 4px);
|
||||
background-color: #fff;
|
||||
margin-top: 4px;
|
||||
height: 37px;
|
||||
|
||||
img {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
.booklist-status-label, .right_add {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@
|
|||
background-color: #ffffff;
|
||||
color: @text-blue;
|
||||
border: 5px solid @pale-blue;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
color: @text-blue;
|
||||
|
|
@ -91,8 +92,10 @@
|
|||
*/
|
||||
}
|
||||
|
||||
div.remove-wishlist.panelview {
|
||||
display: none;
|
||||
.panelview {
|
||||
&.remove-wishlist, &.on-wishlist, &.create-account, &.add-wishlist {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.panelview.book-name, .panelview.author {
|
||||
|
|
@ -102,6 +105,7 @@ div.remove-wishlist.panelview {
|
|||
color: #3d4e53;
|
||||
}
|
||||
|
||||
|
||||
.panelview.booklist-status {
|
||||
color: @green;
|
||||
text-align: left;
|
||||
|
|
@ -112,6 +116,30 @@ div.remove-wishlist.panelview {
|
|||
}
|
||||
}
|
||||
|
||||
.panelview.icons {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 140px;
|
||||
|
||||
.booklist-status-img {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.booklist-status-label {
|
||||
position: absolute;
|
||||
// float: left;
|
||||
color: @green;
|
||||
padding-left: 5px;
|
||||
left: 40px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.right_add {
|
||||
float: right;
|
||||
padding:10px 10px 0 0;
|
||||
width:24px;
|
||||
}
|
||||
}
|
||||
|
||||
/*2 start*/
|
||||
|
||||
|
|
|
|||
|
|
@ -112,9 +112,6 @@ div.book-list.listview div.booklist-status {
|
|||
padding-right: 5px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.booklist-status.listview .booklist-status-img p {
|
||||
display: none;
|
||||
}
|
||||
div.unglue-this a {
|
||||
text-transform: uppercase;
|
||||
color: #3d4e53;
|
||||
|
|
@ -266,12 +263,49 @@ ul.navigation li a:hover, ul.navigation li.active a {
|
|||
}
|
||||
.book-thumb.listview a img {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -50px;
|
||||
/* the excerpt you get looks cooler if you select from the middle, but
|
||||
the popup version doesn't extend past the containing div's boundaries,
|
||||
so the positioned part is cut off.
|
||||
top:-20px;
|
||||
left:-50px;
|
||||
*/
|
||||
|
||||
}
|
||||
.listview.author {
|
||||
display: none;
|
||||
}
|
||||
.listview.icons {
|
||||
float: left;
|
||||
}
|
||||
.listview.icons .booklist-status-img {
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background-color: #fff;
|
||||
margin-top: 4px;
|
||||
height: 37px;
|
||||
}
|
||||
.listview.icons .booklist-status-img img {
|
||||
padding: 5px;
|
||||
}
|
||||
.listview.icons .booklist-status-label, .listview.icons .right_add {
|
||||
display: none;
|
||||
}
|
||||
.header-text {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
|
|
@ -342,6 +376,7 @@ ul.navigation li a:hover, ul.navigation li.active a {
|
|||
background-color: #ffffff;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
position: relative;
|
||||
/* might need this for panel hover state; don't want it for nonhover. hm.
|
||||
a {
|
||||
color: @dark-green;
|
||||
|
|
@ -362,7 +397,10 @@ ul.navigation li a:hover, ul.navigation li.active a {
|
|||
padding: 5px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
div.remove-wishlist.panelview {
|
||||
.panelview.remove-wishlist,
|
||||
.panelview.on-wishlist,
|
||||
.panelview.create-account,
|
||||
.panelview.add-wishlist {
|
||||
display: none;
|
||||
}
|
||||
.panelview.book-name, .panelview.author {
|
||||
|
|
@ -379,6 +417,26 @@ div.remove-wishlist.panelview {
|
|||
float: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
.panelview.icons {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 140px;
|
||||
}
|
||||
.panelview.icons .booklist-status-img {
|
||||
float: left;
|
||||
}
|
||||
.panelview.icons .booklist-status-label {
|
||||
position: absolute;
|
||||
color: #8dc63f;
|
||||
padding-left: 5px;
|
||||
left: 40px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.panelview.icons .right_add {
|
||||
float: right;
|
||||
padding: 10px 10px 0 0;
|
||||
width: 24px;
|
||||
}
|
||||
/*2 start*/
|
||||
.greenpanel2 {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
|
|
@ -1585,6 +1643,7 @@ div.content-block-content {
|
|||
background-color: #ffffff;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
position: relative;
|
||||
/* might need this for panel hover state; don't want it for nonhover. hm.
|
||||
a {
|
||||
color: @dark-green;
|
||||
|
|
@ -1605,7 +1664,10 @@ div.content-block-content {
|
|||
padding: 5px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
div.remove-wishlist.panelview {
|
||||
.panelview.remove-wishlist,
|
||||
.panelview.on-wishlist,
|
||||
.panelview.create-account,
|
||||
.panelview.add-wishlist {
|
||||
display: none;
|
||||
}
|
||||
.panelview.book-name, .panelview.author {
|
||||
|
|
@ -1622,6 +1684,26 @@ div.remove-wishlist.panelview {
|
|||
float: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
.panelview.icons {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 140px;
|
||||
}
|
||||
.panelview.icons .booklist-status-img {
|
||||
float: left;
|
||||
}
|
||||
.panelview.icons .booklist-status-label {
|
||||
position: absolute;
|
||||
color: #8dc63f;
|
||||
padding-left: 5px;
|
||||
left: 40px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.panelview.icons .right_add {
|
||||
float: right;
|
||||
padding: 10px 10px 0 0;
|
||||
width: 24px;
|
||||
}
|
||||
/*2 start*/
|
||||
.greenpanel2 {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
<!-- there's stuff we need from here and stuff that's incompatible:
|
||||
<link href="css/layout.css" rel="stylesheet" type="text/css" /> -->
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/sitewide.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/supporter_layout.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/book_list.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/book_panel.css" />
|
||||
<link type="text/css" rel="stylesheet" href="css/sitewide.css" />
|
||||
<link type="text/css" rel="stylesheet" href="css/supporter_layout.css" />
|
||||
<link type="text/css" rel="stylesheet" href="css/book_list.css" />
|
||||
<link type="text/css" rel="stylesheet" href="css/book_panel.css" />
|
||||
|
||||
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
|
||||
|
||||
|
|
@ -51,13 +51,13 @@ $(document).ready(function(){
|
|||
</div>
|
||||
<div class="listview booklist-status">
|
||||
<span class="booklist-status-label">Status: </span><span class="booklist-status-text">Active</span>
|
||||
<!-- images differ for list and panel; need to deal. maybe can use smaller version in rounded-corner pale-background div? -->
|
||||
<!-- also this span is not nested in the panel view but is in list. how to deal? -->
|
||||
<span class="booklist-status-img">
|
||||
</div>
|
||||
<div class="listview icons">
|
||||
<div class="booklist-status-img">
|
||||
<img src="images/images/icon-book-37by25-4.png" title="book list status" alt="book list status" />
|
||||
<p>100%</p>
|
||||
<p class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="booklist-status-label">100%</div>
|
||||
<div class="right_add"><img src="images/book-panel/add_gray.png" border="0" /></div>
|
||||
</div>
|
||||
<div class="listview unglue-this none">
|
||||
<div class="listview unglue-this-inner1">
|
||||
|
|
|
|||
Loading…
Reference in New Issue