Improve team page design to add visual contrast between sections

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;
+}

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/>

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>

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>

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">

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,