ui ui ui

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
     });
 });

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)
             ];
     };

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;
+});

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 = {};

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',
+                    m('div.uk-width-large-1-3', rulesPage.logo()),
                     rulesPage.rules()
-                    )
                     ]
                 );
     };

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";