Pagination on users list

misago/profiles/urls.py

@@ -4,6 +4,7 @@ from django.utils.importlib import import_module
 
 urlpatterns = patterns('misago.profiles.views',
     url(r'^$', 'list', name="users"),
+    url(r'^(?P<page>[0-9]+)/$', 'list', name="users"),
 )
 
 # Build extensions URLs
@@ -20,4 +21,5 @@ for extension in settings.PROFILE_EXTENSIONS:
 
 urlpatterns += patterns('misago.profiles.views',
     url(r'^(?P<rank_slug>(\w|-)+)/$', 'list', name="users"),
+    url(r'^(?P<rank_slug>(\w|-)+)/(?P<page>[0-9]+)/$', 'list', name="users"),
 )

misago/profiles/views.py

@@ -6,13 +6,14 @@ from misago.messages import Message
 from misago.profiles.forms import QuickFindUserForm
 from misago.ranks.models import Rank
 from misago.users.models import User
-from misago.utils import slugify
+from misago.utils import slugify, make_pagination
 from misago.views import error403, error404
 
-def list(request, rank_slug=None):
+def list(request, rank_slug=None, page=1):
     ranks = Rank.objects.filter(as_tab=1).order_by('order')
 
     # Find active rank
+    default_rank = False
     active_rank = None
     if rank_slug:
         for rank in ranks:
@@ -21,11 +22,14 @@ def list(request, rank_slug=None):
         if not active_rank:
             return error404(request)
     elif ranks:
+        default_rank = True
         active_rank = ranks[0]
 
     # Empty Defaults
     message = None
     users = []
+    items_total = 0
+    pagination = None
     in_search = False
 
     # Users search?
@@ -63,7 +67,10 @@ def list(request, rank_slug=None):
     else:
         search_form = QuickFindUserForm(request=request)
         if active_rank:
-            users = User.objects.filter(rank=active_rank).order_by('username_slug')
+            users = User.objects.filter(rank=active_rank)
+            count = users.count()
+            pagination = make_pagination(page, count, 4)
+            users = users.order_by('username_slug')[pagination['start']:pagination['stop']]
 
     return request.theme.render_to_response('profiles/list.html',
                                         {
@@ -71,7 +78,10 @@ def list(request, rank_slug=None):
                                          'search_form': FormFields(search_form).fields,
                                          'in_search': in_search,
                                          'active_rank': active_rank,
+                                         'default_rank': default_rank,
+                                         'items_total': count,
                                          'ranks': ranks,
                                          'users': users,
+                                         'pagination': pagination,
                                         },
                                         context_instance=RequestContext(request));

static/cranefly/css/cranefly.css

