Merge pull request #27 from antzucaro/elo-ping-latency

[xonotic/xonstat.git] / xonstat / templates / game_info.mako

diff --git a/xonstat/templates/game_info.mako b/xonstat/templates/game_info.mako
index de2acf9c52c43c4a161f6d0906848e369671df8d..2b7cd70670330224e6d0011b6eaea834e9f69f7e 100644 (file)
--- a/xonstat/templates/game_info.mako
+++ b/xonstat/templates/game_info.mako
@@ -7,18 +7,13 @@
   ${nav.nav('games')}
 </%block>
 
-<%block name="css">
-  ${parent.css()}
-  <link href="/static/css/sprites.css" rel="stylesheet">
-</%block>
-
-<%block name="js">
-  ${parent.js()}
+<%block name="foundation">
   <script>
-  $(".collapse").collapse();
-
-  // show accordion only when loaded to prevent rollup from being seen
-  $("#acc-accordion").css('display', '');
+  $(document).foundation({
+      accordion: {
+        multi_expand: true,
+      }
+    });
   </script>
 </%block>
 
@@ -36,7 +31,7 @@
     <div class="small-12 columns">
       <h3>Game #${game.game_id}</h3>
       <p>
-        <img src="/static/images/icons/24x24/${game.game_type_cd}.png" alt="${game.game_type_cd}"/> ${gametype.descr} (${game.game_type_cd})<br />
+        <span class="sprite sprite-${game.game_type_cd}"></span> ${gametype.descr} <br />
         Played ${game.fuzzy_date()} <span class="abstime" data-epoch="${game.epoch()}" title="${game.start_dt.strftime('%a, %d %b %Y %H:%M:%S UTC')}"> <i class="fa fa-info-circle"></i></span><br />
         Server: <a href="${request.route_url("server_info", id=server.server_id)}" name="Server info page for ${server.name}">${server.name}</a><br />
         Map: <a href="${request.route_url("map_info", id=map.map_id)}" name="Map info page for ${map.name}">${map.name}</a><br />
@@ -78,13 +73,15 @@
               ${tgstat.caps}
             % elif game.game_type_cd == 'ca':
               ${tgstat.rounds}
+            % elif game.game_type_cd == 'nb':
+              ${tgstat.caps}
             % else:
               ${tgstat.score}
             % endif
           </div>
         </div>
 
-        <div class="small-11 columns game">
+        <div class="small-12 medium-11 columns game">
           ${scoreboard(game.game_type_cd, stats_by_team[tgstat.team], show_elo, show_latency)}
         </div>
       </div>
@@ -102,61 +99,54 @@
   % endif
 
   % if len(captimes) > 0:
-  <div class="row">
-    <div class="small-6 columns">
-      <h3>Best Flag Capture Times</h3>
-      <table class="table-hover table-condensed">
-        <thead>
+    <div class="row">
+      <div class="small-6 columns">
+        <h3>Best Flag Capture Times</h3>
+        <table class="table-hover table-condensed">
+          <thead>
+            <tr>
+              <th>Nick</th>
+              <th>Captime</th>
+            </tr>
+          </thead>
+          <tbody>
+          % for pgs in captimes:
           <tr>
-            <th>Nick</th>
-            <th>Captime</th>
-          </tr>
-        </thead>
-        <tbody>
-        % for pgs in captimes:
-        <tr>
-          <td>
-            % if pgs.player_id > 2:
-            <a href="${request.route_url("player_info", id=pgs.player_id)}"
-              title="Go to the info page for this player">
+            <td>
+              % if pgs.player_id > 2:
+              <a href="${request.route_url("player_info", id=pgs.player_id)}"
+                title="Go to the info page for this player">
+                <span class="nick">${pgs.nick_html_colors()|n}</span>
+              </a>
+              % else:
               <span class="nick">${pgs.nick_html_colors()|n}</span>
-            </a>
-            % else:
-            <span class="nick">${pgs.nick_html_colors()|n}</span>
-            % endif
-          </td>
-          <td>${round(float(pgs.fastest.seconds) + (pgs.fastest.microseconds/1000000.0), 2)}</td>
-        </tr>
-        % endfor
-        </tbody>
-      </table>
+              % endif
+            </td>
+            <td>${round(float(pgs.fastest.seconds) + (pgs.fastest.microseconds/1000000.0), 2)}</td>
+          </tr>
+          % endfor
+          </tbody>
+        </table>
+      </div>
     </div>
-  </div>
-% endif
+  % endif
 
-% if len(pgstats) > 0 and len(pwstats) > 0:
-  <div class="row">
-    <div class="small-12 columns">
-      <h3>Accuracy Information</h3>
-      <div class="accordion" id="acc-accordion" style="display:none;">
-        % for pgstat in pgstats:
-          % if pgstat.player_game_stat_id in pwstats:
-            <div class="accordion-group">
-              <div class="accordion-heading">
-                <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc-accordion" href="#accuracy-${pgstat.player_game_stat_id}">
-                  Accuracy for ${pgstat.nick_html_colors()|n}
-                </a>
-              </div>
-              <div id="accuracy-${pgstat.player_game_stat_id}" class="accordion-body collapse in">
-                <div class="accordion-inner">
-                  ${accuracy(pwstats[pgstat.player_game_stat_id])}
-                </div>
-              </div>
-            </div>
-          % endif
-        % endfor
+  % if len(pgstats) > 0 and len(pwstats) > 0:
+    <div class="row">
+      <div class="small-12 medium-9 columns">
+          <ul class="accordion" data-accordion>
+            % for pgstat in pgstats:
+              % if pgstat.player_game_stat_id in pwstats:
+                <li class="accordion-navigation">
+                  <a href="#accuracy-${pgstat.player_game_stat_id}">Accuracy for ${pgstat.nick_html_colors()|n}</a>
+                  <div id="accuracy-${pgstat.player_game_stat_id}" class="content">
+                    ${accuracy(pwstats[pgstat.player_game_stat_id])}
+                  </div>
+                </li>
+              % endif
+            % endfor
+          </ul>
+        </div>
       </div>
-    </div>
-    % endif
-  </div>
+  % endif
 % endif