Merge pull request #50 from EbookFoundation/styleboys

Styleboys
pull/51/head
Nicholas Antonov 2018-01-30 16:41:40 -05:00 committed by GitHub
commit 156f21b02c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 247 additions and 566 deletions

View File

@ -22,73 +22,19 @@
<link href="{% sass_src 'scss/bookview.scss' %}" rel="stylesheet" type="text/css" /> <link href="{% sass_src 'scss/bookview.scss' %}" rel="stylesheet" type="text/css" />
{% endblock %} {% 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 %} {% block content %}
{% purchased %}
{% lib_acqs %}
{% with work.last_campaign_status as status %}
{% with work.id as work_id %} {% with work.id as work_id %}
<div id="main-container" itemscope itemtype="http://schema.org/Book"> <div class="wrapper">
<div class="js-main"> <div class="bookImage">
<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 %} {% if work.uses_google_cover %}
<div class="book-cover" id="book-detail-img">
<a href="{{ work.googlebooks_url }}"> <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> <img src="{{ work.cover_image_thumbnail }}" alt="Find {{ work.title }} at Google Books" title="Find {{ work.title }} at Google Books" width="131" height="192" />
</div> </a>
{% else %} {% 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" /> <img itemprop="image" src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" />
</div>
{% endif %} {% endif %}
<div class="book-detail-info"> </div>
<div class="bookDescription">
<div class="layout"> <div class="layout">
<h2 class="book-name" itemprop="name">{{ work.title }}</h2> <h2 class="book-name" itemprop="name">{{ work.title }}</h2>
<div> <div>
@ -110,119 +56,22 @@
</div> </div>
</div> </div>
</div> </div>
<div itemprop="description">
{% if status == 'ACTIVE' %} {% if status == 'ACTIVE' %}
{% if work.last_campaign.type != 3 %} {% if work.last_campaign.type != 3 %}
<div class="thermometer" title="{{ work.percent_of_goal }}% of goal"> {{ work.last_campaign.description|safe }}
<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 %} {% else %}
<span>{{ work.last_campaign.supporters_count }}</span> ungluers {{ work.description|safe }}
{% endif %} {% endif %}
{% if work.last_campaign.type == 3 %} {% elif work.description %}
<br /> {{ work.description|safe }}
{% if work.last_campaign.anon_count == 1 %}
<span>1</span> other
{% else %} {% else %}
<span>{{ work.last_campaign.anon_count }}</span> others {{ work.last_campaign.description|safe }}
{% endif %}
{% endif %} {% endif %}
</div> </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>
<div class="bookSidebar">
<div class="book-sidebar-item">
<div class="btn_wishlist" id="wishlist_actions"> <div class="btn_wishlist" id="wishlist_actions">
{% if request.user.is_anonymous %} {% if request.user.is_anonymous %}
<div class="create-account"> <div class="create-account">
@ -243,74 +92,23 @@
{% endif %} {% endif %}
</div> </div>
</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>
{% get_comment_count for work as comment_count %} <div class="book-sidebar-item">
{% if action == 'editions' %} <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 class="content-block-heading" id="tabs"> <span>LibraryThing</span>
<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> </div>
{% else %} <div class="bookDownload">
<div class="content-block-heading" id="tabs"> <button>Download</button>
<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>
{% endif %} <div class="bookDonate">
<div id="content-block-content"> <button>Donate</button>
<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>
</div> <div class="bookComments">
<div id="tabs-2" class="tabs {% if activetab == '2' %}active{% endif %}"> <h2>Comments</h2>
<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 %} {% render_comment_list for work %}
{% if user.is_authenticated %} {% if user.is_authenticated %}
{% render_comment_form for work %} {% render_comment_form for work %}
@ -319,206 +117,5 @@
{% endif %} {% endif %}
</div> </div>
</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>
</div>
</div>
<div id="js-rightcol">
{% include 'work_action.html' %}
</div>
</div>
</div>
{% endwith %}
{% endwith %} {% endwith %}
{% endblock %} {% endblock %}

View File

@ -68,10 +68,6 @@
} }
} }
.btn_wishlist span {
text-align: right;
}
.find-book label { .find-book label {
float:left; float:left;
line-height:31px; line-height:31px;

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;
} }