mirrors/calibre-web
1
0
Fork 0
mirror of https://github.com/janeczku/calibre-web synced 2026-10-12 19:11:41 +00:00
Code Issues Releases Wiki Activity

Shelf page fixed

Browse Source
This commit is contained in:
Ozzie Isaacs
2026-08-15 16:06:11 +02:00
parent 17c2af91df
commit ebe15ac613
2 changed files with 113 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cps/static/css/caliBlur.css
+91 -67
View File
@@ -3493,31 +3493,85 @@ body.shelf-down .btn-group button#btnGroupDrop1 {
-webkit-font-smoothing: antialiased
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-controls {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-action-row,
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-toolbar-row {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
position: relative;
z-index: 1
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-action-row {
justify-content: space-between
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group {
position: fixed;
top: 60px;
right: 0
margin-left: auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-toolbar-row {
justify-content: space-between;
align-items: center
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-toolbar-row > .filterheader {
flex: 1 1 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
overflow-x: auto;
white-space: nowrap
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [data-target="#DeleteShelfDialog"], body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=edit], body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=order] {
float: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
min-width: 0;
border-radius: 4px;
background: rgba(0, 0, 0, .2);
color: #fff;
overflow: visible;
padding: 8px 14px;
margin: 0;
font-size: 13px;
line-height: 1.4
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [data-target="#DeleteShelfDialog"] {
position: relative;
float: right;
width: 50px;
height: 60px;
border-radius: 0;
background: 0 0;
color: transparent;
overflow: hidden;
padding: 6px 11px
width: auto;
height: auto;
border-radius: 4px;
background: rgba(206, 61, 42, .8);
color: #fff;
overflow: visible;
padding: 8px 14px
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [data-target="#DeleteShelfDialog"]:before {
content: "\EA6D";
font-family: plex-icons-new, serif;
position: absolute;
color: hsla(0, 0%, 100%, .7);
font-size: 20px;
padding: 6px 0 0 2px
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [data-target="#DeleteShelfDialog"]:before,
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=edit]:before,
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=order]:before {
display: none
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [data-target="#DeleteShelfDialog"]:hover {
@@ -3528,64 +3582,34 @@ body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-b
color: #fff
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=edit] {
position: relative;
float: right;
width: 50px;
height: 60px;
border-radius: 0;
background: 0 0;
color: transparent;
overflow: hidden;
margin: 0;
padding: 6px 13px
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=edit]:before {
content: "\EA5d";
font-family: plex-icons, serif;
position: absolute;
color: hsla(0, 0%, 100%, .7);
font-size: 20px;
padding: 6px 0 0 2px
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=edit]:hover:before {
color: #fff
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=edit]:hover {
background: 0 0
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=edit],
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=order] {
position: relative;
float: right;
width: 50px;
height: 60px;
border-radius: 0;
background: 0 0;
color: transparent;
overflow: hidden;
float: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
min-width: 0;
border-radius: 4px;
background: rgba(0, 0, 0, .2);
color: #fff;
overflow: visible;
margin: 0;
padding: 6px 11px
padding: 8px 14px;
font-size: 13px;
line-height: 1.4
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=edit]:before,
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=order]:before {
content: "\E409";
font-family: Glyphicons Regular, serif;
position: absolute;
color: hsla(0, 0%, 100%, .7);
font-size: 20px;
padding: 6px 0 0 2px
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=order]:hover:before {
color: #fff
display: none
}
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=edit]:hover,
body.shelf > div.container-fluid > div > div.col-sm-10 > div.discover > .shelf-btn-group > [href*=order]:hover {
background: 0 0
background: rgba(0, 0, 0, .3)
}
body > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a:hover {
cps/themes/caliblur/templates/shelf.html
+22 -14
View File
@@ -4,21 +4,28 @@
<div class="discover">
<h2>{{ title|replace(':', ' —')|replace("'", "") }}</h2>
<!--form method="post"--->
{% if current_user.role_download() %}
<a id="shelf_down" href="{{ url_for('shelf.show_simpleshelf', shelf_id=shelf.id) }}" class="btn btn-primary">{{ _('Download') }} </a>
<div class="shelf-controls">
<div class="shelf-action-row">
{% if current_user.is_authenticated %}
{% if (current_user.role_edit_shelfs() and shelf.is_public ) or not shelf.is_public %}
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="shelf-btn-group">
{% if current_user.role_download() %}
<a id="shelf_down" href="{{ url_for('shelf.show_simpleshelf', shelf_id=shelf.id) }}" class="btn btn-default">{{ _('Download') }} </a>
{% endif %}
<div class="btn btn-danger delete-shelf-btn delete-btn-tooltip" data-action="{{url_for('shelf.delete_shelf', shelf_id=shelf.id)}}" id="delete_shelf" data-value="{{ shelf.id }}" data-toggle-two="tooltip" title="{{ _('Delete this Shelf') }}" data-placement="bottom">{{ _('Delete this Shelf') }}</div>
<a id="edit_shelf" href="{{ url_for('shelf.edit_shelf', shelf_id=shelf.id) }}" class="btn btn-default edit-shelf-btn edit-btn-tooltip" data-toggle-two="tooltip" title="{{ _('Edit Shelf Properties') }}" data-placement="bottom">{{ _('Edit Shelf Properties') }} </a>
{% if entries.__len__() %}
<a id="order_shelf" href="{{ url_for('shelf.order_shelf', shelf_id=shelf.id) }}" class="btn btn-default order-shelf-btn order-btn-tooltip" data-toggle-two="tooltip" title="{{ _('Arrange books manually') }}" data-placement="bottom">{{ _('Arrange books manually') }} </a>
{% endif %}
</div>
{% endif %}
{% if current_user.is_authenticated %}
{% if (current_user.role_edit_shelfs() and shelf.is_public ) or not shelf.is_public %}
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="shelf-btn-group">
<div class="btn btn-danger delete-shelf-btn delete-btn-tooltip" data-action="{{url_for('shelf.delete_shelf', shelf_id=shelf.id)}}" id="delete_shelf" data-value="{{ shelf.id }}" data-toggle-two="tooltip" title="{{ _('Delete this Shelf') }}" data-placement="bottom">{{ _('Delete this Shelf') }}</div>
<a id="edit_shelf" href="{{ url_for('shelf.edit_shelf', shelf_id=shelf.id) }}" class="btn btn-primary edit-shelf-btn edit-btn-tooltip" data-toggle-two="tooltip" title="{{ _('Edit Shelf Properties') }}" data-placement="bottom">{{ _('Edit Shelf Properties') }} </a>
{% if entries.__len__() %}
<a id="order_shelf" href="{{ url_for('shelf.order_shelf', shelf_id=shelf.id) }}" class="btn btn-primary order-shelf-btn order-btn-tooltip" data-toggle-two="tooltip" title="{{ _('Arrange books manually') }}" data-placement="bottom">{{ _('Arrange books manually') }} </a>
{% endif %}
</div>
{% endif %}
</div>
{% if current_user.is_authenticated %}
{% if entries.__len__() %}
<button id="toggle_order_shelf" data-alt-text="{% if status == "on" %}{{_('Disable Change order')}}{% else %}{{_('Enable Change order')}}{% endif %}" data-view="shelf" class="btn btn-primary{% if status == 'on' %} dummy">{{ _('Enable Change order') }}{% else%}">{{ _('Disable Change order') }}{% endif %}</button>
<div class="shelf-toolbar-row">
<button id="toggle_order_shelf" data-alt-text="{% if status == "on" %}{{_('Disable Change order')}}{% else %}{{_('Enable Change order')}}{% endif %}" data-view="shelf" class="btn btn-primary{% if status == 'on' %} dummy">{{ _('Enable Change order') }}{% else%}">{{ _('Disable Change order') }}{% endif %}</button>
<div class="filterheader hidden-xs">
<a data-toggle="tooltip" title="{{_('Sort according to book date, newest first')}}" id="new" class="btn btn-primary {% if order == "new" %} active{% endif %}{% if status == "on" %} disabled{% endif %}" href="{{url_for('shelf.show_shelf', shelf_id=shelf.id, sort_param='new')}}"><span class="glyphicon glyphicon-book"></span> <span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-sort-by-order"></span></a>
<a data-toggle="tooltip" title="{{_('Sort according to book date, oldest first')}}" id="old" class="btn btn-primary {% if order == 'old' %} active{% endif %}{% if status == 'on' %} disabled{% endif %}" href="{{url_for('shelf.show_shelf', shelf_id=shelf.id, sort_param='old')}}"><span class="glyphicon glyphicon-book"></span> <span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-sort-by-order-alt"></span></a>
@@ -32,9 +39,10 @@
<a data-toggle="tooltip" title="{{_('Sort according to book added to shelf, oldest first')}}" id="shelf_old" class="btn btn-primary {% if order == 'shelfold' %} active{% endif %}{% if status == 'on' %} disabled{% endif %}" href="{{url_for('shelf.show_shelf', shelf_id=shelf.id, sort_param='shelfold')}}"><span class="glyphicon glyphicon-list"></span><span class="glyphicon glyphicon-sort-by-order-alt"></span></a
>
</div>
</div>
{% endif %}
{% endif %}
{% endif %}
</div>
<div class="row display-flex">
{% for entry in entries %}
<div class="col-sm-3 col-lg-2 col-xs-6 book session">