Redesigned users list page.

static/cranefly/css/cranefly.css

@@ -848,13 +848,14 @@ a.label:hover,a.label:focus,a.badge:hover,a.badge:focus{color:#ffffff;text-decor
 .show{display:block;}
 .invisible{visibility:hidden;}
 .affix{position:fixed;}
-@media (min-width:1200px){.row{margin-left:-30px;*zoom:1;}.row:before,.row:after{display:table;content:"";line-height:0;} .row:after{clear:both;} [class*="span"]{float:left;min-height:1px;margin-left:30px;} .container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px;} .span12{width:1170px;} .span11{width:1070px;} .span10{width:970px;} .span9{width:870px;} .span8{width:770px;} .span7{width:670px;} .span6{width:570px;} .span5{width:470px;} .span4{width:370px;} .span3{width:270px;} .span2{width:170px;} .span1{width:70px;} .offset12{margin-left:1230px;} .offset11{margin-left:1130px;} .offset10{margin-left:1030px;} .offset9{margin-left:930px;} .offset8{margin-left:830px;} .offset7{margin-left:730px;} .offset6{margin-left:630px;} .offset5{margin-left:530px;} .offset4{margin-left:430px;} .offset3{margin-left:330px;} .offset2{margin-left:230px;} .offset1{margin-left:130px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";line-height:0;} .row-fluid:after{clear:both;} .row-fluid [class*="span"]{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;} .row-fluid [class*="span"]:first-child{margin-left:0;} .row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.564102564102564%;} .row-fluid .span12{width:100%;*width:99.94680851063829%;} .row-fluid .span11{width:91.45299145299145%;*width:91.39979996362975%;} .row-fluid .span10{width:82.90598290598291%;*width:82.8527914166212%;} .row-fluid .span9{width:74.35897435897436%;*width:74.30578286961266%;} .row-fluid .span8{width:65.81196581196582%;*width:65.75877432260411%;} .row-fluid .span7{width:57.26495726495726%;*width:57.21176577559556%;} .row-fluid .span6{width:48.717948717948715%;*width:48.664757228587014%;} .row-fluid .span5{width:40.17094017094017%;*width:40.11774868157847%;} .row-fluid .span4{width:31.623931623931625%;*width:31.570740134569924%;} .row-fluid .span3{width:23.076923076923077%;*width:23.023731587561375%;} .row-fluid .span2{width:14.52991452991453%;*width:14.476723040552828%;} .row-fluid .span1{width:5.982905982905983%;*width:5.929714493544281%;} .row-fluid .offset12{margin-left:105.12820512820512%;*margin-left:105.02182214948171%;} .row-fluid .offset12:first-child{margin-left:102.56410256410257%;*margin-left:102.45771958537915%;} .row-fluid .offset11{margin-left:96.58119658119658%;*margin-left:96.47481360247316%;} .row-fluid .offset11:first-child{margin-left:94.01709401709402%;*margin-left:93.91071103837061%;} .row-fluid .offset10{margin-left:88.03418803418803%;*margin-left:87.92780505546462%;} .row-fluid .offset10:first-child{margin-left:85.47008547008548%;*margin-left:85.36370249136206%;} .row-fluid .offset9{margin-left:79.48717948717949%;*margin-left:79.38079650845607%;} .row-fluid .offset9:first-child{margin-left:76.92307692307693%;*margin-left:76.81669394435352%;} .row-fluid .offset8{margin-left:70.94017094017094%;*margin-left:70.83378796144753%;} .row-fluid .offset8:first-child{margin-left:68.37606837606839%;*margin-left:68.26968539734497%;} .row-fluid .offset7{margin-left:62.393162393162385%;*margin-left:62.28677941443899%;} .row-fluid .offset7:first-child{margin-left:59.82905982905982%;*margin-left:59.72267685033642%;} .row-fluid .offset6{margin-left:53.84615384615384%;*margin-left:53.739770867430444%;} .row-fluid .offset6:first-child{margin-left:51.28205128205128%;*margin-left:51.175668303327875%;} .row-fluid .offset5{margin-left:45.299145299145295%;*margin-left:45.1927623204219%;} .row-fluid .offset5:first-child{margin-left:42.73504273504273%;*margin-left:42.62865975631933%;} .row-fluid .offset4{margin-left:36.75213675213675%;*margin-left:36.645753773413354%;} .row-fluid .offset4:first-child{margin-left:34.18803418803419%;*margin-left:34.081651209310785%;} .row-fluid .offset3{margin-left:28.205128205128204%;*margin-left:28.0987452264048%;} .row-fluid .offset3:first-child{margin-left:25.641025641025642%;*margin-left:25.53464266230224%;} .row-fluid .offset2{margin-left:19.65811965811966%;*margin-left:19.551736679396257%;} .row-fluid .offset2:first-child{margin-left:17.094017094017094%;*margin-left:16.98763411529369%;} .row-fluid .offset1{margin-left:11.11111111111111%;*margin-left:11.004728132387708%;} .row-fluid .offset1:first-child{margin-left:8.547008547008547%;*margin-left:8.440625568285142%;} input,textarea,.uneditable-input{margin-left:0;} .controls-row [class*="span"]+[class*="span"]{margin-left:30px;} input.span12,textarea.span12,.uneditable-input.span12{width:1156px;} input.span11,textarea.span11,.uneditable-input.span11{width:1056px;} input.span10,textarea.span10,.uneditable-input.span10{width:956px;} input.span9,textarea.span9,.uneditable-input.span9{width:856px;} input.span8,textarea.span8,.uneditable-input.span8{width:756px;} input.span7,textarea.span7,.uneditable-input.span7{width:656px;} input.span6,textarea.span6,.uneditable-input.span6{width:556px;} input.span5,textarea.span5,.uneditable-input.span5{width:456px;} input.span4,textarea.span4,.uneditable-input.span4{width:356px;} input.span3,textarea.span3,.uneditable-input.span3{width:256px;} input.span2,textarea.span2,.uneditable-input.span2{width:156px;} input.span1,textarea.span1,.uneditable-input.span1{width:56px;} .thumbnails{margin-left:-30px;} .thumbnails>li{margin-left:30px;} .row-fluid .thumbnails{margin-left:0;}}.header-primary{background-color:#e7e7e7;border-bottom:1px solid #d7d7d7;margin:0px;margin-top:0px;padding-top:10px;}.header-primary .breadcrumb{background:none;border:none;margin:0px;margin-bottom:-11.9px;padding:0px;}.header-primary .breadcrumb li{font-size:11.9px;font-weight:bold;text-shadow:none;}.header-primary .breadcrumb li a:link,.header-primary .breadcrumb li a:visited{color:#999999;}
+@media (min-width:1200px){.row{margin-left:-30px;*zoom:1;}.row:before,.row:after{display:table;content:"";line-height:0;} .row:after{clear:both;} [class*="span"]{float:left;min-height:1px;margin-left:30px;} .container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px;} .span12{width:1170px;} .span11{width:1070px;} .span10{width:970px;} .span9{width:870px;} .span8{width:770px;} .span7{width:670px;} .span6{width:570px;} .span5{width:470px;} .span4{width:370px;} .span3{width:270px;} .span2{width:170px;} .span1{width:70px;} .offset12{margin-left:1230px;} .offset11{margin-left:1130px;} .offset10{margin-left:1030px;} .offset9{margin-left:930px;} .offset8{margin-left:830px;} .offset7{margin-left:730px;} .offset6{margin-left:630px;} .offset5{margin-left:530px;} .offset4{margin-left:430px;} .offset3{margin-left:330px;} .offset2{margin-left:230px;} .offset1{margin-left:130px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";line-height:0;} .row-fluid:after{clear:both;} .row-fluid [class*="span"]{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;} .row-fluid [class*="span"]:first-child{margin-left:0;} .row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.564102564102564%;} .row-fluid .span12{width:100%;*width:99.94680851063829%;} .row-fluid .span11{width:91.45299145299145%;*width:91.39979996362975%;} .row-fluid .span10{width:82.90598290598291%;*width:82.8527914166212%;} .row-fluid .span9{width:74.35897435897436%;*width:74.30578286961266%;} .row-fluid .span8{width:65.81196581196582%;*width:65.75877432260411%;} .row-fluid .span7{width:57.26495726495726%;*width:57.21176577559556%;} .row-fluid .span6{width:48.717948717948715%;*width:48.664757228587014%;} .row-fluid .span5{width:40.17094017094017%;*width:40.11774868157847%;} .row-fluid .span4{width:31.623931623931625%;*width:31.570740134569924%;} .row-fluid .span3{width:23.076923076923077%;*width:23.023731587561375%;} .row-fluid .span2{width:14.52991452991453%;*width:14.476723040552828%;} .row-fluid .span1{width:5.982905982905983%;*width:5.929714493544281%;} .row-fluid .offset12{margin-left:105.12820512820512%;*margin-left:105.02182214948171%;} .row-fluid .offset12:first-child{margin-left:102.56410256410257%;*margin-left:102.45771958537915%;} .row-fluid .offset11{margin-left:96.58119658119658%;*margin-left:96.47481360247316%;} .row-fluid .offset11:first-child{margin-left:94.01709401709402%;*margin-left:93.91071103837061%;} .row-fluid .offset10{margin-left:88.03418803418803%;*margin-left:87.92780505546462%;} .row-fluid .offset10:first-child{margin-left:85.47008547008548%;*margin-left:85.36370249136206%;} .row-fluid .offset9{margin-left:79.48717948717949%;*margin-left:79.38079650845607%;} .row-fluid .offset9:first-child{margin-left:76.92307692307693%;*margin-left:76.81669394435352%;} .row-fluid .offset8{margin-left:70.94017094017094%;*margin-left:70.83378796144753%;} .row-fluid .offset8:first-child{margin-left:68.37606837606839%;*margin-left:68.26968539734497%;} .row-fluid .offset7{margin-left:62.393162393162385%;*margin-left:62.28677941443899%;} .row-fluid .offset7:first-child{margin-left:59.82905982905982%;*margin-left:59.72267685033642%;} .row-fluid .offset6{margin-left:53.84615384615384%;*margin-left:53.739770867430444%;} .row-fluid .offset6:first-child{margin-left:51.28205128205128%;*margin-left:51.175668303327875%;} .row-fluid .offset5{margin-left:45.299145299145295%;*margin-left:45.1927623204219%;} .row-fluid .offset5:first-child{margin-left:42.73504273504273%;*margin-left:42.62865975631933%;} .row-fluid .offset4{margin-left:36.75213675213675%;*margin-left:36.645753773413354%;} .row-fluid .offset4:first-child{margin-left:34.18803418803419%;*margin-left:34.081651209310785%;} .row-fluid .offset3{margin-left:28.205128205128204%;*margin-left:28.0987452264048%;} .row-fluid .offset3:first-child{margin-left:25.641025641025642%;*margin-left:25.53464266230224%;} .row-fluid .offset2{margin-left:19.65811965811966%;*margin-left:19.551736679396257%;} .row-fluid .offset2:first-child{margin-left:17.094017094017094%;*margin-left:16.98763411529369%;} .row-fluid .offset1{margin-left:11.11111111111111%;*margin-left:11.004728132387708%;} .row-fluid .offset1:first-child{margin-left:8.547008547008547%;*margin-left:8.440625568285142%;} input,textarea,.uneditable-input{margin-left:0;} .controls-row [class*="span"]+[class*="span"]{margin-left:30px;} input.span12,textarea.span12,.uneditable-input.span12{width:1156px;} input.span11,textarea.span11,.uneditable-input.span11{width:1056px;} input.span10,textarea.span10,.uneditable-input.span10{width:956px;} input.span9,textarea.span9,.uneditable-input.span9{width:856px;} input.span8,textarea.span8,.uneditable-input.span8{width:756px;} input.span7,textarea.span7,.uneditable-input.span7{width:656px;} input.span6,textarea.span6,.uneditable-input.span6{width:556px;} input.span5,textarea.span5,.uneditable-input.span5{width:456px;} input.span4,textarea.span4,.uneditable-input.span4{width:356px;} input.span3,textarea.span3,.uneditable-input.span3{width:256px;} input.span2,textarea.span2,.uneditable-input.span2{width:156px;} input.span1,textarea.span1,.uneditable-input.span1{width:56px;} .thumbnails{margin-left:-30px;} .thumbnails>li{margin-left:30px;} .row-fluid .thumbnails{margin-left:0;}}.header-primary{background-color:#fbfbfb;border-bottom:1px solid #e7e7e7;margin:0px;margin-top:0px;padding-top:10px;}.header-primary .breadcrumb{background:none;border:none;margin:0px;margin-bottom:-11.9px;padding:0px;}.header-primary .breadcrumb li{font-size:11.9px;font-weight:bold;text-shadow:none;}.header-primary .breadcrumb li a:link,.header-primary .breadcrumb li a:visited{color:#999999;}
 .header-primary .breadcrumb li a:hover,.header-primary .breadcrumb li a:active{color:#333333;}
 .header-primary .breadcrumb li .divider{padding-left:0px;padding-right:0px;}.header-primary .breadcrumb li .divider i{opacity:0.2;filter:alpha(opacity=20);position:relative;bottom:1px;}
 .header-primary h1{color:#555555;font-size:35px;font-weight:normal;}
-.header-primary .header-tabs{border-bottom:0px;margin:0px;margin-top:-10px;position:relative;top:9px;}.header-primary .header-tabs li a:link,.header-primary .header-tabs li a:visited{border:none;border-radius:0px;margin-bottom:4px;padding:6.666666666666667px 10px;color:#888888;font-weight:bold;}
-.header-primary .header-tabs li a:hover,.header-primary .header-tabs li a:active{background:none;border-bottom:4px solid #555555;margin-bottom:0px;color:#555555;}
+.header-primary .header-tabs{border-bottom:0px;margin:0px;margin-top:-10px;position:relative;top:9px;}.header-primary .header-tabs li a:link,.header-primary .header-tabs li a:visited{background:none;border:none;border-radius:0px;margin-bottom:4px;padding:6.666666666666667px 10px;color:#888888;font-weight:bold;}
+.header-primary .header-tabs li a:hover,.header-primary .header-tabs li a:active,.header-primary .header-tabs li a a:focus{background:none;border-bottom:4px solid #555555;margin-bottom:0px;color:#555555;}
 .header-primary .header-tabs li.active a:link,.header-primary .header-tabs li.active a:visited,.header-primary .header-tabs li.active a:hover,.header-primary .header-tabs li.active a:active{background:none;border-bottom:4px solid #cf402e;margin-bottom:0px;color:#333333;}
+.header-primary .header-tabs li .form-inline{margin:0px;margin-bottom:7px;}.header-primary .header-tabs li .form-inline .btn-icon{padding-left:7px;padding-right:7px;}
 html,body{height:100%;}
 #wrap{min-height:100%;height:auto !important;height:100%;margin:0 auto -100px;}#wrap .container-primary{padding-top:20px;padding-bottom:120px;}#wrap .container-primary .page-description{margin-bottom:20px;}
 footer{background-color:#eeeeee;border-top:1px solid #dadada;height:80px;padding:11px 19px;}footer hr{border-bottom:1px solid #dadada;margin:10px 0px;}
@@ -1003,6 +1004,9 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .category-forums-list table .forum-main .forum-details{float:right;color:#999999;font-weight:bold;}.category-forums-list table .forum-main .forum-details .label{position:relative;bottom:1px;}
 .category-forums-list table .forum-main .forum-description{clear:both;margin:0px;padding:0px;color:#8c8c8c;font-size:11.9px;}
 .category-forums-list.category-forums-important{border:1px solid #902d20;-webkit-box-shadow:0px 0px 0px 3px #cf402e;-moz-box-shadow:0px 0px 0px 3px #cf402e;box-shadow:0px 0px 0px 3px #cf402e;}
+.profiles-list .user-cell{overflow:auto;}.profiles-list .user-cell .user-avatar{float:left;}.profiles-list .user-cell .user-avatar img{border-radius:3px;width:42px;height:42px;}
+.profiles-list .user-cell .user-details{margin:0px;margin-left:56px;}.profiles-list .user-cell .user-details a:link,.profiles-list .user-cell .user-details a:active,.profiles-list .user-cell .user-details a:visited,.profiles-list .user-cell .user-details a:hover{display:block;margin-top:3px;color:#333333;font-size:19.599999999999998px;font-weight:bold;}
+.profiles-list .user-cell .user-details .user-info{display:block;color:#999999;font-size:10.5px;}
 .index-rank-team ul li{background-color:#cf402e;border-color:#ae3627;}.index-rank-team ul li a:link,.index-rank-team ul li a:active,.index-rank-team ul li a:visited,.index-rank-team ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #3d130e;}
 .index-rank-team ul li .muted{color:#672017;}
 .index-rank-mvp ul li{background-color:#1a93c5;border-color:#037fb3;}.index-rank-mvp ul li a:link,.index-rank-mvp ul li a:active,.index-rank-mvp ul li a:visited,.index-rank-mvp ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #011f2c;}

static/cranefly/css/cranefly.less

@@ -85,6 +85,7 @@
 @import "cranefly/alerts.less";
 @import "cranefly/newsfeed.less";
 @import "cranefly/category.less";
+@import "cranefly/profiles.less";
 
 // Keep ranks last for easy overrides!
 @import "ranks.less";

static/cranefly/css/cranefly/header.less

@@ -56,6 +56,7 @@
     li {
       a {
         &:link, &:visited {
+          background: none;
           border: none;
           border-radius: 0px;
           margin-bottom: 4px;
@@ -65,7 +66,7 @@
           font-weight: bold;
         }
 
-        &:hover, &:active {
+        &:hover, &:active, a:focus {
           background: none;
           border-bottom: 4px solid @gray;
           margin-bottom: 0px;
@@ -83,6 +84,16 @@
           color: @textColor;
         }
       }
+
+      .form-inline {
+        margin: 0px;
+        margin-bottom: 7px;
+
+        .btn-icon {
+          padding-left: 7px;
+          padding-right: 7px;
+        }
+      }
     }
   }
 }

static/cranefly/css/cranefly/profiles.less

@@ -0,0 +1,43 @@
+// User Profiles
+// -------------------------
+
+.profiles-list {
+  .user-cell {
+    overflow: auto;
+
+    .user-avatar {
+      float: left;
+
+      img {
+        border-radius: @baseBorderRadius;
+        width: 42px;
+        height: 42px; 
+      }
+    }
+
+    .user-details {
+      margin: 0px;
+      margin-left: 42px + @baseFontSize;
+
+      a:link, a:active, a:visited, a:hover {
+        display: block;
+        margin-top: 3px;
+
+        color: @textColor;
+        font-size: @baseFontSize * 1.4;
+        font-weight: bold;
+      }
+
+      .user-info {
+        display: block;
+
+        color: @grayLight;
+        font-size: @fontSizeMini;
+      }
+    }
+  }
+}
+
+.user-profile {
+  
+}

static/cranefly/css/variables.less

@@ -77,8 +77,8 @@
 
 // Page header
 // -------------------------
-@pageHeaderBackground:              darken(@bodyBackground, 8%);
-@pageHeaderBorder:                  darken(@bodyBackground, 14%);
+@pageHeaderBackground:              @bodyBackground;
+@pageHeaderBorder:                  darken(@pageHeaderBackground, 8%);
 
 // Items styles
 // -------------------------

templates/cranefly/profiles/list.html

@@ -12,6 +12,90 @@
 {{ macros.page_title(title=_('Users List')) }}
 {%- endif %}{% endblock %}
 
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {% if messages %}
+    <div class="messages-list">
+      {{ messages_list(messages) }}
+    </div>
+    {% endif %}
+    <h1>{% trans %}Users List{% endtrans %} <small>{% trans %}Browse notable user groups or find specific user{% endtrans %}</small></h1>
+    <ul class="nav nav-tabs header-tabs">
+      {% for rank in ranks %}
+      <li{% if active_rank.id == rank.id %} class="active"{% endif %}><a href="{% if loop.first %}{% url 'users' %}{% else %}{% url 'users' rank_slug=rank.name_slug %}{% endif %}">{{ _(rank.name) }}</a></li>
+      {% endfor %}
+      {% if acl.users.can_search_users() and not user.is_crawler() %}
+      <li class="pull-right">
+        <form action="{% url 'users' %}" class="form-inline" method="post">
+          <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+          {{ form_theme.field_widget(search_form.username, width=2, attrs={'placeholder': _('Find user...')}) }}
+          <button type="submit" class="btn btn-icon"><i class="icon-search"></i></button>
+        </form>
+      </li>
+      {% endif %}
+    </ul>
+  </div>
+</div>
+
+<div class="container container-primary">
+  <div class="profiles-list">
+
+    <h2>{% if in_search %}{% trans %}Search Users{% endtrans %}{% elif active_rank %}{{ _(active_rank.name) }}{% endif %}</h2>
+
+    {% if message %}
+    <div class="messages-list">
+      {{ macros.draw_message(message, 'alert-form') }}
+    </div>
+    {% endif %}
+
+    {% if in_search and not message and users|length > 0 %}
+    <p class="lead">{% trans %}We couldn't find a member with name you entered, so we present you with some other members with names similiar to one you searched for in hopes that one of them will turn out to be member you are looking for.{% endtrans %}</p>
+    {% elif active_rank and active_rank.description %}
+    <div class="markdown">{{ active_rank.description|markdown|safe }}</div>
+    {% endif %}
+
+    {% if users|length > 0 %}
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th colspan="4">{% if in_search %}{% trans %}Found Users{% endtrans %}{% else %}{% trans %}Users in this group{% endtrans %}{% endif %}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in users|batch(4, '') %}
+        <tr>
+          {% for user in row %}
+          <td class="span3 user-cell{% if user and user.get_style() %} user-cell-{{ user.get_style() }}{% endif %}">
+            {% if user %}
+            <a href="{% url 'user' username=user.username_slug, user=user.pk %}" class="user-avatar"><img src="{{ user.get_avatar(42) }}" alt=""></a>
+            <p class="user-details">
+              <a href="{% url 'user' username=user.username_slug, user=user.pk %}">{{ user.username }}</a>
+              <span class="user-info">{% if user.title or (in_search and user.get_title()) %}<strong>{% if in_search %}{{ _(user.get_title()) }}{% else %}{{ _(user.title) }}{% endif %}</strong>, {% endif %}{% trans join=user.join_date|reldate %}Member since {{ join }}{% endtrans %}</span>
+            </p>
+            {% else %}
+            &nbsp;
+            {% endif %}
+          </td>
+          {% endfor %}
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    {% elif not message %}
+    <p class="lead">
+      {%- if in_search -%}
+      {% trans %}We couldn't find any members with specified name.{% endtrans %}
+      {%- else -%}
+      {% trans %}Looks like there is nobody there.{% endtrans %}
+      {%- endif -%}
+    </p>
+    {% endif %}
+
+  </div>
+</div>
+{% endblock %}
+
 {% block content %}
 <div class="page-header header-tabbed">
   <h1>{% trans %}Users List{% endtrans %} <small>{% trans %}Browse notable user groups or find specific user{% endtrans %}</small></h1>

templates/cranefly/usercp/layout.html

@@ -3,23 +3,17 @@
 {% load url from future %}
 
 {% block container %}
-<div class="page-header header-primary">
-  <div class="container">
-    {% if messages %}
-    <div class="messages-list">
-      {{ messages_list(messages) }}
-    </div>
-    {% endif %}
-    <h1>{% trans %}Your Control Panel{% endtrans %}</h1>
-  </div>
-</div>
-
 <div class="container container-primary">
+  {% if messages %}
+  <div class="messages-list">
+    {{ messages_list(messages) }}
+  </div>
+  {% endif %}
   <div class="row usercp">
     <div class="span3">
 
       <ul class="nav nav-pills usercp-tabs">
-        <li class="nav-header">{% trans %}Account Settings{% endtrans %}</li>
+        <li class="nav-header">{% trans %}Your Control Panel{% endtrans %}</li>
         {% for link in tabs %}
         <li{% if link.active %} class="active"{% endif %}><a href="{{ link.route|url }}">{{ link.name }}</a></li>
         {% endfor %}