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

improve account page for mobile

Browse Source
This commit is contained in:
SrGooglo 2022-11-24 12:02:16 +00:00
parent 118ee393c5
commit 7cf9e92678
2 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/app/src/pages/account/index.jsx
View File

@ -99,6 +99,8 @@ export default class Account extends React.Component {
coverComponent = React.createRef() coverComponent = React.createRef()
tabNavigatorRef = React.createRef()
api = window.app.api.withEndpoints("main") api = window.app.api.withEndpoints("main")
componentDidMount = async () => { componentDidMount = async () => {
@ -215,8 +217,18 @@ export default class Account extends React.Component {
// if component scrolled foward set cover height to 0 // if component scrolled foward set cover height to 0
if (e.target.scrollTop > 0) { if (e.target.scrollTop > 0) {
this.coverComponent.current.style.height = "0px" this.coverComponent.current.style.height = "0px"
if (window.isMobile) {
this.tabNavigatorRef.current.style.overflow = "hidden"
this.tabNavigatorRef.current.style.height = "0px"
}
} else { } else {
this.coverComponent.current.style.height = "" this.coverComponent.current.style.height = ""
if (window.isMobile) {
this.tabNavigatorRef.current.style.overflow = ""
this.tabNavigatorRef.current.style.height = ""
}
} }
} }
@ -293,7 +305,7 @@ export default class Account extends React.Component {
</div> </div>
<div className="contents"> <div className="contents">
<div className="tabMenuWrapper"> <div className="tabMenuWrapper" ref={this.tabNavigatorRef}>
<antd.Menu <antd.Menu
className="tabMenu" className="tabMenu"
mode={window.isMobile ? "horizontal" : "vertical"} mode={window.isMobile ? "horizontal" : "vertical"}

9
packages/app/src/theme/index.less
View File

@ -330,6 +330,15 @@ html {
padding: 0; padding: 0;
margin-top: -4.5vh;
padding: 0;
.tabContent {
padding: 0;
padding-top: 20px;
}
.tabMenuWrapper{ .tabMenuWrapper{
display: flex; display: flex;
flex-direction: column; flex-direction: column;