improved ui on different screen sizes

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.uk-hidden-small', [
+        return m('div.uk-grid', [
             m('div.uk-large-1-3.uk-medium-2-3.uk-container-center', [
-                m('div.uk-cover-background', {style: 'height: 400px; width: 400px; background-size: 400px; background-image: url(images/logosansfond.JPG);'})
+                m('div.uk-cover-background.uk-container-center.uk-margin-left.uk-margin-top',{style: 'height:300px; width: 300px; background-size: 300px; background-image: url(images/logosansfond.JPG);'})
             ])
         ]);
     };
@@ -42,9 +42,15 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
                 ]));
     };
 
+    nextGameDaySchedule._responsoveText = function(largeText, smallText){
+        return [m('span.uk-visible-large', largeText),
+                m('span.uk-hidden-large', smallText)];
+    };
+
     nextGameDaySchedule._getGamesRow = function(game){
         return m('tr', [
-            m('td', util.formatDate(game.jsDate)),
+            m('td', nextGameDaySchedule._responsoveText(util.formatDate(game.jsDate),
+                                                        util.formatDateSmall(game.jsDate))),
             m('td', game.time),
             m('td', game.away),
             m('td', game.home)
@@ -107,11 +113,22 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
     var mainPageBottom = {};
 
     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))
+        return m('div.uk-grid.uk-visible-large.uk-grid-match', [
+            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainPageNews)),
+            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainPageSchedule)),
+            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainMap))
+        ]);
+    };
+
+    mainPageBottom.mediumSizeView = function(){
+        return  m('div.uk-visible-medium', [
+                    m('div.uk-grid.uk-grid-match', [
+                        m('div.uk-width-medium-1-2', [m.component(mainPageNews)]),
+                        m('div.uk-width-medium-1-2', [m.component(mainPageSchedule)]),
+                    ]),
+                    m('div.uk-grid',
+                        m('div.uk-width-medium-1-1', m.component(mainMap))
+                    )
         ]);
     };
 
@@ -126,10 +143,13 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
 
 
     mainPageBottom.view = function(){
-        return m('div.uk-margin-top.uk-margin-bottom', [
-            mainPageBottom.regularSizeView(),
-            mainPageBottom.smallSizeView()
-        ]);
+        return  m('div.uk-margin-top.uk-margin-bottom.uk-grid',
+                    m('div.uk-width-large-3-5.uk-width-medium-4-5.uk-width-small-1-1.uk-container-center', [
+                        mainPageBottom.regularSizeView(),
+                        mainPageBottom.mediumSizeView(),
+                        mainPageBottom.smallSizeView()
+                    ])
+        );
 
     };