Commit 3cb5f14b authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'user-bio-improve' into 'master'

Improve the formatting for the user page bio

Resolves #13406.

Problems, per the Issue above:
- The bio has an extra period appended by the HAML view.
- The bio isn't given its own line, not differentiated from username and account creation date.
- The bio is allowed to span almost the full width of the container, would probably look better if it were only allowed a max width of something like 750px.

This commit:
- Separates the User page bio from the username and account creation
date.
- Separates the pseudo-selector adding a Middle Dot out from the
`profile-link-holder` class and into a `middle-dot-divider` class.

Before:
![Screen_Shot_2016-02-15_at_3.55.28_PM](/uploads/fbe410c3f436740121c5f4686e0f44d0/Screen_Shot_2016-02-15_at_3.55.28_PM.png)

With this Merge Request:
![Screen_Shot_2016-02-15_at_3.55.25_PM](/uploads/b4b16376a395608f57d8f76ab47e241f/Screen_Shot_2016-02-15_at_3.55.25_PM.png)

See merge request !2827
parents d22ebcf0 bb0f5be0
Please view this file on the master branch, on stable branches it's out of date.
v 8.6.0 (unreleased)
- Improve the formatting for the user page bio (Connor Shea)
- Show Crowd login tab when sign in is disabled and Crowd is enabled (Peter Hudec)
v 8.5.0
......
......@@ -51,9 +51,17 @@
.profile-link-holder {
display: inline;
a {
color: $blue-dark;
text-decoration: none;
}
}
// Middle dot divider between each element in a list of items.
.middle-dot-divider {
&:after {
content: "\00B7";
padding: 0px 6px;
content: "\00B7"; // Middle Dot
padding: 0 6px;
font-weight: bold;
}
......@@ -63,9 +71,10 @@
padding: 0;
}
}
}
a {
color: $blue-dark;
text-decoration: none;
}
.profile-user-bio {
// Limits the width of the user bio for readability.
max-width: 750px;
margin: auto;
}
......@@ -35,35 +35,37 @@
= @user.name
.cover-desc
%span
@#{@user.username}.
- if @user.bio.present?
%span
#{@user.bio}.
%span
%span.middle-dot-divider
@#{@user.username}
%span.middle-dot-divider
Member since #{@user.created_at.to_s(:medium)}
- if @user.bio.present?
.cover-desc
%p.profile-user-bio
= @user.bio
.cover-desc
- unless @user.public_email.blank?
.profile-link-holder
.profile-link-holder.middle-dot-divider
= link_to @user.public_email, "mailto:#{@user.public_email}"
- unless @user.skype.blank?
.profile-link-holder
.profile-link-holder.middle-dot-divider
= link_to "skype:#{@user.skype}", title: "Skype" do
= icon('skype')
- unless @user.linkedin.blank?
.profile-link-holder
.profile-link-holder.middle-dot-divider
= link_to "https://www.linkedin.com/in/#{@user.linkedin}", title: "LinkedIn" do
= icon('linkedin-square')
- unless @user.twitter.blank?
.profile-link-holder
.profile-link-holder.middle-dot-divider
= link_to "https://twitter.com/#{@user.twitter}", title: "Twitter" do
= icon('twitter-square')
- unless @user.website_url.blank?
.profile-link-holder
.profile-link-holder.middle-dot-divider
= link_to @user.short_website_url, @user.full_website_url
- unless @user.location.blank?
.profile-link-holder
.profile-link-holder.middle-dot-divider
= icon('map-marker')
= @user.location
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment