Merge pull request #154 from ZeusWPI/redesign_events_page_v2

Redesign events page v2

content/events.erb

@@ -3,35 +3,32 @@ navigable: true
 title: Events
 order: 20
 ---
-
-<div>
+<div class="container">
   <div class="content">
     <h1>Upcoming events</h1>
   </div>
-
-  <% upcoming_events.each do |event| %>
-    <!-- <hr class="divider"> -->
-    <% if (sub_events(event)).empty? %>
-      <%= render '/partials/_event_preview.*', event: event %>
-    <% else %>
-      <% sub_events(event).each do |sub_event| %>
-        <%= render '/partials/_event_preview.*', event: sub_event, main_event: event %>
-      <% end %>
+  <% upcoming_events.each_slice(2) do |slice| %>
+  <div class="columns">
+    <% slice.each do |event| %>
+    <div class="tile is-parent ">
+      <%= render '/partials/_events_tile.*', event: event %>
+    </div>
     <% end %>
+  </div>
   <% end %>
+</div>
 
+<div class="container">
   <div class="content">
     <h1>Past events</h1>
   </div>
-
-  <% past_events.each do |event| %>
-    <!-- <hr class="divider"> -->
-    <% if (sub_events(event)).empty? %>
-      <%= render '/partials/_event_preview.*', event: event %>
-    <% else %>
-      <% sub_events(event).each do |sub_event| %>
-        <%= render '/partials/_event_preview.*', event: sub_event, main_event: event %>
-      <% end %>
+  <% past_events.each_slice(2) do |slice| %>
+  <div class="columns">
+    <% slice.each do |event| %>
+    <div class="tile is-parent ">
+      <%= render '/partials/_events_tile.*', event: event %>
+    </div>
     <% end %>
+  </div>
   <% end %>
 </div>

content/events/16-17/25codenight.md

@@ -5,6 +5,7 @@ description: 1 uur voor elk levensjaar van Zeus!
 created_at: 11-10-2016
 time: 1-11-2016
 location: Therminal
+banner: https://zeus.ugent.be/zeuswpi/vRX2hOYZ.png
 locationlink: Hoveniersberg, Gent
 ---
 

content/events/16-17/Rust.md

@@ -6,6 +6,7 @@ created_at: 11-10-2016
 time: 26-10-2016 19:00
 location: PC lokaal Turing (1e verdiep) , S9
 locationlink: Sterre,Ghent Belgium
+color: "#003398"
 ---
 
 He!

content/events/16-17/datacenter.md

@@ -1,6 +1,6 @@
 ---
 title: Bezoek datacenter
-image: https://zeus.ugent.be/zeuswpi/_Lv_m5Ng.jpeg
+banner: http://www.foneo-datacenter.eu/images/banner_ownership_eyecatcher.jpg
 description: Zeus bezoekt het datacenter en de supercomputer in S10!
 created_at: 3-10-2016
 time: 10-10-2016 17:45

content/events/16-17/fosdem.md

@@ -5,7 +5,7 @@ created_at: 27-12-2016
 time: 04-02-2017
 location: ULB Campus Solbosch
 locationlink: 50.813014, 4.381760
-banner: //fosdem.org/2017/assets/style/fosdem-home-visual-a4f55964bc6492855a435b88874f4a7dddac0ea3c2927e64e0608adc18e24dd2.jpg
+banner: https://fosdem.org/2017/assets/style/fosdem-home-visual-e16e61f851e13e834abcc31fddc09ddbc7a63a5b29147ae506e9c954e0173089.jpg
 image: //fosdem.org/2017/assets/style/logo-gear-7204a6874eb0128932db10ff4030910401ac06f4e907f8b4a40da24ba592b252.png
 ---
 Het is weer bijna zo ver: op 4 en 5 februari gaat FOSDEM door aan de ULB Solbosch campus in Brussel. Voor zij die het nog niet weten: FOSDEM staat voor Free and Open source Software Developers' European Meeting en is één van de grootste gelijkaardige evenementen in Europa. Naast honderden interessante talks in tientallen devrooms en auditoria, krijg je de kans om soortgenoten te ontmoeten en ideeën uit te wisselen. Een echte topper dus in het boekje van de Zeus'er!

content/events/16-17/latex.md

@@ -1,6 +1,7 @@
 ---
 title: Latex les
 image: https://zeus.ugent.be/zeuswpi/47J781xu.png
