users with rank list

misago/emberapp/app/components/user-card-ui-preview.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['user-card', 'ui-preview']
+});

misago/emberapp/app/routes/users/rank.js

@@ -14,5 +14,9 @@ export default MisagoRoute.extend({
     if (!model.get('is_tab')) {
       this.throw404();
     }
-  }
+  },
+
+  unloadRankUsers: function() {
+    this.store.unloadAll('user');
+  }.on('deactivate')
 });

misago/emberapp/app/routes/users/rank/index.js

@@ -1,6 +1,10 @@
 import MisagoRoute from 'misago/routes/misago';
 
 export default MisagoRoute.extend({
+  beforeModel: function() {
+    this.store.unloadAll('user');
+  },
+
   model: function() {
     return this.store.find('user', {
       'list': 'rank',
@@ -8,9 +12,14 @@ export default MisagoRoute.extend({
     });
   },
 
-  templateName: 'users/rank',
+  templateName: 'users/rank/index',
   setupController: function(controller, model) {
-    this.controllerFor('users.rank').setProperties({
+    var routeName = this.get('templateName').replace(/\//g, '.');
+    if (this.get('page') > 1) {
+      routeName = routeName.replace('.index', '.page');
+    }
+
+    this.controllerFor(routeName).setProperties({
       'rank': this.modelFor('users.rank'),
       'model': model,
       'meta': model.get('meta')

misago/emberapp/app/styles/misago/ui-preview.less

@@ -36,61 +36,40 @@
 }
 
 
-// Icons
-.ui-preview {
-  .fill {
-    .fa, .glyphicon {
-      .opacity(0.6);
-
-      color: @ui-preview-bg;
-
-      .animation(ui-preview-icons 2s linear infinite);
-    }
-  }
-}
-
-@-webkit-keyframes ui-preview-icons {
-  0%  { color: @ui-preview-bg; }
-  50%  { color: @ui-preview-light; }
-  1000%  { color: @ui-preview-bg; }
-}
-
-@keyframes ui-preview-icons {
-  0%  { color: @ui-preview-bg; }
-  50%  { color: @ui-preview-light; }
-  1000%  { color: @ui-preview-bg; }
-}
-
-
 // Few shorthands
 .ui-preview-img {
   display: inline-block;
+
+  &>* {
+    .opacity(0);
+  }
 }
 
 .ui-preview-text {
   border-radius: 20px;
   .opacity(0.6);
+
+  color: transparent;
 }
 
 
 // Preset: list-group
-.ui-preview {
-  &.list-group-preview {
-    border-radius: @list-group-border-radius + 1;
-    padding: 1px;
-
-    &>.fill {
-      margin-bottom: 1px;
-      padding: 10px 15px;
-
-      // Round the first and last items
-      &:first-child {
-        .border-top-radius(@list-group-border-radius);
-      }
-      &:last-child {
-        margin-bottom: 0;
-        .border-bottom-radius(@list-group-border-radius);
-      }
+.ui-preview .list-group-preview {
+  border-radius: @list-group-border-radius;
+  .shadow-2dp();
+
+  &>.fill {
+    margin-bottom: 1px;
+    padding: 10px 15px;
+
+    // Round the first and last items
+    &:first-child {
+      .border-top-radius(@list-group-border-radius);
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+      .border-bottom-radius(@list-group-border-radius);
     }
   }
 }

misago/emberapp/app/styles/misago/user-card.less

@@ -18,7 +18,7 @@
 
 
 // Avatar
-.media-left {
+.user-card .media-left {
   padding-right: @line-height-computed / 2;
 
   .user-avatar {
@@ -30,7 +30,7 @@
 
 
 // Username and status
-.media-body {
+.user-card .media-body {
   padding: 4px 0px;
 
   h4 {
@@ -45,6 +45,10 @@
 
     color: @user-card-status-color;
     font-size: @font-size-small;
+
+    .user-state {
+      display: inline;
+    }
   }
 }
 
@@ -74,7 +78,7 @@
 
 // Make user card look bigger on large displays
 @media (min-width: @screen-md-min) {
-  .user-card {
+  .user-card.full-size {
     .media {
       padding-bottom: 0px;
 
@@ -110,3 +114,59 @@
     }
   }
 }
+
+
+// UI preview
+.ui-preview.user-card {
+  .media {
+    background-color: @user-card-bg;
+
+    p {
+      margin-top: 4px;
+
+      font-size: @font-size-small - 4px;
+    }
+
+    .ui-preview-img {
+      border-radius: @avatar-radius-small;
+
+      .user-avatar {
+        margin: 0px;
+      }
+    }
+  }
+
+  footer {
+    border-top: none;
+    margin-top: 1px;
+  }
+}
+
+@media (min-width: @screen-md-min) {
+  .ui-preview.user-card.full-size {
+    .media {
+      .ui-preview-img {
+        border-radius: @avatar-radius;
+        margin-top: @line-height-computed;
+
+        width: 80%;
+
+        .user-avatar {
+          margin: 0px;
+          width: 100%;
+          height: auto;
+        }
+      }
+
+      .media-body {
+        margin: @line-height-computed * .8 0px;
+
+        p {
+          margin-top: 4px;
+
+          font-size: @font-size-small - 2px;
+        }
+      }
+    }
+  }
+}

misago/emberapp/app/templates/components/user-card-ui-preview.hbs

@@ -0,0 +1,55 @@
+<div class="media">
+  <div class="media-left">
+
+    <span class="ui-preview-img">
+      {{user-avatar size=50 class="hidden-md hidden-lg"}}
+      {{user-avatar size=200 class="hidden-xs hidden-sm"}}
+    </span>
+
+  </div>
+  <div class="media-body">
+
+    <h4>
+      {{ui-text-preview minLength=5 maxLength=15 class="ui-preview-text"}}
+    </h4>
+
+    <p>
+      {{ui-text-preview minLength=15 maxLength=38 class="ui-preview-text"}}
+    </p>
+
+  </div>
+</div>
+<footer>
+  <nav>
+    <ul class="list-unstyled">
+      {{#if auth.isAuthenticated}}
+        <li>
+          <div class="btn btn-default btn-block">
+            <span class="ui-preview-text">
+              {{#if show-follow}}
+                {{gettext "Follow"}}
+              {{else}}
+                {{gettext "Profile"}}
+              {{/if}}
+            </span>
+          </div>
+        </li>
+        <li>
+          <div class="btn btn-default btn-block">
+            <span class="ui-preview-text">
+              {{gettext "Message"}}
+            </span>
+          </div>
+        </li>
+      {{else}}
+        <li>
+          <div class="btn btn-default btn-block">
+            <span class="ui-preview-text">
+              {{gettext "Profile"}}
+            </span>
+          </div>
+        </li>
+      {{/if}}
+    </ul>
+  </nav>
+</footer>

misago/emberapp/app/templates/components/user-card.hbs

@@ -22,10 +22,23 @@
 <footer>
   <nav>
     <ul class="list-unstyled">
-      {{#if show-follow}}
+      {{#if auth.isAuthenticated}}
+        {{#if show-follow}}
+          <li>
+            {{#link-to 'user' user.url_name class="btn btn-default btn-block"}}
+              {{gettext "Follow"}}
+            {{/link-to}}
+          </li>
+        {{else}}
+          <li>
+            {{#link-to 'user' user.url_name class="btn btn-primary btn-block"}}
+              {{gettext "Profile"}}
+            {{/link-to}}
+          </li>
+        {{/if}}
         <li>
           {{#link-to 'user' user.url_name class="btn btn-default btn-block"}}
-            {{gettext "Follow"}}
+            {{gettext "Message"}}
           {{/link-to}}
         </li>
       {{else}}
@@ -35,11 +48,6 @@
           {{/link-to}}
         </li>
       {{/if}}
-      <li>
-        {{#link-to 'user' user.url_name class="btn btn-default btn-block"}}
-          {{gettext "Message"}}
-        {{/link-to}}
-      </li>
     </ul>
   </nav>
 </footer>

misago/emberapp/app/templates/users/rank.hbs

@@ -1,27 +1,9 @@
-<div class="rank-page {{if rank.css_class (join-strings "rank-page-" rank.css_class)}}">
-  {{#if rank.description}}
+<div class="rank-page {{if model.css_class (join-strings "rank-page-" model.css_class)}}">
+  {{#if model.description}}
     <div class="rank-description lead">
-      {{{rank.description}}}
+      {{{model.description}}}
     </div>
   {{/if}}
 
-  <div class="rank-users">
-    {{#each (batch-row model 4) as |row|}}
-      <div class="row">
-        {{#each row as |user|}}
-          <div class="col-md-3">
-            {{user-card user=user}}
-          </div>
-        {{/each}}
-      </div>
-    {{/each}}
-  </div>
-
-  {{#pagination-aligned path='users.rank' model=rank meta=meta}}
-    {{#if meta.count}}
-      {{ngettext "There is %(members)s member with this rank." "There are %(members)s members with this rank." meta.count members=meta.count}}
-    {{else}}
-      {{gettext "There are no members with this rank."}}
-    {{/if}}
-  {{/pagination-aligned}}
+  {{outlet}}
 </div>

misago/emberapp/app/templates/users/rank/index.hbs

@@ -0,0 +1,21 @@
+{{#if model}}
+  <div class="rank-users">
+    {{#each (batch-row model 4) as |row|}}
+      <div class="row">
+        {{#each row as |user|}}
+          <div class="col-md-3">
+            {{user-card user=user class="full-size"}}
+          </div>
+        {{/each}}
+      </div>
+    {{/each}}
+  </div>
+
+  {{#pagination-aligned path='users.rank' model=rank meta=meta}}
+    {{ngettext "There is %(members)s member with this rank." "There are %(members)s members with this rank." meta.count members=meta.count}}
+  {{/pagination-aligned}}
+{{else}}
+  <p class="lead">
+    {{gettext "There are no members with this rank."}}
+  </p>
+{{/if}}

misago/emberapp/app/templates/users/rank/loading.hbs

@@ -0,0 +1,11 @@
+<div class="rank-users">
+  {{#each (x-range 3) as |row|}}
+    <div class="row">
+      {{#each (x-range 4) as |cell|}}
+        <div class="col-md-3">
+          {{user-card-ui-preview class="full-size"}}
+        </div>
+      {{/each}}
+    </div>
+  {{/each}}
+</div>