worked on responsivness

data/resultats.yaml

@@ -45,3 +45,19 @@
     away: rouge
     home_points: ~
     away_points: ~
+
+-
+    date: 2016/06/23  # year/month/day
+    time: "18:00"
+    home: bleu
+    away: jaune
+    home_points: ~
+    away_points: ~
+
+-
+    date: 2016/06/23  # year/month/day
+    time: "20:30"
+    home: gris
+    away: rouge
+    home_points: ~
+    away_points: ~

script/views/calendarPage.js

@@ -55,7 +55,7 @@ define(['m', '_', 'util', 'resultParser', 'teams', 'views/topNavBar', 'views/foo
 
     statsView.view = function(stats){
         return  m('div.uk-grid',
-                    m('div.uk-width-1-1',[
+                    m('div.uk-width-medium-1-1.uk-width-large-1-1.uk-container-center',[
                         m('h2', 'Classement 2016'),
                         statsView.mainTable(stats()),
                         statsView.legend()
@@ -109,7 +109,7 @@ define(['m', '_', 'util', 'resultParser', 'teams', 'views/topNavBar', 'views/foo
 
     schedulView.view = function(games){
         return m('div.uk-grid',
-                   m('div.uk-width-3-5',
+                   m('div.uk-width-large-3-5.uk-width-medium-1-1',
                     _.concat([m('h2', 'Calendrier 2016')], _.map(games(), schedulView._gameView))));
     };
 
@@ -117,8 +117,8 @@ define(['m', '_', 'util', 'resultParser', 'teams', 'views/topNavBar', 'views/foo
 
     calendarPage.view  = function(){
         return [m.component(topNavBar),
-                m('div.uk-grid',
+                m('div.uk-grid.uk-margin-top.uk-margin-bottom',
-                    m('div.uk-width-3-5.uk-push-1-5',[
+                    m('div.uk-width-large-3-5.uk-width-small-1-1.uk-container-center',[
                         m.component(statsView),
                         m.component(schedulView)])),
                 m.component(footer)];

script/views/footer.js

@@ -1,14 +1,21 @@
 define(['m', '_', 'util'], function (m, _, util) {
     var footer = {};
 
+    footer.wording = function(){
+        return [
+            m('span.uk-hidden-small', 'Ligue de balle les Phénix... pour le plaisir de jouer!'),
+            m('h4.uk-visible-small', 'Ligue de balle les Phénix')
+        ];
+    };
+
     footer.view = function(){
-        return m('footer.uk-grid.ph-footer', {style: {padding: '80px'}},
+        return  m('footer.uk-grid.ph-footer', {style: {padding: '40px'}},
-            m('div.uk-container.uk-container-center.uk-text-center', [
+                    m('div.uk-container.uk-container-center.uk-text-center', [
-                m('div.uk-panel', 'Ligue de balle les Phénix... pour le plaisir de jouer!'),
+                        m('div.uk-panel', footer.wording()),
-                m('ul.uk-subnav.uk-subnav-line.uk-flex-center',
+                        m('ul.uk-subnav.uk-subnav-line.uk-flex-center',
-                    m('li', m('a[href="mailto:info@ballephenix.com"]', 'info@ballephenix.com'))),
+                            m('li', m('a[href="mailto:info@ballephenix.com"]', 'info@ballephenix.com'))),
-                m('h1', util.facebookLink())
+                        m('h1', util.facebookLink())
-            ])
+                    ])
         );
     };
 

script/views/mainPage.js

@@ -2,9 +2,9 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
     var mainPageLogo = {};
 
     mainPageLogo.view = function(){
-        return m('div.uk-grid', [
+        return m('div.uk-grid.uk-hidden-small', [
-            m('div.uk-width-1-3.uk-push-1-3', [
+            m('div.uk-large-1-3.uk-medium-2-3.uk-container-center', [
-                m('div.uk-cover-background', {style: 'height: 500px; background-size: 500px; background-image: url(images/phenix_logo.png);'})
+                m('div.uk-cover-background', {style: 'height: 500px; width: 500px; background-size: 500px; background-image: url(images/phenix_logo.png);'})
             ])
         ]);
     };
@@ -16,8 +16,9 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
             m('div.uk-panel-badge.uk-badge', [
                 m('i.fa.fa-newspaper-o')
             ]),
-            m('h3.uk-panel-title', 'Nouvelles')
+            m('h3.uk-panel-title', 'Nouvelles'),
-        ], util.loremIpsum());
+            m('p', util.loremIpsum())
+        ]);
     };
 
     var nextGameDaySchedule = {};
@@ -43,7 +44,7 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
 
     nextGameDaySchedule._getGamesRow = function(game){
         return m('tr', [
-            m('td', game.date),
+            m('td', util.formatDate(game.jsDate)),
             m('td', game.time),
             m('td', game.away),
             m('td', game.home)
@@ -66,9 +67,7 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
 
     mainPageSchedule.view = function(){
         return m('div.uk-panel.uk-panel-box',[
-            m('div.uk-panel-badge.uk-badge', [
+            m('div.uk-panel-badge.uk-badge', m('i.fa.fa-clock-o')),
-                m('i.fa.fa-clock-o')
-            ]),
             m('h3.uk-panel-title', 'Horaire'),
             m.component(nextGameDaySchedule)
         ]);
@@ -107,19 +106,38 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
 
     var mainPageBottom = {};
 
-    mainPageBottom.view = function(){
+    mainPageBottom.regularSizeView = function(){
-        return m('div.uk-grid',[
+        return m('div.uk-grid.uk-hidden-small.uk-grid-match', [
-            m('div.uk-width-1-5'),
+            m('div.uk-width-large-1-5.uk-hidden-medium'),
-            m('div.uk-width-1-5', mainPageNews.view()),
+            m('div.uk-width-large-1-5.uk-width-medium-1-3', m.component(mainPageNews)),
-            m('div.uk-width-1-5', mainPageSchedule.view()),
+            m('div.uk-width-large-1-5.uk-width-medium-1-3', m.component(mainPageSchedule)),
-            m('div.uk-width-1-5', mainMap.view())
+            m('div.uk-width-large-1-5.uk-width-medium-1-3', m.component(mainMap))
         ]);
     };
 
+    mainPageBottom.smallSizeView = function(){
+        return  m('div.uk-visible-small',
+                  [
+                    m('div.uk-grid', m('div.uk-width-small-1-1', m.component(mainPageNews))),
+                    m('div.uk-grid', m('div.uk-width-small-1-1', m.component(mainPageSchedule))),
+                    m('div.uk-grid', m('div.uk-width-small-1-1', m.component(mainMap)))
+              ]);
+    };
+
+
+    mainPageBottom.view = function(){
+        return m('div.uk-margin-top.uk-margin-bottom', [
+            mainPageBottom.regularSizeView(),
+            mainPageBottom.smallSizeView()
+        ]);
+
+    };
+
     var mainPage = {};
 
     mainPage.view  = function(){
-        return [topNavBar.view(),
+        return [
+                topNavBar.view(),
                 mainPageLogo.view(),
                 mainPageBottom.view(),
                 footer.view()

script/views/topNavBar.js

@@ -29,13 +29,14 @@ define(['m', '_', 'util'], function (m, _, util) {
     };
 
     topNavBar.view = function(controller){
-        return m("nav.uk-navbar",
+        return  m("nav.uk-navbar.uk-navbar-attached",[
-                  [m("div.uk-navbar-content.uk-navbar-center", [
+                        m("ul.uk-navbar-nav.uk-navbar-center.uk-visible-large",
-                      m("ul.uk-navbar-nav",
+                            m('li.uk-parent', util.facebookLink()),
-                         m('li.uk-parent', util.facebookLink()),
+                            _.map(topNavBar._urlMapping, topNavBar._getItem)),
-                        _.map(topNavBar._urlMapping, topNavBar._getItem)
+                        m("ul.uk-navbar-nav.uk-hidden-large",
-                        )
+                            m('li.uk-parent', util.facebookLink()),
-        ])]);
+                            _.map(topNavBar._urlMapping, topNavBar._getItem)),
+        ]);
     };
 
     return topNavBar;