user cards design

misago/emberapp/app/components/user-state-icon.js

@@ -1,5 +1,3 @@
 import UserStateLabel from 'misago/components/user-state-label';
 
-export default UserStateLabel.extend({
-  tagName: 'span'
-});
+export default UserStateLabel.extend();

misago/emberapp/app/components/user-state-label.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+  tagName: 'span',
   classNames: 'user-state',
   classNameBindings: [
     'user.state.is_banned:user-banned',

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

@@ -19,7 +19,8 @@ export default IndexRoute.extend({
     didTransition: function() {
       this.set('title', {
         title: this.modelFor('users.rank').get('name'),
-        parent: gettext('Users')
+        parent: gettext('Users'),
+        page: this.get('page')
       });
     }
   }

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

@@ -5,108 +5,108 @@
 
 // Shape card
 .user-card {
+  background-color: @user-card-bg;
   border-radius: @user-card-border-radius;
+
   margin: @line-height-computed / 2 0px;
-  overflow: hidden;
-  position: relative;
+  .shadow-2dp();
 
   .media {
-    margin: 0px;
+    padding: @padding-base-horizontal;
   }
 }
 
 
-// Background avatar
-.user-card>.user-avatar {
-  width: 100%;
-  height: auto;
-}
+// Avatar
+.media-left {
+  padding-right: @line-height-computed / 2;
 
+  .user-avatar {
+    border-radius: @avatar-radius-small;
+    height: 44px;
+    width: auto;
+  }
+}
 
-// Avatar overlay
-.user-card .avatar-overlay {
-  background: @user-card-overlay;
 
-  position: absolute;
-  top: 0%;
-  left: 0%;
+// Username and status
+.media-body {
+  padding: 4px 0px;
 
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
+  h4 {
+    margin: 0px;
 
-  .avatar-overlay-cover {
-    display: table;
-    width: 100%;
-    height: 100%;
-    min-height: 100%;
+    color: @user-card-username-color;
+  }
 
-    .avatar-overlay-inner {
-      display: table-cell;
-      padding: @padding-large-vertical @padding-large-horizontal;
+  p {
+    margin-top: @line-height-computed / 3;
+    margin: 0px;
 
-      text-align: center;
-      vertical-align: middle;
-    }
+    color: @user-card-status-color;
+    font-size: @font-size-small;
   }
 }
 
 
-// Card user avatar link
-.user-card .user-avatar-link {
-  background-color: @user-card-avatar-link;
-  border-radius: @avatar-radius;
-  display: block;
-  margin: 0px auto;
-  overflow: hidden;
-  width: 60%;
+// Footer and nav
+.user-card footer {
+  background-color: @user-card-footer-bg;
+  border-top: 1px solid @user-card-footer-border;
+  border-radius: 0px 0px @user-card-border-radius @user-card-border-radius;
+  padding: @padding-base-vertical;
 
-  img {
+  nav {
+    display: table;
     width: 100%;
-    height: auto;
-  }
+    table-layout: fixed;
 
-  &:link, &:visited {
-    border: 4px solid @user-card-avatar-link;
-  }
+    ul {
+      display: table-row;
 
-  &:hover, &:focus {
-    border-color: @user-card-avatar-link-hover;
-  }
-
-  &:active {
-    border-color: @user-card-avatar-link-active;
+      li {
+        display: table-cell;
+      }
+    }
   }
 }
 
 
-// Card header
-.user-card h4 {
-  .user-state {
-    position: relative;
-    top: -2px;
-  }
-}
+// Make user card look bigger on large displays
+@media (min-width: @screen-md-min) {
+  .user-card {
+    .media {
+      padding-bottom: 0px;
 
+      &>div {
+        display: block;
+        width: 100%;
 
-// Card nav
-.user-card nav a {
-  margin: 0px 4px;
+        text-align: center;
+      }
+    }
 
-  .material-icons {
-    font-size: @font-size-base * 1.5;
-  }
+    .media-left {
+      padding: 0px;
 
-  &:link, &:visited {
-    color: @site-link-color;
-  }
+      .user-avatar {
+        border-radius: @avatar-radius;
+        margin-top: @line-height-computed;
 
-  &:hover, &:focus {
-    color: @site-link-hover-color;
-    text-decoration: none;
-  }
+        width: 80%;
+        height: auto;
+      }
+    }
 
-  &:active {
-    color: @site-link-active-color;
+    .media-body {
+      margin: @line-height-computed * .75 0px;
+      padding: 0px @padding-base-horizontal;
+
+      h4 {
+        margin-bottom: @line-height-computed / 4;
+
+        font-size: @font-size-large;
+      }
+    }
   }
 }

misago/emberapp/app/styles/misago/variables.less

@@ -311,7 +311,7 @@
 //== Dropdowns
 //
 //** Dropdown radius and shadow
-@dropdown-border-radius:            @border-radius-base;
+@dropdown-border-radius:         @border-radius-base;
 
 //** Dropdown link text color.
 @dropdown-link-color:            @site-link-color;
@@ -386,8 +386,10 @@
 //
 //** Body
 @user-card-border-radius:         @border-radius-large;
-@user-card-overlay:               fadeOut(@body-bg, 10%);
+@user-card-bg:                    @body-bg;
 
-@user-card-avatar-link:           fadeOut(#fff, 50%);
-@user-card-avatar-link-hover:     @link-color;
-@user-card-avatar-link-active:    @link-hover-color;
+@user-card-footer-border:         darken(@user-card-bg, 8%);
+@user-card-footer-bg:             @user-card-bg;
+
+@user-card-username-color:        @text-color;
+@user-card-status-color:          @gray-light;

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

@@ -1,29 +1,45 @@
-{{user-avatar user=user size=400}}
-<div class="avatar-overlay">
-  <div class="avatar-overlay-cover">
-    <div class="avatar-overlay-inner">
+<div class="media">
+  <div class="media-left">
 
-      {{#link-to 'user' user.url_name class="user-avatar-link"}}
-        {{user-avatar user=user size=400}}
-      {{/link-to}}
+    {{#link-to 'user' user.url_name}}
+      {{user-avatar user=user size=50 class="hidden-md hidden-lg"}}
+      {{user-avatar user=user size=200 class="hidden-xs hidden-sm"}}
+    {{/link-to}}
 
-      <h4>
-        {{user-state-icon user=user}}
-        {{user.username}}
-      </h4>
+  </div>
+  <div class="media-body">
 
-      <nav>
-        {{#link-to 'user' user.url_name class="btn btn-default btn-outline"}}
-          <i class="material-icons">person_outline</i>
-        {{/link-to}}
-        {{#link-to 'user' user.url_name class="btn btn-default btn-outline"}}
-          <i class="material-icons">chat</i>
-        {{/link-to}}
-        {{#link-to 'user' user.url_name class="btn btn-default btn-outline"}}
-          <i class="material-icons">check</i>
-        {{/link-to}}
-      </nav>
+    <h4>{{user.username}}</h4>
+
+    <p>
+      {{#if user.finalTitle}}
+        {{user.finalTitle}},
+      {{/if}} {{user-state-label user=user}}
+    </p>
 
-    </div>
   </div>
 </div>
+<footer>
+  <nav>
+    <ul class="list-unstyled">
+      {{#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 "Message"}}
+        {{/link-to}}
+      </li>
+    </ul>
+  </nav>
+</footer>

misago/emberapp/app/templates/components/user-state-label.hbs

@@ -1,19 +1,13 @@
 {{#if user.state.is_banned}}
-  <i class="material-icons">remove_circle_outline</i>
   {{gettext "Banned"}}
 {{else if user.state.is_hidden}}
-  <i class="material-icons">radio_button_unchecked</i>
   {{gettext "Hidden"}}
 {{else if user.state.is_online_hidden}}
-  <i class="material-icons">gps_fixed</i>
   {{gettext "Online, hidden"}}
 {{else if user.state.is_offline_hidden}}
-  <i class="material-icons">gps_not_fixed</i>
   {{gettext "Seen %(last_seen)s, hidden" last_seen=(from-now lastClick)}}
 {{else if user.state.is_online}}
-  <i class="material-icons">radio_button_checked</i>
   {{gettext "Online"}}
 {{else if user.state.is_offline}}
-  <i class="material-icons">radio_button_unchecked</i>
   {{gettext "Seen %(last_seen)s" last_seen=(from-now lastClick)}}
 {{/if}}