Merge pull request #194 from ZeusWPI/revamp-event-tile

Revamp event tile

content/assets/stylesheets/includes/events.scss

@@ -6,13 +6,6 @@
   padding:20px;
   padding-top:0px;
 
-  .image-holder {
-    padding: 10px;
-    border: 1px solid lighten(gray, 30%);
-    width: 15%;
-    height: 15%;
-  }
-
   .image {
     vertical-align: baseline;
     border: 1px solid gray;

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/_event_preview.erb

@@ -1,39 +0,0 @@
-<div class="box event-preview">
-  <div class="image-holder">
-    <img src="<%= event[:image]%>" alt="" class="image" />
-  </div>
-
-  <div class="box info">
-    <div class="title">
-      <a href="<%= relative_path_to(event) %>">
-        <%= event[:title] %>
-      </a>
-    </div>
-    <div class="location">
-      <a href="#">
-        <%= event[:location] %>
-      </a>
-    </div>
-    <div class="description">
-      <%= event[:description] %>
-    </div>
-    <div class="time">
-      <%= event[:time].strftime '%A %d %B %Y %H:%M' %>
-    </div>
-  </div>
-
-  <% if @main_event %>
-    <div class="box main-event">
-      <p>
-        <%= main_event[:title] %>
-      </p>
-      <ul>
-        <% sub_events(main_event).each do |sub_event| %>
-          <li class="<%= "active" if sub_event[:title] == (event[:title])%>" >
-            <%= sub_event[:title] %>
-          </li>
-        <% end %>
-      </ul>
-    </div>
-  <% end %>
-</div>

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 is-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] %>
-        </h2>
+      </h1>
-      </div>
+
-      <div class="column is-narrow">
+      <div class="description has-text-centered">
-        <small>
-          <%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B %Y %H:%M') %>
-          <br>
-          <%= fa :'map-marker', fw: true %><%= @event[:location] %>
-        </small>
-      </div>
-    </div>
-    <div class="description">
         <%= @event[:description] %>
       </div>
-    <div class="teaser">
+
-      <%= get_teaser(@event) %>
+      <div class="is-divider"></div>
+
+      <div class="">
+        <%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B, %H:%M') %>
+        <br>
+        <%= fa :'map-marker', fw: true %><%= @event[:location] %>
       </div>
     </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"
   }
 }