Improvement on event cards, we'll revamp this later

content/assets/stylesheets/includes/eventpage.scss

@@ -55,3 +55,13 @@
     width: 100%;
   }
 }
+
+.event-tile-image {
+  // For now, don't show the event tile image on mobile, takes too much space
+  @include mobile {
+    display: none;
+  }
+
+  max-width:200px;
+  max-height:200px;
+}

content/index.erb

@@ -11,55 +11,54 @@
 <div id="homepage">
   <div class="tile is-vertical is-ancestor">
     <%= if studytime? then render '/tiles/blokmap.*'end %>
-      <div class="tile">
-        <!--top coders -->
-        <div class="tile is-parent is-4">
-          <div class="tile is-child box gamification-tile">
-            <div class="content">
-              <div class="tile-header">
-                <h1 class="has-text-centered">
-                  <a href="https://zeus.ugent.be/game">
-                    <i class="fa fa-trophy" aria-hidden="true"></i>
-                  </a>
-                </h1>
-              </div>
-              <div id="gamification-coders" >
-                <!-- EMPTY -->
-              </div>
+    <!--next event -->
+    <div class="tile is-parent">
+      <%= render '/partials/_events_tile.*', event: upcoming_events[0] || all_events[-1] %>
+    </div>
+    <div class="tile">
+      <!--top coders -->
+      <div class="tile is-parent is-6">
+        <div class="tile is-child box gamification-tile">
+          <div class="content">
+            <div class="tile-header">
+              <h1 class="has-text-centered">
+                <a href="https://zeus.ugent.be/game">
+                  <i class="fa fa-trophy" aria-hidden="true"></i>
+                </a>
+              </h1>
+            </div>
+            <div id="gamification-coders" >
+              <!-- EMPTY -->
             </div>
           </div>
         </div>
-        <!--next event -->
-        <div class="tile is-parent is-4">
-          <%= render '/partials/_events_tile.*', event: upcoming_events[0] || all_events[-1] %>
-        </div>
-
-        <!-- latest blogpost -->
-        <div class="tile is-4 is-parent">
-          <%= render '/partials/_tile.*',
-            article: sorted_articles.first,
-            small_text: "Latest blogpost",
-            htmlclass:"highlighted"%>
-        </div>
       </div>
-      <div class="tile">
-        <div class="tile is-vertical">
-          <% all_events.reject { |x| x == (upcoming_events[0] || all_events[-1]) }.reverse[0..2].each do |event| %>
-          <div class="tile is-parent ">
-            <%= render '/partials/_events_tile.*', event: event %>
-          </div>
-          <%end%>
+      <!-- latest blogpost -->
+      <div class="tile is-6 is-parent">
+        <%= render '/partials/_tile.*',
+          article: sorted_articles.first,
+          small_text: "Latest blogpost",
+          htmlclass:"highlighted"%>
+      </div>
+    </div>
+    <div class="tile">
+      <div class="tile is-vertical">
+        <% all_events.reject { |x| x == (upcoming_events[0] || all_events[-1]) }.reverse[0..2].each do |event| %>
+        <div class="tile is-parent ">
+          <%= render '/partials/_events_tile.*', event: event %>
         </div>
-        <div class="tile is-vertical">
-        <% sorted_articles[1..3].each do |post| %>
-          <div class="tile is-parent ">
-            <%= render '/partials/_tile.*',
-              article: post,
-              small_text: "Blogpost"%>
-          </div>
         <%end%>
-
-        </div>
       </div>
+      <div class="tile is-vertical">
+      <% sorted_articles[1..3].each do |post| %>
+        <div class="tile is-parent ">
+          <%= render '/partials/_tile.*',
+            article: post,
+            small_text: "Blogpost"%>
+        </div>
+      <%end%>
+
+      </div>
+    </div>
   </div>
 </div>

layouts/events.erb

@@ -27,7 +27,7 @@
       <div class="content">
         <h1>Upcoming events</h1>
       </div>
-      <% upcoming_events(@item[:academic_year]).each_slice(2) do |slice| %>
+      <% upcoming_events(@item[:academic_year]).each_slice(1) do |slice| %>
       <div class="columns">
         <% slice.each do |event| %>
         <div class="tile is-parent ">
@@ -42,7 +42,7 @@
       <div class="content">
         <h1>Past events</h1>
       </div>
-      <% past_events(@item[:academic_year]).each_slice(2) do |slice| %>
+      <% past_events(@item[:academic_year]).each_slice(1) do |slice| %>
       <div class="columns">
         <% slice.each do |event| %>
         <div class="tile is-parent ">

layouts/partials/_events_tile.erb

@@ -8,6 +8,9 @@
   <a href="<%= @event.path %>" class="tile event-tile is-child box backgroundimg">
 <% end %>
   <div class="content event-content">
+  <% if @event[:image] %>
+  <img class="event-tile-image" src="<%= @event[:image] %>" alt="">
+  <% end %>
     <div class="event-text">
       <h1 class="has-text-centered">
         <%= @event[:title] %>