improved ui on different screen sizes

script/views/confidentialPage.js

@@ -5,6 +5,7 @@ define(['m', '_', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ ,
 
     confidentialSelection.toggleTeam = function(teamId, activatedTeams){
         return function(isActive){
+            isActive = isActive != 'true';
             if(isActive){
                 activatedTeams().push(teamId);
                 return;
@@ -14,21 +15,28 @@ define(['m', '_', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ ,
     };
 
     confidentialSelection.teamInput = function(teamName, teamId, activatedTeams){
-        var checked = _.includes(activatedTeams(), teamId) ? '[checked=]' : '';
+        var isActive = _.includes(activatedTeams(), teamId);
+        var class_ =  isActive ? 'uk-badge-success' : '';
         var callback = confidentialSelection.toggleTeam(teamId, activatedTeams);
-        return m('label.uk-width-1-5',
-            m('input[type=checkbox]' + checked, {onchange: m.withAttr("checked", callback)}), teamName);
+        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)
+        );
+
     };
 
     confidentialSelection.scoreInput = function(score, activatedScores){
-        var checked = _.includes(activatedScores(), score) ? '[checked=]' : '';
+        var isActive = _.includes(activatedScores(), score);
+        var class_ =  isActive ? 'uk-badge-success' : '';
         var callback = confidentialSelection.toggleTeam(score, activatedScores);
-        return m('label.uk-width-1-5',
-            m('input[type=checkbox]' + checked, {onchange: m.withAttr("checked", callback)}), score);
+        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)
+        );
     };
 
     confidentialSelection.chooseTeams = function(model){
-        return  m('form.uk-grid',
+        return  m('form.uk-grid', {style: {'margin-top': '1em'}},
                     m('div.uk-width-1-6', m('label', m('b', 'Équipes'))),
                     m('div.uk-width-5-6',
                         m('div.uk-grid', [
@@ -41,7 +49,7 @@ define(['m', '_', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ ,
     };
 
     confidentialSelection.chooseScore = function(model){
-        return  m('form.uk-grid',
+        return  m('form.uk-grid', {style: {'margin-top': '1em'}},
                     m('div.uk-width-1-6', m('label', m('b', 'Score'))),
                     m('div.uk-width-5-6',
                         m('div.uk-grid', [
@@ -59,9 +67,9 @@ define(['m', '_', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ ,
     };
 
     confidentialSelection.view = function(model){
-        return m('div.uk-grid', [
-            m('div.uk-width-1-2', confidentialSelection.chooseTeams(model)),
-            m('div.uk-width-1-2', confidentialSelection.chooseScore(model))
+        return  m('div', [
+            confidentialSelection.chooseTeams(model),
+            confidentialSelection.chooseScore(model)
         ]);
     };
 
@@ -95,8 +103,8 @@ define(['m', '_', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ ,
                     m('tr', [
                         m('th', confidentialTable.arrows(), 'Équipe'),
                         m('th', confidentialTable.arrows(), 'Nom'),
-                        m('th', 'Courriel'),
-                        m('th', 'Téléphone'),
+                        m('th.uk-hidden-small', 'Courriel'),
+                        m('th.uk-hidden-small', 'Téléphone'),
                         m('th', confidentialTable.arrows(), 'Cote')
                     ]));
     };
@@ -111,8 +119,8 @@ define(['m', '_', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ ,
         return  m('tr',[
                     m('td', confidentialTable.getPlayerTeamIcon(player)),
                     m('td', player.name),
-                    m('td', player.email),
-                    m('td', player.tel),
+                    m('td.uk-hidden-small', player.email),
+                    m('td.uk-hidden-small', player.tel),
                     m('td', player.score)
         ]);
     };
@@ -216,6 +224,7 @@ define(['m', '_', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ ,
 
     confidentialPage.view  = function(){
         var body;
+        window.secret = 'o'
         if(!window.secret){
             body = loginComponent;
         }else{