Add book side bar

pull/48/head
jonahmania 2018-01-30 13:02:49 -05:00
parent 72ed2c2804
commit 6924640596
5 changed files with 114 additions and 76 deletions

View File

@ -23,6 +23,7 @@
{% endblock %}
{% block content %}
{% with work.id as work_id %}
<div class="wrapper">
<div class="bookImage">
{% if work.uses_google_cover %}
@ -74,17 +75,50 @@
</div>
<div class="bookSidebar">
<div>
Favorite
<div class="btn_wishlist" id="wishlist_actions">
{% if request.user.is_anonymous %}
<div class="create-account">
<span title="{% url 'work' work_id %}">Login to Fave</span>
</div>
{% elif request.user.id in work.last_campaign.supporters %}
<div class="add-wishlist">
<span class="on-wishlist">Faved!</span>
</div>
{% elif work in request.user.wishlist.works.all %}
<div class="remove-wishlist-workpage">
<span id="w{{ work_id }}">Remove from My Faves</span>
</div>
{% else %}
<div class="add-wishlist">
<span class="work_id" id="w{{ work_id }}">Add to My Faves</span>
</div>
{% endif %}
</div>
</div>
<div>
GoodReads
<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" alt="Find on GoodReads" /></a>
<span>GoodReads</span>
</div>
<div>
LibraryThing
<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" alt="Find on LibraryThing" /></a>
<span>LibraryThing</span>
</div>
<div class="bookDownload">
<button>Download</button>
</div>
<div class="bookDonate">
<button>Donate</button>
</div>
</div>
<div class="bookComments">
<h2>Comments</h2>
{% render_comment_list for work %}
{% if user.is_authenticated %}
{% render_comment_form for work %}
{% else %}
<p>You must be <a href="{% url 'superlogin' %}?next={{ request.get_full_path|urlencode }}">logged in</a> to comment.</p>
{% endif %}
</div>
</div>
{% endwith %}
{% endblock %}

View File

@ -13,7 +13,7 @@
float: left;
margin-right:10px;
width:151px;
img {
.mediaborder;
}
@ -47,7 +47,7 @@
font-weight:normal;
color:@link-color;
}
> div {
width:100%;
clear:both;
@ -56,50 +56,46 @@
border-top:1px solid @pale-blue;
padding:10px 0;
}
> div.layout {
border: none;
padding: 0;
div.pubinfo {
float: left;
width: auto;
padding-bottom: 7px;
}
}
}
.btn_wishlist span {
text-align: right;
}
.find-book label {
float:left;
line-height:31px;
}
.find-link {
float:right;
img {
padding: 2px;
.one-border-radius(5px);
}
}
.pledged-info {
padding:10px 0;
position: relative;
&.noborder {
border-top: none;
padding-top: 0;
}
.campaign-status-info {
float: left;
width: 50%;
margin-top: @font-size-default;
span {
font-size: @font-size-larger;
color: @medium-blue;
@ -107,7 +103,7 @@
}
}
}
.thermometer {
.one-border-radius(10px);
border: solid 2px @blue-grey;
@ -118,22 +114,22 @@
/* looks better if we start the gradient a little closer to the success color */
@greener-than-alert: #CF6944;
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: -moz-linear-gradient(left, @greener-than-alert, @call-to-action);
background: -ms-linear-gradient(left, @greener-than-alert, @call-to-action);
background: -o-linear-gradient(left, @greener-than-alert, @call-to-action);
background: linear-gradient(left, @greener-than-alert, @call-to-action);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@alert', endColorstr='@call-to-action'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='@alert', endColorstr='@call-to-action')"; /* IE8+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@alert', endColorstr='@call-to-action'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='@alert', endColorstr='@call-to-action')"; /* IE8+ */
&.successful {
border-color: @bright-blue;
background: @pale-blue;
}
.cover {
position: absolute;
right: 0;
@ -143,11 +139,11 @@
margin-top: -7px;
background: lighten(@blue-grey, 10%);
}
span {
display: none;
}
&:hover span {
display: block;
position: absolute;
@ -166,7 +162,7 @@
span.explanation{
display: none;
}
&:hover span.explanation {
display: block;
position: absolute;
@ -181,7 +177,7 @@
.one-border-radius(10px);
padding: 5px;
}
}
.status {
position: absolute;
@ -190,5 +186,5 @@
height: 25px;
margin-top: -12px;
}
}
}

View File