+banner: http://www.senzokuike-eye.net/images/skins/bg-banner-royal-blue.png
 description: Introductie tot LaTeX
 created_at: 11-10-2016
 time: 25-10-2016 19:00

content/events/16-17/lip.md

@@ -1,11 +1,13 @@
 ---
 title: Linux Install Party
 image: https://zeus.ugent.be/zeuswpi/9vRI2xW9.jpg
+banner: https://www.bleepstatic.com/images/news/deals/misc/june-2016/sale_4504_special_sale_banner_background[1].jpg
 description: Hulp nodig met het installeren van Linux op je laptop? Zeus helpt je graag!
 created_at: 3-10-2016
 time: 5-10-2016 17:00
 location: Zeus kelder, S9
 locationlink: Sterre,Ghent Belgium
+
 ---
 
 Zeus helpt elk jaar de eerstejaartjes (en anderen) met het installeren van Linux op hun maagdelijke laptops.

content/events/16-17/spelavondI.md

@@ -1,6 +1,7 @@
 ---
 title: Spelletjesavond I
 image: https://zeus.ugent.be/zeuswpi/fSIklQoj.jpg
+banner: http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2012/03/board-games.jpg
 description: De eerste spelletjesavond van het academiejaar!
 created_at: 11-10-2016
 time: 19-10-2016 18:00

content/index.erb

@@ -24,10 +24,8 @@
           </div>
         </div>
         <!--next event -->
-        <div class="tile is-parent is-4"  >
-          <%= render '/partials/_tile.*',
-            article: upcoming_events[0] || all_events[-1],
-            small_text: if upcoming_events[0] then "Upcoming event" else "Past event" end%>
+        <div class="tile is-parent is-4">
+          <%= render '/partials/_events_tile.*', event: upcoming_events[0] || all_events[-1] %>
         </div>
 
         <!-- latest blogpost -->
@@ -41,13 +39,10 @@
       <div class="tile">
         <div class="tile is-vertical">
           <% all_events.reject { |x| x == upcoming_events[0] }.reverse[0..2].each do |event| %>
-            <div class="tile is-parent ">
-              <%= render '/partials/_tile.*',
-                article: event,
-                small_text: upcoming_events.include?(event) ? "Upcoming event" : "Past event",
-                htmlclass:"highlighted" %>
+          <div class="tile is-parent ">
+            <%= render '/partials/_events_tile.*', event: event %>
           </div>
-        <%end%>
+          <%end%>
         </div>
         <div class="tile is-vertical">
         <% sorted_articles[1..3].each do |post| %>

layouts/eventpost.erb

@@ -14,6 +14,8 @@
 
 <% if item[:banner] %>
 <section class="hero is-medium is-primary is-bold" style="background-image:url('<%= item[:banner] %>');background-position:center;">
+<% elsif item[:color] %>
+<section class="hero is-medium is-primary is-bold" style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= item[:color] %>;">
 <% else %>
 <section class="hero is-medium is-primary is-bold">
 <% end %>

layouts/partials/_events_tile.erb

@@ -0,0 +1,32 @@
+<% if @event[:banner] %>
+  <a href="<%= @event.path %>" class="tile is-child box backgroundimg highlighted"
+    style="background-image:url('<%= @event[:banner] %>');">
+<% elsif @event[:color] %>
+  <a href="<%= @event.path %>" class="tile is-child box backgroundimg highlighted"
+    style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= @event[:color] %>;">
+<% else %>
+  <a href="<%= @event.path %>" class="tile is-child box backgroundimg">
+<% end %>
+  <div class="content">
+    <div class="columns">
+      <div class="column">
+        <h2>
+          <%= @event[:title] %>
+        </h2>
+      </div>
+      <div class="column is-narrow">
+        <small>
+          <%= @event[:time].strftime('%A %d %B %Y %H:%M') %>
+          <br>
+          <%= @event[:location] %>
+        </small>
+      </div>
+    </div>
+    <div class="description">
+      <%= @event[:description] %>
+    </div>
+    <div class="teaser">
+      <%= get_teaser(@event) %>
+    </div>
+  </div>
+</a>

layouts/partials/_tile.erb

@@ -1,5 +1,5 @@
 <a href="<%= @article.path %>" class="tile is-child box backgroundimg <%= @htmlclass %>"
-  style="background-image:url('<%= @article[:banner] %>');">
+  style="background-image:url('<%= @article[:banner] %>') ;">
   <div class="content" >
     <div class="columns">
       <div class="column">