From 5569fa14f6c9f0db63e7e129b5cb0efa38ae6fc7 Mon Sep 17 00:00:00 2001 From: didier amyot Date: Mon, 15 Feb 2016 21:36:20 -0500 Subject: [PATCH] ui ui ui --- script/main.js | 5 ++-- script/views/contactPage.js | 56 ++++++++++++++++++++++++++++++++++--- script/views/loginPage.js | 43 ++++++++++++++++++++++++++++ script/views/photosPage.js | 8 +++++- script/views/rulesPage.js | 15 ++++------ scss/_custom_uikit.scss | 3 ++ 6 files changed, 114 insertions(+), 16 deletions(-) create mode 100644 script/views/loginPage.js diff --git a/script/main.js b/script/main.js index 2fcede9..e9554e6 100644 --- a/script/main.js +++ b/script/main.js @@ -7,7 +7,7 @@ requirejs.config({ }); -requirejs(['m', 'views/mainPage', 'views/calendarPage', 'views/rulesPage', 'views/photosPage', 'views/confidentialPage', 'views/contactPage'], function(m, mainPage, calendarPage, rulesPage, photosPage, confidentialPage, contactPage){ +requirejs(['m', 'views/mainPage', 'views/calendarPage', 'views/rulesPage', 'views/photosPage', 'views/confidentialPage', 'views/contactPage', 'views/loginPage',], function(m, mainPage, calendarPage, rulesPage, photosPage, confidentialPage, contactPage, loginPage){ m.route.mode = "hash"; m.route(document.body, "/", { "/": mainPage, @@ -15,6 +15,7 @@ requirejs(['m', 'views/mainPage', 'views/calendarPage', 'views/rulesPage', 'view "/reglement": rulesPage, "/photos": photosPage, "/membre": confidentialPage, - "/contact": contactPage + "/contact": contactPage, + "/login": loginPage }); }); diff --git a/script/views/contactPage.js b/script/views/contactPage.js index 3c0cdf6..5fb68b6 100644 --- a/script/views/contactPage.js +++ b/script/views/contactPage.js @@ -1,9 +1,57 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], function (m, _ , util, resultParser, topNavBar, footer) { - var rulesPageBody = {}; + var contactBody = {}; - rulesPageBody.view = function(){ - return m('h1', 'En construction'); + contactBody.logo = function(){ + var style = 'height: 250px; width: 250px; background-size: 250px; background-image: url(images/logosansfond.JPG);'; + return m('div.uk-cover-background.uk-container-center', {style: style}); + }; + + contactBody.logoLine = function(){ + return m('div.uk-grid.uk-margin', + m('div.uk-width-1-1', contactBody.logo())); + }; + + contactBody.email = function(){ + return m('a[href=mailto:info@ballephenix.com]', 'info@ballephenix.com'); + }; + + contactBody.tel = function(){ + return ' (514) 544-8976'; + }; + + contactBody.address = function(){ + return m('p', ' 123 rue Dufresne', m('br'), 'Montréal, Québec H6Y 8U7'); + }; + + contactBody.contact = function(){ + return m('div.div.uk-panel.uk-panel-box.uk-panel-box-secondary.uk-width-large-1-3.uk-container-center.uk-margin',[ + m('table.uk-table', + m('tr', + m('td.uk-text-right', m('i.fa.fa-desktop')), + m('td', contactBody.email()) + ), + m('tr', + m('td.uk-text-right', m('i.fa.fa-phone')), + m('td', contactBody.tel()) + ), + m('tr', + m('td.uk-text-right', m('i.fa.fa-envelope')), + m('td', contactBody.address()) + ) + ) + // m('div', m('i.fa.fa-desktop'), ), + // m('div', m('i.fa.fa-phone'), contactBody.tel()), + // m('div', m('i.fa.fa-envelope'), contactBody.address()) + ]); + + }; + + contactBody.view = function(){ + return m('div', [ + contactBody.logoLine(), + contactBody.contact() + ]); }; var contactPage = {}; @@ -11,7 +59,7 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu contactPage.view = function(){ return [ m.component(topNavBar), - m.component(rulesPageBody), + m.component(contactBody), m.component(footer) ]; }; diff --git a/script/views/loginPage.js b/script/views/loginPage.js new file mode 100644 index 0000000..e0fda7f --- /dev/null +++ b/script/views/loginPage.js @@ -0,0 +1,43 @@ +define(['m', '_', 'util', 'views/topNavBar', 'views/footer'], function (m, _ , util, topNavBar, footer) { + + var loginComponent = {}; + + loginComponent.logo = function(){ + var style = 'height: 250px; width: 250px; background-size: 250px; background-image: url(images/logosansfond.JPG);'; + return m('div.uk-cover-background.uk-container-center', {style: style}); + }; + + loginComponent.logoLine = function(){ + return m('div.uk-grid.uk-margin', + m('div.uk-width-1-1', loginComponent.logo())); + }; + + loginComponent.loginForm = function(){ + return m('div.uk-panel.uk-panel-box.uk-panel-box-secondary.uk-width-large-1-3.uk-container-center.uk-margin', [ + m('form.uk-text-center', + m('div.uk-form-row', m('label', "Nom d'utilisateur ", m('input[type=text].uk-form-width-small'))), + m('div.uk-form-row', m('label', "Mot de passe ", m('input[type=password].uk-form-width-small'))), + m('div.uk-form-row', m('button.uk-button', m("i.fa.fa-mars-double"), " Pénétrez")) + ) + ]); + }; + + loginComponent.view = function(){ + return m('div', [ + loginComponent.logoLine(), + loginComponent.loginForm() + ]); + }; + + var loginPage = {}; + + loginPage.view = function(){ + return [ + m.component(topNavBar), + m.component(loginComponent), + m.component(footer) + ]; + }; + + return loginPage; +}); diff --git a/script/views/photosPage.js b/script/views/photosPage.js index 21c34d3..47c2206 100644 --- a/script/views/photosPage.js +++ b/script/views/photosPage.js @@ -2,8 +2,14 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu var rulesPageBody = {}; + rulesPageBody.logo = function(){ + var style = 'height: 250px; width: 250px; background-size: 250px; background-image: url(images/logosansfond.JPG);'; + return m('div.uk-cover-background.uk-container-center', {style: style}); + }; + rulesPageBody.view = function(){ - return m('h1', 'En construction'); + return m('div.uk-grid', + m('div.uk-width-1-1', rulesPageBody.logo())); }; var photosPage = {}; diff --git a/script/views/rulesPage.js b/script/views/rulesPage.js index 37d894c..9778bac 100644 --- a/script/views/rulesPage.js +++ b/script/views/rulesPage.js @@ -17,23 +17,20 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu }; rulesPage.rules = function(){ - return m('div.uk-panel.uk-panel-box.uk-panel-box-secondary', [ + return m('div.uk-panel.uk-panel-box.uk-panel-box-secondary.uk-width-large-2-3', [ m('h2', 'Règlements 2016'), m('ul',[ - m('li', m('h3', 'Règlements généraux')), - m('li', m('h3','Règles et procédures')), - m('li', m('h3','Règlements de terrain')), + m('li', m('h3', m('a', 'Règlements généraux'))), + m('li', m('h3', m('a','Règles et procédures'))), + m('li', m('h3', m('a','Règlements de terrain'))), ]) ]); }; rulesPage.logoAndRules = function(){ return m('div.uk-grid.uk-margin',[ - m('div.uk-width-large-1-3', - rulesPage.logo()), - m('div.uk-width-large-2-3', - rulesPage.rules() - ) + m('div.uk-width-large-1-3', rulesPage.logo()), + rulesPage.rules() ] ); }; diff --git a/scss/_custom_uikit.scss b/scss/_custom_uikit.scss index 1adf6b3..f671f8b 100644 --- a/scss/_custom_uikit.scss +++ b/scss/_custom_uikit.scss @@ -12,6 +12,9 @@ $table-striped-background: #fce3ca; $navbar-nav-active-background: #fce3ca; $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";