Implement mobile UI improvements for Part-DB templates and layouts

Co-authored-by: jbtronics <5410681+jbtronics@users.noreply.github.com>

assets/css/app/layout.css

@@ -64,13 +64,17 @@ body {
         overflow-y: auto;
         /*noinspection W3CssValidation*/
         -webkit-overflow-scrolling: touch;
-        max-height: 100%;
+        max-height: calc(100vh - 56px); /* Better height calculation */
-        opacity: 0.97;
+        background-color: rgba(248, 248, 248, 0.98); /* Semi-transparent background */
-        padding: 7px 15px 50px;
+        backdrop-filter: blur(10px); /* Modern blur effect */
-        margin-top: -10px;
+        padding: 15px 15px 50px;
+        margin-top: 0;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 
         /* Fill window */
-        height: 100%;
+        height: calc(100vh - 56px);
 
         /** Hide scrollbar in Firefox and Edge **/
         -ms-overflow-style: none;
@@ -78,18 +82,45 @@ body {
         overflow: -moz-scrollbars-none;
         /* Use standard version for hiding the scrollbar */
         scrollbar-width: none;
+        
+        /* Add smooth animation */
+        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
     }
 
     #sidebar-container {
         margin-top: 0;
-        padding-top: 5px;
+        padding-top: 0;
-        background-color: #F8F8F8;
+        background: transparent; /* Let the sidebar handle its own background */
+    }
+
+    /* Improve sidebar collapse animation */
+    #sidebar-container.collapse:not(.show) {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+
+    #sidebar-container.collapse.show {
+        transform: translateY(0);
+        opacity: 1;
     }
 
     /* Hide devices menu */
     #treeBox-devices {
         display: none;
     }
+    
+    /* Add a subtle overlay when sidebar is open */
+    body.sidebar-open::before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.1);
+        z-index: 999;
+        pointer-events: none;
+    }
 }
 
 /* Hide scrollbar */

assets/css/app/mobile.css

