From: Tyler Mulligan <z@xonotic.org>
Date: Thu, 30 Jun 2011 02:45:48 +0000 (-0400)
Subject: cleaned up some styles, started laying out the recent games page with search.  Gave... 
X-Git-Url: https://git.rm.cloudns.org/?a=commitdiff_plain;h=d943c3eacece850c6809a8afff30d3182749d0d0;p=xonotic%2Fxonstat.git

cleaned up some styles, started laying out the recent games page with search.  Gave checkbox examples but they need to be resized and spritified.
---

diff --git a/xonstat/static/css/img/web_background.png b/xonstat/static/css/img/web_background.png
new file mode 100644
index 0000000..8fc240f
Binary files /dev/null and b/xonstat/static/css/img/web_background.png differ
diff --git a/xonstat/static/css/style.css b/xonstat/static/css/style.css
index 82fa51e..ec9ec54 100755
--- a/xonstat/static/css/style.css
+++ b/xonstat/static/css/style.css
@@ -29,11 +29,13 @@ h1 {
 h2 {
 	font-size:18px;
 	color:#D0E8FF;
+	text-shadow:1px 1px 4px #013;
 	margin:15px 0 12px;
 }
 h3 {
 	font-size:16px;
-	color:#FF7000;
+	/*color:#FF7000;*/
+	color:#ADC0D2;
 	margin:18px 0 4px;
 }
 h4 {
@@ -122,7 +124,7 @@ input { font-family: 'Xolonium', 'Arial', 'Helvetica'; }
 	text-align:center;
 	height:25px;
 	line-height:25px;
-	top:-44px;
+	top:-48px;
 	color:#DCE9F5;
 }
 .window {
@@ -154,8 +156,8 @@ input { font-family: 'Xolonium', 'Arial', 'Helvetica'; }
 /* Main Menu */
 #menu {
 	top: -33px;
-	left: -19px;
-	width:986px;
+	top: -40px;
+    width: 976px;
 	list-style:none;
 	border:1px solid #AED5FE;
 	border-top:0;
@@ -345,6 +347,8 @@ input[type=text]:hover, .textbox:hover { background-position:-128px -32px; }
 }
 
 /* Content Specific */
+
+/*Tables */
 #top-players, #top-servers, #top-maps {
     float: left;
     margin-bottom: 10px;
@@ -359,10 +363,15 @@ input[type=text]:hover, .textbox:hover { background-position:-128px -32px; }
 	top: -38px;
 	right: 0;
 }
