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

Have all iPhone use mobile view by default, while still having possibility to use mobile/desktop switch button for desktop mode.

Browse source 
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu 2025-10-20 03:11:02 +03:00
parent 59df6aad05
commit 5df4efd7ba
6 changed files with 34 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

3
client/components/boards/boardBody.css
View file

@ -294,7 +294,8 @@
min-width: 100%;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 800px),
screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
.board-wrapper {
width: 100% !important;
min-width: 100% !important;

9
client/components/boards/boardsList.css
View file

@ -383,7 +383,8 @@
screen and (max-device-width: 800px),
screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
screen and (max-width: 800px) and (orientation: portrait),
screen and (max-width: 800px) and (orientation: landscape) {
screen and (max-width: 800px) and (orientation: landscape),
screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
.board-list {
height: 100%;
overflow-y: auto;
@ -469,7 +470,8 @@
screen and (max-device-width: 800px),
screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
screen and (max-width: 800px) and (orientation: portrait),
screen and (max-width: 800px) and (orientation: landscape) {
screen and (max-width: 800px) and (orientation: landscape),
screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
.wrapper {
font-size: 2em !important; /* 2x bigger base font size for All Boards page */
}
@ -769,7 +771,8 @@
screen and (max-device-width: 800px),
screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
screen and (max-width: 800px) and (orientation: portrait),
screen and (max-width: 800px) and (orientation: landscape) {
screen and (max-width: 800px) and (orientation: landscape),
screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
.wrapper {
overflow: hidden;
height: 100vh;

3
client/components/lists/list.css
View file

@ -765,7 +765,8 @@ body.list-resizing-active * {
align-items: initial;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 800px),
screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
.mini-list {
flex: 0 0 60px;
height: auto;

6
client/components/main/header.css
View file

@ -342,7 +342,8 @@
}
/* Make zoom input wider on all mobile screens */
@media screen and (max-width: 800px) {
@media screen and (max-width: 800px),
screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
#header-quick-access .zoom-controls .zoom-input {
min-width: 50px !important; /* Wider on mobile */
width: 50px !important; /* Fixed width to show all numbers */
@ -452,7 +453,8 @@
margin: 6px 5px 0;
width: 12px;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 800px),
screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
#header #header-main-bar {
height: 40px;
}

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

@ -470,8 +470,10 @@ a:not(.disabled).is-active i.fa {
MOBILE & TABLET RESPONSIVE IMPROVEMENTS
======================================== */
/* Mobile devices (up to 800px) */
@media screen and (max-width: 800px) {
/* Mobile devices (up to 800px) and all iPhone models */
@media screen and (max-width: 800px),
screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape),
screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
#content {
margin: 1px 0px 0px 0px;
height: calc(100% - 0px);