re-implemented user details

script/views/playersPage.js

@@ -19,7 +19,7 @@ define(['m', '_', 'teams'], function (m, _ , teams) {
         var callback = playersSelectionBar.toggleTeam(teamId, activatedTeams);
         return  m('div.uk-badge.uk-margin-left.uk-border-rounded',
                     {class: class_, 'data-selected': isActive, onclick: m.withAttr("data-selected", callback)},
-                        m('h3', {style: {width: '80px'}}, teamName)
+                        m('span', {style: {'min-width': '40px', display: 'inline-block'}}, teamName)
         );
 
     };
@@ -30,7 +30,7 @@ define(['m', '_', 'teams'], function (m, _ , teams) {
         var callback = playersSelectionBar.toggleTeam(score, activatedScores);
         return  m('div.uk-badge.uk-margin-left.uk-border-rounded',
                     {class: class_, 'data-selected': isActive, onclick: m.withAttr("data-selected", callback)},
-                        m('h3', {style: {width: '80px'}}, score)
+                        m('span', {style: {'min-width': '30px', display: 'inline-block'}}, score)
         );
     };
 
@@ -49,7 +49,7 @@ define(['m', '_', 'teams'], function (m, _ , teams) {
 
     playersSelectionBar.chooseScore = function(model){
         return  m('form.uk-grid', {style: {'margin-top': '1em'}},
-                    m('div.uk-width-1-6', m('label', m('b', 'Score'))),
+                    m('div.uk-width-1-6', m('label', m('b', 'Quote'))),
                     m('div.uk-width-5-6',
                         m('div.uk-grid', [
                             playersSelectionBar.scoreInput(1, model.activatedScores),
@@ -75,10 +75,6 @@ define(['m', '_', 'teams'], function (m, _ , teams) {
 
     var playersTable = {};
 
-    playersTable._sortFunction = function(sortingElm){
-
-    };
-
     playersTable._sortPlayers = function(sorting, playerList){
         var sortingKeys = _.map(sorting(), 'key');
         var sortingDirections = _.map(sorting(), function(o){
@@ -164,8 +160,14 @@ define(['m', '_', 'teams'], function (m, _ , teams) {
         return m('div', {style: style}, m.trust(' '));
     };
 
+    playersTable.showOrHidePlayerDetail = function(player){
+        return function(){
+            player.showDetails = !player.showDetails;
+        };
+    };
+
     playersTable.playerRow = function(player){
-        return  m('tr',[
+        return  m('tr', {onclick: playersTable.showOrHidePlayerDetail(player)}, [
                     m('td', playersTable.getPlayerTeamIcon(player)),
                     m('td', player.name),
                     m('td.uk-hidden-small', player.email),
@@ -174,6 +176,26 @@ define(['m', '_', 'teams'], function (m, _ , teams) {
         ]);
     };
 
+    playersTable.playerInformation = function(player){
+        return  m('tr.uk-visible-small', [
+                    m('td', ''),
+                    m('td[colspan=3]',
+                        m('ul', [
+                            m('li', [m('b', 'tel: '), player.tel]),
+                            m('li', [m('b', 'email: '), player.email])
+                        ]))
+                ]);
+    };
+
+    playersTable.playerRowAndInformation = function(player){
+        if(player.showDetails){
+            return [playersTable.playerRow(player),
+                    m('tr', {style: {height: '0px'}}),
+                    playersTable.playerInformation(player)];
+        }
+        return playersTable.playerRow(player);
+    };
+
     playersTable.onlyPlayerOfTeams = function(visibleTeams){
         return function(player){
             return _.includes(visibleTeams, player.team);
@@ -191,7 +213,7 @@ define(['m', '_', 'teams'], function (m, _ , teams) {
                     _(players)
                     .filter(playersTable.onlyPlayerOfTeams(visibleTeams))
                     .filter(playersTable.onlyPlayerOfScore(activatedScores))
-                    .map(playersTable.playerRow).value()
+                    .map(playersTable.playerRowAndInformation).flatten().value()
                 );
     };
 

scss/_custom_uikit.scss

@@ -5,7 +5,6 @@
 // Phenix colors
 
 $navbar-background: #f08d28; //#dabd5e;
-// $foo: ; // #f8c694;
 
 $panel-box-background: #fce3ca;
 $table-striped-background: #fce3ca;
@@ -14,7 +13,6 @@ $navbar-nav-hover-background: #fce3ca;
 $panel-box-secondary-background: #fce3ca;
 $badge-background: #fce3ca;
 $badge-color: black;
-$badge-font-size: 2em;
 
 // Defaults
 @import "uikit/scss/core/base.scss";