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 c6b10f71e1
commit b6237aa1c1
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";
@top_bar_height: 52px;
// #root,body,html {
// height: 100%!important;
// max-height: 100%!important;
// }
.app_layout {
&.mobile {
display: flex;
flex-direction: column;
height: 100% !important;
max-height: 100% !important;
padding: 0;
.content_wrapper {
height: 100%;
width: 100%;
max-height: 100%;
overflow-y: scroll;
}
@ -23,6 +34,9 @@
justify-content: center;
width: 100%;
height: 100%;
max-height: 100%;
padding: 7px;
padding-bottom: 0px;
@ -41,11 +55,17 @@
width: 100%;
height: 100%;
padding: 0;
.panel {
width: 100%;
//height: 100%;
&.left {
position: absolute;
height: @top_bar_height;
padding: 10px;
z-index: 310;
top: 0;
@ -58,13 +78,18 @@
&.center {
z-index: 300;
overflow: visible;
overflow-x: visible;
overflow-y: 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%);
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;
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%);
}
}