mirror of
https://github.com/RoboSats/robosats.git
synced 2025-02-27 15:49:01 +00:00
Make Bottom Bar scale with fontsize
This commit is contained in:
parent
5d09200e17
commit
cad000d838
frontend
@ -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>
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -61,8 +61,6 @@ input[type=number] {
|
|||||||
.bottomBar {
|
.bottomBar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.amboss{
|
.amboss{
|
||||||
|
Loading…
Reference in New Issue
Block a user