Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2026-02-10 18:24:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Updated mobile Bookmarks/Starred boards. Part 1. In Progress.

Browse source 
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu 2025-10-14 10:43:39 +03:00
parent f3efaf59e1
commit da98942cce
9 changed files with 210 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

61
client/components/main/layouts.css
View file

@ -533,13 +533,70 @@ a:not(.disabled).is-active i.fa {
/* Header mobile layout */
#header {
padding: 8px;
flex-wrap: wrap;
/* Keep top bar on a single row on small screens */
flex-wrap: nowrap;
align-items: center;
gap: 8px;
}
#header-quick-access {
flex-direction: column;
/* Keep quick-access items in one row */
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
width: 100%;
}
/* Hide elements that should move to the hamburger menu on mobile */
#header-quick-access .header-quick-access-list,
#header-quick-access #header-help {
display: none !important;
}
/* Show only the home icon (hide the trailing text) on mobile */
#header-quick-access .home-icon a {
display: inline-flex;
align-items: center;
max-width: 28px; /* enough to display the icon */
overflow: hidden;
white-space: nowrap;
}
/* Hide text in home icon on mobile, show only icon */
#header-quick-access .home-icon a span:not(.fa) {
display: none !important;
}
/* Ensure proper spacing for mobile header elements */
#header-quick-access .zoom-controls {
margin-left: auto;
margin-right: 8px;
}
.mobile-mode-toggle {
margin-right: 8px;
}
#header-user-bar {
margin-left: auto;
}
/* Ensure header elements don't wrap on very small screens */
#header-quick-access {
min-width: 0; /* Allow flexbox to shrink */
}
/* Make sure logo doesn't take too much space on mobile */
#header-quick-access img {
max-height: 24px;
max-width: 120px;
}
/* Ensure zoom controls are compact on mobile */
.zoom-controls .zoom-level {
padding: 4px 8px;
font-size: 12px;
}
/* Modal mobile optimization */