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,9 +11,13 @@
 <div id="homepage">
   <div class="tile is-vertical is-ancestor">
     <%= if studytime? then render '/tiles/blokmap.*'end %>
+    <!--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-4">
+      <div class="tile is-parent is-6">
         <div class="tile is-child box gamification-tile">
           <div class="content">
             <div class="tile-header">
@@ -29,13 +33,8 @@
           </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">
+      <div class="tile is-6 is-parent">
         <%= render '/partials/_tile.*',
           article: sorted_articles.first,
           small_text: "Latest blogpost",

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] %>