From 3666575b4620e5a182375f8ba555ff8a6fcae8e7 Mon Sep 17 00:00:00 2001 From: Guo Xiang Tan Date: Thu, 15 Dec 2016 12:07:22 +0800 Subject: [PATCH] UX: Improve styling for groups page. --- .../javascripts/discourse/templates/group.hbs | 12 ++-- .../discourse/templates/groups.hbs | 21 ++++-- app/assets/stylesheets/common/base/group.scss | 64 +++++++++---------- .../stylesheets/common/base/groups.scss | 58 +++++++++++------ .../group-members-input.scss | 2 - app/assets/stylesheets/desktop/group.scss | 2 +- app/jobs/regular/user_email.rb | 1 + 7 files changed, 94 insertions(+), 66 deletions(-) rename app/assets/stylesheets/common/{base => components}/group-members-input.scss (98%) diff --git a/app/assets/javascripts/discourse/templates/group.hbs b/app/assets/javascripts/discourse/templates/group.hbs index 68204c0276c..af9522abdc9 100644 --- a/app/assets/javascripts/discourse/templates/group.hbs +++ b/app/assets/javascripts/discourse/templates/group.hbs @@ -1,6 +1,6 @@
-
+
{{#if model.flair_url}} {{avatar-flair @@ -12,13 +12,11 @@ {{/if}} -

- {{groupName}} -

+ {{groupName}} - {{#if model.full_name}} -

@{{model.name}}

- {{/if}} +
+ {{#if model.full_name}}{{model.name}}{{/if}} +
diff --git a/app/assets/javascripts/discourse/templates/groups.hbs b/app/assets/javascripts/discourse/templates/groups.hbs index b4563aef8dd..2d79caad460 100644 --- a/app/assets/javascripts/discourse/templates/groups.hbs +++ b/app/assets/javascripts/discourse/templates/groups.hbs @@ -12,10 +12,10 @@ {{#each groups as |group|}} - + {{#link-to "group.members" group.name}} {{#if group.flair_url}} - + {{avatar-flair flairURL=group.flair_url flairBgColor=group.flair_bg_color @@ -24,10 +24,23 @@ {{/if}} -

@{{group.name}}

 + + {{group.name}} + + {{#if group.full_name}} + {{group.full_name}} + {{/if}} + + {{#if group.title}} +
+ {{group.title}} +
+ {{/if}} + {{/link-to}} - {{group.user_count}} + + {{group.user_count}} {{/each}} diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss index ef205ef343d..c9219aed681 100644 --- a/app/assets/stylesheets/common/base/group.scss +++ b/app/assets/stylesheets/common/base/group.scss @@ -1,20 +1,41 @@ -.group-header { - font-size: 2.142em; - font-weight: normal; -} - -.group-name { - font-weight: normal; - margin-top: 5px; - color: dark-light-diff($primary, $secondary, 50%, -50%); -} - .group-details-container { background: rgba(230, 230, 230, 0.3); padding: 20px; margin-bottom: 30px; } +.group-info { + width: 100%; + + .group-info-name { + font-size: 1.4em; + font-weight: bold; + color: $primary; + } + + .group-info-full-name { + font-size: 1.2em; + color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + } + + span { + display: inline-block; + vertical-align: middle; + } + + .avatar-flair { + $size: 50px; + + background-size: $size; + height: $size; + width: $size; + + i { + font-size: $size !important; + } + } +} + .group-logs-filter { margin-right: 10px; @@ -109,27 +130,6 @@ table.group-members { color: $primary; } -.group-details { - width: 100%; - - span { - display: inline-block; - vertical-align: middle; - } - - .avatar-flair { - $size: 50px; - - background-size: $size; - height: $size; - width: $size; - - i { - font-size: $size !important; - } - } -} - .form-horizontal { .group-flair-inputs { display: inline-block; diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss index 2002b6f46de..ae8ec1e8a75 100644 --- a/app/assets/stylesheets/common/base/groups.scss +++ b/app/assets/stylesheets/common/base/groups.scss @@ -7,28 +7,9 @@ .groups-table { width: 100%; - .groups-name { - span { - display: inline-block; - vertical-align: middle; - } - - .avatar-flair { - $size: 30px; - - background-size: $size; - height: $size; - width: $size; - - i { - font-size: $size !important; - } - } - } - th { border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -60%); - padding: 5px 0px 5px 5px; + padding: 5px 0px; color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); font-weight: normal; text-align: left; @@ -41,5 +22,42 @@ color: dark-light-diff($primary, $secondary, 50%, -50%); padding: 0.8em 0; } + + td.groups-user-count { + font-size: 1.2em; + } + } + + .groups-info { + .groups-info-name { + font-weight: bold; + color: $primary; + } + + .groups-info-full-name { + color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + } + + .groups-info-title { + font-size: 0.9em; + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + } + + span { + display: inline-block; + vertical-align: middle; + } + + .avatar-flair { + $size: 40px; + + background-size: $size; + height: $size; + width: $size; + + i { + font-size: $size !important; + } + } } } diff --git a/app/assets/stylesheets/common/base/group-members-input.scss b/app/assets/stylesheets/common/components/group-members-input.scss similarity index 98% rename from app/assets/stylesheets/common/base/group-members-input.scss rename to app/assets/stylesheets/common/components/group-members-input.scss index 6313010435e..b620ab3c027 100644 --- a/app/assets/stylesheets/common/base/group-members-input.scss +++ b/app/assets/stylesheets/common/components/group-members-input.scss @@ -11,5 +11,3 @@ } } } - - diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss index e368da25fd8..1114dae40b7 100644 --- a/app/assets/stylesheets/desktop/group.scss +++ b/app/assets/stylesheets/desktop/group.scss @@ -7,6 +7,6 @@ margin-right: 30px; } -.group-details { +.group-info { margin-bottom: 20px; } diff --git a/app/jobs/regular/user_email.rb b/app/jobs/regular/user_email.rb index 3f6193501df..88d8e092e99 100644 --- a/app/jobs/regular/user_email.rb +++ b/app/jobs/regular/user_email.rb @@ -37,6 +37,7 @@ module Jobs args[:email_token], args[:to_address]) + byebug if message Email::Sender.new(message, type, user).send else