@ -24,7 +24,7 @@
border:none;
margin:0;
line-height: 16px;
/* Bubble in upper left looks different depending on campaign status */
&.ACTIVE {
background: @green;
@ -33,7 +33,7 @@
font-weight: normal;
line-height: 20px;
}
&.No.campaign.yet {
background: @orange;
color: white;
@ -42,15 +42,15 @@
span {
display: inline-block;
vertical-align: middle;
&.spacer {
visibility: none;
}
}
&.findtheungluers {
cursor: pointer;
}
}
}
}
}
@ -60,7 +60,7 @@
}
#js-slide .jsmodule {
width: 660px !important;
width: 660px !important;
}
#js-search {
@ -74,14 +74,14 @@
text-align: left;
font-weight: normal;
font-size: @font-size-default;
> li {
margin-bottom: 14px;
}
.errorlist {
margin-top: 7px;
margin-top: 7px;
li {
width: auto;
height: auto;
@ -98,7 +98,7 @@
width:470px;
margin:0 10px;
div#content-block {
div#content-block {
background: none;
padding:0;
}
@ -113,13 +113,13 @@
.add-wishlist, .add-wishlist-workpage, &.remove-wishlist-workpage, .remove-wishlist, &.on-wishlist, &.create-account {
float: right;
cursor: pointer;
span {
font-weight:normal;
color:@text-blue;
text-transform: none;
padding-left:20px;
&.on-wishlist {
background:url("@{image-base}checkmark_small.png") left center no-repeat;
cursor: default;
@ -138,15 +138,15 @@
/* Center - tabs and content below them */
div#content-block-content {
padding-left: 5px;
a {
color: @medium-blue;
}
#tabs-1 img {
.mediaborder;
}
#tabs-3 {
margin-left: -5px;
}
@ -154,15 +154,15 @@ div#content-block-content {
.tabs-content {
padding-right: 5px;
iframe {
.mediaborder;
}
form {
margin-left: -5px;
}
.clearfix {
margin-bottom: 10px;
border-bottom: 2px solid @blue-grey;
@ -179,12 +179,12 @@ div#content-block-content {
.work_supporter_avatar {
float: left;
margin-right: 5px;
img {
.one-border-radius(5px);
}
}
.work_supporter_name {
.height(50px);
float: left;
@ -197,13 +197,13 @@ div#content-block-content {
min-width: 235px;
float: left;
}
.show_supporter_contact_form
.show_supporter_contact_form
{
display:block;
margin-left: 5px;
float: right;
}
.supporter_contact_form
.supporter_contact_form
{
display:none;
margin-left: 5px;
@ -243,24 +243,24 @@ div#content-block-content {
margin-left: -5px;
}
.editions {
.editions {
div {
float:left;
padding-bottom: 5px;
margin-bottom: 5px;
}
.image {
width: 60px;
overflow: hidden;
}
.metadata {
.metadata {
display:block;
overflow: hidden;
margin-left: 5px;
}
a:hover {
text-decoration: underline;
}
@ -273,7 +273,7 @@ div#content-block-content {
.show_more_edition {
text-align: right;
&:hover {
text-decoration: underline;
}
@ -283,7 +283,7 @@ div#content-block-content {
display:none;
clear: both;
padding-bottom: 10px;
padding-left: 60px;
padding-left: 60px;
}
.more_ebooks {
@ -300,7 +300,7 @@ div#content-block-content {
.add-wishlist, .on-wishlist, .create-account {
float: none;
}
.on-wishlist {
margin-left: 20px;
}
@ -310,7 +310,7 @@ div#content-block-content {
float:right;
width:235px;
margin-bottom: 20px;
h3.jsmod-title {
background:@medium-blue-grey;
.one-border-radius(10px);
@ -320,7 +320,7 @@ div#content-block-content {
font-size: @font-size-larger;
margin:0 0 10px 0;
color: white;
span {
padding:0;
color:#fff;
@ -331,11 +331,11 @@ div#content-block-content {
.jsmodule {
margin-bottom:10px;
a:hover {
text-decoration: none;
}
}
}
}
#pledge-rightcol {
@ -346,7 +346,7 @@ div#content-block-content {
border:1px solid @blue-grey;
.one-border-radius(10px);
padding:10px;
}
}
#widgetcode {
display: none;
@ -366,18 +366,18 @@ ul.support li {
&.last {
border-bottom: none;
}
span {
display:block;
padding-right:10px;
&.menu-item-price {
&.menu-item-price {
font-size: @font-size-header;
float: left;
display: inline;
margin-bottom: 3px;
}
&.menu-item-desc {
float: none;
clear: both;
@ -386,7 +386,7 @@ ul.support li {
line-height: @font-size-larger*1.3;
}
}
&:hover {
color: #fff;
background:@call-to-action url("@{image-base}icons/pledgearrow-hover.png") 98% center no-repeat;
@ -417,7 +417,7 @@ ul.support li {
margin: 20px auto;
}
div#libtools {
div#libtools {
border:1px solid @blue-grey;
.one-border-radius(10px);
padding:10px;
@ -436,4 +436,4 @@ div#libtools {
input[type="submit"]{
margin-left: 4em;
}
}
}

View File

@ -32,3 +32,11 @@
grid-column: 1/4;
grid-row: 2;
}
.btn_wishlist span{
text-align: right;
}
.btn_wishlist div{
float: none;
}

View File

@ -1,3 +1,3 @@
* {
color: red ;
}
// color: red ;
}