From 35f22534f9724b64394f299d92e9ae4a720ac4f5 Mon Sep 17 00:00:00 2001 From: didier amyot Date: Sun, 7 Feb 2016 10:39:23 -0500 Subject: [PATCH] worked on responsivness --- data/resultats.yaml | 16 ++++++++++++ script/views/calendarPage.js | 8 +++--- script/views/footer.js | 21 ++++++++++----- script/views/mainPage.js | 50 ++++++++++++++++++++++++------------ script/views/topNavBar.js | 15 ++++++----- 5 files changed, 76 insertions(+), 34 deletions(-) diff --git a/data/resultats.yaml b/data/resultats.yaml index 0846357..e241bca 100644 --- a/data/resultats.yaml +++ b/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: ~ diff --git a/script/views/calendarPage.js b/script/views/calendarPage.js index 87299df..2bffa94 100644 --- a/script/views/calendarPage.js +++ b/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-width-3-5.uk-push-1-5',[ + m('div.uk-grid.uk-margin-top.uk-margin-bottom', + m('div.uk-width-large-3-5.uk-width-small-1-1.uk-container-center',[ m.component(statsView), m.component(schedulView)])), m.component(footer)]; diff --git a/script/views/footer.js b/script/views/footer.js index e292bd4..d7c9d94 100644 --- a/script/views/footer.js +++ b/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'}}, - 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('ul.uk-subnav.uk-subnav-line.uk-flex-center', - m('li', m('a[href="mailto:info@ballephenix.com"]', 'info@ballephenix.com'))), - m('h1', util.facebookLink()) - ]) + return m('footer.uk-grid.ph-footer', {style: {padding: '40px'}}, + m('div.uk-container.uk-container-center.uk-text-center', [ + m('div.uk-panel', footer.wording()), + m('ul.uk-subnav.uk-subnav-line.uk-flex-center', + m('li', m('a[href="mailto:info@ballephenix.com"]', 'info@ballephenix.com'))), + m('h1', util.facebookLink()) + ]) ); }; diff --git a/script/views/mainPage.js b/script/views/mainPage.js index 6422340..80ab8d4 100644 --- a/script/views/mainPage.js +++ b/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', [ - m('div.uk-width-1-3.uk-push-1-3', [ - m('div.uk-cover-background', {style: 'height: 500px; background-size: 500px; background-image: url(images/phenix_logo.png);'}) + return m('div.uk-grid.uk-hidden-small', [ + m('div.uk-large-1-3.uk-medium-2-3.uk-container-center', [ + 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') - ], util.loremIpsum()); + m('h3.uk-panel-title', 'Nouvelles'), + 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('i.fa.fa-clock-o') - ]), + m('div.uk-panel-badge.uk-badge', 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(){ - return m('div.uk-grid',[ - m('div.uk-width-1-5'), - m('div.uk-width-1-5', mainPageNews.view()), - m('div.uk-width-1-5', mainPageSchedule.view()), - m('div.uk-width-1-5', mainMap.view()) + mainPageBottom.regularSizeView = function(){ + return m('div.uk-grid.uk-hidden-small.uk-grid-match', [ + m('div.uk-width-large-1-5.uk-hidden-medium'), + m('div.uk-width-large-1-5.uk-width-medium-1-3', m.component(mainPageNews)), + m('div.uk-width-large-1-5.uk-width-medium-1-3', m.component(mainPageSchedule)), + 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() diff --git a/script/views/topNavBar.js b/script/views/topNavBar.js index d69d2fb..c29b8d0 100644 --- a/script/views/topNavBar.js +++ b/script/views/topNavBar.js @@ -29,13 +29,14 @@ define(['m', '_', 'util'], function (m, _, util) { }; topNavBar.view = function(controller){ - return m("nav.uk-navbar", - [m("div.uk-navbar-content.uk-navbar-center", [ - m("ul.uk-navbar-nav", - m('li.uk-parent', util.facebookLink()), - _.map(topNavBar._urlMapping, topNavBar._getItem) - ) - ])]); + return m("nav.uk-navbar.uk-navbar-attached",[ + m("ul.uk-navbar-nav.uk-navbar-center.uk-visible-large", + m('li.uk-parent', util.facebookLink()), + _.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;