Merge pull request #442 from carolineyanko/source

Fix layout of lists, events table on mobile devices

Author: martinheidegger

events.css

@@ -7,6 +7,9 @@
   padding: 5px;
   position: relative;
 }
+.month-table-wrapper{
+  overflow: auto;
+}
 
 /*.month-table:before, .month-table:after {
   content: "";

js/table.js

@@ -95,14 +95,15 @@ function generateMonthTable( date ) {
   var eventMonthName = monthNames[date.getMonth()]
   var monthTable     = $('<table cellspacing=0 class="month-table" data-month="' + date.getFullYear() + "-"  + eventMonthName + '" id="month-' + date.getMonth() + '"></table>')
   var monthTableBody = monthTable.append('<tbody>')
+  var monthTableWrapper = $('<div class="month-table-wrapper">').append(monthTable)
   // var today          = new Date()
   var endOfToday     = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 00, 00, 00)
   var firstDay       = new Date(date.getFullYear(), date.getMonth(), 1)
   var numberOfDays   = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
   var weekDayNumber  = firstDay.getDay()
 
-  $('#calendar-goes-here').append(monthTable)
-  monthTable.before('<h3 data-month="' + date.getFullYear() + '-' + eventMonthName + '">' + eventMonthName + ' ' + date.getFullYear() + '</h3>')
+  $('#calendar-goes-here').append(monthTableWrapper)
+  monthTableWrapper.before('<h3 data-month="' + date.getFullYear() + '-' + eventMonthName + '">' + eventMonthName + ' ' + date.getFullYear() + '</h3>')
 
   // Add month calendar header
   monthTableBody.append('<tr class="header"></tr>')

style.css

@@ -69,23 +69,21 @@ ul.inner-nav li {padding-right: 30px; display: inline;}
 .inner-nav a {border-color: #F7DA03; color: #333; border-color: #F7DA03; padding: 0 10px 3px 10px; border-bottom-width: 2px;}
 .inner-nav a:hover {color: #F7DA03; border-color: #F7DA03;}*/
 
-ul.inner-nav {list-style: none;}
-ul.inner-nav li {margin-right: 12px; display: inline-block; line-height: 3em;}
-ul.inner-nav li:last-of-type {margin-right: 0;}
+ul.inner-nav {list-style: none; margin: 0; padding: 0;}
+ul.inner-nav li {margin-right: 6px; margin-left: 6px; display: inline-block; line-height: 3em;}
 .inner-nav a {background-color: #F7DA03; color: #333; border: none; padding: 8px 12px; border-radius: 3px;}
 .inner-nav a:hover {color: #fff; background-color: #333;}
 span.no-break {display:inline-block;}
 
-ul.nav {display: inline; list-style: none; color: #333; /*text-transform: uppercase;*/ font-weight: 700; letter-spacing: .1em; padding-left: 0;}
-ul.nav li {display: inline; font-size: 16px; margin-right: 10px;}
-ul.nav li:last-of-type {margin-right: 0;}
-ul.nav li a {display: inline-block; padding: 6px 8px; border: 2px solid #333; border-radius: 3px; margin-bottom: 10px;}
+ul.nav {display: inline-block; margin: 0; list-style: none; color: #333; /*text-transform: uppercase;*/ font-weight: 700; letter-spacing: .1em; padding-left: 0;}
+ul.nav li {display: inline-block; font-size: 16px;margin: 0 5px 5px; padding: 0; border: 2px solid #333; border-radius: 3px;}
+ul.nav li a {display: inline-block; padding: 6px 8px;}
 ul.nav li:hover a {color: #F7DA03; background: #333; cursor: pointer;}
 ul.nav li.current-page a {background: #333; color: #FFE51F;}
 header .full:after {content: ''; display: block; clear: both;}
 
-ul.nav-lang {list-style: none; margin: 0; padding: 5px 20px; text-align: right}
-ul.nav-lang li {border: none; margin-right: none; display: inline;}
+ul.nav-lang {list-style: none; margin: 0; padding: 5px 20px; text-align: right;}
+ul.nav-lang li {border: none; margin-right: 0; display: inline-block;}
 ul.nav-lang li a {color: #333; text-decoration: none; border-color: #333;}
 ul.nav-lang li a:hover {color: #666; border-color: #666;}
 ul.nav-lang li:after {content: "|"; margin-right: 5px; margin-left: 5px;}
@@ -195,13 +193,13 @@ footer .container {padding: 0 40px;}
   header .container { padding: 20px; }
   .full { width: 95%; }
   .core-workshoppers h4 a, .elective-workshoppers h4 a { font-size: 16px; }
-  ul.inner-nav li {display: inline-block; line-height: 3em;}
+  /*ul.inner-nav li {display: inline-block; line-height: 3em;}*/
   .window-pane { display: none; }
 }
 
 @media (max-width: 768px) {
   h1 { font-size: 2.0em; }
-  .container {padding: 20px;}
+  .container {padding: 5px;}
   .first-photo {background-image: none;}
   p {font-size: 1em;}
   .third, .two-thirds, .full, .half {width: 100%; }