Improve the formatting for the user page bio

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

1 files changed, 14 insertions, 12 deletions

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