@@ -0,0 +1,292 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2025 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/************************************
+* Mobile-specific improvements
+*************************************/
+
+/* Mobile-first touch targets and spacing improvements */
+@media (max-width: 768px) {
+    
+    /************************************
+    * Touch targets (minimum 44px)
+    *************************************/
+    .btn {
+        min-height: 44px;
+        padding: 10px 16px;
+    }
+    
+    .btn-sm {
+        min-height: 40px;
+        padding: 8px 12px;
+    }
+    
+    .form-control {
+        min-height: 44px;
+        padding: 10px 12px;
+    }
+    
+    .form-select {
+        min-height: 44px;
+        padding: 10px 12px;
+    }
+    
+    .form-check-input {
+        width: 20px;
+        height: 20px;
+    }
+    
+    /************************************
+    * Form improvements
+    *************************************/
+    .form-group,
+    .mb-3 {
+        margin-bottom: 1.5rem;
+    }
+    
+    label {
+        font-weight: 600;
+        margin-bottom: 8px;
+    }
+    
+    /************************************
+    * CKEditor mobile improvements
+    *************************************/
+    
+    /* Improve CKEditor toolbar layout and button sizes */
+    .ck.ck-toolbar {
+        flex-wrap: wrap !important;
+        padding: 8px !important;
+        border-radius: 8px !important;
+    }
+    
+    .ck.ck-toolbar .ck-toolbar__items {
+        flex-wrap: wrap !important;
+        gap: 4px !important;
+    }
+    
+    .ck.ck-button {
+        min-width: 40px !important;
+        min-height: 40px !important;
+        margin: 2px !important;
+        border-radius: 6px !important;
+    }
+    
+    .ck.ck-dropdown__button {
+        min-width: 40px !important;
+        min-height: 40px !important;
+    }
+    
+    /* Hide less important CKEditor buttons on mobile to reduce clutter */
+    .ck.ck-button[data-cke-tooltip-text*="Strikethrough"],
+    .ck.ck-button[data-cke-tooltip-text*="Subscript"], 
+    .ck.ck-button[data-cke-tooltip-text*="Superscript"],
+    .ck.ck-button[data-cke-tooltip-text*="Remove Format"],
+    .ck.ck-button[data-cke-tooltip-text*="Font Background Color"],
+    .ck.ck-button[data-cke-tooltip-text*="Font Color"],
+    .ck.ck-button[data-cke-tooltip-text*="Special characters"],
+    .ck.ck-button[data-cke-tooltip-text*="Find and replace"],
+    .ck.ck-button[data-cke-tooltip-text*="Highlight"] {
+        display: none !important;
+    }
+    
+    /* Alternative approach using class names if tooltip text doesn't work */
+    .ck.ck-button.ck-button_with-text .ck-button__label {
+        font-size: 12px !important;
+    }
+    
+    .ck.ck-editor__editable {
+        min-height: 120px !important;
+        padding: 12px !important;
+    }
+    
+    /* Improve dropdown panels */
+    .ck.ck-dropdown__panel {
+        max-height: 200px !important;
+        overflow-y: auto !important;
+    }
+    
+    /************************************
+    * Table improvements
+    *************************************/
+    .table-responsive {
+        border: none;
+        -webkit-overflow-scrolling: touch;
+    }
+    
+    /* Better table styling for mobile */
+    .table {
+        font-size: 14px;
+    }
+    
+    .table td,
+    .table th {
+        padding: 8px 4px;
+        vertical-align: middle;
+    }
+    
+    /* Make action buttons in tables more mobile-friendly */
+    .table .btn-group .btn {
+        min-height: 36px;
+        padding: 6px 10px;
+        margin: 1px;
+    }
+    
+    /************************************
+    * Navigation improvements
+    *************************************/
+    .navbar-nav .nav-link {
+        padding: 12px 16px;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+    }
+    
+    .dropdown-menu .dropdown-item {
+        padding: 12px 16px;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+    }
+    
+    /************************************
+    * Sidebar improvements
+    *************************************/
+    #sidebar-container {
+        /* Ensure sidebar has smooth transitions on mobile */
+        transition: transform 0.3s ease-in-out;
+    }
+    
+    /* Improve treeview touch targets */
+    .node-sidebar-panel-1Tree,
+    .node-sidebar-panel-2Tree,
+    .node-sidebar-panel-3Tree {
+        min-height: 44px;
+        padding: 10px 12px;
+    }
+    
+    .node-sidebar-panel-1Tree .fa,
+    .node-sidebar-panel-2Tree .fa,
+    .node-sidebar-panel-3Tree .fa {
+        margin-right: 8px;
+    }
+    
+    /************************************
+    * Card and content spacing
+    *************************************/
+    .card {
+        margin-bottom: 1rem;
+    }
+    
+    .card-body {
+        padding: 1rem;
+    }
+    
+    .card-header {
+        padding: 0.75rem 1rem;
+    }
+    
+    /************************************
+    * Modal improvements
+    *************************************/
+    .modal-dialog {
+        margin: 0.5rem;
+    }
+    
+    .modal-content {
+        border-radius: 8px;
+    }
+    
+    /************************************
+    * Search improvements
+    *************************************/
+    .aa-Form {
+        margin-bottom: 8px;
+    }
+    
+    .aa-InputWrapper {
+        position: relative;
+    }
+    
+    .aa-Input {
+        min-height: 44px !important;
+        padding: 10px 44px 10px 12px !important;
+        font-size: 16px !important; /* Prevent zoom on iOS */
+    }
+    
+    .aa-SubmitButton {
+        min-width: 44px !important;
+        min-height: 44px !important;
+    }
+    
+    /************************************
+    * Toast improvements
+    *************************************/
+    .toast-container {
+        right: 10px;
+        left: 10px;
+        top: 80px; /* Below fixed navbar */
+        max-width: none;
+    }
+    
+    .toast {
+        margin-bottom: 8px;
+    }
+    
+    /************************************
+    * Utility classes for mobile
+    *************************************/
+    .mobile-hidden {
+        display: none;
+    }
+    
+    .mobile-full-width {
+        width: 100% !important;
+    }
+    
+    .mobile-center {
+        text-align: center !important;
+    }
+    
+    .mobile-scroll-horizontal {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+/* Tablet adjustments (768px to 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .ck-toolbar {
+        flex-wrap: nowrap !important;
+    }
+    
+    /* Show some CKEditor buttons on tablets that are hidden on phones */
+    .ck-button[data-cke-tooltip-text*="Strikethrough"],
+    .ck-button[data-cke-tooltip-text*="Remove Format"] {
+        display: inline-block !important;
+    }
+}
+
+/* Large mobile devices (landscape phones) */
+@media (min-width: 576px) and (max-width: 767px) {
+    .ck-button[data-cke-tooltip-text*="Font Color"],
+    .ck-button[data-cke-tooltip-text*="Special characters"] {
+        display: inline-block !important;
+    }
+}

assets/css/app/tables.css

