[WIP] Redesign of AoS Status Page

shywolf91 · February 28, 2015, 12:54am

A little while ago I saw a thread by Warp on BnS (click here) about redesigning the current status page layout and thought it was good. Since I haven’t seen any updates from that project I got bored one night before an exam and worked on a design. This is still a WIP. Tell us what you think about this design and how it compares to the current version. Also the table/player list is currently hidden under the join server button and a button hides and shows the table.

Overview

image

Red indicates that those areas are incomplete and are just text

http://i.imgur.com/aiI0BGB.png

html code:

status.html

{{server.name}} body { margin: 0; padding: 0; font-family: Arial;

}
h1, h2, h4, h5, h6, p {
margin: 0;

}

h3 {
margin:0;
display:inline;
}
.game-area {
width: 80%;
margin: auto;
padding: 20px 0;

}

.game-top {
width: 100%;
overflow: hidden;
}
.game-left {
float: left;
width: 50%;
overflow: hidden;
margin-right: 3%;
}
.game-left h1 {
text-transform: uppercase;
font-size: 36px;
font-family: ‘Oswald’, sans-serif;
}
.game-left h2 {
text-transform: uppercase;
font-size: 30px;
color: #666;
font-weight: 100;
}
.game-left img {
width: 70%;
height: auto;
margin-top: 20px;
}

.game-right {
overflow: hidden;
}
.game-right h1 {
text-transform: uppercase;
font-size: 36px;
font-family: ‘Oswald’, sans-serif;
}
.yellow {
color: #FD9F01;
}
.green {
color: #6EBD29;
}
.extra {
color: #A403FE;
}
.blue {
color: #0136DB;
}
.red {
color: #FB0606;
}
.game-right h2 {
margin: 10px 0;
color: #666;
font-family: tahoma;
font-weight: 300;
font-size: 30px;
}
.game-right h3 {
font-size: 26px;
font-family: ‘Oswald’, sans-serif;
}
.game-right p {
font-size: 16px;
color: #666;
margin: 10px 0;
line-height: 24px;
}

