more responsive, added real menu items

src/app/level2/Level2.php

@@ -39,6 +39,8 @@
 
       foreach( $googleCalendar[ 'items' ] as $googleEvent ) {
 
+        unset( $event );
+
         $event[ 'name'        ] = $googleEvent[ 'summary' ];
 
         if ( array_key_exists( 'dateTime' , $googleEvent[ 'start' ] ) ){
@@ -75,7 +77,9 @@
           );
 
           if ( is_array( $image ) ) {
-            $event[ 'image' ] = $image[ 0 ];
+            if ( $image[ 0 ][ 0 ] != '' ) {
+              $event[ 'image' ] = $image[ 0 ][ 0 ];
+            }
           }
 
           $event[ 'description' ] = nl2br( $event[ 'description' ] );
@@ -92,7 +96,7 @@
           );
 
           if ( is_array( $url ) ) {
-            $event[ 'url' ] = $url[ 0 ];
+            $event[ 'url' ] = $url[ 0 ][ 0 ];
           }
 
         }

src/app/level2/WebControllerProvider.php

@@ -16,11 +16,29 @@
         return $app['twig']->render(
           'level2.twig',
           array(
+            'page'    =>  'home',
             'level2'  =>  Level2::getStatus(),
             'events'  =>  array_slice(
               Level2::getEvents( $app ),
               0,
-              5
+              1
+            )
+          )
+        );
+
+      });
+
+      $ctr->get('/events', function() use ( $app ) {
+
+        return $app['twig']->render(
+          'level2.twig',
+          array(
+            'page'    =>  'events',
+            'level2'  =>  Level2::getStatus(),
+            'events'  =>  array_slice(
+              Level2::getEvents( $app ),
+              0,
+              10
             )
           )
         );

src/app/views/base.twig

@@ -38,9 +38,8 @@
         </div>
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Level2</a></li>
+            <li {% if page == 'home' %}  class="active" {% endif %} ><a href="/">Level2</a></li>
-            <li><a href="#about">About</a></li>
+            <li {% if page == 'events' %}  class="active" {% endif %} ><a href="/events">Events</a></li>
-            <li><a href="#contact">Contact</a></li>
           </ul>
           <ul class="nav navbar-nav navbar-right">
             {% if level2.open %}

src/app/views/level2.twig

@@ -4,42 +4,50 @@
 
 <div class="row">
 
-  <div class="col-sm-4">
+  <div class="col-sm-3">
 
     <h2>Events</h2>
 
   </div>
 
-  <div class="col-sm-8">
+  <div class="col-sm-9">
 
     {% for event in events %}
 
       <div class="row event well">
 
-        <div class="col-sm-4">
+        <div class="col-sm-4 meta hidden-xs">
-          {% if event.image.0 is defined %}
+          {% if event.image is defined %}
-            <img src="{{ event.image.0 }}" />
+            <div class="img">
+              <img src="{{ event.image }}" />
+            </div>
           {% else %}
             <img src="https://wiki.hackerspace.lu/w/images/8/86/Syn2catLOGO.png" />
           {% endif %}
-          {% if event.date is defined %}
+          <h4>{{ event.date }}</h4>
-            <h4>{{ event.date }}</h4>
-          {% endif %}
           {% if event.location is defined %}
-            <h4>{{ event.location }}</h4>
+            <h4 class="location">{{ event.location }}</h4>
           {% endif %}
         </div>
-        <div class="col-sm-8">
+        <div class="col-sm-8 description">
           <h2>
-            {% if event.url.0 is defined %}
+            {% if event.url is defined %}
-              <a href="{{ event.url.0 }}">
+              <a href="{{ event.url }}">
                 {{ event.name }}
               </a>
             {% else %}
                 {{ event.name }}
             {% endif %}
           </h2>
-          <p>{{ event.description|raw }}</p>
+          <h4 class="visible-xs">
+          {{ event.date }}
+          {% if event.location is defined %}
+             - {{ event.location }}
+          {% endif %}
+          </h4>
+          {% if event.description is defined %}
+            <p>{{ event.description|raw }}</p>
+          {% endif %}
         </div>
 
       </div>

src/web/css/level2.css

@@ -18,10 +18,9 @@ body {
   overflow-x: hidden;
 }
 .well {
-  padding: 0.5rem;
+  padding: 0.3rem;
   border: none;
   background: rgba( 255, 255, 255, 0.7 );
-  border-radius: 0.4rem;
 }
 .footer {
   margin: 1rem 0;
@@ -45,7 +44,7 @@ body {
 
 @media (min-width: 768px) {
   .navbar {
-    padding-top: 11rem;
+    padding-top: 11.3rem;
     margin-top: -10rem;
     padding-left: 10rem;
     margin-left: -10.5rem;
@@ -60,6 +59,31 @@ body {
   .navbar-nav>li>a {
     border-radius: 0.4rem 0.4rem 0px 0px;
   }
+  .event .meta .img {
+    text-align: center;
+  }
+  .event p {
+    margin-top: -0.5rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .well {
+    border-radius: 0;
+  }
+}
+
+img {
+  max-width: 100%;
+  max-height: 150px;
+  border-radius: 0.4rem;
+
+}
+
+@media (max-width: 992px) {
+  img {
+    max-height: 100px;
+  }
 }
 
 .navbar-nav>li.status-open a, .navbar-nav>li.status-open a:hover {
@@ -81,15 +105,21 @@ h2, h3, h4 {
 .event h2, .event h3, .event h4, .event p {
   margin: 0;
 }
+.event h2 {
+  font-size: 2rem;
+}
+
 .event h4 {
   color: #777;
 }
 .event p {
-  margin-top: -0.5rem;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-img {
+.event .meta {
-  max-width: 100%;
+  padding-top: 10px;
-  border-radius: 0.4rem;
+}
 
+.description h4 {
+  margin-top: -0.5rem;
 }