More elegant event tile

content/assets/stylesheets/includes/tiles.scss

@@ -16,6 +16,34 @@ a.box {
   }
 }
 
+.event-tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1em;
+  filter: grayscale(30%);
+
+  .event-content {
+    color: #4a4a4a;
+    height: 100%;
+    width: 100%;
+    background: rgba($tertiary, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .event-text {
+      display: inline-block;
+      font-size: 1.1em;
+    }
+
+    .is-divider {
+      margin: 0.5em;
+    }
+  }
+
+}
+
 .centering {
   display: flex;
 

content/assets/stylesheets/includes/variables.scss

@@ -13,8 +13,6 @@ $orange: $zeus-orange;
 $blue: $zeus-blue;
 $turquoise: #30D1B2;
 
-$primary: $orange;
-
 $family-sans-serif: 'Lato', sans-serif;
 
 $link-visited: $orange;
@@ -30,5 +28,9 @@ $cammie-controls-color: rgba(0, 0, 0, 0.60);
 
 $event-padding: 10px;
 
+$primary: $orange;
+$secondary: $zeus-blue;
+$tertiary: $box-colour;
+
 // Default font size
 // $size-normal: 15px;

content/assets/stylesheets/main.scss

@@ -3,6 +3,7 @@
 @import "includes/variables";
 
 @import "../../../node_modules/bulma/bulma";
+@import "../../../node_modules/bulma-divider/divider";
 
 .nav-right {
   flex: none;

layouts/partials/_events_tile.erb

@@ -1,32 +1,30 @@
 <% if @event[:banner] %>
-  <a href="<%= @event.path %>" class="tile is-child box backgroundimg highlighted"
+  <a href="<%= @event.path %>" class="tile event-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"
+  <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 is-child box backgroundimg">
+  <a href="<%= @event.path %>" class="tile event-tile sis-child box backgroundimg">
 <% end %>
-  <div class="content">
+  <div class="content event-content">
-    <div class="columns events-tile">
+    <div class="event-text">
-      <div class="column">
+      <h1 class="has-text-centered">
-        <h2>
+        <%= @event[:title] %>
-          <%= @event[:title] %>
+      </h1>
-        </h2>
+
+      <div class="description has-text-centered">
+        <%= @event[:description] %>
       </div>
-      <div class="column is-narrow">
+
-        <small>
+      <div class="is-divider"></div>
-          <%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B %Y %H:%M') %>
+
-          <br>
+      <div class="">
-          <%= fa :'map-marker', fw: true %><%= @event[:location] %>
+        <%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B %Y %H:%M') %>
-        </small>
+        <br>
+        <%= fa :'map-marker', fw: true %><%= @event[:location] %>
       </div>
     </div>
-    <div class="description">
+
-      <%= @event[:description] %>
-    </div>
-    <div class="teaser">
-      <%= get_teaser(@event) %>
-    </div>
   </div>
 </a>

package-lock.json

@@ -8,6 +8,11 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.5.1.tgz",
       "integrity": "sha1-2ygxyUr+cyJQx7ElJ6e3kqTcnvg="
+    },
+    "bulma-divider": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/bulma-divider/-/bulma-divider-0.0.1.tgz",
+      "integrity": "sha1-qcW1TwzgKg6FjTOPTlggN4dRKks="
     }
   }
 }

package.json

@@ -7,6 +7,7 @@
   "license": "MIT",
   "repository": "https://github.com/ZeusWPI/zeus.ugent.be",
   "dependencies": {
-    "bulma": "0.5.1"
+    "bulma": "0.5.1",
+    "bulma-divider": "~0.0.1"
   }
 }