RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve layout for mobile

Browse Source
This commit is contained in:
SrGooglo 2023-06-24 12:58:53 +00:00
parent e85de24e52
commit 619d4b9e84
1 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/app/src/theme/mobile.less
View File

@ -1,15 +1,26 @@
@import "theme/vars.less"; @import "theme/vars.less";
@top_bar_height: 52px;
// #root,body,html {
// height: 100%!important;
// max-height: 100%!important;
// }
.app_layout { .app_layout {
&.mobile { &.mobile {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100% !important;
max-height: 100% !important;
padding: 0; padding: 0;
.content_wrapper { .content_wrapper {
height: 100%; height: 100%;
width: 100%; width: 100%;
max-height: 100%;
overflow-y: scroll; overflow-y: scroll;
} }
@ -23,6 +34,9 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%;
max-height: 100%;
padding: 7px; padding: 7px;
padding-bottom: 0px; padding-bottom: 0px;
@ -41,11 +55,17 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0;
.panel { .panel {
width: 100%; width: 100%;
//height: 100%;
&.left { &.left {
position: absolute;
height: @top_bar_height;
padding: 10px;
z-index: 310; z-index: 310;
top: 0; top: 0;
@ -58,13 +78,18 @@
&.center { &.center {
z-index: 300; z-index: 300;
overflow: visible; overflow-y: visible;
overflow-x: visible; overflow-x: hidden;
height: calc(100vh - @app_bottomBar_height - @app_topBar_height); margin-top: calc(@top_bar_height + 10px);
margin-bottom: 10px;
-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10px, rgb(0, 0, 0) calc(100% - 10px), rgba(0, 0, 0, 0) 100%); border-radius: 12px;
mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10px, rgb(0, 0, 0) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
height: 100%;
//-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10px, rgb(0, 0, 0) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
//mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10px, rgb(0, 0, 0) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
} }
} }