From d0bc499f66cdfba46dbe554c7c349dc2d3c86fd3 Mon Sep 17 00:00:00 2001
From: Harry Rein <hrein@edx.org>
Date: Tue, 5 Sep 2017 15:15:07 -0400
Subject: [PATCH] Fix styling issues on learner profile.

LEARNER-2485

1) Joined Date is shown in bold and there is no line below to separate
it from the next section.
2) The bio shows up below the certificates.
3) Switching to 'limited profile' does not correctly hide the language,
location and joined date fields.
---
 .../sass/features/_learner-profile.scss       | 19 ++++++++++---------
 .../js/views/learner_profile_view.js          |  3 +++
 .../learner_profile/learner_profile.html      |  3 +--
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/lms/static/sass/features/_learner-profile.scss b/lms/static/sass/features/_learner-profile.scss
index f9d1997142..35378afe8f 100644
--- a/lms/static/sass/features/_learner-profile.scss
+++ b/lms/static/sass/features/_learner-profile.scss
@@ -325,8 +325,8 @@
                 margin: 0 $baseline/2;
 
                 .social-links {
+                    @include padding($baseline/4, 0, 0, $baseline/4);
                     font-size: 2rem;
-                    padding-top: $baseline/4;
 
                     & > span {
                         color: $gray-l4;
@@ -348,33 +348,34 @@
                 }
 
                 .u-field {
-                    @extend %t-weight4;
+                    font-weight: $font-semibold;
                     @include padding(0, 0, 0, 3px);
                     color: $base-font-color;
                     margin-top: $baseline/5;
 
                     .u-field-value, .u-field-title {
-                        @extend %t-weight4;
+                        font-weight: 500;
                         width: calc(100% - 40px);
+                        color: $lightest-base-font-color;
                     }
 
                     .u-field-value-readonly {
-                        @extend %t-weight3;
                         font-family: $sans-serif;
                         color: $darkest-base-font-color;
                     }
 
-                    .u-field-title {
-                        color: $lightest-base-font-color;
-                        display: block;
-                    }
-
                     &.u-field-dropdown {
                         position: relative;
 
                         &:not(.editable-never) {
                             cursor: pointer;
                         }
+                    }
+
+                    &:not(.u-field-readonly) {
+                        &.u-field-value {
+                            @extend %t-weight3;
+                        }
 
                         &:not(:last-child) {
                             padding-bottom: $baseline/4;
diff --git a/openedx/features/learner_profile/static/learner_profile/js/views/learner_profile_view.js b/openedx/features/learner_profile/static/learner_profile/js/views/learner_profile_view.js
index 9c8627baca..59ee8a93ad 100644
--- a/openedx/features/learner_profile/static/learner_profile/js/views/learner_profile_view.js
+++ b/openedx/features/learner_profile/static/learner_profile/js/views/learner_profile_view.js
@@ -118,6 +118,9 @@
                         fieldView.delegateEvents();
                     }
 
+                    // Clear existing content in user profile card
+                    this.$('.profile-section-one-fields').html('');
+
                     // Do not show name when in limited mode or no name has been set
                     if (this.showFullProfile() && this.options.accountSettingsModel.get('name')) {
                         this.$('.profile-section-one-fields').append(this.options.nameFieldView.render().el);
diff --git a/openedx/features/learner_profile/templates/learner_profile/learner_profile.html b/openedx/features/learner_profile/templates/learner_profile/learner_profile.html
index 9432128915..9acbffea95 100644
--- a/openedx/features/learner_profile/templates/learner_profile/learner_profile.html
+++ b/openedx/features/learner_profile/templates/learner_profile/learner_profile.html
@@ -53,11 +53,10 @@ from openedx.core.djangolib.markup import HTML
                     </div>
                 </div>
                 <div class="wrapper-profile-section-container-two is-hidden">
+                    <div class="wrapper-profile-bio"></div>
                     % if achievements_fragment:
                         ${HTML(achievements_fragment.body_html())}
                     % endif
-                    <div class="wrapper-profile-bio">
-                    </div>
                 </div>
             </div>
         </div>