Improve the formatting for the user page bioconnorshea/gitlab-ce-user-bio-improve

- 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.

Resolves #13406.

See merge request !2827.

3 files changed, 30 insertions, 18 deletions

diff --git a/CHANGELOG b/CHANGELOG
index d3280c5d0a1..a0b8bf2bee6 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,6 +1,7 @@
 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
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