Style changes on profile screen

master
Skylar Ittner 8 years ago
parent ba26006bac
commit 6699240b82

@ -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>