From 647d942412c9a1d9178b99c51102cd74163ce6ca Mon Sep 17 00:00:00 2001
From: Niko Strijbol <strijbol.niko@gmail.com>
Date: Mon, 13 Jan 2020 14:31:30 +0100
Subject: [PATCH] Html improvements:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use partial instead of inline
- Correct background colour if event has none
- Don't use <i> tag, use <em>
- Use UTF8 ™ character
---
 layouts/events.erb              | 23 +++++--------------
 layouts/partials/_soon_tile.erb | 40 ++++++++++-----------------------
 2 files changed, 18 insertions(+), 45 deletions(-)

diff --git a/layouts/events.erb b/layouts/events.erb
index 827c71f..c967bf7 100644
--- a/layouts/events.erb
+++ b/layouts/events.erb
@@ -57,33 +57,22 @@
       <div class="content has-text-centered">
         <h1>Sorry.</h1>
         <h2>No events planned yet this year.</h2>
-        <h4 class="has-text-grey"><i>Soon TM.<i></h4>
+        <h4 class="has-text-grey"><em>Soon™.</em></h4>
       </div>
     <% end %>
   </div>
 
-  <% unless soon_events().empty? %>
+  <% unless soon_events.empty? %>
     <div class="column is-3 is-narrow">
       <div class="menu">
         <div class="content">
           <h1>
-            Soon TM.
+            Soon™
           </h1>
         </div>
-        <% soon_events().each do |event| %>
-            <div class="tile box highlighted"
-              <% if event[:color] %>
-    style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= event[:color] %>;"
-              <% else %>
-    style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:'light-grey';"
-              <% end %>
-            >
-              <div class="content event-content has-text-centered">
-                <h3 style="color: white;"><%= event[:title] %></h3>
-                <p><%= event[:description] %></p>
-              </div>
-            </div>
-          <% end %>
+        <% soon_events.each do |event| %>
+          <%= render '/partials/_soon_tile.*', event: event %>
+        <% end %>
       </div>
     </div>
   <% end %>
diff --git a/layouts/partials/_soon_tile.erb b/layouts/partials/_soon_tile.erb
index f46b4c9..cea1f67 100644
--- a/layouts/partials/_soon_tile.erb
+++ b/layouts/partials/_soon_tile.erb
@@ -1,33 +1,17 @@
-<% if @event[:banner] %>
-  <a href="<%= @event.path %>" class="tile event-tile is-child box backgroundimg highlighted"
-    style="background-image:linear-gradient(rgba(0,0,0,0.2), rgba(0, 0, 0, 0.65)), url('<%= @event[:banner] %>');">
-<% elsif @event[:color] %>
-  <a href="<%= @event.path %>" class="tile event-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 event-tile is-child box backgroundimg">
-<% end %>
+<div class="tile box highlighted"
+     <% if event[:color] %>
+     style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= event[:color] %>;"
+     <% else %>
+     style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color: lightgrey;"
+     <% end %>
+     >
   <div class="content event-content">
-  <% if nil && @event[:image] %>
+  <% if @event[:image] %>
   <img class="event-tile-image" src="<%= @event[:image] %>" alt="">
   <% end %>
-    <div class="event-text">
-      <h1 class="has-text-centered">
-        <%= @event[:title] %>
-      </h1>
-
-      <div class="description has-text-centered">
-        <%= @event[:description] %>
-      </div>
-
-      <div class="is-divider"></div>
-
-      <div class="event-time-loc">
-        <%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B, %H:%M') %>
-        <br>
-        <%= fa :'map-marker', fw: true %><%= @event[:location] %>
-      </div>
+    <div class="has-text-centered">
+      <h3><%= @event[:title] %></h3>
+      <p><%= @event[:description] %></p>
     </div>
-
   </div>
-</a>
+</div>