potentiele oplossing grouped events

content/assets/stylesheets/includes/events.scss

@@ -33,6 +33,7 @@
   .info {
     margin: 1.5em;
     box-shadow : none;
+    width: 60%;
 
     .title {
       font-size: 1.7em;
@@ -64,9 +65,22 @@
       font-size: 1.6em;
       font-weight: 400;
     }
+  }
 
-    .subevent {
-      margin-left: 20px;
+  .main-event {
+    border-left: 1px solid gray;
+    border-radius: 0px;
+    box-shadow: none;
+    height: 8em;
+    // display: flex;
+    // align-items: center;
+
+    ul {
+      padding-left: .7em;
+    }
+
+    .active {
+      color: #FF7F00;
     }
   }
 }

content/events.erb

@@ -14,7 +14,7 @@ title: Events
       <%= render '/partials/_event_preview.*', event: event %>
     <% else %>
       <% sub_events(event).each do |sub_event| %>
-        <%= render '/partials/_event_preview.*', event: sub_event %>
+        <%= render '/partials/_event_preview.*', event: sub_event, main_event: event %>
       <% end %>
     <% end %>
   <% end %>

content/events/15-16/bottlebats/test.md

@@ -0,0 +1,6 @@
+---
+title: test
+time: 12-3-16
+location: Grace Hopper
+description: Dit is een description!
+---

layouts/partials/_event_preview.erb

@@ -5,8 +5,8 @@
 
   <div class="box info">
     <div class="title">
-      <a href="<%= relative_path_to(@event) %>">
-        <%= @event[:title] %>
+      <a href="<%= relative_path_to(event) %>">
+        <%= event[:title] %>
       </a>
     </div>
     <div class="location">
@@ -23,12 +23,21 @@
       <%= event[:time] %>
     </div>
 
-    <% sub_events(event).each do |sub_event| %>
-      <div class="subevent">
-        <a href="<%= relative_path_to(sub_event) %>">
-          <%= sub_event[:title] %>
-        </a>
-      </div>
-    <% end %>
   </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>