EbookFoundation
/
regluit
mirror of https://github.com/EbookFoundation/regluit.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #50 from EbookFoundation/styleboys 

Styleboys
pull/51/head
Nicholas Antonov 2018-01-30 16:41:40 -05:00 committed by GitHub
parent 87d5ffff0a 0cdfddf061
commit 156f21b02c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 247 additions and 566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

581
frontend/templates/work.html
View File

@ -5,7 +5,7 @@
{% load purchased %}
{% load lib_acqs %}
{% load sass_tags %}
{% block title %}—
{% block title %}—
{% if work.is_free %}
{{ work.title }} is a Free eBook. {% for fmt in work.formats %}[{{ fmt }}]{% endfor %}
{% else %}
@ -22,503 +22,100 @@
<link href="{% sass_src 'scss/bookview.scss' %}" rel="stylesheet" type="text/css" />
{% endblock %}
{% block extra_js %}
<script type="text/javascript" src="{{ jquery_ui_home }}"></script>
<script type="text/javascript" src="/static/js/wishlist.js"></script>
<script type="text/javascript" src="/static/js/tabs4.js"></script>
<script type="text/javascript" src="/static/js/widgets.js"></script>
<script type="text/javascript" src="/static/js/counter.js"></script>
<script type="text/javascript" src="/static/js/embed.js"></script>
{% if user.is_staff or user in work.last_campaign.managers.all %}
{{ kwform.media.js }}
{% endif %}
<!-- needed for DeGruyter seed description hack
makes template vars accessible in JS
-->
<script type="text/javascript">
var numWishers = {{ wishers }};
{% if request.user.id in work.last_campaign.supporters %}
var isSupporter = true;
{% else %}
var isSupporter = false;
{% endif %}
</script>
{% endblock %}
{% block topsection %}
{% if work.last_campaign.status == 'ACTIVE' %}
{% if request.user in work.last_campaign.managers.all %}
<div class="launch_top pale">Hi, {{ request.user.username }}. Since you're a manager for this campaign, you can <a href="{% url 'manage_campaign' id=work.last_campaign.id %}">edit this campaign</a>.</div>
{% endif %}
{% elif not work.user_with_rights %}
{% if request.user.rights_holder.all %}
<div class="launch_top pale">Hi, {{ request.user.username }}. Since you're an authorized Unglue.it rights holder, if you own the worldwide electronic rights to this work, you may claim it through the More... tab. Need help? Check out the <a href="{% url 'rightsholders' %}">rights holder tools page</a>.</div>
{% endif %}
{% elif request.user == work.user_with_rights %}
{% if work.last_campaign.status != 'SUCCESSFUL' %}
<div class="launch_top pale">Hi, {{ request.user.username }}. Since you're a rights holder for this work, you can <a href="{% url 'rightsholders' %}">launch a campaign</a>.</div>
{% endif %}
{% endif %}
{% endblock %}
{% block content %}
{% purchased %}
{% lib_acqs %}
{% with work.last_campaign_status as status %}
{% block content %}
{% with work.id as work_id %}
<div id="main-container" itemscope itemtype="http://schema.org/Book">
<div class="js-main">
<div id="js-leftcol">
{% include "explore.html" %}
</div>
<div id="js-maincol">
<div class="js-maincol-inner">
<div id="content-block">
<div class="book-detail">
{% if work.uses_google_cover %}
<div class="book-cover" id="book-detail-img">
<a href="{{ work.googlebooks_url }}">
<img src="{{ work.cover_image_thumbnail }}" alt="Find {{ work.title }} at Google Books" title="Find {{ work.title }} at Google Books" width="131" height="192" /></a>
</div>
{% else %}
<div id="book-detail-img" class="book-cover" >
<img itemprop="image" src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" />
</div>
{% endif %}
<div class="book-detail-info">
<div class="layout">
<h2 class="book-name" itemprop="name">{{ work.title }}</h2>
<div>
<div class="pubinfo">
<h3 class="book-author">
<span itemprop="author"><a href="{% url 'search' %}?q={{ work.relators.0.author.name|urlencode }}&amp;ty=au" />{{ work.relators.0.name }}</a></span>{% if work.authors.count == 2 %}
and <span itemprop="author"><a href="{% url 'search' %}?q={{ work.relators.1.author.name|urlencode }}&amp;ty=au" />{{ work.relators.1.name }}</a></span>
{% endif %}{% if work.relators.count > 2 %}{% for author in work.relators %}{% if not forloop.first %}, <span itemprop="author"><a href="{% url 'search' %}?q={{ author.author.name|urlencode }}&amp;ty=au" />{{ author.name }}</a></span>{% endif %}{% endfor %}
{% endif %}
</h3>
<h3 class="book-year">
{% if work.last_campaign.publisher %}
<span itemprop="publisher"><a href="{% url 'bypubname_list' work.last_campaign.publisher.name.id %}">{{ work.last_campaign.publisher }}</a></span>
{% endif %}
<span itemprop="datePublished">{{ work.publication_date }}</span>
<meta itemprop="inLanguage" content="work.language" />
<meta itemprop="typicalAgeRange" content="work.age_range" />
</h3>
</div>
</div>
</div>
{% if status == 'ACTIVE' %}
{% if work.last_campaign.type != 3 %}
<div class="thermometer" title="{{ work.percent_of_goal }}% of goal">
<div class="cover" style="width: {{ cover_width }}%;">
</div>
<span>{{ work.percent_of_goal }}% of goal</span>
</div>
{% endif %}
<div class="pledged-info noborder">
<div class="campaign-status-info">
{% if work.last_campaign.type == 1 %}
<span>${{ work.last_campaign.current_total|floatformat:0|intcomma }}</span> pledged
{% endif %}
{% if work.last_campaign.type == 2 %}
current ungluing date:
{% endif %}
{% if work.last_campaign.type == 3 %}
<span>${{ work.last_campaign.current_total|floatformat:0|intcomma }}</span> of thanks from
{% endif %}
</div>
<div class="campaign-status-info explainer">
{% if work.last_campaign.type == 1 %}
<span>${{ work.last_campaign.target|floatformat:0|intcomma }}</span> goal
{% endif %}
{% if work.last_campaign.type == 2 %}
<span class="current_cc_date ">{{ work.last_campaign.cc_date|date:"M j, Y" }}</span>
<span class="explanation">After {{ work.last_campaign.cc_date|date:"M j, Y" }} this book will be available for free to anyone, anywhere. Every purchase before then brings that date closer.</span>
{% endif %}
{% if work.last_campaign.type != 3 %}
</div>
<div class="campaign-status-info">
{% endif %}
{% if work.last_campaign.supporters_count == 1 %}
<span>1</span> ungluer
{% else %}
<span>{{ work.last_campaign.supporters_count }}</span> ungluers
{% endif %}
{% if work.last_campaign.type == 3 %}
<br />
{% if work.last_campaign.anon_count == 1 %}
<span>1</span> other
{% else %}
<span>{{ work.last_campaign.anon_count }}</span> others
{% endif %}
{% endif %}
</div>
{% if work.last_campaign.type == 2 %}
<div class="campaign-status-info">
{% if work.lib_acqs.count == 1 %}
<span>1</span> copy in a library
{% else %}
<span>{{ work.lib_acqs.count }}</span> in libraries
{% endif %}
</div>
{% endif %}
{% if work.last_campaign.type != 3 %}
<div class="campaign-status-info explainer">
{% if work.last_campaign.type == 1 %}
<span>{{ work.last_campaign.countdown }}</span> to go
{% else %}
<span>${{ work.last_campaign.left|floatformat:0|intcomma }}</span> to go
<span class="explanation">${{ work.last_campaign.left|floatformat:0|intcomma }} is the amount it would take to make this ebook free to the world tomorrow.</span>
{% endif %}
</div>
{% endif %}
</div>
{% else %}
{% if status == 'SUCCESSFUL' %}
<div class="thermometer successful">
This campaign succeeded on {{ work.last_campaign.success_date|date:"M j, Y" }}.
</div>
<div class="pledged-info noborder">
<div class="campaign-status-info">
{% if work.last_campaign.supporters_count == 1 %}
<span>1</span> ungluer
{% else %}
<span>{{ work.last_campaign.supporters_count }}</span> ungluers
{% endif %}
</div>
<div class="campaign-status-info">
<span>${{ work.last_campaign.current_total|floatformat:0|intcomma }}</span> raised
</div>
<div class="campaign-status-info">
<span>${{ work.last_campaign.target|floatformat:0|intcomma }}</span> goal
</div>
<div class="campaign-status-info">
<span>Unglued!</span>
</div>
</div>
{% endif %}
<div class="pledged-info">
{% if wishers == 1 %}
1 Ungluer has
{% else %}
{{ wishers }} Ungluers have
{% endif %} Faved this Work
</div>
{% endif %}
<div class="find-book">
<label>Learn more at...</label>
<div class="find-link">
{% if work.googlebooks_id %}
<a id="find-google" href="{{ work.googlebooks_url }}"><img src="/static/images/supporter_icons/googlebooks_square.png" title="Find on Google Books" alt="Find on Google Books" /></a>
{% endif %}
{% if work.first_oclc %}
<a rel="nofollow" id="find-oclc" href="https://www.worldcat.org/oclc/{{ work.first_oclc }}"><img src="/static/images/supporter_icons/worldcat_square.png" title="Find on Worldcat" alt="Find on Worldcat" /></a>
{% endif %}
<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" alt="Find on OpenLibrary" /></a>
<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>
<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>
</div>
</div>
<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>
{% get_comment_count for work as comment_count %}
{% if action == 'editions' %}
<div class="content-block-heading" id="tabs">
<ul class="tabs">
<li class="tabs1"><a href="{% url 'work' work.id %}?tab=1">{% if status == 'ACTIVE' %}Campaign{% else %}Description{% endif %}</a></li>
<li class="tabs2"><a href="{% url 'work' work.id %}?tab=2">Comments {% if comment_count > 0 %}({{ comment_count }}){% endif %}</a></li>
<li class="tabs3" id="supporters"><a href="{% url 'work' work.id %}?tab=3">Ungluers {% if wishers > 0 %}<br />({{ wishers }}){% endif %}</a></li>
<li class="tabs4 active"><a href="#">Editions</a></li>
</ul>
</div>
{% else %}
<div class="content-block-heading" id="tabs">
<ul class="tabs">
<li class="tabs1 {% if activetab == '1' %}active{% endif %}"><a href="#">{% if status == 'ACTIVE' %}Campaign{% else %}Description{% endif %}</a></li>
<li class="tabs2 {% if activetab == '2' %}active{% endif %}"><a href="#">Comments {% if comment_count > 0 %}({{ comment_count }}){% endif %}</a></li>
<li class="tabs3 {% if activetab == '3' %}active{% endif %}" id="supporters"><a href="#">Ungluers {% if wishers > 0 %}<br />({{ wishers }}){% endif %}</a></li>
<li class="tabs4 {% if activetab == '4' %}active{% endif %}"><a href="#">More...</a></li>
</ul>
</div>
<div class="wrapper">
<div class="bookImage">
{% if work.uses_google_cover %}
<a href="{{ work.googlebooks_url }}">
<img src="{{ work.cover_image_thumbnail }}" alt="Find {{ work.title }} at Google Books" title="Find {{ work.title }} at Google Books" width="131" height="192" />
</a>
{% else %}
<img itemprop="image" src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" />
{% endif %}
</div>
<div class="bookDescription">
<div class="layout">
<h2 class="book-name" itemprop="name">{{ work.title }}</h2>
<div>
<div class="pubinfo">
<h3 class="book-author">
<span itemprop="author"><a href="{% url 'search' %}?q={{ work.relators.0.author.name|urlencode }}&amp;ty=au" />{{ work.relators.0.name }}</a></span>{% if work.authors.count == 2 %}
and <span itemprop="author"><a href="{% url 'search' %}?q={{ work.relators.1.author.name|urlencode }}&amp;ty=au" />{{ work.relators.1.name }}</a></span>
{% endif %}{% if work.relators.count > 2 %}{% for author in work.relators %}{% if not forloop.first %}, <span itemprop="author"><a href="{% url 'search' %}?q={{ author.author.name|urlencode }}&amp;ty=au" />{{ author.name }}</a></span>{% endif %}{% endfor %}
{% endif %}
<div id="content-block-content">
<div id="tabs-1" class="tabs {% if activetab == '1' %}active{% endif %}">
<div class="tabs-content">
<div itemprop="description">
{% if status == 'ACTIVE' %}
{% if work.last_campaign.type != 3 %}
{{ work.last_campaign.description|safe }}
{% else %}
{{ work.description|safe }}
{% endif %}
{% elif work.description %}
{{ work.description|safe }}
{% else %}
{{ work.last_campaign.description|safe }}
{% endif %}
</div>
<div>
{% for work_rel in work.works_related_to.all %}
{% if work_rel.from_work.language != 'xx' and work.language != 'xx' %}
<p>
This work is a {{ work_rel.relation }} of <a href="{% url 'work' work_rel.from_work.id %}">{{ work_rel.from_work }}</a>.
</p>
{% endif %}
{% endfor %}
{% for work_rel in work.works_related_from.all %}
{% if work.language != 'xx' and work_rel.to_work.language != 'xx' %}
<p>
<a href="{% url 'work' work_rel.to_work.id %}">{{ work_rel.to_work }}</a> is a {{ work_rel.relation }} of this work.
</p>
{% endif %}
{% endfor %}
{% if work.doab %}
<p>
This book is included in <a href="http://www.doabooks.org/doab?func=search&query=rid%3A{{ work.doab }}">DOAB</a>.
</p>
{% endif %}
{% if work.gtbg %}
<p>
This book is included in <a href="https://www.gutenberg.org/ebooks/{{ work.gtbg }}">Project Gutenberg</a>.
</p>
{% endif %}
</div>
</div>
</div>
<div id="tabs-2" class="tabs {% if activetab == '2' %}active{% endif %}">
<h3>Why {% if work.ebooks.all %}read{% else %}unglue{% endif %} this book? Have your say.</h3>
<div class="tabs-content">
{% 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>
<div id="tabs-3" class="tabs {% if activetab == '3' %}active{% endif %}">
<div class="tabs-content">
{% if request.user.is_staff or request.user in work.last_campaign.managers.all %}
<form id="contact_form" method="POST" action="#" >
{% csrf_token %}
<input type="hidden" name="work" value="{{ work.id }}" />
{% for wish in work.wishes.all reversed %}
{% with wish.wishlist.user as supporter %}
<div class="work_supporter_wide">
<a href="{% url 'supporter' supporter %}">
<span class="work_supporter_avatar">
<img class="user-avatar" src="{{ supporter.profile.avatar_url }}" height="50" width="50" alt="Avatar for {{ supporter }}" title="{{ supporter }}" />
</span>
</a>
<div class="show_supporter_contact_form" >
<img src="/static/images/icons/email.png" title="contact supporter" />
</div>
<div class="info_for_managers">
{{ supporter }}<br />
Wished: {{ wish.created }}<br />
{% if supporter.id in work.last_campaign.supporters %}Pledged!</br />{% endif %}
{% if supporter in work.last_campaign.ungluers.all %}Supported!</br />{% endif %}
</div>
</div>
<div class="supporter_contact_form" ></div>
<input class="supporter_contact_form" type="submit" name="msg_{{supporter.id}}" value="Send Message to {{ supporter.username }}" />
{% endwith %}
{% endfor %}
</form>
{% else %}
{% for wish in work.wishes.all reversed %}
{% with wish.wishlist.user as supporter %}
<div class="work_supporter_nocomment" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href="{% url 'supporter' supporter %}">
<span class="work_supporter_avatar">
<img class="user-avatar" src="{{ supporter.profile.avatar_url }}" height="50" width="50" alt="Avatar for {{ supporter }}" title="{{ supporter }}" />
</span>
<span class="work_supporter_name">{{ supporter }}</span>
</a>
</div>
{% endwith %}
{% endfor %}
{% endif %}
</div>
</div>
<div id="tabs-4" class="tabs {% if activetab == '4' %}active{% endif %}">
<div class="tabs-content">
{% if action == 'display' %}
{% if status == 'ACTIVE' %}
{% if work.last_campaign.type == 1 %}
<h3 class="tabcontent-title">A campaign is running to unglue <i>{{work.title}}</i>!</h3>
<p>The rights holder, {% for claim in work.claim.all %}
{% if claim.status == 'active' %}
{{ claim.rights_holder.rights_holder_name }}
{% endif %}
{% endfor %}
, has agreed to release <i>{{work.title}}</i> to the world as a Creative Commons licensed ebook (<a href="{{ work.last_campaign.license_url }}">{{ work.last_campaign.license }}</a>) if ungluers can join together to raise ${{ work.last_campaign.target|floatformat:0|intcomma }} by {{ work.last_campaign.deadline }}.
You can help!</p>
{% endif %}
{% if work.last_campaign.type == 2 %}
<h3 class="tabcontent-title">A Buy-to-Unglue Campaign is running to unglue <i>{{work.title}}</i>!</h3>
<p>The rights holder, {% for claim in work.claim.all %}
{% if claim.status == 'active' %}
{{ claim.rights_holder.rights_holder_name }}
{% endif %}
{% endfor %}
, has agreed to release <i>{{work.title}}</i> to the world as a Creative Commons licensed ebook (<a href="{{ work.last_campaign.license_url }}">{{ work.last_campaign.license }}</a>) on {{ work.last_campaign.cc_date }}. For every copy that ungluers purchase, that date gets sooner. ${{ work.last_campaign.left|floatformat:0|intcomma }} of sales will unglue the book <i>TODAY</i>.
You can help!</p>
{% endif %}
{% if work.last_campaign.type == 3 %}
<h3 class="tabcontent-title">A Thanks-for-Ungluing Campaign is running to reward the creators of <i>{{work.title}}</i>!</h3>
<p>The rights holder, {% for claim in work.claim.all %}
{% if claim.status == 'active' %}
{{ claim.rights_holder.rights_holder_name }}
{% endif %}
{% endfor %}
, has released <i>{{work.title}}</i> to the world as a Creative Commons licensed ebook (<a href="{{ work.last_campaign.license_url }}">{{ work.last_campaign.license }}</a>) .
You can help us say "Thank You!" so that other creators will do the same.</p>
{% endif %}
<h4>Campaign details: the fine print</h4>
{{ work.last_campaign.details|safe }}
{% endif %}
{% if status == 'SUCCESSFUL' %}
<h3 class="tabcontent-title">A campaign has succeeded to unglue <i>{{work.title}}</i>!</h3>
<p>The rights holder, {% for claim in work.claim.all %}
{% if claim.status == 'active' %}
{{ claim.rights_holder.rights_holder_name }}
{% endif %}
{% endfor %}
, has agreed to release <i>{{work.title}}</i> to the world as a Creative Commons licensed ebook (<a href="{{ work.last_campaign.license_url }}">{{ work.last_campaign.license }}</a>) thanks to the efforts of ungluers like you.</p>
<h4>Campaign details: the fine print</h4>
{{ work.last_campaign.details|safe }}
{% endif %}
{% if status != 'ACTIVE' and status != 'SUCCESSFUL' %}
<h4> Rights Information </h4>
{% if claimstatus == 'one_active' %}
<p>This work has been claimed by {{ rights_holder_name }}.</p>
{% else %}
{% if claimstatus == 'disputed' %}
<p>Rights claims are pending.</p>
{% else %}
{% if claimstatus == 'one_pending' %}
<p>A claim for this work by {{ rights_holder_name }} is pending.</p>
{% else %}
{% if request.user.rights_holder.all.count %}
Is this work yours? Claim it: <br /><br />
<form method="GET" action="{% url 'claim' %}">
{% csrf_token %}
{{ claimform.user }}
{{ claimform.work }}
{{ claimform.rights_holder }}
<input type="submit" name="submit" value="Claim" />
</form><br />
{% else %}
Are you the author or publisher of this work? If so, you can claim it as yours by <a href="{% url 'rightsholders' %}">registering as an Unglue.it rights holder</a>.
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% if work.is_free %}
<h4>Downloads</h4>
<div class="pledged-info">
This work has been downloaded {{ work.download_count }} times via unglue.it ebook links.
<ol>
{% for ebook in work.ebooks.all %}
<li>{{ ebook.download_count }} - {{ ebook.format }} {% if ebook.version_label %} ({{ ebook.version_label }}) {% endif %}({{ ebook.rights }}) at {{ ebook.provider }}. </li>
{% endfor %}
</ol>
</div>
{% if user.is_staff %}
<p>
<a href="{% url 'feature' work.id %}">Feature this work today.</a>
</p>
{% endif %}
{% endif %}
{% if user.is_staff %}
<h4>Related Works</h4>
<div><a href="{% url 'merge' work_id %}">Merge other works into this one</a></div>
{% endif %}
<h4>Keywords</h4>
{% if work.subjects.all.count > 0 %}
<ul id="kw_list">
{% for subject in work.subjects.all %}
<li itemprop="keywords">{{ subject.name }}
{% if user.is_staff or user in work.last_campaign.managers.all %}
<span class="deletebutton" data="{{ subject.name }}">x</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
No keywords yet.
<ul id="kw_list"></ul>
{% endif %}
{% if user_can_edit_work %}
<form method="POST" id="kw_add_form">{% csrf_token %}
{{ kwform.add_kw }}<input type="hidden" name="kw_add" value="true"> <input type="submit" name="kw_add_fake" value="add keyword" id="kw_add_form_submit" />
</form>
{% endif %}
{% endif %}
<h4>Editions</h4>
{% if alert %}
<div class="yikes"><br />{{ alert }}</div>
{% endif %}
{% if user_can_edit_work %}
<div><a href="{% url 'new_edition' work_id edition.id %}">Create a new edition for this work</a><br /><br /></div>
{% endif %}
{% if action == 'editions' %}
{% include 'split.html' %}
{% else %}
{% with work.preferred_edition as edition %}
{% include 'edition_display.html' %}
{% endwith %}
{% if not campaign %}
{% for edition in editions %}
{% if edition != work.preferred_edition %}
{% include 'edition_display.html' %}
{% endif %}
{% endfor %}
{% endif %}
<div><a href="{% url 'work_editions' work_id %}">All editions for this work.</a></div>
{% endif %}
</div>
</div>
</div>
</div>
</h3>
<h3 class="book-year">
{% if work.last_campaign.publisher %}
<span itemprop="publisher"><a href="{% url 'bypubname_list' work.last_campaign.publisher.name.id %}">{{ work.last_campaign.publisher }}</a></span>
{% endif %}
<span itemprop="datePublished">{{ work.publication_date }}</span>
<meta itemprop="inLanguage" content="work.language" />
<meta itemprop="typicalAgeRange" content="work.age_range" />
</h3>
</div>
</div>
</div>
<div id="js-rightcol">
{% include 'work_action.html' %}
<div itemprop="description">
{% if status == 'ACTIVE' %}
{% if work.last_campaign.type != 3 %}
{{ work.last_campaign.description|safe }}
{% else %}
{{ work.description|safe }}
{% endif %}
{% elif work.description %}
{{ work.description|safe }}
{% else %}
{{ work.last_campaign.description|safe }}
{% endif %}
</div>
</div>
<div class="bookSidebar">
<div class="book-sidebar-item">
<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 class="book-sidebar-item">
<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 class="book-sidebar-item">
<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 %}
{% endwith %}
{% endblock %}

