#5 Style teams page.

saxx · Jan 21, 2017 · 1dea7b2 · 1dea7b2
1 parent 5edda2c
commit 1dea7b2
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 7 deletions.
diff --git a/src/Wuzlstats/Views/Teams/Index.cshtml b/src/Wuzlstats/Views/Teams/Index.cshtml
@@ -43,7 +43,7 @@ else
                 <td>
                     @(rank++)
                 </td>
-                <td>
+                <td class="team">
                     @Html.Partial("_Player", team.Player1)
                     @Html.Partial("_Player", team.Player2)
                 </td>

diff --git a/src/Wuzlstats/wwwroot/css/site.css b/src/Wuzlstats/wwwroot/css/site.css
@@ -140,16 +140,40 @@ footer {
     footer {
       margin-top: 50px; } }
 
-.players td > a:focus, .players td > a:hover {
+.players td > a:focus, .players td > a:hover, .teams td > a:focus, .teams td > a:hover {
   text-decoration: none; }
 
-.players .player-name {
+.players .player-name, .teams .player-name {
   font-weight: bold;
   display: inline; }
 
-.players .player-score {
+.players .player-score, .teams .player-score {
   color: #999; }
 
+.teams .team {
+  display: inline-block; }
+
+.teams .player {
+  float: right;
+  display: block; }
+  .teams .player:first-child {
+    float: left;
+    margin-right: 1.5em; }
+    .teams .player:first-child .player-name {
+      margin-left: 50px; }
+  .teams .player:nth-of-type(2) > a {
+    float: right; }
+  .teams .player:nth-of-type(2) .player-name {
+    display: inline-block;
+    text-align: right;
+    margin-right: 0.6em;
+    top: 0.9em; }
+
+.teams .player-name {
+  display: block;
+  position: relative;
+  top: -2em; }
+
 footer .nav > li {
   padding-bottom: 15px;
   padding-top: 15px;

diff --git a/src/Wuzlstats/wwwroot/css/site.scss b/src/Wuzlstats/wwwroot/css/site.scss
@@ -210,7 +210,7 @@ footer {
     }
 }
 
-.players {
+.players, .teams {
     td > a {
         &:focus, &:hover {
             text-decoration: none;
@@ -227,6 +227,47 @@ footer {
     }
 }
 
+.teams {
+    .team {
+        display: inline-block;
+    }
+
+    .player {
+        float: right;
+        display: block;
+
+        &:first-child {
+            float: left;
+            margin-right: 1.5em;
+
+            & .player-name {
+                margin-left: 50px;
+            }
+        }
+
+        &:nth-of-type(2) {
+            & > a {
+                float: right;
+            }
+
+            & .player-name {
+                display: inline-block;
+                text-align: right;
+                margin-right: 0.6em;
+                top: 0.9em;
+            }
+        }
+    }
+
+    .player-name {
+        display: block;
+        //margin-left: 50px;
+        //margin-right: 50px;
+        position: relative;
+        top: -2em;
+    }
+}
+
 footer {
     .nav > li {
         padding-bottom: 15px;
@@ -235,7 +276,7 @@ footer {
     }
 
     .nav > li > a {
-            display: inline;
-            padding: 0;
+        display: inline;
+        padding: 0;
     }
 }