mirror of
https://github.com/Part-DB/Part-DB-server.git
synced 2025-12-06 02:59:29 +00:00
Implement mobile UI improvements for Part-DB templates and layouts
Co-authored-by: jbtronics <5410681+jbtronics@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
parent
50c5ef4d4b
commit
3196ec4bb6
5 changed files with 437 additions and 10 deletions
|
|
@ -64,13 +64,17 @@ body {
|
|||
overflow-y: auto;
|
||||
/*noinspection W3CssValidation*/
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-height: 100%;
|
||||
opacity: 0.97;
|
||||
padding: 7px 15px 50px;
|
||||
margin-top: -10px;
|
||||
max-height: calc(100vh - 56px); /* Better height calculation */
|
||||
background-color: rgba(248, 248, 248, 0.98); /* Semi-transparent background */
|
||||
backdrop-filter: blur(10px); /* Modern blur effect */
|
||||
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;
|
||||
background-color: #F8F8F8;
|
||||
padding-top: 0;
|
||||
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 */
|
||||
|
|
|
|||
292
assets/css/app/mobile.css
Normal file
292
assets/css/app/mobile.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue