NunoSempere/calibre-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Details overhaul (buttons, language, tags)

Browse Source
This commit is contained in:
Jan Broer 2015-10-13 01:21:46 +02:00
parent 288b67d862
commit ec7aafe7f0
2 changed files with 88 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cps/static/css/style.css
View File

@ -17,4 +17,6 @@ a{color: #45b29d}a:hover{color: #444;}
.more-stuff{margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc} .more-stuff{margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc}
.more-stuff>li{margin-bottom: 10px;} .more-stuff>li{margin-bottom: 10px;}
.navbar-collapse.in .navbar-nav{margin: 0;} .navbar-collapse.in .navbar-nav{margin: 0;}
span.glyphicon.glyphicon-tags {padding-right: 5px;} span.glyphicon.glyphicon-tags {padding-right: 5px;color: #999;vertical-align: text-top;}
.book-meta {padding-bottom: 20px;}
.book-meta .tags a {display: inline;}

121
cps/templates/detail.html
View File

@ -9,11 +9,14 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="col-lg-7"> <div class="col-lg-7 book-meta">
<h2>{{entry.title}}</h2> <h2>{{entry.title}}</h2>
<p class="author"><a href="{{url_for('author', name=entry.authors[0].name) }}">{{entry.authors[0].name}}</a></p> <p class="author"><a href="{{url_for('author', name=entry.authors[0].name) }}">{{entry.authors[0].name}}</a>
</p>
{% if entry.ratings.__len__() > 0 %} {% if entry.ratings.__len__() > 0 %}
<div class="rating"> <div class="rating">
<p>
{% for number in range((entry.ratings[0].rating/2)|int(2)) %} {% for number in range((entry.ratings[0].rating/2)|int(2)) %}
<span class="glyphicon glyphicon-star good"></span> <span class="glyphicon glyphicon-star good"></span>
{% if loop.last and loop.index < 5 %} {% if loop.last and loop.index < 5 %}
@ -22,19 +25,32 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</p>
</div> </div>
{% endif %} {% endif %}
{% if entry.series|length > 0 %} {% if entry.series|length > 0 %}
<p>Book {{entry.series_index}} of <a href="{{url_for('series', name=entry.series[0].name)}}">{{entry.series[0].name}}</a></p> <p>Book {{entry.series_index}} of <a href="{{url_for('series', name=entry.series[0].name)}}">{{entry.series[0].name}}</a></p>
{% endif %} {% endif %}
{% if entry.languages.__len__() > 0 %}
<div class="languages">
<p>
<span class="label label-default">language: {{entry.languages[0].lang_code}}</span>
</p>
</div>
{% endif %}
{% if entry.tags|length > 0 %} {% if entry.tags|length > 0 %}
<p><span class="glyphicon glyphicon-tags"></span> <p>
<div class="tags">
<span class="glyphicon glyphicon-tags"></span>
{% for tag in entry.tags %} {% for tag in entry.tags %}
<a href="{{ url_for('category', name=tag.name) }}">{{tag.name}}</a>, <a href="{{ url_for('category', name=tag.name) }}" class="btn btn-xs btn-info" role="button">{{tag.name}}</a>
{%endfor%} {%endfor%}
</div>
</p> </p>
{% endif %} {% endif %}
@ -44,91 +60,82 @@
{% endif %} {% endif %}
{% if g.user.is_authenticated() %} {% if g.user.is_authenticated() %}
<ul class="list-unstyled more-stuff"> <div class="more-stuff">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group" aria-label="Download, send to Kindle, reading">
<div class="btn-group" role="group">
{% if g.user.kindle_mail %} <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<li><a href="{{url_for('send_to_kindle', book_id=entry.id)}}"><div class="btn btn-info"><span class="glyphicon glyphicon-send"></span> Send to Kindle</div></a></li> <span class="glyphicon glyphicon-download"></span> Download
{% endif %} <span class="caret"></span>
<!-- <li>
<span class="glyphicon glyphicon-cloud-download"></span>
{% for format in entry.data %}
<a href="{{ url_for('get_download_link', book_id=entry.id, format=format.format|lower) }}">{{format.format}}</a>,
{%endfor%}
</li> -->
<li>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-download"></span> Download <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
{% for format in entry.data %} {% for format in entry.data %}
<li><a href="{{ url_for('get_download_link', book_id=entry.id, format=format.format|lower) }}">{{format.format}}</a></li> <li><a href="{{ url_for('get_download_link', book_id=entry.id, format=format.format|lower) }}">{{format.format}}</a></li>
{%endfor%} {%endfor%}
</ul> </ul>
</div> </div>
</li> {% if g.user.kindle_mail %}
<a target="_blank" href="{{url_for('send_to_kindle', book_id=entry.id)}}" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-send"></span> Send to Kindle</a>
{% endif %}
<a target="_blank" href="{{url_for('read_book', book_id=entry.id)}}" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-eye-open"></span> Read in browser</a>
<li><a target="_blank" href="{{url_for('read_book', book_id=entry.id)}}"><div class="btn btn-primary"><span class="glyphicon glyphicon-eye-open"></span> Read in Browser</div></a></li> </div>
</div>
</br>
{% if g.user.shelf.all() or g.public_shelfes %} {% if g.user.shelf.all() or g.public_shelfes %}
<li> <div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <div class="btn-group" role="group" aria-label="Add to shelves">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupDrop2" type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-list"></span> Add to shelf <span class="caret"></span> <span class="glyphicon glyphicon-list"></span> Add to shelf
<span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" aria-labelledby="btnGroupDrop2">
{% for shelf in g.user.shelf %} {% for shelf in g.user.shelf %}
{% if not shelf.id in books_shelfs and shelf.is_public != 1 %} {% if not shelf.id in books_shelfs and shelf.is_public != 1 %}
<li><a href="{{ url_for('add_to_shelf', book_id=entry.id, shelf_id=shelf.id) }}">{{shelf.name}}</a></li> <li><a href="{{ url_for('add_to_shelf', book_id=entry.id, shelf_id=shelf.id) }}">{{shelf.name}}</a></li>
{% endif %} {% endif %}
{% endfor %} {%endfor%}
{% for shelf in g.public_shelfes %} {% for shelf in g.public_shelfes %}
{% if not shelf.id in books_shelfs %} {% if not shelf.id in books_shelfs %}
<li><a href="{{ url_for('add_to_shelf', book_id=entry.id, shelf_id=shelf.id) }}">{{shelf.name}}</a></li> <li><a href="{{ url_for('add_to_shelf', book_id=entry.id, shelf_id=shelf.id) }}">{{shelf.name}}</a></li>
{% endif %} {% endif %}
{% endfor %} {%endfor%}
</ul> </ul>
</div> </div>
</li>
{% endif %}
{% if books_shelfs %} {% if books_shelfs %}
<li> <div class="btn-group" role="group" aria-label="Remove from shelves">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-list"></span> Remove from shelf <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
{% for shelf in g.user.shelf %} {% for shelf in g.user.shelf %}
{% if shelf.id in books_shelfs and shelf.is_public != 1 %} {% if shelf.id in books_shelfs and shelf.is_public != 1 %}
<li><a href="{{ url_for('remove_from_shelf', book_id=entry.id, shelf_id=shelf.id) }}">{{shelf.name}}</a></li> <a href="{{ url_for('remove_from_shelf', book_id=entry.id, shelf_id=shelf.id) }}" class="btn btn-sm btn-default" role="button">
<span class="glyphicon glyphicon-remove"></span> {{shelf.name}}
</a>
{% endif %} {% endif %}
{% endfor %} {%endfor%}
{% for shelf in g.public_shelfes %} {% for shelf in g.public_shelfes %}
{% if shelf.id in books_shelfs %} {% if shelf.id in books_shelfs %}
<li><a href="{{ url_for('remove_from_shelf', book_id=entry.id, shelf_id=shelf.id) }}">{{shelf.name}}</a></li> <a href="{{ url_for('remove_from_shelf', book_id=entry.id, shelf_id=shelf.id) }}" class="btn btn-sm btn-default" role="button">
<span class="glyphicon glyphicon-remove"></span> {{shelf.name}}
</a>
{% endif %}
{%endfor%}
{% endif %} {% endif %}
{% endfor %}
</ul>
</div> </div>
</li> </div>
{% endif %} {% endif %}
{% if g.user.role %} {% if g.user.role %}
<li><a href="{{ url_for('edit_book', book_id=entry.id) }}"><div class="btn btn-xs btn-warning"><span class="glyphicon glyphicon-edit"></span> Edit book</div></a></li> </br>
<li><a href="{{ url_for('edit_book', book_id=entry.id) }}"><div class="btn btn-xs btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete book</div></a></li> <div class="btn-toolbar" role="toolbar">
{% endif %} <div class="btn-group" role="group" aria-label="Edit/Delete book">
{% endif %} <a href="{{ url_for('edit_book', book_id=entry.id) }}" class="btn btn-sm btn-warning" role="button"><span class="glyphicon glyphicon-edit"></span> Edit metadata</a>
</ul> <!-- <a href="{{ url_for('edit_book', book_id=entry.id) }}" class="btn btn-sm btn-danger" role="button"><span class="glyphicon glyphicon-trash"></span> Delete</a> -->
</div>
{% endif %}
{% endif %}
</div> </div>
<!-- <p><a href="{{ url_for('edit_book', book_id=entry.id) }}">{{entry.authors[0].name}}: {{entry.title}}</a></p> -->
</div> </div>
</div> </div>
{% endblock %} {% endblock %}