Make Bottom Bar scale with fontsize

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
frontend
src/components
static/css

View File

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

View File

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

View File

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