From 0ec1dc9237491514b8d5f9c118bedfb1eb44d801 Mon Sep 17 00:00:00 2001 From: Kris Date: Fri, 2 Mar 2018 12:42:02 -0500 Subject: [PATCH] UX: Improving badge page layout --- .../discourse/templates/badges/show.hbs | 2 + .../templates/components/badge-card.hbs | 18 +-- .../stylesheets/common/base/user-badges.scss | 106 ++++++++++++++---- .../common/components/user-info.scss | 5 +- .../desktop/components/user-info.scss | 17 +-- .../mobile/components/user-info.scss | 14 --- 6 files changed, 109 insertions(+), 53 deletions(-) delete mode 100644 app/assets/stylesheets/mobile/components/user-info.scss diff --git a/app/assets/javascripts/discourse/templates/badges/show.hbs b/app/assets/javascripts/discourse/templates/badges/show.hbs index fab3e9a5aad..952bac8b4f8 100644 --- a/app/assets/javascripts/discourse/templates/badges/show.hbs +++ b/app/assets/javascripts/discourse/templates/badges/show.hbs @@ -37,6 +37,7 @@ {{#if userBadges}}
{{#load-more selector=".badge-info" action="loadMore"}} +
{{#each userBadges as |ub|}} {{#user-info user=ub.user size="medium" class="badge-info" date=ub.granted_at}}
{{i18n 'badges.granted_on' date=(inline-date ub.granted_at)}}
@@ -45,6 +46,7 @@ {{/if}} {{/user-info}} {{/each}} +
{{/load-more}} {{#unless canLoadMore}} diff --git a/app/assets/javascripts/discourse/templates/components/badge-card.hbs b/app/assets/javascripts/discourse/templates/components/badge-card.hbs index 3c519d85ddf..e211aaec06b 100644 --- a/app/assets/javascripts/discourse/templates/components/badge-card.hbs +++ b/app/assets/javascripts/discourse/templates/components/badge-card.hbs @@ -5,13 +5,15 @@ {{d-icon "check"}} {{/if}}
-
- {{icon-or-image badge.icon}} -
-
-
-

{{badge.name}}

-
{{{summary}}}
+ +
+ {{icon-or-image badge.icon}}
-
+
+
+

{{badge.name}}

+
{{{summary}}}
+
+
+
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss index 9742fb7226d..d5bcdca6d2d 100644 --- a/app/assets/stylesheets/common/base/user-badges.scss +++ b/app/assets/stylesheets/common/base/user-badges.scss @@ -121,10 +121,11 @@ .badge-card { position: relative; display: inline-block; - background-color: $primary-low; - margin-right: 5px; - margin-bottom: 10px; - + background-color: $primary-very-low; + border: 1px solid $primary-low; + margin-bottom: 2vh; + transition: box-shadow .25s; + .check-display { position: absolute; left: 5px; @@ -142,17 +143,26 @@ .badge-contents { display: flex; - flex-direction: row; min-height: 128px; height: 100%; + + .badge-link { + display: flex; + flex: 1 1 auto; + padding: 0 10%; + @media screen and (max-width: 550px) { + padding: 0 5%; + } + } .badge-icon { - min-width: 90px; display: flex; + flex: 0 0 auto; + width: 1.23em; + margin-right: 5%; align-items: center; justify-content: center; - background-color: $primary-low; - font-size: 3em; + font-size: 3.5em; img { max-width: 80px; @@ -174,32 +184,73 @@ .badge-info { display: flex; + flex: 1 1 auto; align-items: center; - justify-content: center; - padding: 15px; + padding: 1em 1.5em 1em 0; color: $primary; + @media screen and (max-width: 600px) { + padding-right: 0; + } h3 { - margin-bottom: 0.4em; + margin-bottom: 0.25em; + font-size: $font-up-1; + @media screen and (min-width: 900px) { + font-size: $font-up-2; + } } } } + + &.medium { + vertical-align: top; + flex: 0 0 32%; + margin-right: calc(2% - 3px); + &:nth-of-type(3n+1) { + margin-right: 0; + } + @include small-width { + flex: 0 0 49%; + margin-right: 0; + } + @media screen and (max-width: 550px) { + flex: 0 0 100%; + } + &:hover { + box-shadow: shadow("card"); + } + &:active { + box-shadow: none; + } + @media all and (max-width: 320px) { + width: 100%; + } + } + &.large { + width: 100%; + @media screen and (min-width: 767px) { + max-width: calc(#{$large-width} / 2); + } + .badge-contents { + .badge-link { + padding: 0 5%; + width: 90%; + h3 { + font-size: $font-up-3; + } + } + } + } } -.badge-card.medium { - width: 350px; - vertical-align: top; -} - -@media all and (max-width: 320px) { - .badge-card.medium { - width: 100%; +.badges-granted { + display: flex; + flex-wrap: wrap; + @media screen and (max-width: $small-width) { + justify-content: space-between; } } -.badge-card.large { - width: 750px; -} .badge-groups { margin: 20px 0; @@ -211,6 +262,16 @@ .badge-grouping { margin-bottom: 1.5em; + display: flex; + flex-wrap: wrap; + @include small-width { + justify-content: space-between; + } + + .title { + width: 100%; + font-size: $font-up-1; + } } .show-badge-details { @@ -222,7 +283,6 @@ .badge-grant-info { display: flex; align-items: center; - margin-left: 1em; &.hidden { display: none; } diff --git a/app/assets/stylesheets/common/components/user-info.scss b/app/assets/stylesheets/common/components/user-info.scss index c9884f56041..497c5f94392 100644 --- a/app/assets/stylesheets/common/components/user-info.scss +++ b/app/assets/stylesheets/common/components/user-info.scss @@ -13,7 +13,9 @@ float: left; width: 70%; padding-left: 5px; - font-size: $font-down-1; + @media screen and (max-width: 600px) { + font-size: $font-down-1; + } .name-line { white-space: nowrap; @@ -57,6 +59,7 @@ &.badge-info { min-height: 80px; + min-width: 250px; .granted-on { color: dark-light-choose($primary-medium, $secondary-medium); diff --git a/app/assets/stylesheets/desktop/components/user-info.scss b/app/assets/stylesheets/desktop/components/user-info.scss index f1b7260d192..512e44e94be 100644 --- a/app/assets/stylesheets/desktop/components/user-info.scss +++ b/app/assets/stylesheets/desktop/components/user-info.scss @@ -1,14 +1,17 @@ .user-info { &.medium { - width: 480px; - + flex: 0 0 32%; + margin-right: 2%; + display: flex; + &:nth-of-type(3n) { + margin-right: 0; + } + @media screen and (max-width: $small-width) { + flex: 0 0 48%; + margin-right: 0; + } .user-image { width: 55px; } - - .user-detail { - width: 380px; - } - } } diff --git a/app/assets/stylesheets/mobile/components/user-info.scss b/app/assets/stylesheets/mobile/components/user-info.scss deleted file mode 100644 index 8cf359ea186..00000000000 --- a/app/assets/stylesheets/mobile/components/user-info.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Mobile styles for "user-info" component -.user-info { - &.medium { - width: 300px; - - .user-image { - width: auto; - } - - .user-detail { - width: 240px; - } - } -}