54
static/less/book_detail.less
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;
}
}
}

84
static/less/campaign2.less
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;
}
}
}

92
static/scss/bookview.scss
View File

@ -1,3 +1,91 @@
* {
color: pink !important;
}
// color: red !important;
}
@media screen and (max-width: 480px) {
.wrapper {
display: grid;
grid-template-columns: fit-content 1fr 20%;
grid-template-rows: auto auto;
grid-template-areas: "bookImage bookImage bookImage"
"bookSidebar bookSidebar bookSidebar"
"bookDescription bookDescription bookDescription"
"bookComments bookComments bookComments";
}
.bookImage {
display: flex;
justify-content: center;
}
.bookSidebar {
flex-direction: row;
}
.book-sidebar-item {
flex: auto;
}
.book-sidebar-item span {
display: none;
}
.bookDownload {
flex: 100%;
}
.bookDonate {
flex: 100%;
}
}
@media screen and (min-width: 480px) {
.wrapper {
display: grid;
grid-template-columns: fit-content 1fr 20%;
grid-template-rows: auto auto;
grid-template-areas: "bookImage bookDescription bookSidebar"
"bookComments bookComments bookComments";
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}
.bookDescription {
padding-right: 15px;
}
.bookSidebar {
flex-direction: column;
}
}
.bookImage {
grid-area: bookImage;
}
.bookImage div {
float:right;
}
.bookDescription {
grid-area: bookDescription;
}
.bookSidebar {
display: flex;
grid-area: bookSidebar;
}
.bookComments {
grid-area: bookComments;
}
.btn_wishlist span{
text-align: right;
}
//TODO remove me
.btn_wishlist div{
float: none;
}

2
static/scss/global.scss
View File

@ -1,3 +1,3 @@
@import 'settings/settings';
@import 'foundation';
@include foundation-everything;
@include foundation-everything;