fix linter errors
Fix the sorting Save the sorting state Remove unnecessary filter Add support for grid viewpull/1306/head
pthiben
5 years ago
parent
25ab3cabfe
commit
5b1dfc123f
@ -0,0 +1,17 @@
|
|||||||
|
body.serieslist.grid-view div.container-fluid>div>div.col-sm-10:before{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover .badge{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #cc7b19;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0 8px;
|
||||||
|
box-shadow: 0 0 4px rgba(0,0,0,.6);
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.cover{
|
||||||
|
box-shadow: 0 0 4px rgba(0,0,0,.6);
|
||||||
|
}
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
/* This file is part of the Calibre-Web (https://github.com/janeczku/calibre-web)
|
||||||
|
* Copyright (C) 2018 OzzieIsaacs
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
var $list = $("#list").isotope({
|
||||||
|
itemSelector: ".book",
|
||||||
|
layoutMode: "fitRows",
|
||||||
|
getSortData: {
|
||||||
|
title: ".title",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#desc").click(function() {
|
||||||
|
$list.isotope({
|
||||||
|
sortBy: "name",
|
||||||
|
sortAscending: false
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#asc").click(function() {
|
||||||
|
$list.isotope({
|
||||||
|
sortBy: "name",
|
||||||
|
sortAscending: true
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#all").click(function() {
|
||||||
|
// go through all elements and make them visible
|
||||||
|
$(".sortable").each(function() {
|
||||||
|
$(this).show();
|
||||||
|
});
|
||||||
|
// We need to trigger the resize event to have all the grid item to re-align.
|
||||||
|
window.dispatchEvent(new Event('resize'));
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".char").click(function() {
|
||||||
|
var character = this.innerText;
|
||||||
|
$(".sortable").each(function() {
|
||||||
|
if (this.attributes["data-id"].value.charAt(0).toUpperCase() !== character) {
|
||||||
|
$(this).hide();
|
||||||
|
} else {
|
||||||
|
$(this).show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// We need to trigger the resize event to have all the grid item to re-align.
|
||||||
|
window.dispatchEvent(new Event("resize"));
|
||||||
|
});
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
{% extends "layout.html" %}
|
||||||
|
{% block body %}
|
||||||
|
<div class="discover load-more grid-view">
|
||||||
|
<h2 class="{{title}}">{{_(title)}}</h2>
|
||||||
|
|
||||||
|
<div class="filterheader hidden-xs hidden-sm">
|
||||||
|
<button id="asc" class="btn btn-success"><span class="glyphicon glyphicon-sort-by-alphabet"></span></button>
|
||||||
|
<button id="desc" class="btn btn-success"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></button>
|
||||||
|
{% if charlist|length %}
|
||||||
|
<button id="all" class="btn btn-success">{{_('All')}}</button>
|
||||||
|
{% endif %}
|
||||||
|
<div class="btn-group character" role="group">
|
||||||
|
{% for char in charlist%}
|
||||||
|
<button class="btn btn-success char">{{char.char}}</button>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- View selection -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
View <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="update-view" href="#" data-target="series_view" data-view="grid">{{_('Grid')}}</a></li>
|
||||||
|
<li><a class="update-view" href="#" data-target="series_view" data-view="list">{{_('List')}}</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if entries[0] %}
|
||||||
|
<div id="list" class="row">
|
||||||
|
{% for entry in entries %}
|
||||||
|
<div class="col-sm-3 col-lg-2 col-xs-6 book sortable" {% if entry[0].sort %}data-name="{{entry[0].series[0].name}}"{% endif %} data-id="{% if entry[0].series[0].name %}{{entry[0].series[0].name}}{% endif %}">
|
||||||
|
<div class="cover">
|
||||||
|
<a href="{{url_for('web.books_list', data=data, sort='new', book_id=entry[0].series[0].id )}}">
|
||||||
|
<img src="{{ url_for('web.get_cover', book_id=entry[0].id) }}" alt="{{ entry[0].name }}"/>
|
||||||
|
<span class="badge">{{entry.count}}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<a href="{{url_for('web.books_list', data=data, sort='new', book_id=entry[0].series[0].id )}}">
|
||||||
|
<p class="title">{{entry[0].series[0].name|shortentitle}}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
{% block js %}
|
||||||
|
<script src="{{ url_for('static', filename='js/filter_grid.js') }}"></script>
|
||||||
|
{% endblock %}
|
||||||
Loading…
Reference in New Issue