Hide username on screens smaller than 500px (#1973)

This commit is contained in:
Dylan 2023-07-18 17:04:41 -06:00 committed by GitHub
parent 853f68e887
commit 399aee9f74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 3 deletions

View File

@ -36,7 +36,7 @@
if (!app.user.loaded) {
buf = '<button disabled>Loading...</button>';
} else if (app.user.get('named')) {
buf = '<span class="username" data-name="' + BattleLog.escapeHTML(name) + '"' + (away ? ' data-away="true"' : '') + (status ? 'data-status="' + BattleLog.escapeHTML(status) + '"' : '') + ' style="' + color + '"><i class="fa fa-user" style="color:' + (away ? '#888;' : '#779EC5') + '"></i> ' + BattleLog.escapeHTML(name) + '</span>';
buf = '<span class="username" data-name="' + BattleLog.escapeHTML(name) + '"' + (away ? ' data-away="true"' : '') + (status ? 'data-status="' + BattleLog.escapeHTML(status) + '"' : '') + ' style="' + color + '"><i class="fa fa-user" style="color:' + (away ? '#888;' : '#779EC5') + '"></i> <span class="usernametext">' + BattleLog.escapeHTML(name) + '</span></span>';
} else {
buf = '<button name="login">Choose name</button>';
}

View File

@ -213,7 +213,7 @@ class PSHeader extends preact.Component<{style: {}}> {
}
const userColor = window.BattleLog && {color: BattleLog.usernameColor(PS.user.userid)};
return <span class="username" data-name={PS.user.name} style={userColor}>
<i class="fa fa-user" style="color:#779EC5"></i> {PS.user.name}
<i class="fa fa-user" style="color:#779EC5"></i> <span class="usernametext">{PS.user.name}</span>
</span>;
}
render() {

View File

@ -289,6 +289,11 @@ select {
.username {
cursor: pointer;
}
@media (max-width: 500px) {
.usernametext {
display: none
}
}
.userbar button.icon {
height: 25px;
width: 27px;
@ -2008,7 +2013,7 @@ a.ilink.yours {
white-space: pre;
overflow: hidden;
}
.allyparty button .picon,
.allyparty button .picon,
.switchmenu button .picon {
float: left;
margin: -6px -3px -6px -4px;

View File

@ -148,6 +148,11 @@ body {
.username {
cursor: pointer;
}
@media (max-width: 500px) {
.usernametext {
display: none
}
}
.userbar button.icon {
height: 25px;
width: 27px;