Merge lp:~daker/loco-team-portal/fix.team-page into lp:loco-team-portal

[Adnane Belmadiaf]

A new Team page layout

result http://i.imgur.com/VoKXp.png

[lp:~daker/loco-team-portal/fix.team-page]

557. By Adnane Belmadiaf on 2012-11-12

* Fixed 789145

558. By Adnane Belmadiaf on 2012-11-12

* Fixed the form messages

=== modified file '.bzrignore'
--- .bzrignore	2012-09-07 00:39:48 +0000
+++ .bzrignore	2012-11-12 20:49:20 +0000
@@ -20,3 +20,4 @@
 loco_directory/media/js/twidenash
 env
 .vagrant
+log.txt
\ No newline at end of file

=== modified file 'loco_directory/media/css/styles.css'
--- loco_directory/media/css/styles.css	2012-10-30 12:30:02 +0000
+++ loco_directory/media/css/styles.css	2012-11-12 20:49:20 +0000
@@ -71,7 +71,7 @@
     clear:          right;
 }
 
-li.float_list { 
+li.float_list {
     float:   left;
     margin: 0px 0px 0px 25px;
     clear: left;
@@ -130,7 +130,7 @@
     text-align:     right;
     display:        inline;
 }
-    
+
 #main-content .object-detail .option {
     width:           32px;
     height:          32px;
@@ -173,12 +173,12 @@
 }
 
 #page-footer .container div.copyright {
-    font-size:       0.75em;  
+    font-size:       0.75em;
     line-height:     1.5em;
 }
 
 #page-footer .container div.loggedin {
-    font-size:       0.75em;  
+    font-size:       0.75em;
     line-height:     1.5em;
     float:           left;
     width:           400px;
@@ -187,9 +187,9 @@
 }
 
 #page-footer .container div.lang_switcher {
-    font-size:       0.75em;  
+    font-size:       0.75em;
     line-height:     1.5em;
-    float:           right; 
+    float:           right;
     margin-bottom:   10px;
     margin-top:      5px;
     margin-right:    14px;
@@ -206,7 +206,7 @@
     list-style:      none;
     margin:          -1px 2px 0px 3px;
     padding:         0px;
-    display:         inline; 
+    display:         inline;
 }
 
 /* UI Errors ( To yell at the user when they don't fill out a form ) */
@@ -425,7 +425,7 @@
         font-weight:normal;
 }
 
