summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorconnorshea <connor.james.shea@gmail.com>2016-02-23 12:39:53 -0700
committerconnorshea <connor.james.shea@gmail.com>2016-02-23 16:50:48 -0700
commitbb0f5be077edb4c49732f451592755f3c5369e5b (patch)
tree94d7a5323b19079a0a862cb32bdf1b21705b1ce7
parent9f80118e05e68743d95a83742a1d0a06bba3039c (diff)
downloadgitlab-ce-bb0f5be077edb4c49732f451592755f3c5369e5b.tar.gz
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.
-rw-r--r--CHANGELOG1
-rw-r--r--app/assets/stylesheets/pages/profile.scss21
-rw-r--r--app/views/users/show.html.haml26
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