go-shiori/shiori
1
1
Fork 0
mirror of https://github.com/go-shiori/shiori.git synced 2025-09-06 21:14:47 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix: Actions in overlays on mobile hard to press (#759)

Browse source 
* fix: Actions in overlays on mobile hard to press

Buttons on mobile devices could've been cut off, depending on the browsers
chrome size which rendered them either completely off-screen or at least hard
to reach. Using `dvh` (dynamic viewport height) should fix this issue for
most newer browsers.

* fix: provide fallback values for newer dynamic viewport units

Since `dvh` and `dvw` are rather new and required an up-to-date browser
providing percentage values is a bit safer

---------

Co-authored-by: Felipe Martin <812088+fmartingr@users.noreply.github.com>
This commit is contained in:
cbe 2023-10-22 11:37:25 +00:00 • committed by GitHub
parent f82b97dec5
commit 1ae82f48a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
internal/view/assets/css/style.css
View file

File diff suppressed because one or more lines are too long

20
internal/view/assets/less/common.less
View file

@ -55,7 +55,8 @@ a {
} }
#login-scene { #login-scene {
height : 100vh; height : 100%;
height : 100dvh;
padding : 16px; padding : 16px;
overflow : auto; overflow : auto;
display : flex; display : flex;
@ -186,7 +187,8 @@ a {
} }
#main-scene { #main-scene {
min-height : 100vh; min-height : 100%;
min-height : 100dvh;
padding-top : 60px; padding-top : 60px;
padding-left : 60px; padding-left : 60px;
background-color: var(--bg); background-color: var(--bg);
@ -195,7 +197,8 @@ a {
top : 0; top : 0;
left : 0; left : 0;
width : 60px; width : 60px;
height : 100vh; height : 100%;
height : 100dvh;
position : fixed; position : fixed;
display : flex; display : flex;
flex-flow : column nowrap; flex-flow : column nowrap;
@ -298,8 +301,10 @@ a {
position : fixed; position : fixed;
top : 0; top : 0;
left : 0; left : 0;
width : 100vw; width : 100%;
height : 100vh; width : 100dvw;
height : 100%;
height : 100dvh;
z-index : 10001; z-index : 10001;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
@ -322,7 +327,8 @@ a {
top : auto; top : auto;
right : 0; right : 0;
bottom : 0; bottom : 0;
width : 100vw; width : 100%;
width : 100dvw;
height : 50px; height : 50px;
flex-flow : row nowrap; flex-flow : row nowrap;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
@ -801,4 +807,4 @@ a {
} }
} }
} }
} }

6
internal/view/assets/less/custom-dialog.less
View file

@ -14,8 +14,10 @@
position : fixed; position : fixed;
top : 0; top : 0;
left : 0; left : 0;
width : 100vw; width : 100%;
height : 100vh; width : 100dvw;
height : 100%;
height : 100dvh;
z-index : 10001; z-index : 10001;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
padding : 32px; padding : 32px;