Change events list to a card layout

get_together/templates/get_together/base.html

@@ -23,6 +23,7 @@
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
+    {%block styles %}{% endblock %}
     <!-- Bootstrap style overrides -->
     <style>
 body {

get_together/templates/get_together/events.html

@@ -1,7 +1,50 @@
 {% extends "get_together/base.html" %}
+{% load static %}
+
+{% block styles %}
+    <link href="http://getbootstrap.com/docs/4.0/examples/album/album.css" rel="stylesheet"/>
+    <style>
+.card-banner {
+    position: relative;
+}
+.card-banner .card-title {
+    position: absolute;
+    bottom: 0px;
+    left: 6px;
+    color: #FFF;
+    font-size: 18pt;
+    font-weight: bold;
+    text-shadow: 2px 2px #444;
+}
+    </style>
+{% endblock %}
+
+{% block content %}
+<h3>Upcoming events</h3>
+        <div class="container">
+          <div class="row">
+{% for event in events_list %}
+            <div class="col-md-4">
+              <div class="card mb-4 box-shadow">
+                <div class="card-banner">
+                  <img class="card-img-top" src="{% static 'img/event_placeholder.png' %}" alt="{{event.name}}">
+                  <p class="card-title">{{event.name}}</p>
+                </div>
+                <div class="card-body">
+                  <p class="card-subtitle">{{ event.team.name }}</p>
+                  <p class="card-text">{{ event.summary }}</p>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <small class="text-muted">{{ event.start_time }}</small>
+                    <div class="btn-group">
+                        <a class="btn btn-primary" href="{{ event.get_absolute_url }}">View</a></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+{% endfor %}
+        </div>
+    </div>
 
-{% block content %}
-<h4>Upcoming events</h4>
-{% include "events/event_list.html" %}
 {% endblock %}
 

get_together/urls.py

@@ -15,6 +15,10 @@ Including another URLconf
 """
 from django.contrib import admin
 from django.urls import path, include
+
+from django.conf import settings
+from django.conf.urls.static import static
+
 from events import views as event_views
 from . import views
 
@@ -41,3 +45,5 @@ urlpatterns = [
 
     path('oauth/', include('social_django.urls', namespace='social')),
 ]
+if settings.DEBUG:
+    urlpatterns = urlpatterns + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)