mirror of
https://github.com/wekan/wekan.git
synced 2026-02-12 19:24:20 +01:00
Accessibility improvements.
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu
parent
6f02eeae53
commit
67b078b805
6 changed files with 542 additions and 11 deletions
|
|
@ -52,9 +52,15 @@ input,
|
|||
select,
|
||||
textarea,
|
||||
button {
|
||||
font: clamp(12px, 2.5vw, 16px) Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
line-height: 1.3;
|
||||
font: clamp(14px, 2.5vw, 18px) Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
line-height: 1.4;
|
||||
color: #4d4d4d;
|
||||
/* Improve text rendering */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Better text selection */
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
html {
|
||||
font-size: 100%;
|
||||
|
|
@ -460,20 +466,234 @@ a:not(.disabled).is-active i.fa {
|
|||
.no-scrollbars::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
}
|
||||
/* ========================================
|
||||
MOBILE & TABLET RESPONSIVE IMPROVEMENTS
|
||||
======================================== */
|
||||
|
||||
/* Mobile devices (up to 800px) */
|
||||
@media screen and (max-width: 800px) {
|
||||
#content {
|
||||
margin: 1px 0px 0px 0px;
|
||||
height: calc(100% - 0px);
|
||||
/* Improve touch scrolling */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
#content > .wrapper {
|
||||
margin-top: 0px;
|
||||
padding: 8px;
|
||||
}
|
||||
.wrapper {
|
||||
height: calc(100% - 31px);
|
||||
margin: 0px;
|
||||
padding: 8px;
|
||||
}
|
||||
.panel-default {
|
||||
width: 83vw;
|
||||
width: 95vw;
|
||||
max-width: 95vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Improve touch targets */
|
||||
button, .btn, .js-toggle, .js-color-choice, .js-reaction, .close {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
padding: 12px 16px;
|
||||
font-size: 16px; /* Prevent zoom on iOS */
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
input, select, textarea {
|
||||
font-size: 16px; /* Prevent zoom on iOS */
|
||||
padding: 12px;
|
||||
min-height: 44px;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/* Cards and lists */
|
||||
.minicard {
|
||||
min-height: 48px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0 8px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
/* Board canvas */
|
||||
.board-canvas {
|
||||
padding: 8px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Header mobile layout */
|
||||
#header {
|
||||
padding: 8px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#header-quick-access {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Modal mobile optimization */
|
||||
#modal .modal-content,
|
||||
#modal .modal-content-wide {
|
||||
width: 95vw;
|
||||
max-width: 95vw;
|
||||
margin: 2vh auto;
|
||||
padding: 16px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Table mobile optimization */
|
||||
table {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Admin panel mobile optimization */
|
||||
.setting-content .content-body {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.setting-content .content-body .side-menu {
|
||||
width: 100%;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.setting-content .content-body .main-body {
|
||||
order: 1;
|
||||
min-height: 60vh;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet devices (768px - 1024px) */
|
||||
@media screen and (min-width: 768px) and (max-width: 1024px) {
|
||||
#content > .wrapper {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.panel-default {
|
||||
width: 90vw;
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
/* Touch-friendly but more compact */
|
||||
button, .btn, .js-toggle, .js-color-choice, .js-reaction, .close {
|
||||
min-height: 48px;
|
||||
min-width: 48px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.minicard {
|
||||
min-height: 40px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0 12px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.board-canvas {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
#modal .modal-content {
|
||||
width: 80vw;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
#modal .modal-content-wide {
|
||||
width: 90vw;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.setting-content .content-body {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.setting-content .content-body .side-menu {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large displays and digital signage (1920px+) */
|
||||
@media screen and (min-width: 1920px) {
|
||||
body {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
button, .btn, .js-toggle, .js-color-choice, .js-reaction, .close {
|
||||
min-height: 56px;
|
||||
min-width: 56px;
|
||||
padding: 16px 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.minicard {
|
||||
min-height: 56px;
|
||||
padding: 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0 20px;
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.board-canvas {
|
||||
padding: 20px;
|
||||
max-width: 2400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header {
|
||||
padding: 20px 32px;
|
||||
max-width: 2400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#modal .modal-content {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
#modal .modal-content-wide {
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
.setting-content .content-body {
|
||||
gap: 32px;
|
||||
max-width: 2400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.setting-content .content-body .side-menu {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
.inline-input {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ template(name="main")
|
|||
html(lang="{{TAPi18n.getLanguage}}")
|
||||
head
|
||||
title
|
||||
meta(name="viewport" content="width=device-width, initial-scale=1")
|
||||
meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes")
|
||||
meta(http-equiv="X-UA-Compatible" content="IE=edge")
|
||||
//- XXX We should use pathFor in the following `href` to support the case
|
||||
where the application is deployed with a path prefix, but it seems to be
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
.main-body {
|
||||
overflow: scroll;
|
||||
}
|
||||
/* Scrollbar styles are now handled by settingBody.css for all admin pages */
|
||||
table {
|
||||
color: #000;
|
||||
min-width: 1200px !important;
|
||||
width: max-content !important;
|
||||
table-layout: auto !important;
|
||||
}
|
||||
|
||||
/* Force People/Organizations/Teams tables to always trigger horizontal scrolling */
|
||||
table td,
|
||||
table th {
|
||||
white-space: nowrap;
|
||||
min-width: 120px;
|
||||
border: 1px solid #d2d0d0;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
|
|
|
|||
|
|
@ -59,7 +59,79 @@
|
|||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: scroll !important;
|
||||
overflow-y: scroll !important;
|
||||
scrollbar-gutter: stable;
|
||||
/* Force horizontal scrollbar to always be visible */
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Ensure scrollbars are always visible with proper styling for all admin pages */
|
||||
.setting-content .content-body .main-body::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.setting-content .content-body .main-body::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 6px;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.setting-content .content-body .main-body::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 6px;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.setting-content .content-body .main-body::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.setting-content .content-body .main-body::-webkit-scrollbar-corner {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Ensure tables and content are wide enough to trigger horizontal scrolling */
|
||||
.setting-content .content-body .main-body table {
|
||||
min-width: 1200px !important;
|
||||
width: max-content !important;
|
||||
table-layout: auto !important;
|
||||
}
|
||||
|
||||
/* Force tables to always trigger horizontal scrolling */
|
||||
.setting-content .content-body .main-body table td,
|
||||
.setting-content .content-body .main-body table th {
|
||||
white-space: nowrap;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
/* Ensure there's enough content to trigger vertical scrolling */
|
||||
.setting-content .content-body .main-body {
|
||||
min-height: calc(100vh - 200px);
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Force horizontal scrollbar to always be visible at bottom */
|
||||
.setting-content .content-body .main-body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Add invisible content to force horizontal scrolling when needed */
|
||||
.setting-content .content-body .main-body::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.setting-content .content-body .main-body ul li {
|
||||
padding: 0.5rem 0.5rem;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
.main-body {
|
||||
overflow: scroll;
|
||||
}
|
||||
/* Scrollbar styles are now handled by settingBody.css for all admin pages */
|
||||
table {
|
||||
color: #000;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue