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 of bottom bar

Browse Source
This commit is contained in:
SrGooglo 2023-06-26 18:22:05 +00:00
parent 44ac05617e
commit 1a3c3674a1
2 changed files with 86 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/app/src/components/Layout/bottomBar/index.jsx
View File

@ -372,7 +372,9 @@ export class BottomBar extends React.Component {
/> />
<Motion style={{ y: spring(this.state.show ? 0 : 300) }}> <Motion style={{ y: spring(this.state.show ? 0 : 300) }}>
{({ y }) => <div {({ y }) =>
<div className="bottomBar_wrapper">
<div
className="bottomBar" className="bottomBar"
style={{ style={{
WebkitTransform: `translate3d(0, ${y}px, 0)`, WebkitTransform: `translate3d(0, ${y}px, 0)`,
@ -433,7 +435,9 @@ export class BottomBar extends React.Component {
<AccountButton /> <AccountButton />
</div> </div>
</div>} </div>
</div>
}
</Motion> </Motion>
</> </>
} }

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

@ -23,7 +23,7 @@
height: 0; height: 0;
opacity: 0; opacity: 0;
background-color: var(--background-color-accent); background-color: var(--background-color-primary);
box-shadow: @card-shadow-top; box-shadow: @card-shadow-top;
@ -130,44 +130,53 @@
} }
} }
.bottomBar { .bottomBar_wrapper {
position: absolute; //position: absolute;
position: relative;
bottom: 0;
left: 0;
z-index: 550;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative;
z-index: 550;
left: 0;
bottom: 0;
width: 100vw; width: 100vw;
min-width: 100vw;
max-width: 100vw;
//padding: 10px;
}
.bottomBar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: @app_bottomBar_height; height: @app_bottomBar_height;
padding: 10px;
overflow: hidden; overflow: hidden;
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
//border-radius: 12px;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
//box-shadow: @card-shadow;
box-shadow: @card-shadow-top; box-shadow: @card-shadow-top;
.items { .items {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
//white-space: nowrap;
//overflow-x: overlay;
height: 100%; height: 100%;
width: 100vw; width: 100%;
.item { .item {
display: inline-flex; display: inline-flex;