@@ -47,6 +47,109 @@ table .input-group-btn:last-child>.btn, table .input-group-btn:last-child>.btn-g
     }
 }
 
+/* Mobile table improvements */
+@media (max-width: 768px) {
+    /* Better table wrapper for horizontal scrolling */
+    .table-responsive {
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        margin-bottom: 1rem;
+    }
+    
+    /* Improve table appearance on mobile */
+    .table {
+        font-size: 0.9rem;
+        margin-bottom: 0;
+    }
+    
+    .table th {
+        font-size: 0.85rem;
+        font-weight: 600;
+        padding: 12px 8px;
+        background-color: var(--bs-gray-100);
+        border-bottom: 2px solid var(--bs-gray-300);
+        white-space: nowrap;
+    }
+    
+    .table td {
+        padding: 10px 8px;
+        vertical-align: middle;
+    }
+    
+    /* Improve button groups in tables */
+    .table .btn-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px;
+    }
+    
+    .table .btn-group .btn {
+        flex: 0 0 auto;
+        min-width: 36px;
+        min-height: 36px;
+        padding: 6px 8px;
+        font-size: 0.8rem;
+    }
+    
+    /* DataTables mobile improvements */
+    .dataTables_wrapper .dataTables_length,
+    .dataTables_wrapper .dataTables_filter {
+        margin-bottom: 0.75rem;
+    }
+    
+    .dataTables_wrapper .dataTables_filter input {
+        width: 100%;
+        margin-left: 0;
+        margin-top: 0.5rem;
+        min-height: 44px;
+        font-size: 16px; /* Prevent zoom on iOS */
+    }
+    
+    .dataTables_wrapper .dataTables_length select {
+        min-height: 44px;
+        padding: 8px 12px;
+    }
+    
+    /* DataTables pagination improvements */
+    .dataTables_wrapper .dataTables_paginate {
+        text-align: center !important;
+        margin-top: 1rem;
+    }
+    
+    .dataTables_wrapper .dataTables_paginate .pagination {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    
+    .dataTables_wrapper .dataTables_paginate .page-link {
+        min-width: 44px;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 2px;
+    }
+    
+    /* DataTables info text */
+    .dataTables_wrapper .dataTables_info {
+        text-align: center;
+        padding: 1rem 0;
+        font-size: 0.9rem;
+    }
+    
+    /* Hide some table columns on very small screens */
+    @media (max-width: 480px) {
+        .table .mobile-hidden {
+            display: none;
+        }
+        
+        /* Stack table controls vertically on very small screens */
+        .dataTables_wrapper .row > div {
+            margin-bottom: 0.5rem;
+        }
+    }
+}
+
 /**
  * Enforce white links on selected rows in datatables
  */

assets/js/app.js

@@ -26,6 +26,7 @@ import '../css/app/tables.css';
 import '../css/app/bs-overrides.css';
 import '../css/app/treeview.css';
 import '../css/app/images.css';
+import '../css/app/mobile.css';
 
 // start the Stimulus application
 import '../bootstrap';

templates/_navbar.html.twig

@@ -5,13 +5,13 @@
 <nav class="navbar navbar-expand-md bg-body-tertiary border-bottom shadow-sm fixed-top py-0" id="navbar">
     <div class="container-fluid">
         <div class="d-flex justify-content-start align-items-center">
-            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#sidebar-container">
+            <button type="button" class="navbar-toggler p-2" data-bs-toggle="collapse" data-bs-target="#sidebar-container">
                 <span class="visually-hidden">{% trans %}sidebar.toggle{% endtrans %}</span>
                 <!-- <span class="navbar-toggler-icon"></span> -->
                 <i class="fas fa-folder-open fa-lg fa-fw"></i>
             </button>
             {% if is_granted("@tools.label_scanner") %}        
-                <a href="{{ path('scan_dialog') }}" class="navbar-toggler nav-link ms-3">
+                <a href="{{ path('scan_dialog') }}" class="navbar-toggler nav-link ms-2 p-2">
                        <i class="fas fa-camera-retro fa-fw"></i>
                 </a>
             {% endif %}
@@ -20,7 +20,7 @@
         <a class="navbar-brand" href="{{ path('homepage') }}"><i class="fa fa-microchip"
                                                                  aria-hidden="true"></i> {{ vars.partdb_title() }}</a>
 
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
+        <button class="navbar-toggler p-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
                 aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
             <!-- <span class="navbar-toggler-icon"></span> -->
             <i class="fas fa-bars  fa-lg"></i>