]> de.git.xonotic.org Git - xonotic/xonstat.git/commitdiff
cleaned up some styles, started laying out the recent games page with search. Gave...
authorTyler Mulligan <z@xonotic.org>
Thu, 30 Jun 2011 02:45:48 +0000 (22:45 -0400)
committerTyler Mulligan <z@xonotic.org>
Thu, 30 Jun 2011 02:45:48 +0000 (22:45 -0400)
xonstat/static/css/img/web_background.png [new file with mode: 0644]
xonstat/static/css/style.css
xonstat/templates/game_index.mako
xonstat/templates/scoreboard.mako

diff --git a/xonstat/static/css/img/web_background.png b/xonstat/static/css/img/web_background.png
new file mode 100644 (file)
index 0000000..8fc240f
Binary files /dev/null and b/xonstat/static/css/img/web_background.png differ
index 82fa51e3940c9becc0af6d6f19948d78db6b31d1..ec9ec5464a1001d11308a03052f44a5f7305c22a 100755 (executable)
@@ -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;
 }
index a1cf8f608d796068c2bbd630c699d865b8cc5de3..000c7c38ead4f2a3e10bb2206d1be74f50c58b28 100755 (executable)
@@ -9,15 +9,34 @@ Game Index - ${parent.title()}
 <h2>Sorry, no games yet. Get playing!</h2>\r
 \r
 % else:\r
-<h2>Recent Games</h2>\r
-% for (game, server, map) in games:\r
-<div class="game">\r
-       <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>\r
-## show scoreboard using a def from another file\r
-${scoreboard(game.game_type_cd, pgstats[game.game_id])}\r
+<div id="filter">\r
+       <h2>Filter</h2>\r
+       <input id="search" type="text" name="search" />\r
+       <input id="show-bots" type="checkbox" class="checkbox" checked="checked" /><label for="show-bots" class="checkbox-label">Show Bots</label><br />\r
+       <h3>Gametype</h3>\r
+       <input id="game-ca" type="checkbox" class="checkbox" /><label for="game-ca" class="checkbox-label">CA</label><br />\r
+       <input id="game-ctf" type="checkbox" class="checkbox" /><label for="game-ctf" class="checkbox-label">CTF</label><br />\r
+       <input id="game-dm" type="checkbox" class="checkbox" /><label for="game-dm" class="checkbox-label">DM</label><br />\r
+       <input id="game-freezetag" type="checkbox" class="checkbox" /><label for="game-freeztag" class="checkbox-label">Freezetag</label><br />\r
+       <h3>Sort By</h3>\r
+       <select id="sort-by">\r
+               <option>Kills</option>\r
+               <option>Deaths</option>\r
+               <option>Suicides</option>\r
+               <option>Time</option>\r
+               <option>Score</option>\r
+       </select>\r
 </div>\r
-\r
+<div id="recent-games-list">\r
+       <h2>Recent Games</h2>\r
+       % for (game, server, map) in games:\r
+       <div class="game">\r
+               <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>\r
+       ## show scoreboard using a def from another file\r
+       ${scoreboard(game.game_type_cd, pgstats[game.game_id])}\r
+       </div>\r
 % endfor\r
+</div><!-- #recent-games-list -->\r
 % endif\r
 \r
 % if games.previous_page:\r
index ba33cc7af35a1b80ed09a2601e8c2cb83c71903e..d0444f2c3f243559982a98a85bb6d79a40fbad66 100755 (executable)
@@ -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>