Improved admins online list on Admin Index.

misago/users/admin/users/forms.py

@@ -10,6 +10,7 @@ class SearchUsersForm(Form):
     activation = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=(('0', _("Already Active")), ('1', _("By User")), ('2', _("By Administrator"))), required=False)
     rank = forms.ModelMultipleChoiceField(widget=forms.CheckboxSelectMultiple, queryset=Rank.objects.order_by('order').all(), required=False)
     role = forms.ModelMultipleChoiceField(widget=forms.CheckboxSelectMultiple, queryset=Role.objects.order_by('name').all(), required=False)
+    
     layout = (
               (
                _("Search Users"),

static/admin/css/admin.css

@@ -866,7 +866,13 @@ th.table-sort.sort-asc a:hover{border-bottom:3px solid #ade6fe;padding-bottom:5p
 th.table-sort.sort-desc a:hover{border-bottom:3px solid #eca09a;padding-bottom:5px;text-decoration:none;}
 .well{background:#fafafa;border:1px solid #ffffff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0px 0px 3px #c9c9c9;-moz-box-shadow:0px 0px 3px #c9c9c9;box-shadow:0px 0px 3px #c9c9c9;}
 .strong-well{background:#ffffff;border:1px solid #c9c9c9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0px 0px 0px 3px #e3e3e3;-moz-box-shadow:0px 0px 0px 3px #e3e3e3;box-shadow:0px 0px 0px 3px #e3e3e3;}
-.list-tiny{display:block;margin:0px -6px;margin-bottom:16px;padding:4px 0px;overflow:auto;}.list-tiny>li{background:#ededed;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:3px 6px;padding:4px 7px;padding-bottom:6px;float:left;list-style:none;font-weight:bold;}
+.table-users a:link,.table-users a:active,.table-users a:visited,.table-users a:hover{color:#333333;font-size:150%;text-decoration:none;}
+.table-users .avatar{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;width:42px;height:42px;}
+.table-users .info-popover{background:#e3e3e3;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:2px;padding-top:0px;}.table-users .info-popover i{margin:0px;}
+.table-users .info-popover:hover{background:#7d7d7d;}.table-users .info-popover:hover i{background-image:url("../img/glyphicons-halflings-white.png");}
+.table-users.list-tiny a:link,.table-users.list-tiny a:active,.table-users.list-tiny a:visited,.table-users.list-tiny a:hover{font-size:100%;}
+.table-users.list-tiny .avatar{width:22px;height:22px;}
+.table-users.list-tiny i{position:relative;top:2px;}
 .btn{background:#dcdcdc;border:1px solid #dcdcdc;*border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;padding:4px 10px;color:#6f6f6f;font-weight:bold;text-shadow:none;}.btn:hover,.btn:active{background:#e1e1e1;border:1px solid #e1e1e1;*border:0;box-shadow:none;color:#0088cc;}
 .btn i{opacity:0.7;filter:alpha(opacity=70);}
 .btn:hover i,.btn:active i{opacity:1;filter:alpha(opacity=100);}

static/admin/css/admin/users-lists.less

@@ -1,21 +1,54 @@
 // Users list
 // --------------------------------------------------
-.list-tiny {
-  display: block;
-  margin: 0px -6px;
-  margin-bottom: 16px;
-  padding: 4px 0px;
-  overflow: auto;
+.table-users {
+  a:link, a:active,
+  a:visited, a:hover {
+    color: @textColor;
+    font-size: 150%;
+    text-decoration: none
+  }
   
-  &>li {
-    background: darken(@bodyBackground, 6%);
+  .avatar {
     .border-radius(3px);
-    margin: 3px 6px;
-    padding: 4px 7px;
-    padding-bottom: 6px;
-    float: left;
-    list-style: none;
+    width: 42px;
+    height: 42px;
+  }
+  
+  // Info popover
+  .info-popover {
+    background: darken(@bodyBackground, 10%);
+    .border-radius(3px);
+    padding: 2px;
+    padding-top: 0px;
+  
+    i {
+      margin: 0px;
+    }
+    
+    &:hover {
+      background: darken(@bodyBackground, 50%);
+      
+      i {
+        background-image: url("@{iconWhiteSpritePath}");
+      }
+    }
+  }
+  
+  // Tiny size, for lists with tons of members
+  &.list-tiny {
+    a:link, a:active,
+    a:visited, a:hover {
+      font-size: 100%;
+    }
+    
+    .avatar {
+      width: 22px;
+      height: 22px;
+    }
     
-    font-weight: bold;
+    i {
+      position: relative;
+      top: 2px;
+    }
   }
 }

static/sora/css/sora.css

@@ -854,9 +854,13 @@ th.table-sort.sort-desc a:hover{border-bottom:3px solid #eca09a;padding-bottom:5
 .well{background-color:#ffffff;border:1px solid #d6d6d6;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0px 0px 0px 3px #f0f0f0;-moz-box-shadow:0px 0px 0px 3px #f0f0f0;box-shadow:0px 0px 0px 3px #f0f0f0;padding:24px 12px;margin:0px -12px;}.well .alert{border-width:0px 0px 1px 0px;-webkit-border-radius:2px 2px 0px 0px;-moz-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px;margin:-24px -12px;margin-bottom:12px;padding:12px;font-weight:bold;}
 .well .form-actions{background-color:#fafafa;-webkit-border-radius:0px 0px 3px 3px;-moz-border-radius:0px 0px 3px 3px;border-radius:0px 0px 3px 3px;margin:-44px -12px;margin-top:12px;}
 .well .form-horizontal .form-actions{padding-left:192px;}
-.list-tiny{display:block;margin:0px -6px;margin-bottom:16px;padding:4px 0px;overflow:auto;}.list-tiny>li{background:#e8e8e8;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:3px 6px;padding:4px 7px;padding-bottom:6px;float:left;list-style:none;font-weight:bold;}
 .table-users a:link,.table-users a:active,.table-users a:visited,.table-users a:hover{color:#333333;font-size:150%;text-decoration:none;}
 .table-users .avatar{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;width:42px;height:42px;}
+.table-users .info-popover{background:#e3e3e3;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:2px;padding-top:0px;}.table-users .info-popover i{margin:0px;}
+.table-users .info-popover:hover{background:#7d7d7d;}.table-users .info-popover:hover i{background-image:url("../img/glyphicons-halflings-white.png");}
+.table-users.list-tiny a:link,.table-users.list-tiny a:active,.table-users.list-tiny a:visited,.table-users.list-tiny a:hover{font-size:100%;}
+.table-users.list-tiny .avatar{width:22px;height:22px;}
+.table-users.list-tiny i{position:relative;top:2px;}
 .btn{background:#dcdcdc;border:1px solid #dcdcdc;*border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;padding:4px 10px;color:#6f6f6f;font-weight:bold;text-shadow:none;}.btn:hover,.btn:active{background:#e1e1e1;border:1px solid #e1e1e1;*border:0;box-shadow:none;color:#0088cc;}
 .btn i{opacity:0.7;filter:alpha(opacity=70);}
 .btn:hover i,.btn:active i{opacity:1;filter:alpha(opacity=100);}

static/sora/css/sora/users-lists.less

@@ -1,25 +1,5 @@
 // Users list
 // --------------------------------------------------
-.list-tiny {
-  display: block;
-  margin: 0px -6px;
-  margin-bottom: 16px;
-  padding: 4px 0px;
-  overflow: auto;
-  
-  &>li {
-    background: darken(@bodyBackground, 8%);
-    .border-radius(3px);
-    margin: 3px 6px;
-    padding: 4px 7px;
-    padding-bottom: 6px;
-    float: left;
-    list-style: none;
-    
-    font-weight: bold;
-  }
-}
-
 .table-users {
   a:link, a:active,
   a:visited, a:hover {
@@ -33,4 +13,42 @@
     width: 42px;
     height: 42px;
   }
+  
+  // Info popover
+  .info-popover {
+    background: darken(@bodyBackground, 10%);
+    .border-radius(3px);
+    padding: 2px;
+    padding-top: 0px;
+  
+    i {
+      margin: 0px;
+    }
+    
+    &:hover {
+      background: darken(@bodyBackground, 50%);
+      
+      i {
+        background-image: url("@{iconWhiteSpritePath}");
+      }
+    }
+  }
+  
+  // Tiny size, for lists with tons of members
+  &.list-tiny {
+    a:link, a:active,
+    a:visited, a:hover {
+      font-size: 100%;
+    }
+    
+    .avatar {
+      width: 22px;
+      height: 22px;
+    }
+    
+    i {
+      position: relative;
+      top: 2px;
+    }
+  }
 }

templates/admin/overview/home.html

@@ -12,16 +12,28 @@
 </div>
 <div class="row">
   <div class="span8">
-  	<h2>{% trans count=admins|length, total=admins|length|intcomma -%}
+  	<h2>Administrators Online</h2>
+    <table class="table table-striped table-users list-tiny">
+      <thead>
+        <tr>
+          <th{% if admins|length > 1 %} colspan="2"{% endif %}>{% trans count=admins|length, total=admins|length|intcomma -%}
 One Administrator Online
 {%- pluralize -%}
 {{ total }} Administrators Online
-{%- endtrans %}</h2>
-	<ul class="list-tiny">{% for session in admins %}
-	  <li class="popover-admin-{{ loop.index }} clickable">
-	  	<img src="{{ session.user.get_avatar() }}" class="avatar-tiny"> {{ session.user.username }}
-	  </li>{% endfor %}
-	</ul>	
+{%- endtrans %}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>{% for session in admins %}    	
+          <td {% if admins|length > 1 %} {% if loop.last and loop.index is odd %}colspan="2"{% else %}class="span4"{% endif %}{% endif %}>
+              <a href="{% url 'user' username=session.user.username_slug, user=session.user.pk %}"><img src="{{ session.user.get_avatar('medium') }}" class="avatar" alt="{% trans %}Admin's Avatar{% endtrans %}" title="{% trans %}Admin's Avatar{% endtrans %}"> <strong>{{ session.user.username }}</strong></a>
+              <div class="muted" style="float: right;">{% trans start=session.start|timesince %}started {{ start }} ago{% endtrans %} <span class="info-popover tooltip-top" title="{% trans last=session.last|timesince %}Last click was {{ last }} ago{% endtrans %}"><i class="icon-time"></i></span></div>
+          </td>{% if not loop.last and loop.index is even %}
+        </tr>
+        <tr>{% endif %}
+        {% endfor %}</tr>
+      </tbody>
+    </table>
     
     <hr>
     
@@ -78,30 +90,4 @@ One Administrator Online
     </form>
   </div>
 </div>
-{% endblock %}
-
-{% block javascripts %}{% if admins %}
-<script type="text/javascript">
-  $(function () {
-  	// Register popovers for admin list{% for session in admins %}
-	$('.popover-admin-{{ loop.index }}').popover({
-		placement: 'top',
-		trigger:   'click',
-		title:     '{{ popover_title(session)|escapejs }}',
-		content:   '{{ popover_content(session)|escapejs }}'
-	});{% endfor %}
-  });
-</script>{% endif %}
-{% endblock %}
-
-{% macro popover_title(session) -%}
-  <div class="user-card">
-  	<img src="{{ session.user.get_avatar() }}" class="avatar-small">
-    {{ session.user.username }}
-  </div>
-{%- endmacro %}
-
-{% macro popover_content(session) -%}
-    <strong>{% trans last_action=session.last|timesince, ip=session.ip %}{{ last_action }} ago from {{ ip }}{% endtrans %}</strong>
-    <p>{{ session.agent }}</p>
-{%- endmacro %}
+{% endblock %}

templates/sora/users/list.html

@@ -32,14 +32,14 @@
 {% if users|length > 0 %}
 <table class="table table-striped table-users">
   <thead>
-  	<tr>
+    <tr>
       <th{% if users|length > 1 %} colspan="2"{% endif %}>{% 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{% if users|length > 1 %} {% if loop.last and loop.index is odd %}colspan="2"{% else %}class="span6"{% endif %}{% endif %}>
-        <a href="{% url 'user' username=user.username_slug, user=user.pk %}"><img src="{{ user.get_avatar('medium') }}" class="avatar" alt="{% trans %}Member's Avatar'{% endtrans %}" title="{% trans %}Member's Avatar'{% endtrans %}"> <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>
+        <a href="{% url 'user' username=user.username_slug, user=user.pk %}"><img src="{{ user.get_avatar('medium') }}" class="avatar" alt="{% trans %}Member's Avatar{% endtrans %}" title="{% trans %}Member's Avatar{% endtrans %}"> <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 not loop.last and loop.index is even %}
     </tr>
     <tr>{% endif %}