-
+#search { margin-bottom:10px; }
+table { text-shadow:1px 1px 4px #013; }
+thead {
+	background-color:#020F1C;
+}
 thead.red {
-	color:#D31D12;
+	color:#EEAFAB;
 	background-color:#170403;
+	text-shadow:1px 1px 4px #722;
 }
 tr.odd.red {
 	background-color:#571612;
@@ -371,9 +380,9 @@ tr.even.red {
 	background-color:#571612;
 }
 thead.blue {
-	color:#2F53F7;
+	color:#ABBBEE;
 	background-color:#04081A;
-	border-color:#101940 !important;
+	text-shadow:1px 1px 4px #227;
 }
 tr.odd.blue {
 	background-color:#000F4C;
@@ -381,26 +390,38 @@ tr.odd.blue {
 tr.even.blue {
 	background-color:#571612;
 }
+
+/* Containers */
+#filter {
+	float:left;
+	width:200px;
+}
+#recent-games-list {
+	float:right;
+	width:735px;
+}
 .game {
-	background-color:#0a0a0a;
+	float:left;
+    background-image: -moz-linear-gradient(center bottom , #062C52, #041B33);
 	background-image: -webkit-gradient(
 		linear,
 		left bottom,
 		left top,
-		color-stop(0.67, #101114),
-		color-stop(0.51, #000A15)
-	);
-	background-image: -moz-linear-gradient(
-		center bottom,
-		#111 67%,
-		#000A15 51%
+		color-stop(0.51, #062C52),
+		color-stop(0.51, #041B33)
 	);
-	border:1px solid #373B45;
-	margin-bottom:10px;
-	padding:3px;
+    border: 1px solid #A4B7CA;
+    border-radius: 7px;
+    -moz-border-radius: 7px;
+    -webkit-border-radius: 7px;
+    margin-bottom: 20px;
+    padding: 10px 7px;
+	box-shadow: 0 0 3px 1px;
+	min-width:600px;
 }
 .game h3 {
 	color:#93B1CF;
+	text-shadow:1px 1px 2px #000;
 	padding:4px 4px 8px;
 	margin:0;
 }
@@ -410,14 +431,22 @@ tr.even.blue {
 .game h3 a:hover {
 	color:#fff;
 }
+.game th {
+	font-size:10px;
+	padding:2px 5px;
+	min-width:40px;
+}
+.game th.nick {
+	min-width:160px;
+}
 .permalink {
 	float:right;
 	font-size:12px;
 }
 .permalink a {
-	color:#666 !important;
+	color:#6F8194 !important;
 }
 .permalink a:hover {
-	color:#999 !important;
+	color:#A4B7CA !important;
 	text-decoration:underline;
 }
diff --git a/xonstat/templates/game_index.mako b/xonstat/templates/game_index.mako
index a1cf8f6..000c7c3 100755
--- a/xonstat/templates/game_index.mako
+++ b/xonstat/templates/game_index.mako
@@ -9,15 +9,34 @@ Game Index - ${parent.title()}
 <h2>Sorry, no games yet. Get playing!</h2>
 
 % else:
-<h2>Recent Games</h2>
-% for (game, server, map) in games:
-<div class="game">
-	<h3><a href="${request.route_url("map_info", id=map.map_id)}" name="Map info page for ${map.name}">${map.name}</a> on <a href="${request.route_url("server_info", id=server.server_id)}" name="Server info page for ${server.name}">${server.name}</a> <span class="permalink">(<a href="${request.route_url('game_info', id=game.game_id)}" name="Permalink for game #${game.game_id}">permalink</a>)</span></h3>
-## show scoreboard using a def from another file
-${scoreboard(game.game_type_cd, pgstats[game.game_id])}
+<div id="filter">
+	<h2>Filter</h2>
+	<input id="search" type="text" name="search" />
+	<input id="show-bots" type="checkbox" class="checkbox" checked="checked" /><label for="show-bots" class="checkbox-label">Show Bots</label><br />
+	<h3>Gametype</h3>
+	<input id="game-ca" type="checkbox" class="checkbox" /><label for="game-ca" class="checkbox-label">CA</label><br />
+	<input id="game-ctf" type="checkbox" class="checkbox" /><label for="game-ctf" class="checkbox-label">CTF</label><br />
+	<input id="game-dm" type="checkbox" class="checkbox" /><label for="game-dm" class="checkbox-label">DM</label><br />
+	<input id="game-freezetag" type="checkbox" class="checkbox" /><label for="game-freeztag" class="checkbox-label">Freezetag</label><br />
+	<h3>Sort By</h3>
+	<select id="sort-by">
+		<option>Kills</option>
+		<option>Deaths</option>
+		<option>Suicides</option>
+		<option>Time</option>
+		<option>Score</option>
+	</select>
 </div>
-
+<div id="recent-games-list">
+	<h2>Recent Games</h2>
+	% for (game, server, map) in games:
+	<div class="game">
+		<h3><a href="${request.route_url("map_info", id=map.map_id)}" name="Map info page for ${map.name}">${map.name}</a> on <a href="${request.route_url("server_info", id=server.server_id)}" name="Server info page for ${server.name}">${server.name}</a> <span class="permalink">(<a href="${request.route_url('game_info', id=game.game_id)}" name="Permalink for game #${game.game_id}">permalink</a>)</span></h3>
+	## show scoreboard using a def from another file
+	${scoreboard(game.game_type_cd, pgstats[game.game_id])}
+	</div>
 % endfor
+</div><!-- #recent-games-list -->
 % endif
 
 % if games.previous_page:
diff --git a/xonstat/templates/scoreboard.mako b/xonstat/templates/scoreboard.mako
index ba33cc7..d0444f2 100755
--- a/xonstat/templates/scoreboard.mako
+++ b/xonstat/templates/scoreboard.mako
@@ -46,22 +46,22 @@ ${scoreboard_header(game_type_cd, pgstats[0])}
 % endif
 
 % if game_type_cd == 'ctf':
-    <thead class="${pgstat.team_html_color()}">
+    <thead class="ctf ${pgstat.team_html_color()}">
 		<tr>
-			<th>Nick</th>
-			<th>Kills</th>
-			<th>Captures</th>
-			<th>Pickups</th>
-			<th>Flag Carrier Kills</th>
-			<th>Returns</th>
-			<th>Score</th>
-			<th>Accuracy</th>
+			<th class="nick">Nick</th>
+			<th class="kills">Kills</th>
+			<th class="captures">Captures</th>
+			<th class="pickups">Pickups</th>
+			<th class="fck" title="Flag Carrier Kill">FCK</th>
+			<th class="returns">Returns</th>
+			<th class="score">Score</th>
+			<th class="accuracy">Accuracy</th>
 		</tr>
     </thead>
 % endif
 
 % if game_type_cd == 'ca':
-    <thead class="${pgstat.team_html_color()}">
+    <thead class="ca ${pgstat.team_html_color()}">
 		<tr>
 			<th>Nick</th>
 			<th>Kills</th>
@@ -72,7 +72,7 @@ ${scoreboard_header(game_type_cd, pgstats[0])}
 % endif
 
 % if game_type_cd == 'freezetag':
-    <thead class="${pgstat.team_html_color()}">
+    <thead class="freezetag ${pgstat.team_html_color()}">
 		<tr>
 			<th>Nick</th>
 			<th>Kills</th>