Overhauled leaderboard screen

client/templates/leaderboard.jade

@@ -1,58 +1,127 @@
-style
- body {
-  font-family: Verdana;
-  font-size: 13px;
-  background: #eee;
- }
- td {
-  padding: 10px;
- }
- tr {
-  background-color: #d3d3d3;
- }
- table {
-  border: 2px solid gray;
-  border-radius: 10px;
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  border-collapse: collapse;
-  border-style: hidden;
-  box-shadow: 0 0 0 1px #666;
- }
- tr:nth-child(even) {
-  background-color: #c3c3c3;
- }
- th{
-  width: 200px;
-  border-bottom: 1px solid gray;
- }
- table tr:first-child th:first-child,
- table.Info tr:first-child td:first-child {
-  border-top-left-radius: 10px;
- }
- table tr:first-child th:last-child,
- table.Info tr:first-child td:last-child {
-  border-top-right-radius: 10px;
- }
+style
+  @font-face {
+    font-family: 'origicideregular';
+    src: url('http://p-insurgence.com/fonts/Origicide-webfont.eot');
+    src: url('http://p-insurgence.com/fonts/Origicide-webfont.eot?#iefix') format('embedded-opentype'),
+         url('http://p-insurgence.com/fonts/Origicide-webfont.woff') format('woff'),
+         url('http://p-insurgence.com/fonts/Origicide-webfont.ttf') format('truetype'),
+         url('http://p-insurgence.com/fonts/Origicide-webfont.svg#origicideregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+  body {
+    font-family: 'Helvetica Neue', Helvetica, Arial;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    color: #3b3b3b;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    background: #2b2b2b;
+  }
+  .wrapper {
+    margin: 0 auto;
+    padding: 40px;
+    max-width: 800px;
+  }
+  table {
+    margin: 0 0 40px 0;
+    width: 100%;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    display: table;
+  }
+  @media screen and (max-width: 580px) {
+    .table {
+      display: block;
+    }
+  }
+  .row {
+    display: table-row;
+    background: #f6f6f6;
+  }
+  .row:nth-of-type(odd) {
+    background: #e9e9e9;
+  }
+  .row.header {
+    font-weight: 900;
+    color: #fff;
+    background: #ea6153;
+  }
+  .row.header.name {
+    font-family: 'origicideregular';
+    font-size: large;
+    font-weight: 100;
+  }
+  .row.green {
+    background: #27ae60;
+  }
+  .row.blue {
+    background: #2980b9;
+  }
+  @media screen and (max-width: 580px) {
+    .row {
+      padding: 8px 0;
+      display: block;
+    }
+  }
+  .cell {
+    padding: 6px 12px;
+    display: table-cell;
+    width: 50px;
+  }
+  @media screen and (max-width: 580px) {
+    .cell {
+      padding: 2px 12px;
+      display: block;
+    }
+  }
+  a {
+    color: black;
+    text-decoration: none;
+  }
+  .crown {
+    vertical-align: bottom;
+    width: 25px;
+    float: right;
+  }
 
- table tr:last-child td:first-child {
-  border-bottom-left-radius: 10px;
- }
-
- table tr:last-child td:last-child {
-  border-bottom-right-radius: 10px;
- }
 div
-  table
-    thead
-      tr
-        th Rank
-        th Player
-        th Score
-    tbody
+  .wrapper
+    .table
+      .row.header.name
+        .cell
+        .cell Insurgence
+        .cell OU
+        .cell
+        .cell
+      .row.header
+        .cell
+          | Rank
+        .cell
+          | Player
+        .cell
+          | Score
+        .cell
+          | Win Ratio
+        .cell
+          | Total Battles
       each member, i in players
-        tr
-          td #{i + 1}
-          td #{member.username}
-          td #{member.score}
+        .row
+          .cell
+            | #{i + 1}
+            if i == 0
+              img.crown(src="../Sprites/images/goldcrown.png")
+            else if i == 1
+              img.crown(src="../Sprites/images/silvercrown.png")
+            else if i == 2
+              img.crown(src="../Sprites/images/bronzecrown.png")
+          .cell
+            | <a href=http://forums.p-insurgence.com/users/#{member.username}>#{member.username}</a>
+          .cell
+            | #{member.score}
+          - var totalbattles = member.ratio.win + member.ratio.draw + member.ratio.lose
+          - var winratio = ((member.ratio.win / totalbattles) * 100).toFixed(2)
+          .cell
+            | #{winratio}%
+          .cell
+            | #{totalbattles}