From 259c4eaf9eb61ce69896de58c4a8767125389aae Mon Sep 17 00:00:00 2001
From: NGUYEN DINH Quoc-Huy <quochuy@gmail.com>
Date: Fri, 30 Oct 2020 13:54:41 +1100
Subject: [PATCH] User badges tweaks for mobile view and relocate the hivebuzz
level badge
---
.../components/cards/UserProfileHeader.jsx | 32 +++++++++-------
src/app/components/pages/UserProfile.scss | 38 +++++++++++++------
src/app/locales/en.json | 4 +-
3 files changed, 48 insertions(+), 26 deletions(-)
diff --git a/src/app/components/cards/UserProfileHeader.jsx b/src/app/components/cards/UserProfileHeader.jsx
index ce655aa6a..9fe14b23b 100644
--- a/src/app/components/cards/UserProfileHeader.jsx
+++ b/src/app/components/cards/UserProfileHeader.jsx
@@ -116,6 +116,23 @@ class UserProfileHeader extends React.Component {
<h1>
<div className="UserProfile__Userpic">
<Userpic account={accountname} hideIfDefault />
+ </div>
+ {name || accountname}{' '}
+ <Tooltip
+ t={tt(
+ 'user_profile.this_is_users_reputations_score_it_is_based_on_history_of_votes',
+ { name: accountname }
+ )}
+ >
+ <span className="UserProfile__rep">
+ ({Math.floor(profile.get('reputation'))})
+ </span>
+ </Tooltip>
+ <Tooltip
+ t={tt('user_profile.hivebuzz_level_badge', {
+ name: accountname,
+ })}
+ >
<a
href={`http://hivebuzz.me/@${accountname}`}
target="_blank"
@@ -129,17 +146,6 @@ class UserProfileHeader extends React.Component {
className="UserProfile__badge_image_hivebuzzlevel"
/>
</a>
- </div>
- {name || accountname}{' '}
- <Tooltip
- t={tt(
- 'user_profile.this_is_users_reputations_score_it_is_based_on_history_of_votes',
- { name: accountname }
- )}
- >
- <span className="UserProfile__rep">
- ({Math.floor(profile.get('reputation'))})
- </span>
</Tooltip>
{blacklists}
{AffiliationMap[accountname] ? (
@@ -251,8 +257,8 @@ class UserProfileHeader extends React.Component {
<TimeAgoWrapper date={profile.get('active')} />
</p>
{(hivebuzzBadges.size > 0 || peakdBadges.size > 0) && (
- <div className="row">
- <div className="UserProfile__badges column">
+ <div className="UserProfile__badges row">
+ <div className="UserProfile__badges_tabs_container">
<Tabs>
<TabList>
{badgesTypes.badges.length > 0 && (
diff --git a/src/app/components/pages/UserProfile.scss b/src/app/components/pages/UserProfile.scss
index 2a551fec4..0e4088abd 100644
--- a/src/app/components/pages/UserProfile.scss
+++ b/src/app/components/pages/UserProfile.scss
@@ -56,7 +56,10 @@
}
z-index: 2;
font-weight: bold;
- }
+ }
+ @media screen and (max-width: 39.9375em) {
+ font-size: 0.85rem;
+ }
}
div.UserProfile__top-menu {
@@ -70,6 +73,11 @@
.Icon > svg, .Icon span.icon {
vertical-align: middle!important;
}
+
+ .columns.small-9 {
+ flex: 1 1 0px;
+ max-width: 100%;
+ }
}
}
@@ -224,28 +232,34 @@
}
.UserProfile__badge_image_hivebuzzlevel {
- position: absolute;
- width: 20px;
- height: 20px;
+ width: 25px;
+ height: 25px;
top: 30px;
left: 30px;
transition: width 0.25s, height 0.25s, top 0.25s, left 0.25s;
+ margin-left: 7px;
&:hover {
- width: 30px;
- height: 30px;
+ width: 40px;
+ height: 40px;
top: 26px;
left: 26px;
}
}
.UserProfile__badges {
- background-color: rgba(0, 0, 0, 0.7);
- border-radius: 4px;
- padding: 5px;
- margin-left: 50px;
- margin-right: 50px;
- margin-bottom: 10px;
+ .UserProfile__badges_tabs_container {
+ background-color: rgba(0, 0, 0, 0.7);
+ border-radius: 4px;
+ padding: 5px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 10px;
+ }
+
+ @media screen and (max-width: 39.9375em) {
+ margin: 0;
+ }
a {
display: inline-block;
diff --git a/src/app/locales/en.json b/src/app/locales/en.json
index 8512a659c..1228c4824 100644
--- a/src/app/locales/en.json
+++ b/src/app/locales/en.json
@@ -460,7 +460,9 @@
"other": "%(count)s posts"
},
"hide_reblogs": "Hide Reblogs",
- "show_all": "Show All"
+ "show_all": "Show All",
+ "hivebuzz_level_badge":
+ "This is %(name)s's level badged earned from Hivebuzz programs"
},
"post_jsx": {
"now_showing_comments_with_low_ratings":
--
GitLab