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

2 files changed, 29 insertions, 18 deletions

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 95fc26a608a..4767c65d9a7 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -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;
 }
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 3bfd781e51d..d109635fa1e 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -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