player names for stats view

atikenny · Apr 28, 2015 · 46475f1 · 46475f1
1 parent 08406ff
commit 46475f1
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 63 deletions.
diff --git a/client/stylesheets/content.scss b/client/stylesheets/content.scss
@@ -11,6 +11,63 @@
 
 /* END OF CONTENT */
 
+/* TEAM FLAG PLAYERS */
+
+.team-players {
+    opacity: 0;
+    position: absolute;
+    bottom: -55px;
+    left: -9999em;
+    z-index: 100;
+    background: #fff;
+    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4);
+    border-radius: 3px;
+    white-space: nowrap;
+    padding: 2px 5px;
+    font-size: 12px;
+    transition: opacity .2s ease-out, bottom .2s ease-out;
+
+    .team:hover &,
+    .team-details-container:hover & {
+        left: 50%;
+        transform: translateX(-50%);
+        opacity: 1;
+        bottom: -35px;
+    }
+}
+
+.team,
+.team-details-container {
+    &:after {
+        opacity: 0;
+        content: '';
+        position: absolute;
+        z-index: 10;
+        bottom: -34px;
+        left: -9999em;
+        width: 0;
+        height: 0;
+        margin: -12px 0 0 -6px;
+        border: 6px solid transparent;
+        border-bottom-color: #fff;
+        transition: opacity .2s ease-out, bottom .2s ease-out;
+    }
+
+    &:hover:after {
+        left: 50%;
+        opacity: 1;
+        bottom: -14px;
+    }
+
+    &:hover .team-players {
+        right: auto;
+        left: 0;
+        transform: none;
+    }
+}
+
+/* END OF TEAM FLAG PLAYERS */
+
 @media screen and (min-width: 1000px) {
     .page {
         display: block;

diff --git a/client/stylesheets/results.scss b/client/stylesheets/results.scss
@@ -93,36 +93,16 @@
     background-position: center center;
     background-repeat: no-repeat;
     position: relative;
-}
-
-.team:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: rgba(245, 245, 245, .9);
-}
 
-.team:after {
-    opacity: 0;
-    content: '';
-    position: absolute;
-    bottom: -34px;
-    left: -9999em;
-    width: 0;
-    height: 0;
-    margin: -12px 0 0 -6px;
-    border: 6px solid transparent;
-    border-bottom-color: #fff;
-    transition: opacity .2s ease-out, bottom .2s ease-out;
-}
-
-.team:hover:after {
-    left: 50%;
-    opacity: 1;
-    bottom: -14px;
+    &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(245, 245, 245, .9);
+    }
 }
 
 .winner .team:before {
@@ -133,40 +113,12 @@
     background: rgba(245,245,245,0);
 }
 
-.team span {
-    opacity: 0;
-    position: absolute;
-    bottom: -55px;
-    left: -9999em;
-    z-index: 100;
-    background: #fff;
-    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4);
-    border-radius: 3px;
-    white-space: nowrap;
-    padding: 2px 5px;
-    font-size: 12px;
-    transition: opacity .2s ease-out, bottom .2s ease-out;
-}
-
-.team:hover span {
-    left: 50%;
-    transform: translateX(-50%);
-    opacity: 1;
-    bottom: -35px;
-}
-
 .team:nth-last-child(-n+3):hover span {
     left: auto;
     right: 0;
     transform: none;
 }
 
-.team:nth-child(-n+3):hover span {
-    right: auto;
-    left: 0;
-    transform: none;
-}
-
 /* END OF TEAMS */
 
 /* END OF RESULTS */

diff --git a/client/stylesheets/stats.scss b/client/stylesheets/stats.scss
@@ -22,11 +22,14 @@
     position: relative;
 }
 
-.players-and-team-flag .flag-bg {
+.team-details-container {
     position: absolute;
     top: 0;
     right: 0;
-    width: 48px;
+
+    .flag-bg {
+        width: 48px;
+    }
 }
 
 /* END OF STATS */
@@ -38,6 +41,7 @@
 
     .stats-table-container .players-and-team-flag {
         padding: 0px;
+        width: 50px;
     }
 
     .players-and-team-flag .flag-bg {

diff --git a/client/templates/result.html b/client/templates/result.html
@@ -39,7 +39,7 @@
                         {{#each teams}}
                         <div class="team {{isSelected code ../team1.nationality}}" data-team-number="1" data-team-name="{{name}}">
                             <img class="team-flag" src="/img/flags/{{code}}.svg" />
-                            <span><i class="glyphicon glyphicon-flash"></i> {{player 1 players}} <i class="glyphicon glyphicon-record"></i> {{player 0 players}}</span>
+                            <span class="team-players"><i class="glyphicon glyphicon-flash"></i> {{player 1 players}} <i class="glyphicon glyphicon-record"></i> {{player 0 players}}</span>
                         </div>
                         {{/each}}
                     </div>
@@ -49,7 +49,7 @@
                         {{#each teams}}
                         <div class="team {{isSelected code ../team2.nationality}}" data-team-number="2" data-team-name="{{name}}">
                             <img class="team-flag" src="/img/flags/{{code}}.svg" />
-                            <span><i class="glyphicon glyphicon-flash"></i> {{player 1 players}} <i class="glyphicon glyphicon-record"></i> {{player 0 players}}</span>
+                            <span class="team-players"><i class="glyphicon glyphicon-flash"></i> {{player 1 players}} <i class="glyphicon glyphicon-record"></i> {{player 0 players}}</span>
                         </div>
                         {{/each}}
                     </div>

diff --git a/client/templates/stats.html b/client/templates/stats.html
@@ -1,6 +1,6 @@
 <template name="stats">
     <div id="stats-container" class="page {{#if show}}open{{/if}}">
-        <div id="team-stats-container" class="stat-container card table-responsive">
+        <div id="team-stats-container" class="stat-container card">
             <h2 class="stats-title bg-primary">Team stats</h2>
             <div class="stats-table-container">
                 <table class="table table-striped">
@@ -21,7 +21,10 @@ <h2 class="stats-title bg-primary">Team stats</h2>
                         <tr>
                             <td class="players-and-team-flag">
                                 <div class="player-names">{{player1}}{{#if player2}}, {{player2}}{{/if}}</div>
-                                <img class="flag-bg" src="/img/flags/{{team.code}}.svg" />
+                                <div class="team-details-container">
+                                    <img class="flag-bg" src="/img/flags/{{team.code}}.svg" />
+                                    <span class="team-players"><i class="glyphicon glyphicon-flash"></i> {{player1}} <i class="glyphicon glyphicon-record"></i> {{player2}}</span>
+                                </div>
                             </td>
                             <td class="points">{{points}}</td>
                             <td class="goals-for">{{goalsFor}}</td>