RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

make bottom bar relative

Browse Source
This commit is contained in:
SrGooglo 2022-11-24 17:45:03 +00:00
parent 4bdb82c2c4
commit f7e474fa58
3 changed files with 55 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/app/src/components/Layout/bottomBar/index.less
View File

@ -8,8 +8,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: fixed; position: relative;
z-index: 9999;
left: 0; left: 0;
bottom: 0; bottom: 0;

4
packages/app/src/layouts/mobile/index.jsx
View File

@ -9,9 +9,11 @@ export default (props) => {
<Modal /> <Modal />
<antd.Layout.Content className={classnames("content_layout", ...props.layoutPageModesClassnames ?? [])}> <antd.Layout.Content className={classnames("content_layout", ...props.layoutPageModesClassnames ?? [])}>
<div id="transitionLayer" className="fade-transverse-active"> <div className={classnames("frameDecorator", "top")} />
<div id="transitionLayer" className={classnames("content_wrapper", "fade-transverse-active")}>
{React.cloneElement(props.children, props)} {React.cloneElement(props.children, props)}
</div> </div>
<div className={classnames("frameDecorator", "bottom")} />
</antd.Layout.Content> </antd.Layout.Content>
<BottomBar /> <BottomBar />

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

@ -1,7 +1,57 @@
@frameDecorator_height: 20px;
.app_layout { .app_layout {
&.mobile { &.mobile {
padding: 10px; display: flex;
flex-direction: column;
padding: 0;
.content_wrapper {
height: 100%;
width: 100%;
overflow-y: scroll;
padding-top: 20px;
}
.content_layout {
display: flex;
flex-direction: column;
overflow: hidden;
align-items: center;
justify-content: center;
width: 100vw;
padding: 0 10px;
}
.frameDecorator {
position: absolute;
left: 0;
z-index: 8000;
width: 100vw;
height: @frameDecorator_height;
background-color: rgba(var(--layoutBackgroundColor), 0.8);
filter: blur(4px);
backdrop-filter: blur(10px);
&.top {
top: 0;
transform: translate(0, -6px);
}
&.bottom {
bottom: 0;
transform: translate(0, 6px);
}
}
// FIXMETS FOR MOBILE LAYOUT
.loginPage { .loginPage {
flex-direction: column; flex-direction: column;