Skip to content

Commit 0bdf7b4

Browse files
enricostanoenricostano
authored
Merge pull request #406 from coopdevs/feature/members-page-refactor-with-cards
New /members page
2 parents 6438b60 + 1caf950 commit 0bdf7b4

18 files changed

+290
-105
lines changed

‎app/assets/stylesheets/_to-member-card.scss

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
.to-member-card {
2+
& {
3+
margin: 16px 0;
4+
width: 100%;
5+
max-width: 600px;
6+
height: 178px;
7+
background-color: white;
8+
box-shadow: 0 0 3px $palette-grey;
9+
display: inline-block;
10+
11+
@media(max-width: $screen-sm-min) {
12+
height: auto;
13+
margin: 10px 0;
14+
}
15+
}
16+
17+
&__header {
18+
& {
19+
display: flex;
20+
background-color: $palette-dark-turkey;
21+
padding: 10px 20px;
22+
}
23+
24+
&__avatar {
25+
margin-right: 20px;
26+
}
27+
28+
&__text {
29+
h4 {
30+
& {
31+
margin: 4px 0 6px;
32+
}
33+
34+
a {
35+
color: white;
36+
font-size: 18px;
37+
}
38+
}
39+
40+
&__activity {
41+
font-size: 14px;
42+
color: #78adb9;
43+
font-size: 12px;
44+
}
45+
}
46+
}
47+
48+
&__body {
49+
& {
50+
padding: 16px 20px;
51+
}
52+
53+
&__description {
54+
margin-bottom: 10px;
55+
color: #666;
56+
font-size: 15px;
57+
height: 44px;
58+
59+
@media(max-width: $screen-sm-min) {
60+
height: auto;
61+
}
62+
}
63+
64+
&__items {
65+
display: flex;
66+
67+
@media(max-width: $screen-sm-min) {
68+
display: block;
69+
margin-bottom: 2px;
70+
}
71+
}
72+
73+
&__item {
74+
& {
75+
margin-right: 20px;
76+
font-size: 14px;
77+
color: grey;
78+
}
79+
80+
a {
81+
color: grey;
82+
}
83+
84+
.glyphicon {
85+
color: grey;
86+
}
87+
}
88+
}
89+
}

‎app/assets/stylesheets/application.css.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import "bootstrap-sprockets";
33
@import "bootstrap-custom";
44
@import "to-categories-dropdown";
5+
@import "to-member-card";
56
@import "footer";
67

