mirror of
https://github.com/Reckless-Satoshi/robosats.git
synced 2024-09-11 19:57:11 +03:00
Improve avatars responsiveness
This commit is contained in:
parent
159180089e
commit
d589dc276b
@ -3,6 +3,7 @@ import { Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Sel
|
||||
import { Link } from 'react-router-dom'
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import MediaQuery from 'react-responsive'
|
||||
import Image from 'material-ui-image'
|
||||
|
||||
import getFlags from './getFlags'
|
||||
|
||||
@ -93,7 +94,15 @@ export default class BookPage extends Component {
|
||||
renderCell: (params) => {return (
|
||||
<ListItemButton style={{ cursor: "pointer" }}>
|
||||
<ListItemAvatar>
|
||||
<Avatar className="flippedSmallAvatar" alt={params.row.robosat} src={params.row.avatar} />
|
||||
<div style={{ width: 48, height: 48 }}>
|
||||
<Image className='bookAvatar'
|
||||
disableError='true'
|
||||
disableSpinner='true'
|
||||
color='null'
|
||||
alt={params.row.robosat}
|
||||
src={params.row.avatar}
|
||||
/>
|
||||
</div>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={params.row.robosat}/>
|
||||
</ListItemButton>
|
||||
@ -147,7 +156,17 @@ export default class BookPage extends Component {
|
||||
{ field: 'robosat', headerName: 'Robot', width: 80,
|
||||
renderCell: (params) => {return (
|
||||
<ListItemButton style={{ cursor: "pointer" }}>
|
||||
<Avatar className="flippedSmallAvatar" alt={params.row.robosat} src={params.row.avatar} />
|
||||
<ListItemAvatar>
|
||||
<div style={{ width: 48, height: 48 }}>
|
||||
<Image className='bookAvatar'
|
||||
disableError='true'
|
||||
disableSpinner='true'
|
||||
color='null'
|
||||
alt={params.row.robosat}
|
||||
src={params.row.avatar}
|
||||
/>
|
||||
</div>
|
||||
</ListItemAvatar>
|
||||
</ListItemButton>
|
||||
);
|
||||
} },
|
||||
|
@ -55,7 +55,7 @@ export default class BottomBar extends Component {
|
||||
fetch('/api/info/')
|
||||
.then((response) => response.json())
|
||||
.then((data) => this.setState(data) &
|
||||
this.props.setAppState({nickname:data.nickname}));
|
||||
this.props.setAppState({nickname:data.nickname, loading:false}));
|
||||
}
|
||||
|
||||
handleClickOpenStatsForNerds = () => {
|
||||
@ -202,7 +202,7 @@ export default class BottomBar extends Component {
|
||||
<ListItemAvatar>
|
||||
<Avatar className='profileAvatar'
|
||||
sx={{ width: 65, height:65 }}
|
||||
alt={this.props.nickname}
|
||||
alt={this.props.nickname}
|
||||
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
|
||||
/>
|
||||
</ListItemAvatar>
|
||||
@ -469,14 +469,20 @@ bottomBarPhone =()=>{
|
||||
<Grid container xs={12}>
|
||||
|
||||
<Grid item xs={1.6}>
|
||||
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, top: -13, }} >
|
||||
<div style={{display: this.props.avatarLoaded ? '':'none'}}>
|
||||
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} >
|
||||
<Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
|
||||
<Avatar className='flippedSmallAvatar'
|
||||
<Avatar className='phoneFlippedSmallAvatar'
|
||||
sx={{ width: 65, height:65 }}
|
||||
alt={this.props.nickname}
|
||||
imgProps={{
|
||||
onLoad:() => this.props.setAppState({avatarLoaded: true}),
|
||||
}}
|
||||
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
|
||||
/>
|
||||
</Badge>
|
||||
</IconButton>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={1.6} align="center">
|
||||
|
@ -13,6 +13,7 @@ export default class HomePage extends Component {
|
||||
this.state = {
|
||||
nickname: null,
|
||||
token: null,
|
||||
avatarLoaded: false,
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -33,6 +33,7 @@ export default class UserGenPage extends Component {
|
||||
loadingRobot: true,
|
||||
tokenHasChanged: false,
|
||||
};
|
||||
this.props.setAppState({avatarLoaded: false, nickname: null, token: null});
|
||||
this.getGeneratedUser(this.state.token);
|
||||
}
|
||||
|
||||
@ -64,11 +65,13 @@ export default class UserGenPage extends Component {
|
||||
// Add nick and token to App state (token only if not a bad request)
|
||||
(data.bad_request ? this.props.setAppState({
|
||||
nickname: data.nickname,
|
||||
avatarLoaded: false,
|
||||
})
|
||||
:
|
||||
this.props.setAppState({
|
||||
nickname: data.nickname,
|
||||
token: this.state.token,
|
||||
avatarLoaded: false,
|
||||
}));
|
||||
});
|
||||
}
|
||||
@ -98,9 +101,10 @@ export default class UserGenPage extends Component {
|
||||
}
|
||||
|
||||
handleClickSubmitToken=()=>{
|
||||
this.delGeneratedUser()
|
||||
this.delGeneratedUser();
|
||||
this.getGeneratedUser(this.state.token);
|
||||
this.setState({loadingRobot: true, tokenHasChanged: false})
|
||||
this.setState({loadingRobot: true, tokenHasChanged: false});
|
||||
this.props.setAppState({avatarLoaded: false, nickname: null, token: null});
|
||||
}
|
||||
|
||||
handleClickOpenInfo = () => {
|
||||
|
@ -43,7 +43,6 @@ body {
|
||||
}
|
||||
|
||||
.newAvatar {
|
||||
background-color:white;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #555;
|
||||
filter: drop-shadow(1px 1px 1px #000000);
|
||||
@ -66,4 +65,20 @@ body {
|
||||
transform: scaleX(-1);
|
||||
border: 0.3px solid #555;
|
||||
filter: drop-shadow(0.5px 0.5px 0.5px #000000);
|
||||
}
|
||||
|
||||
.phoneFlippedSmallAvatar {
|
||||
transform: translate(-20, -20);
|
||||
bottom: 50;
|
||||
right: 50;
|
||||
transform: scaleX(-1);
|
||||
border: 0.8px solid #555;
|
||||
filter: drop-shadow(0.5px 0.5px 0.5px #000000);
|
||||
}
|
||||
|
||||
.bookAvatar {
|
||||
border-radius: 50%;
|
||||
transform: scaleX(-1);
|
||||
border: 0.3px solid #555;
|
||||
filter: drop-shadow(0.5px 0.5px 0.5px #000000);
|
||||
}
|
Loading…
Reference in New Issue
Block a user