Use small card for events in home page and profile

app/assets/stylesheets/custom.scss

@@ -50,6 +50,9 @@ body {
   border-radius: .25rem;
 }
 
+.accent-border-bottom {
+  border-bottom: 3px solid $indigo;
+}
 
 // Event Map
 

app/assets/stylesheets/events.scss

@@ -29,14 +29,14 @@ a.event-box-title:hover {
 
 .card-img-overlay--event {
   right: 15px;
+  border-bottom: 3px solid #6610f2;
 }
 
 .event-box-text {
   padding: 1rem;
 
   @include media-breakpoint-up(md) {
     padding: 0.9rem 0.5rem;
-    border-bottom: 3px solid $indigo;
   }
 
   @include media-breakpoint-up(lg) {
@@ -48,6 +48,12 @@ a.event-box-title:hover {
   }
 }
 
+.event-box-text--accented {
+  @include media-breakpoint-up(md) {
+    border-bottom: 3px solid $indigo;
+  }
+}
+
 .event-box__date {
   margin-bottom: 0.5rem;
   font-size: 1rem;

app/views/events/_event.html.erb

@@ -1,39 +1,22 @@
-<div class="container mt-2rem">
-  <div class="row box event-box">
+<div class="box event-box">
 
-    <div class="event-box-image card card-inverse text-center col-md-4">
-      <%= link_to group_event_path(event.group, event) do %>
-        <%= image_tag event.image_url(:thumb),
-          class: "img-fluid card-img-top" %>
-      <% end %>
-    </div>
-
-    <div class="event-box-text card-body col-md-8 d-flex flex-column justify-content-between">
-      <h2 class="h4 event-box__event-title">
-        <%= link_to event.title, group_event_path(event.group, event),
-          class: "font-weight-bold" %>
-      </h2>
-      <p class="event-box__date">
-        <% if event.start_date.year == Time.now.year %>
-          <%= event.start_date.strftime("%A, %B %d") %>
-        <% else %>
-          <%= event.start_date.strftime("%A, %B %d, %Y") %>
-        <% end %>
-      </p>
-      <% if controller_name == "groups" %>
-        <p class="event-box__short-description mb-0">
-          <%= event.short_description %>
-        </p>
-      <% else %>
-        <p class="event-box__group mb-0">Group: <%= event.group.name %></p>
-        <p class="event-box__short-description mb-0">
-          <%= event.very_short_description %>
-        </p>
-      <% end %>
-      <p class="event-box__attending mb-2">
-        Attending: <%= event.attendees.count %>
-      </p>
-    </div>
+  <div class="card card-inverse text-center accent-border-bottom">
+    <%= image_tag event.image_url(:thumb), class: "img-fluid card-img-top" %>
+    <a href="<%= group_event_path(event.group, event) %>">
+      <div class="card-img-overlay accent-border-bottom">
+        <div class="card-title card-title--event mb-0">
+          <h2 class="h4 mb-1 event-box-title">
+            <%= event.title %>
+          </h2>
+        </div>
+      </div>
+    </a>
+  </div>
 
+  <div class="event-box-text">
+    <p class="mb-0 event-box__date">
+      <%= event.start_date_prettyfied %>
+    </p>
   </div>
+
 </div>

app/views/groups/_events.html.erb

@@ -13,7 +13,9 @@
 
               <div class="row d-flex justify-content-center">
                 <div class="col-md-12">
-                  <%= render events %>
+                  <% events.each do |event| %>
+                    <%= render "group_event", event: event %>
+                  <% end %>
                 </div>
               </div>
 

app/views/groups/_group_event.html.erb

@@ -0,0 +1,36 @@
+<div class="container mt-2rem">
+  <div class="row box event-box">
+
+    <div class="event-box-image card card-inverse text-center col-md-4">
+      <%= link_to group_event_path(event.group, event) do %>
+        <%= image_tag event.image_url(:thumb),
+          class: "img-fluid card-img-top" %>
+      <% end %>
+    </div>
+
+    <div class="event-box-text event-box-text--accented
+      card-body col-md-8 d-flex flex-column justify-content-between">
+      <h2 class="h4 event-box__event-title">
+        <%= link_to event.title, group_event_path(event.group, event),
+          class: "font-weight-bold" %>
+      </h2>
+      <p class="event-box__date">
+        <%= event.start_date_prettyfied %>
+      </p>
+      <% if controller_name == "groups" %>
+        <p class="event-box__short-description mb-0">
+          <%= event.short_description %>
+        </p>
+      <% else %>
+        <p class="event-box__group mb-0">Group: <%= event.group.name %></p>
+        <p class="event-box__short-description mb-0">
+          <%= event.very_short_description %>
+        </p>
+      <% end %>
+      <p class="event-box__attending mb-2">
+        Attending: <%= event.attendees.count %>
+      </p>
+    </div>
+
+  </div>
+</div>

app/views/static_pages/_events.html.erb

@@ -3,10 +3,12 @@
     <div class="row">
       <div class="col-md-12 mt-2rem mb-2rem">
 
-        <div class="justify-content-center">
-          <h2 class="text-center">Upcoming Events</h2>
+        <h2 class="text-center">Upcoming Events</h2>
+        <div class="d-flex justify-content-center">
           <% if !events.empty? %>
-            <%= render events %>
+            <div class="col-md-4 mt-2rem">
+              <%= render events %>
+            </div>
           <% elsif !user_groups.empty? %>
             <h3 class="h5 text-center mt-4">
               There are no upcoming events in your groups.

app/views/users/show.html.erb

@@ -49,7 +49,7 @@
               <%= organized_events_header(@user.organized_events) %>
             </h3>
             <div class="row">
-              <div class="col-md-12">
+              <div class="col-md-4 mt-2rem">
                 <%= render @last_organized_events %>
               </div>
             </div>