78
html {
@@ -257,6 +258,11 @@ table.users {
257258
h1 {
258259
margin-bottom: 20px;
259260
margin-top: 0;
261+
font-size: 32px;
262+
263+
@media(max-width: $screen-sm-min) {
264+
font-size: 26px;
265+
}
260266
}
261267

262268
img {

‎app/controllers/users_controller.rb

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@ class UsersController < ApplicationController
22
before_filter :authenticate_user!
33

44
def index
5-
@search = current_organization.members.ransack(search_params)
6-
7-
@members =
8-
@search.result.eager_load(:account, :user).page(params[:page]).per(25)
5+
search_and_load_members current_organization.members.active
6+
end
97

10-
@member_view_models =
11-
@members.map { |m| MemberDecorator.new(m, self.class.helpers) }
8+
def manage
9+
search_and_load_members current_organization.members
1210
end
1311

1412
def show
@@ -59,6 +57,16 @@ def update
5957

6058
private
6159

60+
def search_and_load_members(members_scope)
61+
@search = members_scope.ransack(search_params)
62+
63+
@members =
64+
@search.result.eager_load(:account, :user).page(params[:page]).per(25)
65+
66+
@member_view_models =
67+
@members.map { |m| MemberDecorator.new(m, self.class.helpers) }
68+
end
69+
6270
def search_params
6371
{s: 'member_uid asc'}.merge(params.fetch(:q, {}))
6472
end

‎app/decorators/member_decorator.rb

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
class MemberDecorator < ViewModel
22
delegate :user, :member_uid, :active?, to: :object
3-
delegate :phone, :alt_phone, :username, to: :user
3+
delegate :phone, :alt_phone, :username, :description, :last_sign_in_at, to: :user
44

55
def manager?
66
!!object.manager
@@ -23,18 +23,14 @@ def mail_to
2323
view.mail_to(email) if email && !email.end_with?('example.com')
2424
end
2525

26-
def avatar_img
27-
view.image_tag(view.avatar_url(user, 32), width: 32, height: 32)
26+
def avatar_img(size=32)
27+
view.image_tag(view.avatar_url(user, size), width: size, height: size)
2828
end
2929

3030
def account_balance
3131
view.seconds_to_hm(object.account.try(:balance) || 0)
3232
end
3333

34-
def edit_user_path
35-
routes.edit_user_path(user)
36-
end
37-
3834
def toggle_manager_member_path
3935
routes.toggle_manager_member_path(object)
4036
end

‎app/helpers/glyph_helper.rb

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ module GlyphHelper
88
"organization" => "tower"
99
}
1010

11-
def glyph(kind)
11+
def glyph(kind, title=nil)
1212
kind = kind.to_s.underscore
1313
content_tag :span, "",
14-
class: "glyphicon glyphicon-#{glyph_name(kind)}"
14+
class: "glyphicon glyphicon-#{glyph_name(kind)}",
15+
title: title
1516
end
1617

1718
private

‎app/helpers/users_helper.rb

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
module UsersHelper
2+
def phone_to(phone)
3+
link_to phone, "tel://#{phone}"
4+
end
5+
26
def edit_user_path(user)
37
can_edit_user?(user) ? super : ""
48
end

‎app/views/application/menus/_organization_listings_menu.html.erb

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
<b class="caret"></b>
66
</a>
77
<ul class="dropdown-menu" role="menu">
8+
<li>
9+
<%= link_to manage_users_path do %>
10+
<%= glyph :user %>
11+
<%= t "application.navbar.users" %>
12+
<% end %>
13+
</li>
814
<li>
915
<%= link_to alpha_grouped_index_tags_path(post_type: "offer") do %>
1016
<%= glyph :tags %>

‎app/views/shared/_post.html.erb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@
3939
<h3>
4040
<%= t "global.contact_details" %>
4141
</h3>
42-
<% if post.user.email_if_real != "" %>
42+
<% if post.user.has_valid_email? %>
4343
<dt><%= User.human_attribute_name :email %></dt>
44-
<dd><%= post.user.email_if_real %></dd>
44+
<dd><%= post.user.email %></dd>
4545
<% end %>
4646
<% phones = [post.user.phone, post.user.alt_phone].select(&:present?) %>
4747
<% if phones.present? %>

‎app/views/users/_member_card.html.erb

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div class="to-member-card">
2+
<div class="to-member-card__header">
3+
<div class="to-member-card__header__avatar"><%= member.avatar_img(48) %></div>
4+
<div class="to-member-card__header__text">
5+
<h4><%= member.link_to_self %></h4>
6+
<div class="to-member-card__header__text__activity">
7+
<%= "##{member.member_uid} — " %>
8+
<% if member.last_sign_in_at %>
9+
<%= t('.active_ago', time: distance_of_time_in_words(Time.now, member.last_sign_in_at)) %>
10+
<% else %>
11+
<%= t('.no_activity') %>
12+
<% end %>
13+
</div>
14+
</div>
15+
</div>
16+
<div class="to-member-card__body">
17+
<div class="to-member-card__body__description">
18+
<%= member.description %>
19+
</div>
20+
<div class="to-member-card__body__items">
21+
<div class="to-member-card__body__item">
22+
<span class="glyphicon glyphicon-earphone"></span>
23+
<%= phone_to member.phone %>
24+
</div>
25+
<div class="to-member-card__body__item">
26+
<span class="glyphicon glyphicon-envelope"></span>
27+
<%= member.mail_to %>
28+
</div>
29+
<div class="to-member-card__body__item">
30+
<%= "Balance: " %>
31+
<%= member.account_balance %>
32+
</div>
33+
</div>
34+
</div>
35+
</div>

‎app/views/users/_toggle_manager_link.html.erb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@
99
<%= glyph :arrow_up %>
1010
<%= t 'global.promote' %>
1111
<% end %>
12-
<% end %>
12+
<% end %>

0 commit comments

Comments
 (0)