Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-31 02:21:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make Bottom Bar scale with fontsize

Browse Source
This commit is contained in:
F. Mitjans 2022-09-01 00:05:20 -04:00 committed by Felipe Mitjans
parent 5d09200e17
commit cad000d838
3 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/BottomBar.js
View File

@ -149,11 +149,15 @@ bottomBarDesktop =()=>{
const { t } = this.props;
var hasRewards = this.props.earnedRewards > 0 ? true: false;
var hasOrder = this.props.activeOrderId > 0 & !this.state.profileShown & this.props.avatarLoaded ? true : false;
const fontSize = this.props.theme.typography.fontSize;
const fontSizeFactor = fontSize / 14; // default fontSize is 14
const typographyProps = {
primaryTypographyProps: {fontSize: fontSize},
secondaryTypographyProps: {fontSize: fontSize * 12/14}
}
return(
<Paper elevation={6} style={{height:40}}>
<Paper elevation={6} style={{height: 40*fontSizeFactor, width: window.innerWidth}}>
<Grid container>
<Grid item xs={1.9}>
<div style={{display: this.showProfileButton() ? '':'none'}}>
<ListItemButton onClick={this.handleClickOpenProfile} >
@ -162,7 +166,7 @@ bottomBarDesktop =()=>{
title={(hasRewards ? t("You can claim satoshis!")+" ": "" )+
(hasOrder ? t("You have an active order"):"")}
>
<ListItemAvatar sx={{ width: 30, height: 30 }} >
<ListItemAvatar sx={{ width: 30*fontSizeFactor, height: 30*fontSizeFactor }} >
<Badge badgeContent={(this.props.activeOrderId > 0 & !this.props.profileShown) ? "": null} color="primary">
<Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
alt={this.props.nickname}
@ -192,8 +196,7 @@ bottomBarDesktop =()=>{
</IconButton>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
{...typographyProps}
primary={this.state.num_public_buy_orders}
secondary={t("Public Buy Orders")} />
</ListItem>
@ -212,8 +215,7 @@ bottomBarDesktop =()=>{
</IconButton>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
{...typographyProps}
primary={this.state.num_public_sell_orders}
secondary={t("Public Sell Orders")} />
</ListItem>
@ -232,8 +234,7 @@ bottomBarDesktop =()=>{
</IconButton>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
{...typographyProps}
primary={this.state.active_robots_today}
secondary={t("Today Active Robots")}/>
</ListItem>
@ -248,8 +249,7 @@ bottomBarDesktop =()=>{
</IconButton>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
{...typographyProps}
primary={this.state.last_day_nonkyc_btc_premium+"%"}
secondary={t("24h Avg Premium")} />
</ListItem>
@ -264,8 +264,7 @@ bottomBarDesktop =()=>{
</IconButton>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
{...typographyProps}
primary={(this.state.maker_fee + this.state.taker_fee)*100}
secondary={t("Trade Fee")} />
</ListItem>

8
frontend/src/components/HomePage.js
View File

@ -40,9 +40,11 @@ export default class HomePage extends Component {
}
render() {
const fontSize = this.props.theme.typography.fontSize;
const fontSizeFactor = fontSize / 14; // default fontSize is 14
return (
<Router >
<div className='appCenter'>
<div className='appCenter' style={{height: window.innerHeight - 40*fontSizeFactor - 20, overflow:'auto'}}>
<Switch>
<Route exact path='/' render={(props) => <UserGenPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
<Route path='/ref/:refCode' render={(props) => <UserGenPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
@ -51,8 +53,8 @@ export default class HomePage extends Component {
<Route path="/order/:orderId" render={(props) => <OrderPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
</Switch>
</div>
<div className='bottomBar'>
<BottomBar redirectTo={this.redirectTo} {...this.state} setAppState={this.setAppState} />
<div className='bottomBar' style={{height: `${40*fontSizeFactor}px`, width: window.innerWidth}}>
<BottomBar redirectTo={this.redirectTo} {...this.state} {...this.props} setAppState={this.setAppState} />
</div>
</Router>
);

2
frontend/static/css/index.css
View File

@ -61,8 +61,6 @@ input[type=number] {
.bottomBar {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
}
.amboss{