From ebe15ac613b1c4ef80712c424114a30259581f34 Mon Sep 17 00:00:00 2001
From: Ozzie Isaacs <ozzie.fernandez.isaacs@googlemail.com>
Date: Sat, 15 Aug 2026 16:06:11 +0200
Subject: [PATCH] Shelf page fixed

---
 cps/static/css/caliBlur.css              | 158 +++++++++++++----------
 cps/themes/caliblur/templates/shelf.html |  36 ++++--
 2 files changed, 113 insertions(+), 81 deletions(-)

diff --git a/cps/static/css/caliBlur.css b/cps/static/css/caliBlur.css
index ba70f29b8..8c2323345 100644
--- a/cps/static/css/caliBlur.css
+++ b/cps/static/css/caliBlur.css
@@ -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 {
diff --git a/cps/themes/caliblur/templates/shelf.html b/cps/themes/caliblur/templates/shelf.html
index 6f3607c1d..a9b451962 100644
--- a/cps/themes/caliblur/templates/shelf.html
+++ b/cps/themes/caliblur/templates/shelf.html
@@ -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">