Style changes on profile screen

master
Skylar Ittner 8 years ago
parent ba26006bac
commit 6699240b82

@ -113,6 +113,7 @@ body {
.badge-img {
border: 2px solid green;
margin-bottom: 10px;
}
#terrain-image {
@ -191,11 +192,17 @@ body {
background: rgba(0,0,0,.8);
}
.chatbox #chatmsgs .chat-username {
.chat-username {
color: green;
font-weight: bold;
}
.chat-username-admin {
color: red;
font-weight: bold;
font-style: italic;
}
#buttons {
position: absolute;
right: 0px;
@ -227,4 +234,40 @@ body {
.scrollable-box {
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);
var content = "";
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);
});

@ -1,63 +1,71 @@
<div class="scrollable-box">
<div class="h4" id="player-name"></div>
<p id="player-level"></p>
<div class="h5">Badges</div>
<div id="loading-badges">
<i class="fa fa-spinner fa-pulse"></i> Loading...
</div>
<div class="container">
<div class="row" id="badges">
<div class="h4" id="player-name"></div>
<div id="player-level"></div>
<div class="h5" id="badge-header">Badges</div>
<div id="loading-badges">
<i class="fa fa-spinner fa-pulse"></i> Loading...
</div>
<div class="container" id="badge-container">
<div class="row" id="badges">
</div>
</div>
<script>
function popBadge(name, desc) {
navigator.notification.alert(desc, null, name, "Close");
}
</div>
<script>
function popBadge(name, desc) {
navigator.notification.alert(desc, null, name, "Close");
}
function loadProfile(user) {
$('#player-name').text(user);
loadBadges(user);
loadPlayerStats(user);
}
function loadProfile(user) {
$('#player-name').text(user);
loadBadges(user);
loadPlayerStats(user);
}
function loadPlayerStats(user) {
$.getJSON(mkApiUrl('getstats'), {
user: user
}, function (data) {
if (data.status === 'OK' && data.stats !== null) {
function loadPlayerStats(user) {
$.getJSON(mkApiUrl('getstats'), {
user: user
}, function (data) {
if (data.status === 'OK' && data.stats != null) {
if (data.stats.level != null) {
$('#player-level').text('Level ' + Math.floor(data.stats.level));
} else {
$('#player-level').text('Error: cannot load player stats.');
$('#player-level').text('Player does not exist.');
}
}).fail(function () {
$('#player-level').text('Error: Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
});
}
$('#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 () {
$('#player-level').text('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
});
}
function loadBadges(user) {
$('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
$('#loading-badges').css('display', 'block');
$.getJSON(
mkApiUrl('getbadges') + '?user=' + user,
function (data) {
if (data.status === 'OK') {
data.badges.forEach(function (item) {
$('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
<img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
</div>');
});
$('#loading-badges').css('display', 'none');
} else {
$('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
}
}
).fail(
function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
function loadBadges(user) {
$('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
$('#loading-badges').css('display', 'block');
$.getJSON(
mkApiUrl('getbadges') + '?user=' + user,
function (data) {
if (data.status === 'OK') {
data.badges.forEach(function (item) {
$('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
<img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
</div>');
});
$('#loading-badges').css('display', 'none');
} else {
$('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
}
);
}
</script>
</div>
}
).fail(
function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
}
);
}
</script>

@ -113,6 +113,7 @@ body {
.badge-img {
border: 2px solid green;
margin-bottom: 10px;
}
#terrain-image {
@ -191,11 +192,17 @@ body {
background: rgba(0,0,0,.8);
}
.chatbox #chatmsgs .chat-username {
.chat-username {
color: green;
font-weight: bold;
}
.chat-username-admin {
color: red;
font-weight: bold;
font-style: italic;
}
#buttons {
position: absolute;
right: 0px;
@ -227,4 +234,40 @@ body {
.scrollable-box {
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);
var content = "";
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);
});

@ -1,63 +1,71 @@
<div class="scrollable-box">
<div class="h4" id="player-name"></div>
<p id="player-level"></p>
<div class="h5">Badges</div>
<div id="loading-badges">
<i class="fa fa-spinner fa-pulse"></i> Loading...
</div>
<div class="container">
<div class="row" id="badges">
<div class="h4" id="player-name"></div>
<div id="player-level"></div>
<div class="h5" id="badge-header">Badges</div>
<div id="loading-badges">
<i class="fa fa-spinner fa-pulse"></i> Loading...
</div>
<div class="container" id="badge-container">
<div class="row" id="badges">
</div>
</div>
<script>
function popBadge(name, desc) {
navigator.notification.alert(desc, null, name, "Close");
}
</div>
<script>
function popBadge(name, desc) {
navigator.notification.alert(desc, null, name, "Close");
}
function loadProfile(user) {
$('#player-name').text(user);
loadBadges(user);
loadPlayerStats(user);
}
function loadProfile(user) {
$('#player-name').text(user);
loadBadges(user);
loadPlayerStats(user);
}
function loadPlayerStats(user) {
$.getJSON(mkApiUrl('getstats'), {
user: user
}, function (data) {
if (data.status === 'OK' && data.stats !== null) {
function loadPlayerStats(user) {
$.getJSON(mkApiUrl('getstats'), {
user: user
}, function (data) {
if (data.status === 'OK' && data.stats != null) {
if (data.stats.level != null) {
$('#player-level').text('Level ' + Math.floor(data.stats.level));
} else {
$('#player-level').text('Error: cannot load player stats.');
$('#player-level').text('Player does not exist.');
}
}).fail(function () {
$('#player-level').text('Error: Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
});
}
$('#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 () {
$('#player-level').text('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
});
}
function loadBadges(user) {
$('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
$('#loading-badges').css('display', 'block');
$.getJSON(
mkApiUrl('getbadges') + '?user=' + user,
function (data) {
if (data.status === 'OK') {
data.badges.forEach(function (item) {
$('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
<img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
</div>');
});
$('#loading-badges').css('display', 'none');
} else {
$('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
}
}
).fail(
function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
function loadBadges(user) {
$('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
$('#loading-badges').css('display', 'block');
$.getJSON(
mkApiUrl('getbadges') + '?user=' + user,
function (data) {
if (data.status === 'OK') {
data.badges.forEach(function (item) {
$('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
<img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
</div>');
});
$('#loading-badges').css('display', 'none');
} else {
$('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
}
);
}
</script>
</div>
}
).fail(
function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
}
);
}
</script>

@ -113,6 +113,7 @@ body {
.badge-img {
border: 2px solid green;
margin-bottom: 10px;
}
#terrain-image {
@ -191,11 +192,17 @@ body {
background: rgba(0,0,0,.8);
}
.chatbox #chatmsgs .chat-username {
.chat-username {
color: green;
font-weight: bold;
}
.chat-username-admin {
color: red;
font-weight: bold;
font-style: italic;
}
#buttons {
position: absolute;
right: 0px;
@ -227,4 +234,40 @@ body {
.scrollable-box {
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);
var content = "";
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);
});

@ -1,63 +1,71 @@
<div class="scrollable-box">
<div class="h4" id="player-name"></div>
<p id="player-level"></p>
<div class="h5">Badges</div>
<div id="loading-badges">
<i class="fa fa-spinner fa-pulse"></i> Loading...
</div>
<div class="container">
<div class="row" id="badges">
<div class="h4" id="player-name"></div>
<div id="player-level"></div>
<div class="h5" id="badge-header">Badges</div>
<div id="loading-badges">
<i class="fa fa-spinner fa-pulse"></i> Loading...
</div>
<div class="container" id="badge-container">
<div class="row" id="badges">
</div>
</div>
<script>
function popBadge(name, desc) {
navigator.notification.alert(desc, null, name, "Close");
}
</div>
<script>
function popBadge(name, desc) {
navigator.notification.alert(desc, null, name, "Close");
}
function loadProfile(user) {
$('#player-name').text(user);
loadBadges(user);
loadPlayerStats(user);
}
function loadProfile(user) {
$('#player-name').text(user);
loadBadges(user);
loadPlayerStats(user);
}
function loadPlayerStats(user) {
$.getJSON(mkApiUrl('getstats'), {
user: user
}, function (data) {
if (data.status === 'OK' && data.stats !== null) {
function loadPlayerStats(user) {
$.getJSON(mkApiUrl('getstats'), {
user: user
}, function (data) {
if (data.status === 'OK' && data.stats != null) {
if (data.stats.level != null) {
$('#player-level').text('Level ' + Math.floor(data.stats.level));
} else {
$('#player-level').text('Error: cannot load player stats.');
$('#player-level').text('Player does not exist.');
}
}).fail(function () {
$('#player-level').text('Error: Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
});
}
$('#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 () {
$('#player-level').text('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
});
}
function loadBadges(user) {
$('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
$('#loading-badges').css('display', 'block');
$.getJSON(
mkApiUrl('getbadges') + '?user=' + user,
function (data) {
if (data.status === 'OK') {
data.badges.forEach(function (item) {
$('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
<img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
</div>');
});
$('#loading-badges').css('display', 'none');
} else {
$('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
}
}
).fail(
function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
function loadBadges(user) {
$('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
$('#loading-badges').css('display', 'block');
$.getJSON(
mkApiUrl('getbadges') + '?user=' + user,
function (data) {
if (data.status === 'OK') {
data.badges.forEach(function (item) {
$('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
<img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
</div>');
});
$('#loading-badges').css('display', 'none');
} else {
$('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
}
);
}
</script>
</div>
}
).fail(
function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
}
);
}
</script>