.game-bottom {
width: 100%;
overflow: hidden;
margin: 20px 0;
}
.game-bottom a {
color: rgba(255,255,255,1);
text-decoration: none;
background: linear-gradient(#09CB10, #03C70B);
font-family: ‘Oswald’, sans-serif;
font-weight: normal;
text-transform: uppercase;
font-size: 28px;
display: block;
padding: 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px -7px 0px rgba(219,31,5,1), 0px 9px 25px rgba();
-moz-box-shadow: 0px -7px 0px rgba(219,31,5,1), 0px 9px 25px rgba();
box-shadow: 0 -7px 0 #009703, 0 9px 25px;
margin: 10px auto;
text-align: center;

-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}

/* tables */
table.playerlist {
background-color: #CDCDCD;
font-size: 8pt;
width: 75%;
text-align: left;
}
table.playerlist thead tr th, table.playerlist tfoot tr th {
background-color: #e6EEEE;
border: 0px solid #FFF;
font-size: 8pt;
padding: 1px;
}
table.playerlist thead tr .header {
background-image: url(http://i.imgur.com/jNaQX.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.playerlist tbody td {
color: #3D3D3D;
padding: 1px;
background-color: #FFF;
vertical-align: top;
}
p.hidden { display: none;}
table.playerlist tbody tr.odd td {
background-color:#F0F0F6;
}
table.playerlist thead tr .headerSortUp {
background-image: url(http://i.imgur.com/mn5iZ.gif);
}
table.playerlist thead tr .headerSortDown {
background-image: url(http://i.imgur.com/pHz3n.gif);
}
table.playerlist thead tr .headerSortDown, table.playerlist thead tr .headerSortUp {
background-color: #8dbdd8;
}

Current uptime: {{(reactor.seconds() - server.start_time)|int}} seconds

statistics & info

Top Player: Deuce

Current Map:

{{server.map_info.name}} by {{server.map_info.author}}

Player Count:

{{server.connections|count}}/{{server.max_players}}

Weapon Usage:

SMG 31% Rifle 40% SHOTGUN 21%

Intel Capture:

[Blue 0/10], [Red 7/10]

Enabled scripts:

Map Rotation:

   </div>
   <div class="game-bottom">
     <a href="" class="button">Join Server</a>
        <div id="spoiler" style="display:none" align="center">

>

           </tr>

{% for player in server.players.values() %}

{% endfor %}

           </table>
           
           </div>

Show/hide Table

I’ll probably tweak the design and try to add more stuff later.

id	Name	Team	Score	Ping
{{player.team.id}}	{{player.name}}	{{player.team.name}}	{{player.kills}}	{{player.latency}}

Torch · February 28, 2015, 5:00am

I really like warp’s design. If you could have a background image that changes with each map (taken in OS with all the shaders) I think that would be nice. (: An Isometric view of the map might be nice instead of the flat birds eye-view which really doesn’t tell anyone anything unless you’ve been on the map before.

shywolf91 · February 28, 2015, 7:01am

Well as far as i know the only map view is the overview flat one.

I’ll probably tweak the design some more when i get more time.

SnIpEr · February 28, 2015, 11:17am

Some staff members use this to check for suspicious players and this design hides the list, even if you have access to it, you have one more button to press.
Imo, stats page doesnt have to be pretty, just the information needs to be easily obtained.

Also, you made uptime in big numbers but you didnt have the idea of turning seconds into a duration format we can more easily understand.

Torch · February 28, 2015, 4:46pm

Shy if you don't mind I can give a swing at the design as well. Would be cool to color code the servers. I could redesign all of aloha if anyone cared enough. Could do something like our new chat logo for Rev and make everything the new "Flat" theme.

shywolf91 · February 28, 2015, 6:03pm

Since this is a WIP some stuff can be changed.

Also about the time: I am unsure what would needed to be done to change it from seconds to minutes/hours/etc.

In both my status page and the original one (and aloha one) the time is determined by this input:

{{(reactor.seconds() - server.start_time)|int}}

shywolf91 · February 28, 2015, 6:04pm

Go ahead

Torch · February 28, 2015, 7:09pm

Can you give me some dimensions? I’m going to make the mockup in an image format. Like dimensions of the image… table… etc…

shywolf91 · February 28, 2015, 7:28pm

Not sure. My design looks different on different screen sizes.

Raykay101 · February 28, 2015, 7:44pm

I like the design. Personally Im more of a fan of Warps design. I do agree with Sniper that some Admins do use the page to look for suspicious activity and without being displayed the Admin is required to hit Ctrl+left click if he/she wants to scan multiple servers at once.

Torch · February 28, 2015, 7:55pm

I definitely think the table should still be there.

shywolf91 · February 28, 2015, 8:02pm

Well in my code the table is still there. The spolier effect can be removed.

Torch · February 28, 2015, 8:38pm

I personally find who’s online more interesting than the gun stat percentage of the server, but that’s just me lol.

Raykay101 · February 28, 2015, 8:58pm

Me two. I can’t seem to understand what the icons mean on the status pages.

Torch · February 28, 2015, 10:30pm

So I got bored and made a mockup.

The goal eventually would be to have a "personalized" server list where you can click an "arrow" next to the Server Title e.g. "Babel" and it will collapse the table/map. You would also be able to rearrange the server list or set "favorites" that way you only see the stats of the server you want to see. All of this would be stored via cookies/login.

You can join the game by doing two things either clicking the Server Name e.g. "Babel" or by clicking the join game button on the map.
May come up with some other ideas, so the map isn't inhibited, but the map really isn't something people use that often anyways…

Many more things can be added or changed this is just a proof of concept. If you hate it or if you love it please leave feedback.

shywolf91 · February 28, 2015, 11:02pm

That might be possible. But AFAIK every server only as a html page that displays the information from that server.
(pysnip → feature_server → web → template → status.html)

Also I feel it should have different colors than the one in your design. Too bright and cluttered.

Torch · February 28, 2015, 11:17pm

Unpatriotic haole!!!
Yeah, I can change the colors lol. And I was suggesting a server list being the main page when you go to aloha.pk and all of that happening.

Danke · February 28, 2015, 11:28pm

The status server could stand to be redesigned but this seems like it’s pushing most of the useful information off or at least down the page.

shywolf91 · February 28, 2015, 11:33pm

Okay this should convert the uptime from seconds to minutes:

<h2>Current Uptime: </h2><h2 id="minutes"></h2><h2> minutes</h2>

<script>
/* JavaScript Code */
var minutes = Math.floor({{(reactor.seconds() - server.start_time)|int}} / 60);
document.getElementById("minutes").innerHTML = minutes;
</script>

this is why we should discuss possible designs that fit everyone’s needs.

The table could also be added at the top of the page in a spolier div so that it is hidden for people who don’t needs, but easily opened for admins and those who need it.

Torch · February 28, 2015, 11:37pm

Yeah, what’s useful to an admin might be different than what’s useful to a player.
I think the best way to figure out what everyone needs/finds important is to create a list.

Things I find important in no particular order:

Map name
Image of map
Player name list
Player count
Country of players / ping / accuracy / ratio (basically all the stats in the table)
Map rotation
Server name