From d494993bff3fe709cb1ace59547671e6051e763f Mon Sep 17 00:00:00 2001 From: Maxim Colls Date: Sat, 18 Aug 2018 16:45:09 +0100 Subject: [PATCH 01/12] Members page refactor --- app/assets/stylesheets/_to-member-card.scss | 89 +++++++++++++++++++ app/assets/stylesheets/application.css.scss | 6 ++ app/controllers/users_controller.rb | 20 +++-- app/decorators/member_decorator.rb | 10 +-- app/helpers/glyph_helper.rb | 5 +- app/helpers/users_helper.rb | 4 + .../_organization_listings_menu.html.erb | 6 ++ app/views/shared/_post.html.erb | 4 +- app/views/users/_member_card.html.erb | 35 ++++++++ app/views/users/_toggle_manager_link.html.erb | 2 +- app/views/users/_user_rows.html.erb | 8 +- app/views/users/index.html.erb | 59 +++--------- app/views/users/manage.html.erb | 69 ++++++++++++++ app/views/users/show.html.erb | 52 +++++------ config/locales/es.yml | 3 + config/routes.rb | 6 +- 16 files changed, 279 insertions(+), 99 deletions(-) create mode 100644 app/assets/stylesheets/_to-member-card.scss create mode 100644 app/views/users/_member_card.html.erb create mode 100644 app/views/users/manage.html.erb diff --git a/app/assets/stylesheets/_to-member-card.scss b/app/assets/stylesheets/_to-member-card.scss new file mode 100644 index 000000000..6592e33f6 --- /dev/null +++ b/app/assets/stylesheets/_to-member-card.scss @@ -0,0 +1,89 @@ +.to-member-card { + & { + margin: 16px 0; + width: 100%; + max-width: 600px; + height: 178px; + background-color: white; + box-shadow: 0 0 3px $palette-grey; + display: inline-block; + + @media(max-width: $screen-sm-min) { + height: auto; + margin: 10px 0; + } + } + + &__header { + & { + display: flex; + background-color: $palette-dark-turkey; + padding: 10px 20px; + } + + &__avatar { + margin-right: 20px; + } + + &__text { + h4 { + & { + margin: 4px 0 6px; + } + + a { + color: white; + font-size: 18px; + } + } + + &__activity { + font-size: 14px; + color: #78adb9; + font-size: 12px; + } + } + } + + &__body { + & { + padding: 16px 20px; + } + + &__description { + margin-bottom: 10px; + color: #666; + font-size: 15px; + height: 44px; + + @media(max-width: $screen-sm-min) { + height: auto; + } + } + + &__items { + display: flex; + + @media(max-width: $screen-sm-min) { + display: block; + margin-bottom: 2px; + } + } + + &__item { + & { + margin-right: 20px; + font-size: 14px; + color: grey; + } + + a { + color: grey; + } + + .glyphicon { + color: grey; + } + } + } +} diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 828e5c541..5b79f55ad 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -2,6 +2,7 @@ @import "bootstrap-sprockets"; @import "bootstrap-custom"; @import "to-categories-dropdown"; +@import "to-member-card"; @import "footer"; html { @@ -257,6 +258,11 @@ table.users { h1 { margin-bottom: 20px; margin-top: 0; + font-size: 32px; + + @media(max-width: $screen-sm-min) { + font-size: 26px; + } } img { diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb index 9f1dd87a6..3558044b5 100644 --- a/app/controllers/users_controller.rb +++ b/app/controllers/users_controller.rb @@ -2,13 +2,11 @@ class UsersController < ApplicationController before_filter :authenticate_user! def index - @search = current_organization.members.ransack(search_params) - - @members = - @search.result.eager_load(:account, :user).page(params[:page]).per(25) + search_and_load_members + end - @member_view_models = - @members.map { |m| MemberDecorator.new(m, self.class.helpers) } + def manage + search_and_load_members end def show @@ -59,6 +57,16 @@ def update private + def search_and_load_members + @search = current_organization.members.ransack(search_params) + + @members = + @search.result.eager_load(:account, :user).page(params[:page]).per(25) + + @member_view_models = + @members.map { |m| MemberDecorator.new(m, self.class.helpers) } + end + def search_params {s: 'member_uid asc'}.merge(params.fetch(:q, {})) end diff --git a/app/decorators/member_decorator.rb b/app/decorators/member_decorator.rb index ab1b6926a..e9385ce7b 100644 --- a/app/decorators/member_decorator.rb +++ b/app/decorators/member_decorator.rb @@ -1,6 +1,6 @@ class MemberDecorator < ViewModel delegate :user, :member_uid, :active?, to: :object - delegate :phone, :alt_phone, :username, to: :user + delegate :phone, :alt_phone, :username, :description, :last_sign_in_at, to: :user def manager? !!object.manager @@ -23,18 +23,14 @@ def mail_to view.mail_to(email) if email && !email.end_with?('example.com') end - def avatar_img - view.image_tag(view.avatar_url(user, 32), width: 32, height: 32) + def avatar_img(size=32) + view.image_tag(view.avatar_url(user, size), width: size, height: size) end def account_balance view.seconds_to_hm(object.account.try(:balance) || 0) end - def edit_user_path - routes.edit_user_path(user) - end - def toggle_manager_member_path routes.toggle_manager_member_path(object) end diff --git a/app/helpers/glyph_helper.rb b/app/helpers/glyph_helper.rb index 0d5344980..ddff8d266 100644 --- a/app/helpers/glyph_helper.rb +++ b/app/helpers/glyph_helper.rb @@ -8,10 +8,11 @@ module GlyphHelper "organization" => "tower" } - def glyph(kind) + def glyph(kind, title=nil) kind = kind.to_s.underscore content_tag :span, "", - class: "glyphicon glyphicon-#{glyph_name(kind)}" + class: "glyphicon glyphicon-#{glyph_name(kind)}", + title: title end private diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb index edd02894b..59dfc93f1 100644 --- a/app/helpers/users_helper.rb +++ b/app/helpers/users_helper.rb @@ -1,4 +1,8 @@ module UsersHelper + def phone_to(phone) + link_to phone, "tel://#{phone}" + end + def edit_user_path(user) can_edit_user?(user) ? super : "" end diff --git a/app/views/application/menus/_organization_listings_menu.html.erb b/app/views/application/menus/_organization_listings_menu.html.erb index b04271ece..f44a7043f 100644 --- a/app/views/application/menus/_organization_listings_menu.html.erb +++ b/app/views/application/menus/_organization_listings_menu.html.erb @@ -5,6 +5,12 @@