@@ -1040,16 +1040,14 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .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;}
 .category-forums-list.category-forums-inverse{border:1px solid #333333;-webkit-box-shadow:0px 0px 0px 3px #555555;-moz-box-shadow:0px 0px 0px 3px #555555;box-shadow:0px 0px 0px 3px #555555;}
 .category-forums-list.category-forums-info{border:1px solid #27576b;-webkit-box-shadow:0px 0px 0px 3px #3c85a3;-moz-box-shadow:0px 0px 0px 3px #3c85a3;box-shadow:0px 0px 0px 3px #3c85a3;}
-.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;}
+.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:36px;height:36px;}
+.profiles-list .user-cell .user-name:link,.profiles-list .user-cell .user-name:active,.profiles-list .user-cell .user-name:visited,.profiles-list .user-cell .user-name:hover{display:block;margin:0px;margin-left:43px;margin-top:9.1px;color:#333333;font-size:23.8px;}
 .user-profile .user-profile-header .header-avatar{border-radius:3px;float:left;width:80px;height:80px;margin-top:-8px;}
 .user-profile .user-profile-header .header-side{margin-left:94px;}.user-profile .user-profile-header .header-side h1{margin-left:6.666666666666667px;}
 .user-profile hr{border:none;border-top:1px solid #eeeeee;margin:14px 0px;}
 .user-profile .user-details .label{font-size:14px;}
-.user-profile .user-list .user-cell{overflow:auto;}.user-profile .user-list .user-cell .user-avatar{float:left;}.user-profile .user-list .user-cell .user-avatar img{border-radius:3px;width:42px;height:42px;}
-.user-profile .user-list .user-cell .user-details{margin:0px;margin-left:56px;}.user-profile .user-list .user-cell .user-details a:link,.user-profile .user-list .user-cell .user-details a:active,.user-profile .user-list .user-cell .user-details a:visited,.user-profile .user-list .user-cell .user-details a:hover{display:block;margin-top:3px;color:#333333;font-size:19.599999999999998px;font-weight:bold;}
-.user-profile .user-list .user-cell .user-details .user-info{display:block;color:#999999;font-size:10.5px;}
+.user-profile .user-list .user-cell{overflow:auto;}.user-profile .user-list .user-cell .user-avatar{float:left;}.user-profile .user-list .user-cell .user-avatar img{border-radius:3px;width:36px;height:36px;}
+.user-profile .user-list .user-cell .user-name:link,.user-profile .user-list .user-cell .user-name:active,.user-profile .user-list .user-cell .user-name:visited,.user-profile .user-list .user-cell .user-name:hover{display:block;margin:0px;margin-left:43px;margin-top:9.1px;color:#333333;font-size:23.8px;}
 .user-profile .content-list .media{overflow:auto;}.user-profile .content-list .media .media-object{border-radius:3px;width:52px;height:52px;}
 .user-profile .content-list .media .media-body{margin-left:66px;}.user-profile .content-list .media .media-body .post-preview:link,.user-profile .content-list .media .media-body .post-preview:active,.user-profile .content-list .media .media-body .post-preview:visited,.user-profile .content-list .media .media-body .post-preview:hover{display:block;margin-top:7px;color:#333333;font-size:16.8px;text-decoration:none;}
 .user-profile .content-list .media .media-body .media-footer{margin:0px;color:#999999;font-size:10.5px;font-weight:normal;}.user-profile .content-list .media .media-body .media-footer a{color:#555555;}

static/cranefly/css/cranefly/profiles.less

@@ -10,29 +10,20 @@
 
       img {
         border-radius: @baseBorderRadius;
-        width: 42px;
-        height: 42px; 
+        width: 36px;
+        height: 36px; 
       }
     }
 
-    .user-details {
-      margin: 0px;
-      margin-left: 42px + @baseFontSize;
-
-      a:link, a:active, a:visited, a:hover {
+    .user-name {
+      &:link, &:active, &:visited, &:hover {
         display: block;
-        margin-top: 3px;
+        margin: 0px;
+        margin-left: 36px + (@baseFontSize / 2);
+        margin-top: (36px - (@baseFontSize * 1.7)) / 2 + 3px;
 
         color: @textColor;
-        font-size: @baseFontSize * 1.4;
-        font-weight: bold;
-      }
-
-      .user-info {
-        display: block;
-
-        color: @grayLight;
-        font-size: @fontSizeMini;
+        font-size: @baseFontSize * 1.7;
       }
     }
   }
@@ -78,29 +69,20 @@
 
         img {
           border-radius: @baseBorderRadius;
-          width: 42px;
-          height: 42px; 
+          width: 36px;
+          height: 36px; 
         }
       }
 
-      .user-details {
-        margin: 0px;
-        margin-left: 42px + @baseFontSize;
-
-        a:link, a:active, a:visited, a:hover {
+      .user-name {
+        &:link, &:active, &:visited, &:hover {
           display: block;
-          margin-top: 3px;
+          margin: 0px;
+          margin-left: 36px + (@baseFontSize / 2);
+          margin-top: (36px - (@baseFontSize * 1.7)) / 2 + 3px;
 
           color: @textColor;
-          font-size: @baseFontSize * 1.4;
-          font-weight: bold;
-        }
-
-        .user-info {
-          display: block;
-
-          color: @grayLight;
-          font-size: @fontSizeMini;
+          font-size: @baseFontSize * 1.7;
         }
       }
     }

templates/cranefly/profiles/followers.html

@@ -32,11 +32,8 @@
         {% for user in row %}
         <td class="span3 user-cell">
           {% 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>
-            {% if user.title or user.get_title() %}<span class="user-info">{% if user.get_title() %}{{ _(user.get_title()) }}{% else %}{{ _(user.title) }}{% endif %}</span>{% endif %}
-          </p>
+          <a href="{% url 'user' username=user.username_slug, user=user.pk %}" class="user-avatar"><img src="{{ user.get_avatar(36) }}" alt=""></a>
+          <a href="{% url 'user' username=user.username_slug, user=user.pk %}" class="user-name">{{ user.username }}</a>
           {% else %}
           &nbsp;
           {% endif %}

templates/cranefly/profiles/follows.html

@@ -32,11 +32,8 @@
         {% for user in row %}
         <td class="span3 user-cell">
           {% 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>
-            {% if user.title or user.get_title() %}<span class="user-info">{% if user.get_title() %}{{ _(user.get_title()) }}{% else %}{{ _(user.title) }}{% endif %}</span>{% endif %}
-          </p>
+          <a href="{% url 'user' username=user.username_slug, user=user.pk %}" class="user-avatar"><img src="{{ user.get_avatar(36) }}" alt=""></a>
+          <a href="{% url 'user' username=user.username_slug, user=user.pk %}" class="user-name">{{ user.username }}</a>
           {% else %}
           &nbsp;
           {% endif %}

templates/cranefly/profiles/list.html

@@ -64,11 +64,8 @@
           {% 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>
-              {% if user.title or (in_search and user.get_title()) %}<span class="user-info">{% if in_search and user.get_title() %}{{ _(user.get_title()) }}{% else %}{{ _(user.title) }}{% endif %}</span>{% endif %}
-            </p>
+            <a href="{% url 'user' username=user.username_slug, user=user.pk %}" class="user-avatar"><img src="{{ user.get_avatar(36) }}" alt=""></a>
+            <a href="{% url 'user' username=user.username_slug, user=user.pk %}" class="user-name">{{ user.username }}</a>
             {% else %}
             &nbsp;
             {% endif %}
@@ -78,6 +75,7 @@
         {% endfor %}
       </tbody>
     </table>
+    {{ pager() }}
     {% elif not message %}
     <p class="lead">
       {%- if in_search -%}
@@ -92,59 +90,24 @@
 </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>
-  <ul class="nav nav-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="tab-search{% if not ranks %} tab-search-no-tabs{% endif %} 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-primary"><i class="icon-search icon-white"></i></button>
-      </form>
-  	</li>
-  	{% endif %}
+{% macro pager() -%}
+{% if pagination['total'] > 1 %}
+{% if default_rank %}
+<div class="pagination">
+  <ul>
+    <li class="count">{{ macros.pager_label(pagination) }}</li>
+    {%- if pagination['prev'] > 0 %}<li><a href="{%- if pagination['prev'] > 1 %}{% url 'users' page=pagination['prev'] %}{% else %}{% url 'users' %}{% endif %}" class="tooltip-top" title="{% trans %}Previous Page{% endtrans %}"><i class="icon-chevron-left"></i></a></li>{% endif -%}
+    {%- if pagination['next'] > 0 %}<li><a href="{% url 'users' page=pagination['next'] %}" class="tooltip-top" title="{% trans %}Next Page{% endtrans %}"><i class="icon-chevron-right"></i></a></li>{% endif -%}
+  </ul>
+</div>
+{% else %}
+<div class="pagination">
+  <ul>
+    <li class="count">{{ macros.pager_label(pagination) }}</li>
+    {%- if pagination['prev'] > 0 %}<li><a href="{%- if pagination['prev'] > 1 %}{% url 'users' rank_slug=active_rank.rank_slug, page=pagination['prev'] %}{% else %}{% url 'users' rank_slug=active_rank.rank_slug %}{% endif %}" class="tooltip-top" title="{% trans %}Previous Page{% endtrans %}"><i class="icon-chevron-left"></i></a></li>{% endif -%}
+    {%- if pagination['next'] > 0 %}<li><a href="{% url 'users' rank_slug=active_rank.rank_slug, page=pagination['next'] %}" class="tooltip-top" title="{% trans %}Next Page{% endtrans %}"><i class="icon-chevron-right"></i></a></li>{% endif -%}
   </ul>
 </div>
-<h2>{% if in_search %}{% trans %}Search Users{% endtrans %}{% elif active_rank %}{{ _(active_rank.name) }}{% endif %}</h2>
-{% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-
-{% if in_search and not message and users|length > 0 %}
-<p>{% 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 %}
-{{ active_rank.description|markdown|safe }}
 {% endif %}
-
-{% if users|length > 0 %}
-<table class="table table-striped table-users">
-  <thead>
-    <tr>
-      <th colspan="2">{% if in_search %}{% trans %}Found Users{% endtrans %}{% else %}{% trans %}Users in this group{% endtrans %}{% endif %}</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>{% for user in users %}
-      <td class="span6{% if user.get_style() %} {{ user.get_style() }}{% endif %}">
-        <a href="{% url 'user' username=user.username_slug, user=user.pk %}"><img src="{{ user.get_avatar(42) }}" class="avatar" alt=""> <strong>{{ user.username }}</strong>{% if user.title or (in_search and user.get_title()) %} <span class="muted">{% if in_search%}{{ _(user.get_title()) }}{% else %}{{ _(user.title) }}{% endif %}</span>{% endif %}</a>
-      </td>{% if loop.last and loop.index is odd %}
-      <td class="span6">
-      	&nbsp;
-      </td>
-      {% endif %}{% if not loop.last and loop.index is even %}
-    </tr>
-    <tr>{% endif %}
-    {% endfor %}</tr>
-  </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 %}
-{% endblock %}
+{%- endmacro %}