From cfa8f004eb1b0f3ad4d07236c62bd676ea179a32 Mon Sep 17 00:00:00 2001
From: Michael Hall <mhall119@gmail.com>
Date: Sun, 15 Jul 2018 15:22:14 -0400
Subject: [PATCH] Improve team page design to add visual contrast between
 sections

---
 get_together/static/css/get_together.css         | 16 ++++++++++++++++
 .../templates/get_together/teams/about_team.html |  2 +-
 .../templates/get_together/teams/show_team.html  | 16 ++++++++--------
 .../get_together/teams/team_events.html          | 12 ++++++------
 .../get_together/teams/team_page_base.html       |  6 +++---
 get_together/views/teams.py                      |  2 +-
 6 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/get_together/static/css/get_together.css b/get_together/static/css/get_together.css
index b7e3a5e..41d5fde 100644
--- a/get_together/static/css/get_together.css
+++ b/get_together/static/css/get_together.css
@@ -100,6 +100,7 @@ ul.errorlist li {
     position: relative;
     margin-bottom: 3px;
     overflow: hidden;
+    border-radius: 0.25em;
 }
 
 .team-banner .team-title {
@@ -142,3 +143,18 @@ ul.errorlist li {
   background-image: none;
   border-color: #adadad;
 }
+
+
+.container-primary {
+    background: #f5f5f5;
+    padding: 10px;
+    border-radius: .5rem;
+    border: #efefef 1px solid;
+}
+
+.container-secondary {
+    background: #fff;
+    border-radius: 0.5em;
+    border: #efefef 1px solid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/get_together/templates/get_together/teams/about_team.html b/get_together/templates/get_together/teams/about_team.html
index 666962b..e04a3bf 100644
--- a/get_together/templates/get_together/teams/about_team.html
+++ b/get_together/templates/get_together/teams/about_team.html
@@ -4,7 +4,7 @@
 {% block about-button %}btn-default{% endblock %}
 
 {% block page_content %}
-            <div class="container">
+            <div class="container container-secondary">
                 {{ team.about_page|markdown }}
             </div>
             <br/>
diff --git a/get_together/templates/get_together/teams/show_team.html b/get_together/templates/get_together/teams/show_team.html
index f0eed4b..f72d922 100644
--- a/get_together/templates/get_together/teams/show_team.html
+++ b/get_together/templates/get_together/teams/show_team.html
@@ -4,6 +4,7 @@
 {% block summary-button %}btn-default{% endblock %}
 
 {% block page_content %}
+            <div class="container container-secondary mb-3">
             {% if team.description %}
             <div class="row">
                 <div class="col-md-9"><p>{{ team.description|markdown }}</p></div>
@@ -20,12 +21,12 @@
             </div>
             {% endif %}
 
-            <hr/>
+            </div>
 
-            <h4>Upcoming Events
-                <small><a href="{% url 'team-event-ical' team.id %}" class="fa fa-calendar" title="iCal"></a></small>
-            </h4>
-            <div class="container">
+            <div class="container container-secondary mb-3">
+                <h4>Upcoming Events
+                    <small><a href="{% url 'team-event-ical' team.id %}" class="fa fa-calendar" title="iCal"></a></small>
+                </h4>
                 {% for event in upcoming_events %}
                 <div class="row{% if event.status == event.CANCELED %} text-muted{% endif %}">
                     <div class="col">{% if event.status == event.CANCELED %}<del>{% endif %}<a href="{{ event.get_absolute_url }}">{{event.name}}</a>{% if event.status == event.CANCELED %}</del> (Canceled){% endif %}</div>
@@ -41,11 +42,10 @@
                 </div>
                 {% endif %}
             </div>
-            <br/>
 
             {% if recent_events %}
-            <h4>Recent Events</h4>
-            <div class="container">
+            <div class="container container-secondary mb-3">
+                <h4>Recent Events</h4>
                 {% for event in recent_events %}
                 <div class="row">
                     <div class="col"><a href="{{ event.get_absolute_url }}">{{event.name}}</a></div>
diff --git a/get_together/templates/get_together/teams/team_events.html b/get_together/templates/get_together/teams/team_events.html
index e341cc1..0cc0a43 100644
--- a/get_together/templates/get_together/teams/team_events.html
+++ b/get_together/templates/get_together/teams/team_events.html
@@ -12,10 +12,10 @@
                 </div>
             </div>
             {% endif %}
-            <h4>Upcoming Events
-                <small><a href="{% url 'team-event-ical' team.id %}" class="fa fa-calendar" title="iCal"></a></small>
-            </h4>
-            <div class="container">
+            <div class="container container-secondary">
+                <h4>Upcoming Events
+                    <small><a href="{% url 'team-event-ical' team.id %}" class="fa fa-calendar" title="iCal"></a></small>
+                </h4>
                 {% for event in upcoming_events %}
                 <div class="row{% if event.status == event.CANCELED %} text-muted{% endif %}">
                     <div class="col">{% if event.status == event.CANCELED %}<del>{% endif %}<a href="{{ event.get_absolute_url }}">{{event.name}}</a>{% if event.status == event.CANCELED %}</del> (Canceled){% endif %}</div>
@@ -27,8 +27,8 @@
             <br/>
 
             {% if recent_events %}
-            <h4>Past Events</h4>
-            <div class="container">
+            <div class="container container-secondary">
+                <h4>Past Events</h4>
                 {% for event in recent_events %}
                 <div class="row">
                     <div class="col"><a href="{{ event.get_absolute_url }}">{{event.name}}</a></div>
diff --git a/get_together/templates/get_together/teams/team_page_base.html b/get_together/templates/get_together/teams/team_page_base.html
index 56e95f3..39745fa 100644
--- a/get_together/templates/get_together/teams/team_page_base.html
+++ b/get_together/templates/get_together/teams/team_page_base.html
@@ -18,7 +18,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="fluid-container">
+<div class="fluid-container container-primary">
     <div class="row">
         <div class="col-md-9">
             {% if can_edit_team %}
@@ -57,8 +57,8 @@
             </div>
         </div>
 
-        <div class="col-sm-3">
-            <div class="container">
+        <div class="col-md-3">
+            <div class="container container-secondary">
             <h4>Members</h4><hr/>
                 {% for member in member_list %}
                 <div class="row mb-3">
diff --git a/get_together/views/teams.py b/get_together/views/teams.py
index 9ebb415..b4a7160 100644
--- a/get_together/views/teams.py
+++ b/get_together/views/teams.py
@@ -55,7 +55,7 @@ def show_team_by_id(request, team_id):
 
 def show_team(request, team):
     upcoming_events = Event.objects.filter(team=team, end_time__gt=datetime.datetime.now()).order_by('start_time')
-    recent_events = Event.objects.filter(team=team, end_time__lte=datetime.datetime.now()).order_by('-start_time')[:5]
+    recent_events = Event.objects.filter(team=team, end_time__lte=datetime.datetime.now()).order_by('-start_time')[:3]
     context = {
         'team': team,
         'upcoming_events': upcoming_events,