-.form div span.required { 	
+.form div span.required {
         font-size:20px;
 	color: red;
 	margin-left:5px;
@@ -543,21 +543,288 @@
 }
 
 #locobranding {
-    width: 96px; 
-    height: 96px; 
-    position: absolute; 
-    right: 10px;
+    width: 96px;
+    height: 96px;
+    margin: 0 10px 10px 0px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    float: left;
+}
+
+#locobranding img {
+    width: 96px;
+    height: 96px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+
+#loco-name  {
+    float: right;
+    width: 545px;
+}
+
+#loco-location,
+#loco-language,
+#loco-support{
+    display: inline-block ;
+    font-size: 12px;
+}
+
+#loco-language  {
+    display: inline-block ;
+    margin-left: 10px;
+}
+
+#loco-support  {
+    display: inline-block ;
+    margin-left: 10px;
+}
+
+#loco-location span.value,
+#loco-language span.value,
+#loco-support span.value{
+    position: relative;
+    top: -5px;
+
+}
+
+span.ellipsis {
+   white-space: nowrap;
+   text-overflow: ellipsis;
+   overflow: hidden;
+   width: 170px;
+   display: inline-block;
+   line-height: 15px;
+}
+
+span.small-ellipsis {
+    width: 100px!important;
+}
+
+span.medium-ellipsis {
+    width: 165px!important;
+}
+
+
+.event-meetings {
+    padding: 15px 48px 5px 15px;
+    border-top: #CCC 1px dotted;
+    display: block;
+    text-decoration: none;
+    color: black;
+}
+
+.event-meetings p{
+    color: black;
+}
+
+.events-meetings-wrapper {
+    margin-top: 5px;
+}
+
+.events-meetings-wrapper h3.title
+{
+    padding-left: 15px;
+    float: left;
+}
+
+.event-meetings span.title
+{
+    display:block;
+    font-size:16px;
+    line-height:20px;
+    color:#dd4814;
+}
+
+.event-meetings small
+{
+    display:block;
+    margin-bottom:8px;
+    color:#666;
+}
+
+.event-meetings:hover
+{
+    background: #f7f6f5 url('../images/search_arrow.png') no-repeat right center;
+}
+
+.no-results {
+    font-size: 12px;
+    white-space: nowrap;
+    word-wrap: normal;
+    vertical-align: middle;
+    text-align: center;
+    margin: 0 0 20px 0;
+    padding-top: 20px;
+    border-top: 1px solid #E6E6E6;
+    font-style: italic;
+}
+
+.team-photos-wrapper {
+    border-top: #CCC 1px dotted;
+    padding-top: 10px;
+    margin-bottom: 5px;
+}
+
+.team-photos-wrapper h3.title
+{
+    padding-left: 15px;
+}
+
+.team-actions {
+    white-space: nowrap;
+    vertical-align: middle;
+    float: right;
+    padding-right: 15px;
+}
+
+.team-actions a{
+    height: 26px;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-left: 5px;
+    color: #333;
+    border: 3px solid transparent;
+    border-width: 3px 0;
+    background: none;
+    font-size: 12px;
+    white-space: nowrap;
+    word-wrap: normal;
+    display: inline-block;
+    text-transform: uppercase;
+}
+
+.team-actions a:hover{
+    border-bottom-color: #DD4814;
+}
+
+.team-admins a {
+    display: block;
+    text-decoration: none;
+    margin-bottom: 4px;
+    padding: 2px;
+    height: 51px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.team-admins img.mugshot {
+    margin: 0;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    width: 50px;
+}
+
+.team-admins p {
+    position: relative;
+    top: -35px;
+    margin: 0;
+    font-size: 14px;
+    width: 140px;
+    left: 55px;
+
+}
+
+.team-social-wrapper {
+    border-top: #CCC 1px dotted;
+    overflow: auto;
+}
+
+.team-social-wrapper div.twitter-feed {
+    border-right: #CCC 1px dotted;
+}
+
+.team-social-wrapper div.twitter-feed,
+.team-social-wrapper div.gplus-feed {
+    float: left;
+    width: 330px;
+    display: block;
+}
+
+.team-social-wrapper div.twitter-feed h3.title,
+.team-social-wrapper div.gplus-feed h3.title {
+    padding-left: 15px;
+    padding-top: 10px;
+}
+
+.twidenash ul {
+    margin: 0;
+    padding-left: 15px;
+}
+
+
+.twidenash ul li {
+    list-style-type: none;
+    overflow: auto;
+    padding: 3px;
+    font-size:        0.75em;
+}
+
+.twidenash li .comment {
+    overflow: hidden!important;
+    margin-left: 5px;
+    display: block;
+}
+
+.twidenash li img {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    padding: 0!important;
+    margin-right: 10px;
+}
+
+.twidenash li .nick {
+    font-weight: bold;
+}
+
+.twidenash li .time {
+    font-size: 0.75em;
+    color: #555;
+}
+
+.contact-button {
+    background: transparent url(../images/bg_btn.png) repeat-x top left;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: bold;
+    text-align: center;
+    white-space: nowrap;
+    margin: 0;
+    margin-left: 16px;
+    height: 27px;
+    line-height: 27px;
+    outline: 0;
+    padding: 0 10px;
+    color: white!important;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
+    position: relative;
+    display: inline-block;
+    text-transform: uppercase;
+    top: -4px;
+}
+
+.contact-button:active {
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 /* My Teams style */
-h2.dynamic-width { 
-    display: inline-block; 
-    margin-bottom: 0; 
+h2.dynamic-width {
+    display: inline-block;
+    margin-bottom: 0;
 }
 
-.resources { 
-    font-size: 0.75em; 
-    float: right; 
+.resources {
+    font-size: 0.75em;
+    float: right;
     margin-top: 21px;
 }
 
@@ -566,7 +833,7 @@
 }
 
 .photo a {
-    display: inline-block; 
+    display: inline-block;
     padding: 7px;
 }
 
@@ -575,7 +842,7 @@
 }
 
 .main-content-split {
-    width:450px; 
+    width:450px;
     margin-top: 15px;
 }
 
@@ -632,13 +899,20 @@
 
 /* Team photos feed */
 div#flickr, div#picasa, div#pixie {
-    width:100%;
+    margin-left: 15px;
+    display: block;
 }
 
 div#flickr a.lightbox img {
-    border: 5px solid #b3aaa4;
-    margin-left: 5px;
-    margin-right: 5px;
+    border: 2px solid #333;
+    margin-right: 18px;
+    margin-bottom: 10px;
+    display: inline-block;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    width: 75px;
+    height: 75px;
 }
 
 div#picasa a.lightbox img {
@@ -828,7 +1102,7 @@
 }
 
 ol.comments li div.comment-error{
-    padding: 5px!important; 
+    padding: 5px!important;
     background-color:#ffebe8;
     border:1px solid #dd3c10
 }
