Style changes on profile screen
This commit is contained in:
parent
ba26006bac
commit
6699240b82
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -113,6 +113,7 @@ body {
|
|||||||
|
|
||||||
.badge-img {
|
.badge-img {
|
||||||
border: 2px solid green;
|
border: 2px solid green;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#terrain-image {
|
#terrain-image {
|
||||||
@ -191,11 +192,17 @@ body {
|
|||||||
background: rgba(0,0,0,.8);
|
background: rgba(0,0,0,.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatbox #chatmsgs .chat-username {
|
.chat-username {
|
||||||
color: green;
|
color: green;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chat-username-admin {
|
||||||
|
color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
#buttons {
|
#buttons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
@ -228,3 +235,39 @@ body {
|
|||||||
.scrollable-box {
|
.scrollable-box {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#player-name {
|
||||||
|
padding-left: 5px;
|
||||||
|
border-left: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player-level {
|
||||||
|
font-size: 120%;
|
||||||
|
color: #d5d5d5;
|
||||||
|
font-style: italic;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
border-left: 1px solid white;
|
||||||
|
border-bottom: 1px solid white;
|
||||||
|
padding-right: 100px;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
#badge-header {
|
||||||
|
padding-top: 5px;
|
||||||
|
border-top: 1px solid white;
|
||||||
|
border-right: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#badges {
|
||||||
|
border-right: 1px solid white;
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-badges {
|
||||||
|
border-right: 1px solid white;
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
@ -40,7 +40,11 @@ function getChat() {
|
|||||||
data = sortResults(data, 'time', true);
|
data = sortResults(data, 'time', true);
|
||||||
var content = "";
|
var content = "";
|
||||||
data.forEach(function (msg) {
|
data.forEach(function (msg) {
|
||||||
content += "<span class='chat-username' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />";
|
var usernameclass = "chat-username";
|
||||||
|
if (msg.username === 'skylarmt') {
|
||||||
|
usernameclass = "chat-username-admin"
|
||||||
|
}
|
||||||
|
content += "<span class='" + usernameclass + "' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />";
|
||||||
});
|
});
|
||||||
$('#chatmsgs').html(content);
|
$('#chatmsgs').html(content);
|
||||||
});
|
});
|
||||||
|
@ -1,11 +1,10 @@
|
|||||||
<div class="scrollable-box">
|
|
||||||
<div class="h4" id="player-name"></div>
|
<div class="h4" id="player-name"></div>
|
||||||
<p id="player-level"></p>
|
<div id="player-level"></div>
|
||||||
<div class="h5">Badges</div>
|
<div class="h5" id="badge-header">Badges</div>
|
||||||
<div id="loading-badges">
|
<div id="loading-badges">
|
||||||
<i class="fa fa-spinner fa-pulse"></i> Loading...
|
<i class="fa fa-spinner fa-pulse"></i> Loading...
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container" id="badge-container">
|
||||||
<div class="row" id="badges">
|
<div class="row" id="badges">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -25,13 +24,23 @@
|
|||||||
$.getJSON(mkApiUrl('getstats'), {
|
$.getJSON(mkApiUrl('getstats'), {
|
||||||
user: user
|
user: user
|
||||||
}, function (data) {
|
}, function (data) {
|
||||||
if (data.status === 'OK' && data.stats !== null) {
|
if (data.status === 'OK' && data.stats != null) {
|
||||||
|
if (data.stats.level != null) {
|
||||||
$('#player-level').text('Level ' + Math.floor(data.stats.level));
|
$('#player-level').text('Level ' + Math.floor(data.stats.level));
|
||||||
} else {
|
} else {
|
||||||
$('#player-level').text('Error: cannot load player stats.');
|
$('#player-level').text('Player does not exist.');
|
||||||
|
}
|
||||||
|
$('#player-name').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#player-name').css('color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#player-level').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#badge-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#badges').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('.badge-img').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
} else {
|
||||||
|
$('#player-level').text('Cannot load player stats.');
|
||||||
}
|
}
|
||||||
}).fail(function () {
|
}).fail(function () {
|
||||||
$('#player-level').text('Error: Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
|
$('#player-level').text('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -60,4 +69,3 @@
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</div>
|
|
@ -113,6 +113,7 @@ body {
|
|||||||
|
|
||||||
.badge-img {
|
.badge-img {
|
||||||
border: 2px solid green;
|
border: 2px solid green;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#terrain-image {
|
#terrain-image {
|
||||||
@ -191,11 +192,17 @@ body {
|
|||||||
background: rgba(0,0,0,.8);
|
background: rgba(0,0,0,.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatbox #chatmsgs .chat-username {
|
.chat-username {
|
||||||
color: green;
|
color: green;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chat-username-admin {
|
||||||
|
color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
#buttons {
|
#buttons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
@ -228,3 +235,39 @@ body {
|
|||||||
.scrollable-box {
|
.scrollable-box {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#player-name {
|
||||||
|
padding-left: 5px;
|
||||||
|
border-left: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player-level {
|
||||||
|
font-size: 120%;
|
||||||
|
color: #d5d5d5;
|
||||||
|
font-style: italic;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
border-left: 1px solid white;
|
||||||
|
border-bottom: 1px solid white;
|
||||||
|
padding-right: 100px;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
#badge-header {
|
||||||
|
padding-top: 5px;
|
||||||
|
border-top: 1px solid white;
|
||||||
|
border-right: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#badges {
|
||||||
|
border-right: 1px solid white;
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-badges {
|
||||||
|
border-right: 1px solid white;
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
@ -40,7 +40,11 @@ function getChat() {
|
|||||||
data = sortResults(data, 'time', true);
|
data = sortResults(data, 'time', true);
|
||||||
var content = "";
|
var content = "";
|
||||||
data.forEach(function (msg) {
|
data.forEach(function (msg) {
|
||||||
content += "<span class='chat-username' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />";
|
var usernameclass = "chat-username";
|
||||||
|
if (msg.username === 'skylarmt') {
|
||||||
|
usernameclass = "chat-username-admin"
|
||||||
|
}
|
||||||
|
content += "<span class='" + usernameclass + "' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />";
|
||||||
});
|
});
|
||||||
$('#chatmsgs').html(content);
|
$('#chatmsgs').html(content);
|
||||||
});
|
});
|
||||||
|
@ -1,11 +1,10 @@
|
|||||||
<div class="scrollable-box">
|
|
||||||
<div class="h4" id="player-name"></div>
|
<div class="h4" id="player-name"></div>
|
||||||
<p id="player-level"></p>
|
<div id="player-level"></div>
|
||||||
<div class="h5">Badges</div>
|
<div class="h5" id="badge-header">Badges</div>
|
||||||
<div id="loading-badges">
|
<div id="loading-badges">
|
||||||
<i class="fa fa-spinner fa-pulse"></i> Loading...
|
<i class="fa fa-spinner fa-pulse"></i> Loading...
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container" id="badge-container">
|
||||||
<div class="row" id="badges">
|
<div class="row" id="badges">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -25,13 +24,23 @@
|
|||||||
$.getJSON(mkApiUrl('getstats'), {
|
$.getJSON(mkApiUrl('getstats'), {
|
||||||
user: user
|
user: user
|
||||||
}, function (data) {
|
}, function (data) {
|
||||||
if (data.status === 'OK' && data.stats !== null) {
|
if (data.status === 'OK' && data.stats != null) {
|
||||||
|
if (data.stats.level != null) {
|
||||||
$('#player-level').text('Level ' + Math.floor(data.stats.level));
|
$('#player-level').text('Level ' + Math.floor(data.stats.level));
|
||||||
} else {
|
} else {
|
||||||
$('#player-level').text('Error: cannot load player stats.');
|
$('#player-level').text('Player does not exist.');
|
||||||
|
}
|
||||||
|
$('#player-name').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#player-name').css('color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#player-level').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#badge-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#badges').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('.badge-img').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
} else {
|
||||||
|
$('#player-level').text('Cannot load player stats.');
|
||||||
}
|
}
|
||||||
}).fail(function () {
|
}).fail(function () {
|
||||||
$('#player-level').text('Error: Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
|
$('#player-level').text('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -60,4 +69,3 @@
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</div>
|
|
@ -113,6 +113,7 @@ body {
|
|||||||
|
|
||||||
.badge-img {
|
.badge-img {
|
||||||
border: 2px solid green;
|
border: 2px solid green;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#terrain-image {
|
#terrain-image {
|
||||||
@ -191,11 +192,17 @@ body {
|
|||||||
background: rgba(0,0,0,.8);
|
background: rgba(0,0,0,.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatbox #chatmsgs .chat-username {
|
.chat-username {
|
||||||
color: green;
|
color: green;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chat-username-admin {
|
||||||
|
color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
#buttons {
|
#buttons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
@ -228,3 +235,39 @@ body {
|
|||||||
.scrollable-box {
|
.scrollable-box {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#player-name {
|
||||||
|
padding-left: 5px;
|
||||||
|
border-left: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player-level {
|
||||||
|
font-size: 120%;
|
||||||
|
color: #d5d5d5;
|
||||||
|
font-style: italic;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
border-left: 1px solid white;
|
||||||
|
border-bottom: 1px solid white;
|
||||||
|
padding-right: 100px;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
#badge-header {
|
||||||
|
padding-top: 5px;
|
||||||
|
border-top: 1px solid white;
|
||||||
|
border-right: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#badges {
|
||||||
|
border-right: 1px solid white;
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-badges {
|
||||||
|
border-right: 1px solid white;
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
@ -40,7 +40,11 @@ function getChat() {
|
|||||||
data = sortResults(data, 'time', true);
|
data = sortResults(data, 'time', true);
|
||||||
var content = "";
|
var content = "";
|
||||||
data.forEach(function (msg) {
|
data.forEach(function (msg) {
|
||||||
content += "<span class='chat-username' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />";
|
var usernameclass = "chat-username";
|
||||||
|
if (msg.username === 'skylarmt') {
|
||||||
|
usernameclass = "chat-username-admin"
|
||||||
|
}
|
||||||
|
content += "<span class='" + usernameclass + "' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />";
|
||||||
});
|
});
|
||||||
$('#chatmsgs').html(content);
|
$('#chatmsgs').html(content);
|
||||||
});
|
});
|
||||||
|
@ -1,11 +1,10 @@
|
|||||||
<div class="scrollable-box">
|
|
||||||
<div class="h4" id="player-name"></div>
|
<div class="h4" id="player-name"></div>
|
||||||
<p id="player-level"></p>
|
<div id="player-level"></div>
|
||||||
<div class="h5">Badges</div>
|
<div class="h5" id="badge-header">Badges</div>
|
||||||
<div id="loading-badges">
|
<div id="loading-badges">
|
||||||
<i class="fa fa-spinner fa-pulse"></i> Loading...
|
<i class="fa fa-spinner fa-pulse"></i> Loading...
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container" id="badge-container">
|
||||||
<div class="row" id="badges">
|
<div class="row" id="badges">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -25,13 +24,23 @@
|
|||||||
$.getJSON(mkApiUrl('getstats'), {
|
$.getJSON(mkApiUrl('getstats'), {
|
||||||
user: user
|
user: user
|
||||||
}, function (data) {
|
}, function (data) {
|
||||||
if (data.status === 'OK' && data.stats !== null) {
|
if (data.status === 'OK' && data.stats != null) {
|
||||||
|
if (data.stats.level != null) {
|
||||||
$('#player-level').text('Level ' + Math.floor(data.stats.level));
|
$('#player-level').text('Level ' + Math.floor(data.stats.level));
|
||||||
} else {
|
} else {
|
||||||
$('#player-level').text('Error: cannot load player stats.');
|
$('#player-level').text('Player does not exist.');
|
||||||
|
}
|
||||||
|
$('#player-name').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#player-name').css('color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#player-level').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#badge-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('#badges').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
$('.badge-img').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
|
||||||
|
} else {
|
||||||
|
$('#player-level').text('Cannot load player stats.');
|
||||||
}
|
}
|
||||||
}).fail(function () {
|
}).fail(function () {
|
||||||
$('#player-level').text('Error: Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
|
$('#player-level').text('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -60,4 +69,3 @@
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</div>
|
|
Reference in New Issue
Block a user