@@ -919,7 +1193,6 @@
     -webkit-border-radius: 4px!important;
     -moz-border-radius: 4px!important;
     border-radius: 4px!important;
-    cursor: default;
     font-size: 14px!important;
     text-align: center;
     white-space: nowrap;
@@ -984,7 +1257,7 @@
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
-    border: 1px solid #AEA79F;
+    border: 1px solid #E6E6E6;
     padding: 0;
     background: white;
 }
@@ -996,6 +1269,7 @@
 .pagelet {
     padding: 17px 20px 5px 20px;
     position: relative;
+    overflow: auto;
 }
 
 .event-venue {
@@ -1023,38 +1297,62 @@
 
 /* Pictos */
 
-.pictogram {  
-    font-family: 'EntypoRegular';  
-    font-size: 35px;  
-    position: relative; 
-    color: #1a3d51; 
+.pictogram {
+    font-family: 'EntypoRegular';
+    font-size: 35px!important;
+    position: relative;
+    color: #333;
     margin: 4px 5px 0 0;
-    width: 10px;
-    height: 10px;
-}  
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    top: -10px;
+}
 
 .pictogram-l {
     position: relative;
     top: -3px;
 }
-  
+
+.pictogram-t {
+    line-height: 15px;
+}
+
+
 .team:after { content: ","; }
 .link:after { content: ";"; }
-.calendar:after { content: "P"; }
+.calendar:after { content: "N"; }
 .rss:after { content: "S"; }
 .tags:after { content: "C"; }
 .comments:after { content: "9"; }
-.place:after { content: "0"; }
+.place:after { content: "0"; padding-left: 4px;}
 .personne:after { content: "+"; }
 .announcement:after { content: "K"}
 .geo:after { content: "2"; font-size: 75px;}
+.language:after { content: "O"; padding-left: 2px;}
+.support:after { content: "b"; }
+.wiki:after { content: "2";}
+.ml:after { content: "%";}
+.forums:after { content: "9";}
+.ical:before { content: "P"; }
+
+.action {
+    top: 3px!important;
+    height: 26px!important;
+    line-height: 1px;
+}
+
 
 .share .fb-like {
     position: relative;
     top: -2px;
 }
 
-
 .highlight{
     background: #FFE99A;
+}
+
+
+.copyright {
+   font-size:  0.8em;
 }
\ No newline at end of file

=== removed file 'loco_directory/media/fonts/stylesheet.css'
--- loco_directory/media/fonts/stylesheet.css	2012-09-08 21:45:10 +0000
+++ loco_directory/media/fonts/stylesheet.css	1970-01-01 00:00:00 +0000
@@ -1,16 +0,0 @@
-/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 10, 2012 */
-
-
-
-@font-face {
-    font-family: 'EntypoRegular';
-    src: url('entypo-webfont.eot');
-    src: url('entypo-webfont.eot?#iefix') format('embedded-opentype'),
-         url('entypo-webfont.woff') format('woff'),
-         url('entypo-webfont.ttf') format('truetype'),
-         url('entypo-webfont.svg#EntypoRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
-
-}
-

=== added file 'loco_directory/media/images/search_arrow.png'
Binary files loco_directory/media/images/search_arrow.png	1970-01-01 00:00:00 +0000 and loco_directory/media/images/search_arrow.png	2012-11-12 20:49:20 +0000 differ
=== modified file 'loco_directory/teams/views.py'
--- loco_directory/teams/views.py	2011-10-10 16:06:02 +0000
+++ loco_directory/teams/views.py	2012-11-12 20:49:20 +0000
@@ -27,7 +27,7 @@
 import vobject
 
 def reapprovals(request):
-    teams = filter(lambda a: a.approved and a.expires_date != None, 
+    teams = filter(lambda a: a.approved and a.expires_date != None,
                    Team.objects.all().order_by('expires_date', 'name'))
     today = datetime.date.today()
     half_a_year = datetime.timedelta(days=180)
@@ -43,7 +43,7 @@
         'next_teams': next_teams,
         'later_teams': later_teams,
     }
-    return render_to_response('teams/team_reapprovals.html', 
+    return render_to_response('teams/team_reapprovals.html',
                 context, RequestContext(request))
 
 def as_ical(objects, name):
@@ -61,7 +61,7 @@
     for o in objects:
         o.as_ical(calendar)
     response.write(calendar.serialize())
-    
+
     return response
 
 def team_list(request):
@@ -87,7 +87,7 @@
 def my_teams(request):
     teams = Team.objects.filter(lp_name__in=[group.name for group in request.user.groups.all()])
     context = {
-        'teams': teams, 
+        'teams': teams,
     }
     return render_to_response('teams/my_teams.html', context,
                               RequestContext(request))
@@ -171,13 +171,13 @@
         'is_member' : is_member,
         'is_admin' : is_admin,
     }
-    return render_to_response('teams/team_detail.html', 
+    return render_to_response('teams/team_detail.html',
                                          context, RequestContext(request))
 
 @login_required
 def select_other_team(request, team_slug):
     team_object = get_object_or_404(Team, lp_name=team_slug)
-    
+
     #check if user has needed rights
     is_admin = launchpad.is_admin_or_owner(request.user.username, team_object)
     if not is_admin:
@@ -195,14 +195,14 @@
 def team_merge(request, team_slug, other_team_slug):
     old_team = get_object_or_404(Team, lp_name=team_slug)
     new_team = get_object_or_404(Team, lp_name=other_team_slug)
-    
+
     #check if user has needed rights
     is_admin = launchpad.is_admin_or_owner(request.user.username, old_team) and \
                launchpad.is_admin_or_owner(request.user.username, new_team)
     if not is_admin:
         request.user.message_set.create(message=ugettext('You are not allowed to merge this team with another one.'))
         return redirect(old_team)
-    
+
     msgs = merge_teams(old_team, new_team)
     for msg in msgs:
         request.user.message_set.create(message=msg)
@@ -218,7 +218,7 @@
 def team_edit(request, team_slug):
     #get team
     team_object = get_object_or_404(Team, lp_name=team_slug)
-    
+
     #check if user has needed rights
     is_on_lc = launchpad.is_user_on_loco_council(request.user)
     is_contact = launchpad.is_admin_or_owner(request.user.username, team_object)
@@ -233,20 +233,20 @@
             form = forms.UpdateTeamForm(data=request.POST, instance=team_object)
         if form.is_valid():
             form.save()
-            request.user.message_set.create(message=ugettext('Team details updated'))
+            request.user.message_set.create(message=ugettext('Thanks, your team\'s details have been saved.'))
             return redirect( team_object )
         else:
-            request.user.message_set.create(message=ugettext('Team details could not be saved.'))
+            request.user.message_set.create(message=ugettext('Recent changes to your team\'s details could not be saved.'))
     else:
         if is_on_lc:
             form = forms.LoCoCouncilForm(instance=team_object)
         else:
             form = forms.UpdateTeamForm(instance=team_object)
-    
-    return render_to_response('teams/team_update.html', 
-                    {'form': form, 
-                     'team':team_object, 
-                     'user':request.user, 
+
+    return render_to_response('teams/team_update.html',
+                    {'form': form,
+                     'team':team_object,
+                     'user':request.user,
                     }, RequestContext(request))
 
 def xml_team_data(request):

=== modified file 'loco_directory/templates/teams/team_detail.html'
--- loco_directory/templates/teams/team_detail.html	2012-09-25 21:01:12 +0000
+++ loco_directory/templates/teams/team_detail.html	2012-11-12 20:49:20 +0000
@@ -8,17 +8,16 @@
 {% endblock %}
 
 {% block sub_nav_links %}
-            <li><a class="sub-nav-item" href="{% url team-list %}" title="{% trans "Back to Teams List" %}">{% trans "Back to Teams List" %}</a></li>
-            {% if is_member %}{% else %}<li><a class="sub-nav-item" href="https://launchpad.net/~{{ team.lp_name }}/+join">{% trans "Join This Team!" %}</a></li>{% endif %}
-            {% if is_admin %}<li><a class="sub-nav-item" href="{% url team-edit team.lp_name %}" title="{% trans "Edit Details" %}">{% trans "Edit Details" %}</a></li>{% endif %}
-            {% if is_admin and not team.active %}<li><a class="sub-nav-item" href="{% url select-other-team team.lp_name %}" title="{% trans "Merge with another team" %}">{% trans "Merge team" %}</a></li>{% endif %}
-            {% if is_member %}<li><a class="sub-nav-item" href="{% url team-event-new team.lp_name %}" title="{% trans "Add New Event" %}">{% trans "Add New Event" %}</a></li>{% endif %}
-            {% if is_member %}<li><a class="sub-nav-item" href="{% url team-meeting-new team.lp_name %}" title="{% trans "Add New Meeting" %}">{% trans "Add New Meeting" %}</a></li>{% endif %}
+    <li><a class="sub-nav-item" href="{% url team-list %}" title="{% trans "Back to Teams List" %}">{% trans "Back to Teams List" %}</a></li>
+    {% if is_member %}{% else %}<li><a class="sub-nav-item" href="https://launchpad.net/~{{ team.lp_name }}/+join">{% trans "Join This Team!" %}</a></li>{% endif %}
+    {% if is_admin %}<li><a class="sub-nav-item" href="{% url team-edit team.lp_name %}" title="{% trans "Edit Details" %}">{% trans "Edit Details" %}</a></li>{% endif %}
+    {% if is_admin and not team.active %}<li><a class="sub-nav-item" href="{% url select-other-team team.lp_name %}" title="{% trans "Merge with another team" %}">{% trans "Merge team" %}</a></li>{% endif %}
+    {% if is_member %}<li><a class="sub-nav-item" href="{% url team-event-new team.lp_name %}" title="{% trans "Add New Event" %}">{% trans "Add New Event" %}</a></li>{% endif %}
+    {% if is_member %}<li><a class="sub-nav-item" href="{% url team-meeting-new team.lp_name %}" title="{% trans "Add New Meeting" %}">{% trans "Add New Meeting" %}</a></li>{% endif %}
 {% endblock %}
 
 
 {% block extrahead %}{{ block.super }}
-<script type="text/javascript" src="{{MEDIA_URL}}jquery/jquery.js"></script>
 {% if team.flickr_id or team.picasa_id or team.pixie_id %}
 <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.lightbox-0.5.min.js"></script>
 <link rel="stylesheet" href="{{MEDIA_URL}}css/jquery.lightbox-0.5.css" type="text/css" media="screen" />
@@ -36,12 +35,12 @@
 <script type="text/javascript" src="{{MEDIA_URL}}js/jquery-pixie.js"></script>
 {% endif %}
 
-<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}/css/twidenash.css" />
+<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/twidenash.css" />
 <script type="text/javascript" src="{{MEDIA_URL}}js/twidenash/jquery-twidenash.js"></script>
 
-<script type="text/javascript"> 
+<script type="text/javascript">
 $(function() {
-    var perPage = '16';
+    var perPage = '14';
     $('.twidenash').twidenash({
         sources: [
             'http://search.twitter.com/',
@@ -49,7 +48,7 @@
     });
 
     {% if team.flickr_id %}
-        $('#flickr').flickr({ key: "{{ flickr_api_key }}", id: "{{ team.flickr_id }}", amount: 6 });
+        $('#flickr').flickr({ key: "{{ flickr_api_key }}", id: "{{ team.flickr_id }}", amount: perPage });
     {% endif %}
 
     {% if team.picasa_id %}
@@ -75,144 +74,199 @@
 
 {% block content %}
 <div class="row">
-    <section class="span8">
-    <h2><a href="https://launchpad.net/~{{ team.lp_name }}">{{ team.name }}</a></h2>
-    <img id="locobranding" src="{{ team.mugshot_url }}" alt="" title="{{ team.name }}" />
-    <table>
-        <tr>
-            <th class="form-item-label" scope="row">{% trans "Location:" %}</th>
-            <td class="form-item-value">
-                {% if team.countries.all %}
-                    {% for country in team.countries.all %}{% if not forloop.first %}, {% endif %}{{ country.name }}{% endfor %}{% if team.spr %}, {% trans team.spr %}{% endif %}{% if team.city %}, {% trans team.city %}{% endif %}
-                {% else %}
-		            {% trans "None Specified" %}
-                {% endif %}
-            </td>
-        </tr>
-        <tr>
-            <th class="form-item-label" scope="row">{% trans "Languages:" %}</th>
-            <td class="form-item-value">
-                {% if team.languages.all %}
-                    {% for language in team.languages.all %}{% if not forloop.first %}, {% endif %}{{ language.name }}{% endfor %}
-                {% else %}
-                    {% trans "None Specified" %}
-                {% endif %}
-            </td>
-        </tr>
-        {% if team.approved_date %}
-            <tr>
-                <th class="form-item-label" scope="row">{% trans "Approval Date:" %}</th>
-                <td class="form-item-value">{{ team.approved_date }}</td>
-            </tr>
-        {% endif %}
-        {% if team.approved %}
-            <tr>
-                <th class="form-item-label" scope="row">{% trans "Reapproval Date:" %}</th>
-                <td class="form-item-value">{{ team.expires_date }}</td>
-            </tr>
-        {% endif %}
-        <tr>
-            <th class="form-item-label" scope="row">{% trans "Local Support:" %}</th>
-            <td class="form-item-value">{% if team.provides_support %}Yes{% else %}No{% endif %}</td>
-        </tr>
-        <tr>
-            <th class="form-item-label" scope="row">{% trans "Team Admin(s):" %}</th>
-            <td class="form-item-value">
-                {% for admin in team.admin_profiles.all %}
-                    {% ifequal team.owner admin.user.username %}
-                        <strong><a href="https://launchpad.net/~{{ admin.user.username }}">{{ admin.realname }}</a></strong>
-                    {% else %}
-                        <a href="https://launchpad.net/~{{ admin.user.username }}">{{ admin.realname }}</a>{% endifequal %}{% if not forloop.last %},{% endif %}
-                {% endfor %}
-            </td>
-        </tr>
-        <tr>
-            <th class="form-item-label" scope="row">{% trans "Team Contact(s):" %}</th>
-            <td class="form-item-value">
+    <section class="span-9">
+        <div class="box_content">
+            <div class="pagelet">
+                <div id="locobranding">
+                    <img src="{{ team.mugshot_url }}" alt="{{ team.name }}" title="{{ team.name }}" />
+                </div>
+                <div id="loco-name">
+                    <h2>{{ team.name }} <a class="contact-button" href="https://launchpad.net/~{{ team.lp_name }}/+contactuser/" title="{% trans "Contact this team" %}" target="_blank">{% trans "Contact this team" %}</a></h2>
+                    <div style="display:block;">
+                        <div id="loco-location">
+                            <span title="{% trans "Location" %}" class="pictogram place"></span>
+                            <span class="value ellipsis small-ellipsis">
+                            {% if team.countries.all %}
+                                {% for country in team.countries.all %}
+                                    {% if not forloop.first %}, {% endif %}{{ country.name }}
+                                {% endfor %}
+                                {% if team.spr %}, {% trans team.spr %}{% endif %}{% if team.city %}, {% trans team.city %}
+                                {% endif %}
+                            {% else %}
+                                {% trans "None Specified" %}
+                            {% endif %}
+                            </span>
+                        </div>
+
+                        <div id="loco-language">
+                            <span title="{% trans "Languages" %}" class="pictogram language"></span>
+                            <span class="value ellipsis">
+                            {% if team.languages.all %}
+                                {% for language in team.languages.all %}
+                                    {% if not forloop.first %}, {% endif %}{{ language.name }}
+                                {% endfor %}
+                            {% else %}
+                                {% trans "None Specified" %}
+                            {% endif %}
+                            </span>
+                        </div>
+
+                        <div id="loco-support">
+                            <span title="{% trans "Local Support" %}" class="pictogram support"></span>
+                            <span class="value ellipsis medium-ellipsis">
+                            {% if team.provides_support %}
+                                {% trans "This LoCo provides support :)" %}
+                            {% else %}
+                                {% trans "This LoCo doesn't provide support :(" %}
+                            {% endif %}
+                            </span>
+                        </div>
+                    </div>
+
+                    <div style="display:block;">
+                        <div id="loco-location">
+                            <span title="{% trans "Mailing List" %}" class="pictogram ml"></span>
+                            <span class="value ellipsis small-ellipsis">
+                                {% if team.web_url %}
+                                <a href="{{ team.web_url }}" title="{% trans "Website" %}" target="_blank">
+                                    {% trans "Website" %}
+                                </a>
+                                {% endif %}
+                                {% if team.web_url and team.wiki_url %} / {% endif %}
+                                {% if team.wiki_url %}
+                                <a href="{{ team.wiki_url }}" title="{% trans "Wiki" %}" target="_blank">
+                                    {% trans "Wiki" %}
+                                </a>
+                                {% endif %}
+                            </span>
+                        </div>
+
+
+                        <div id="loco-support">
+                            <span class="pictogram forums" title="{% trans "Local Support" %}"></span>
+                            <span class="value ellipsis">
+                                {% if team.ml_url %}
+                                <a href="{{ team.ml_url }}" title="{% trans "Mailing List" %}" target="_blank">
+                                    {% trans "Mailing List" %}
+                                </a>
+                                {% endif %} /
+                                {% if team.forum_url  %}
+                                <a href="{{ team.forum_url }}" title="{% trans "Forums" %}" target="_blank">
+                                    {% trans "Forums" %}
+                                </a>
+                                {% endif %} /
+                                {% if team.irc_chan %}
+                                <a href="http://webchat.freenode.net/?channels={{ team.irc_chan }}&prompt=1&uio=OT10cnVlJjEwPXRydWUmMTE9MjM218&nick={% if user.is_authenticated %}{{ user.username|irc }}{% else %}locodir-user{% endif %}" title="{% trans "IRC" %}" target="_blank">
+                                    {% trans "IRC" %}
+                                </a>
+                                {% endif %}
+                            </span>
+                        </div>
+
+                        <div id="loco-support">
+                            <span title="{% trans "Reapproval Date:" %}" class="pictogram calendar"></span>
+                            <span class="value ellipsis medium-ellipsis">
+                                {% if team.approved %}
+                                    {% trans "Reapproval Date:" %} {{ team.expires_date }}
+                                {% endif %}
+                            </span>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <div class="events-meetings-wrapper">
+                <div style="overflow: auto;">
+                    <h3 class="title">{% trans "Upcoming Events" %}</h3>
+                    <div class="team-actions">
+                        <span>
+                            <a href="{% url team-event-list team.lp_name %}" title="{% trans "All Events" %}">{% trans "All Events" %}</a>
+                        </span>
+                        <span>
+                            <a href="{% url team-meeting-list team.lp_name %}" title="{% trans "All Meetings" %}">{% trans "All Meetings" %}</a>
+                        </span>
+                        <span>
+                            <a href="{% url team-event-history team.lp_name %}" title="{% trans "Past Events" %}">{% trans "Past Events" %}</a>
+                        </span>
+                        <span>
+                            <a class="pictogram rss action" href="{% url team-events-rss team.lp_name %}" title="{% trans "RSS Feed" %}"></a>
+                        </span>
+                        <span>
+                            <a class="pictogram ical action" href="{% url team-calendar team.lp_name %}" title="{% trans "iCal Feed" %}"></a>
+                        </span>
+                    </div>
+                </div>
+                {% if team.next_5_events_and_meetings %}
+                    {% for team_event in team.next_5_events_and_meetings %}
+                    <a href="{% url team-event-detail team_event.first_team.lp_name team_event.id %}" title="{% if team_event.venue %}{% else %}{{team_event.date_begin|date:"M d"}}{% endif %}" class="event-meetings">
+                        <span class="title">{{ team_event.name }}</span>
+                        <small>{{ team_event.local_date_begin|date:"l, d N Y" }} {% trans "at " %}{{ team_event.local_date_begin|date:"H:i T" }}</small>
+                        <p>{{ team_event.description }}</p>
+                    </a>
+                    {% endfor %}
+                {% else %}
+                    <div class="no-results">
+                    {% trans "There are currently no upcoming events :(" %}
+                    </div>
+                {% endif %}
+            </div>
+
+            {% if team.flickr_id or team.picasa_id or team.pixie_id %}
+            <div class="team-photos-wrapper">
+                {% with team.name as team_name %}
+                    <h3 class="title">{% blocktrans %}Photos from {{ team_name }}{% endblocktrans %}</h3>
+                {% endwith %}
+                <div id="flickr"> </div>
+                <div id="picasa"> </div>
+                <div id="pixie"> </div>
+            </div>
+            {% endif %}
+
+            <div class="team-social-wrapper">
+                {% if team.microbloghashtag %}
+                <div class="twitter-feed">
+                    <h3 class="title">{% trans "Microblogging" %} #{{ team.microbloghashtag }}</h3>
+                    <div class="twidenash" id="{{ team.microbloghashtag }}"></div>
+                </div>
+                {% endif %}
+                <div class="gplus-feed">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="span-3 box_content last">
+        <div class="sidebar-inner">
+            <h3 class="title">{% trans "Team Admin(s)" %}</h3>
+            <div class="team-admins">
+            {% for admin in team.admin_profiles.all %}
+                {% ifequal team.owner admin.user.username %}
+                    <a href="https://launchpad.net/~{{ admin.user.username }}">
+                        <img alt="" class="photo fn" src="{% if admin.mugshot %}{{ admin.mugshot }}{% else %}{{MEDIA_URL}}img/default-mugshot.png{% endif %}" class="mugshot">
+                        <p>{{ admin.realname }}</p>
+                    </a>
+                {% else %}
+                    <a href="https://launchpad.net/~{{ admin.user.username }}">
+                        <img alt="{{ admin.realname }}" src="{% if admin.mugshot %}{{ admin.mugshot }}{% else %}{{MEDIA_URL}}img/default-mugshot.png{% endif %}" class="mugshot" height="50" width="50">
+                        <p>{{ admin.realname }}</p>
+                    </a>
+                {% endifequal %}
+            {% endfor %}
+            </div>
+            <h3 class="title">{% trans "Team Contact(s)" %}</h3>
+            <div class="team-admins">
                 {% if team.contact_profiles.all %}
                     {% for contact in team.contact_profiles.all %}
-				        <a href="https://launchpad.net/~{{ contact.user.username }}">{{ contact.realname }}</a>{% if not forloop.last %},{% endif %}
+                        <a href="https://launchpad.net/~{{ contact.user.username }}">
+                        <img alt="{{ contact.realname }}" src="{% if contact.mugshot %}{{ contact.mugshot }}{% else %}{{MEDIA_URL}}img/default-mugshot.png{% endif %}" class="mugshot" height="50" width="50">
+                        <p>{{ contact.realname }}</p>
+                    </a>
                     {% endfor %}
                 {% else %}
                     <p>{% trans "No LoCo Team contacts are set." %}</p>
                 {% endif %}
-            </td>
-        </tr>
-        <tr>
-            <th class="form-item-label" scope="row">{% trans "Resources:" %}</th>
-            <td class="form-item-value">
-                {% if team.wiki_url %}
-                    <a href="{{ team.wiki_url }}"><img class="resource" src="/media/images/team/wiki.png" alt="{% trans "Team Wiki" %}" title="{% trans "Team Wiki" %}" /></a>
-                {% endif %}
-                {% if team.irc_chan %}
-                    <img class="resource" style="cursor:pointer;" src="/media/images/team/irc.png" onclick="$('#webchat').show('fast', function() {$(window).scrollTop($('#webchat').position().top);} );" alt="{% trans "IRC Channel" %} ({{ team.irc_chan }})" title="{% trans "IRC Channel" %} ({{ team.irc_chan }})" />
-                {% endif %}
-                {% if team.ml_url %}
-                    <a href="{{ team.ml_url }}"><img class="resource" src="/media/images/team/list.png" alt="{% trans "Team Mailing List" %}" title="{% trans "Team Mailing List" %}" /></a>
-                {% endif %}
-                {% if team.forum_url %}
-                    <a href="{{ team.forum_url }}"><img class="resource" src="/media/images/team/forum.png" alt="{% trans "Team Forums" %}" title="{% trans "Team Forums" %}" /></a>
-                {% endif %}
-                {% if team.web_url %}
-                    <a href="{{ team.web_url }}"><img class="resource" src="/media/images/team/website.png" alt="{% trans "Team Website" %}" title="{% trans "Team Website" %}" /></a>
-                {% endif %}
-            </td>
-        </tr>
-        <tr>
-            <th class="form-item-label" scope="row">{% trans "Upcoming Events:" %}</th>
-            <td class="form-item-value">
-                <ul class="team-event-nav">
-                    <li style="font-size:0.98em"><a href="{% url team-event-list team.lp_name %}">{% trans "All Events" %}</a></li>
-                    <li style="font-size:0.98em"><a href="{% url team-meeting-list team.lp_name %}">{% trans "All Meetings" %}</a></li>
-                    <li style="font-size:0.98em"><a href="{% url team-event-history team.lp_name %}">{% trans "Past Events" %}</a></li>
-                    <li style="font-size:0.98em"><a href="{% url team-events-rss team.lp_name %}">{% trans "RSS Feed" %}</a></li>
-                    <li style="font-size:0.98em"><a href="{% url team-calendar team.lp_name %}">{% trans "iCal Feed" %}</a></li>
-                </ul>
-                {% if team.next_5_events_and_meetings %}
-                    <ul>
-                        {% for team_event in team.next_5_events_and_meetings %}
-                            {% include team_event.template %}
-                        {% endfor %}
-                    </ul>   
-                {% else %}
-                    {% trans "None Specified" %}
-		        {% endif %}
-                </td>
-          </tr>
-    </table>
-</section>
-</div>
-
-{% if team.microbloghashtag %}
-<article class="minor-content alone">
-    <h2>{% trans "Microblogging" %} #{{team.microbloghashtag}}</h2>
-    <div class="twidenash" id="{{ team.microbloghashtag }}"></div>
-</article>
-{% endif %}
-
-<hr class="divide" />
-
-{% if team.irc_chan %}
-    <div id="webchat">
-        {% if user.is_authenticated %}
-            <iframe src="http://webchat.freenode.net/?channels={{ team.irc_chan }}&prompt=1&uio=OT10cnVlJjEwPXRydWUmMTE9MjM218&nick={{ user.username|irc }}" width="900" height="400"></iframe>
-        {% else %}
-            <iframe src="http://webchat.freenode.net/?channels={{ team.irc_chan }}&prompt=1&uio=OT10cnVlJjEwPXRydWUmMTE9MjM218&nick=locodir-user" width="900" height="400"></iframe>
-        {% endif %}
-    </div>
-{% endif %}
-
-{% if team.flickr_id or team.picasa_id or team.pixie_id %} 
-<div class="row">
-    <section class="span-12">
-    {% with team.name as team_name %}
-    <h2>{% blocktrans %}Photos from {{ team_name }}{% endblocktrans %}</h2>
-    {% endwith %}
-    <div id="flickr"> </div>
-    <div id="picasa"> </div>
-    <div id="pixie"> </div>
+            </div>
+        </div>
     </section>
 </div>
-{% endif %}
 
 {% endblock %}