UX improvements on learner profile.

LEARNER-1857 This story constitutes a large change to the UX of the learner profile. Some specific changes include adding a flexible learner profile card, limiting the bio entry to only 300 characters and assuring that the page is responsive.
2017-07-25 15:30:42 -04:00
parent ed4a831f57
commit e8bae62f04
21 changed files with 292 additions and 142 deletions
--- a/common/test/acceptance/pages/lms/learner_profile.py
+++ b/common/test/acceptance/pages/lms/learner_profile.py
@@ -13,10 +13,6 @@ from common.test.acceptance.tests.helpers import select_option_by_value

 PROFILE_VISIBILITY_SELECTOR = '#u-field-select-account_privacy option[value="{}"]'
 PROFILE_VISIBILITY_INPUT = '#u-field-select-account_privacy'
-FIELD_ICONS = {
-    'country': 'fa-map-marker',
-    'language_proficiencies': 'fa-comment',
-}


 class Badge(PageObject):
@@ -214,18 +210,6 @@ class LearnerProfilePage(FieldsMixin, PageObject):
        self.wait_for_ajax()
        return self.q(css='#u-field-select-account_privacy').visible

-    def field_icon_present(self, field_id):
-        """
-        Check if an icon is present for a field. Only dropdown fields have icons.
-
-        Arguments:
-            field_id (str): field id
-
-        Returns:
-            True/False
-        """
-        return self.icon_for_field(field_id, FIELD_ICONS[field_id])
-
    def wait_for_public_fields(self):
        """
        Wait for `country`, `language` and `bio` fields to be visible.
--- a/common/test/acceptance/tests/lms/test_learner_profile.py
+++ b/common/test/acceptance/tests/lms/test_learner_profile.py
@@ -367,8 +367,6 @@ class OwnLearnerProfilePageTest(LearnerProfileTestMixin, AcceptanceTest):
        profile_page.make_field_editable('country')
        self.assertEqual(profile_page.mode_for_field('country'), 'edit')

-        self.assertTrue(profile_page.field_icon_present('country'))
-
    def test_language_field(self):
        """
        Test behaviour of `Language` field.
@@ -396,8 +394,6 @@ class OwnLearnerProfilePageTest(LearnerProfileTestMixin, AcceptanceTest):
        profile_page.make_field_editable('language_proficiencies')
        self.assertTrue(profile_page.mode_for_field('language_proficiencies'), 'edit')

-        self.assertTrue(profile_page.field_icon_present('language_proficiencies'))
-
    def test_about_me_field(self):
        """
        Test behaviour of `About Me` field.
--- a/lms/static/js/views/fields.js
+++ b/lms/static/js/views/fields.js
@@ -515,15 +515,16 @@
                'click .wrapper-u-field': 'startEditing',
                'click .u-field-placeholder': 'startEditing',
                'focusout textarea': 'finishEditing',
-                'change textarea': 'adjustTextareaHeight',
-                'keyup textarea': 'adjustTextareaHeight',
+                'change textarea': 'manageTextareaContentChange',
+                'keyup textarea': 'manageTextareaContentChange',
                'keydown textarea': 'onKeyDown',
-                'paste textarea': 'adjustTextareaHeight',
-                'cut textarea': 'adjustTextareaHeight'
+                'paste textarea': 'manageTextareaContentChange',
+                'cut textarea': 'manageTextareaContentChange'
            },

            initialize: function(options) {
-                _.bindAll(this, 'render', 'onKeyDown', 'adjustTextareaHeight', 'fieldValue', 'saveValue', 'updateView');
+                _.bindAll(this, 'render', 'onKeyDown', 'adjustTextareaHeight', 'manageTextareaContentChange',
+                    'fieldValue', 'saveValue', 'updateView');
                this._super(options);
                this.listenTo(this.model, 'change:' + this.options.valueAttribute, this.updateView);
            },
@@ -541,7 +542,8 @@
                    value: value,
                    message: this.helpMessage,
                    messagePosition: this.options.messagePosition || 'footer',
-                    placeholderValue: this.options.placeholderValue
+                    placeholderValue: this.options.placeholderValue,
+                    maxCharacters: this.options.maxCharacters || ''
                }));
                this.delegateEvents();
                this.title((this.modelValue() || this.mode === 'edit') ?
@@ -562,12 +564,26 @@
                }
            },

+            updateCharCount: function() {
+                var curCharCount;
+                // Update character count for textarea
+                if (this.options.maxCharacters) {
+                    curCharCount = $('#u-field-textarea-' + this.options.valueAttribute).val().length;
+                    $('.u-field-footer .current-char-count').text(curCharCount);
+                }
+            },
+
            adjustTextareaHeight: function() {
                if (this.persistChanges === false) { return; }
                var textarea = this.$('textarea');
                textarea.css('height', 'auto').css('height', textarea.prop('scrollHeight') + 10);
            },

+            manageTextareaContentChange: function() {
+                this.updateCharCount();
+                this.adjustTextareaHeight();
+            },
+
            modelValue: function() {
                var value = this._super();
                return value ? $.trim(value) : '';
--- a/lms/static/sass/_build-lms-v1.scss
+++ b/lms/static/sass/_build-lms-v1.scss
@@ -55,7 +55,6 @@

 // base - specific views
@import "views/account-settings";
-@import "views/learner-profile";
@import 'views/login-register';
@import 'views/verification';
@import 'views/decoupled-verification';
@@ -69,6 +68,7 @@

 // features
@import 'features/bookmarks-v1';
+@import 'features/learner-profile';

 // search
@import 'search/search';
--- a/lms/static/sass/elements/_pagination.scss
+++ b/lms/static/sass/elements/_pagination.scss
@@ -74,7 +74,7 @@
    margin: 0 ($baseline*0.75);
    padding: ($baseline/4);
    text-align: center;
-    color: $gray;
+    color: $gray-d1;
  }

  .current-page {
--- a/lms/static/sass/features/_learner-profile.scss
+++ b/lms/static/sass/features/_learner-profile.scss
@@ -25,8 +25,6 @@
    }

    .profile-image-field {
-        @include float(left);
-
        button {
            background: transparent !important;
            border: none !important;
@@ -41,13 +39,18 @@
        .image-wrapper {
            width: $profile-image-dimension;
            position: relative;
+            margin: auto;

            .image-frame {
                display: block;
                position: relative;
                width: $profile-image-dimension;
                height: $profile-image-dimension;
-                border-radius: ($baseline/4);
+                border-radius: ($profile-image-dimension/2);
+                overflow: hidden;
+                border: 3px solid $gray-lightest;
+                margin-top: $baseline*-0.75;
+                background: $white;
            }

            .u-field-upload-button {
@@ -55,13 +58,12 @@
                top: 0;
                width: $profile-image-dimension;
                height: $profile-image-dimension;
-                border-radius: ($baseline/4);
+                border-radius: ($profile-image-dimension/2);
                border: 2px dashed transparent;
                background: rgba(229,241,247, .8);
                color: $link-color;
                text-shadow: none;
                @include transition(all $tmg-f1 ease-in-out 0s);
-                opacity: 0;
                z-index: 6;

                i {
@@ -87,17 +89,20 @@
                line-height: 1.3em;
                text-align: center;
                z-index: 7;
+                color: $base-font-color;
            }

            .upload-button-input {
                position: absolute;
-                top: -($profile-image-dimension * 2);
+                top: 0;
                @include left(0);
                width: $profile-image-dimension;
+                border-radius: ($profile-image-dimension/2);
                height: 100%;
                cursor: pointer;
                z-index: 5;
                outline: 0;
+                opacity: 0;
            }

            .u-field-remove-button {
@@ -113,6 +118,7 @@

    .wrapper-profile {
        min-height: 200px;
+        background-color: $gray-lightest;

        .ui-loading-indicator {
            margin-top: 100px;
@@ -133,7 +139,7 @@
                @extend .container;
                border: none;
                box-shadow: none;
-                padding: 0 ($baseline*1.5);
+                padding: 0 ($baseline*3);
            }

            .u-field-title {
@@ -164,53 +170,93 @@

    .wrapper-profile-sections {
        @extend .container;
-        padding: 0 ($baseline*1.5);
+        @include padding($baseline*1.5, $baseline*1.5, $baseline*1.5, 0);
+        min-width: 0;
+
+        @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
+            @include margin-left(0);
+            @include padding($baseline*1.5, 0, $baseline*1.5, 0);
+        }
+    }
+
+    .profile-header {
+        @include padding(0, $baseline*2, $baseline, $baseline*3);
+
+        .header {
+            @extend %t-title4;
+            @extend %t-ultrastrong;
+            display: inline-block;
+        }
+
+        .subheader {
+            @extend %t-title6;
+        }
    }

    .wrapper-profile-section-one {
-        width: 100%;
-        display: inline-block;
-        margin-top: ($baseline*1.5);
-        @include margin-left($baseline/2);
+        @include float(left);
+        @include margin-left($baseline*3);
+        width: 300px;
+        background-color: $white;
+        border-top: 5px solid $blue;
+        padding-bottom: $baseline;
+
+        @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
+            @include margin-left(0);
+            width: 100%;
+        }
    }

    .profile-section-one-fields {
-        @include float(left);
-        width: flex-grid(4, 12);
-        @include margin-left($baseline);
+        margin: 0 $baseline/2;

        .u-field {
-            margin-bottom: ($baseline/4);
-            padding-top: 3px;
-            padding-bottom: 3px;
-            @include padding-left(3px);
-        }
-
-        .u-field-username {
-
-            input[type="text"] {
-                font-weight: 600;
-            }
+            @extend %t-weight4;
+            @include padding(0, 0, 0, 3px);
+            color: $base-font-color;

            .u-field-value {
-                width: 350px;
-                @extend %t-title4;
+                @extend %t-weight4;
+                width: calc(100% - 40px);
+
+                .u-field-value-readonly {
+                    @extend %t-weight3;
+                }
+            }
+
+            .u-field-title {
+                color: $base-font-color;
+                font-size: $body-font-size;
+                display: block;
+            }
+
+            &.u-field-dropdown {
+                margin-top: $baseline/5;
+
+                &:not(.editable-never) {
+                    cursor: pointer;
+                }
+
+                &:not(:last-child) {
+                    padding-bottom: $baseline/4;
+                    border-bottom: 1px solid $gray-lighter;
+                }
            }
        }

-        .u-field-icon {
-            display: inline-block;
-            vertical-align: baseline;
-        }
+        &>.u-field {
+            &:not(:first-child) {
+                font-size: $body-font-size;
+                color: $base-font-color;
+                font-weight: $font-light;
+                margin-bottom: 0;
+            }

-        .u-field-title {
-            width: 0;
-        }
-
-        .u-field-value {
-            width: 200px;
-            display: inline-block;
-            vertical-align: baseline;
+            &:first-child {
+                @extend %t-title4;
+                @extend %t-weight4;
+                font-size: em(24);
+            }
        }

        select {
@@ -230,16 +276,29 @@
        }
    }

-    .wrapper-profile-section-two {
-        padding-top: 1em;
-        width: flex-grid(8, 12);
-    }
+    .wrapper-profile-section-container-two {
+        @include float(left);
+        width: calc(100% - 380px);
+        max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap

-    .profile-section-two-fields {
+        @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
+            width: 100%;
+            margin-top: $baseline;
+        }

        .u-field-textarea {
            margin-bottom: ($baseline/2);
-            padding: ($baseline/2) ($baseline*.75) ($baseline*.75) ($baseline*.75);
+            padding: 0 ($baseline*.75) ($baseline*.75) ($baseline*.75);
+
+            .u-field-header {
+                position: relative;
+
+                .u-field-message {
+                    @include right(0);
+                    top: $baseline/4;
+                    position: absolute;
+                }
+            }

            &.editable-toggle {
                cursor: pointer;
@@ -247,22 +306,30 @@
        }

        .u-field-title {
-            @extend %t-title5;
-            @extend %t-weight4;
+            @extend %t-title6;
+            @extend %t-weight5;
            display: inline-block;
            margin-top: 0;
            margin-bottom: ($baseline/4);
-            color: inherit;
+            color: $gray-dark;
+            width: 100%;
        }

        .u-field-value {
            @extend %t-copy-base;
            width: 100%;
+            overflow: scroll;

            textarea {
                width: 100%;
                background-color: transparent;
+                border-radius: 5px;
+                border-color: $gray-d1;
+                resize: none;
                white-space: pre-line;
+                outline: 0;
+                box-shadow: none;
+                -webkit-appearance: none;
            }

            a {
@@ -273,16 +340,22 @@
        .u-field-message {
            @include float(right);
            width: auto;
+
+            .message-can-edit {
+                position: absolute;
+            }
        }

        .u-field.mode-placeholder {
            padding: $baseline;
+            margin: $baseline * 0.75;
            border: 2px dashed $gray-l3;
+
            i {
                font-size: 12px;
                @include padding-right(5px);
                vertical-align: middle;
-                color: $gray;
+                color: $base-font-color;
            }
            .u-field-title {
                width: 100%;
@@ -293,7 +366,7 @@
                text-align: center;
                line-height: 1.5em;
                @extend %t-copy-sub1;
-                color: $gray;
+                color: $base-font-color;
            }
        }

@@ -304,6 +377,28 @@
                color: $link-color;
            }
        }
+
+        .wrapper-u-field {
+            font-size: $body-font-size;
+            color: $base-font-color;
+
+            .u-field-header .u-field-title{
+                color: $base-font-color;
+            }
+
+            .u-field-footer {
+                .field-textarea-character-count {
+                    @extend %t-weight1;
+                    @include float(right);
+                    margin-top: $baseline/4;
+                }
+            }
+        }
+
+        .profile-private-message {
+            @include padding-left($baseline*0.75);
+            line-height: 3.0em;
+        }
    }

    .badge-paging-header {
--- a/lms/static/sass/partials/base/_variables.scss
+++ b/lms/static/sass/partials/base/_variables.scss
@@ -223,6 +223,9 @@ $success-color-hover: rgb(0, 129, 0) !default;
 // ----------------------------
 // #COLORS- Bootstrap-style
 // ----------------------------
+$gray-dark: #4e5455 !default;
+$gray-lighter: #eceeef !default;
+$gray-lightest: #f7f7f9 !default;

 $state-success-text: $black !default;
 $state-success-bg: #dff0d8 !default;
@@ -545,6 +548,9 @@ $palette-success-border: #b9edb9;
 $palette-success-back: #ecfaec;
 $palette-success-text: #008100;

+// learner profile elements
+$learner-profile-container-flex: 768px;
+
 // course elements
 $content-wrapper-bg: $white !default;
 $course-bg-color: $uxpl-grayscale-x-back !default;
--- a/lms/static/sass/shared/_fields.scss
+++ b/lms/static/sass/shared/_fields.scss
@@ -12,7 +12,7 @@
        border-radius: 3px;

        span {
-            color: $gray;
+            color: $gray-d1;
        }

        &:hover {
@@ -84,7 +84,7 @@
 .u-field-title {
    width: flex-grid(3, 12);
    display: inline-block;
-    color: $gray;
+    color: $gray-d1;
    vertical-align: top;
    margin-bottom: 0;
    -webkit-font-smoothing: antialiased;
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -3,7 +3,7 @@

 .header-global {
  @extend %ui-depth1;
-  border-bottom: 2px solid $header-border-color;
+  border-bottom: 1px solid $header-border-color;
  box-shadow: 0 1px 5px 0 $shadow-l1;
  background: $header-bg;
  position: relative;
--- a/lms/templates/fields/field_dropdown.underscore
+++ b/lms/templates/fields/field_dropdown.underscore
@@ -1,17 +1,17 @@
-<% if (editable !== 'never') { %>
-    <% if (title && titleVisible) { %>
-        <label class="u-field-title" for="u-field-select-<%- id %>">
-            <%- title %>
-        </label>
-    <% } else { %>
-        <label class="sr" for="u-field-select-<%- id %>">
-            <%- screenReaderTitle %>
-        </label>
-    <% } %>
+<% if (title && titleVisible) { %>
+    <label class="u-field-title" for="u-field-select-<%- id %>">
+        <%- title %>
+    </label>
+<% } else { %>
+    <label class="sr" for="u-field-select-<%- id %>">
+        <%- screenReaderTitle %>
+    </label>
 <% } %>

-<% if (iconName) { %>
-    <span class="u-field-icon icon fa <%- iconName %> fa-fw" aria-hidden="true"></span>
+<% if (editable !== 'never') { %>
+    <% if (iconName) { %>
+        <span class="u-field-icon icon fa <%- iconName %> fa-fw" aria-hidden="true"></span>
+    <% } %>
 <% } %>

 <span class="u-field-value">
--- a/lms/templates/fields/field_dropdown_account.underscore
+++ b/lms/templates/fields/field_dropdown_account.underscore
@@ -1,14 +1,12 @@
 <div class="u-field-value field">
-    <% if (editable !== 'never') { %>
-        <% if (title && titleVisible) { %>
-            <label class="u-field-title field-label" for="u-field-select-<%- id %>">
-                <%- title %>
-            </label>
-        <% } else { %>
-            <label class="sr" for="u-field-select-<%- id %>">
-                <%- screenReaderTitle %>
-            </label>
-        <% } %>
+    <% if (title && titleVisible) { %>
+        <label class="u-field-title field-label" for="u-field-select-<%- id %>">
+            <%- title %>
+        </label>
+    <% } else { %>
+        <label class="sr" for="u-field-select-<%- id %>">
+            <%- screenReaderTitle %>
+        </label>
    <% } %>

    <% if (iconName) { %>
--- a/lms/templates/fields/field_readonly.underscore
+++ b/lms/templates/fields/field_readonly.underscore
@@ -1,6 +1,7 @@
 <% if (title) { %>
-<span class="u-field-title" aria-hidden="true"><%- title %></span>
+    <span class="u-field-title" aria-hidden="true"><%- title %></span>
 <% } %>
+
 <span class="sr" for="u-field-value-<%- id %>"><%- screenReaderTitle %></span>
 <span class="u-field-value" id="u-field-value-<%- id %>" aria-describedby="u-field-message-<%- id %>"><%- value %></span>
 <span class="u-field-message" id="u-field-message-<%- id %>">
--- a/lms/templates/fields/field_textarea.underscore
+++ b/lms/templates/fields/field_textarea.underscore
@@ -1,4 +1,4 @@
-<div class="wrapper-u-field">
+<div class="wrapper-u-field" role="group">
    <div class="u-field-header">
        <% if (mode === 'edit') { %>
            <label class="u-field-title" for="u-field-textarea-<%- id %>" id="u-field-title-<%- id %>"></label>
@@ -15,7 +15,7 @@

    <div class="u-field-value" id="u-field-value-<%- id %>"
        <% if (mode === 'edit') { %>
-            aria-labelledby="u-field-title-<%- id %>"><textarea id="u-field-textarea-<%- id %>" rows="4"
+            aria-labelledby="u-field-title-<%- id %>"><textarea maxlength="<%- maxCharacters%>" id="u-field-textarea-<%- id %>" rows="4"
            <% if (message) { %>
                aria-describedby="u-field-message-help-<%- id %>"
            <% } %>
@@ -43,5 +43,20 @@
                <span class="u-field-message-help" id="u-field-message-help-<%- id %>"> <%- message %></span>
            </span>
        <% } %>
+        <% if (mode === 'edit' && maxCharacters) { %>
+            <div class="field-textarea-character-count">
+                <%=
+                    HtmlUtils.interpolateHtml(
+                        gettext('{currentCountOpeningTag}{currentCharacterCount}{currentCountClosingTag} of {maxCharacters}'),
+                        {
+                            currentCountOpeningTag: HtmlUtils.HTML('<span class="current-char-count">'),
+                            currentCountClosingTag: HtmlUtils.HTML('</span>'),
+                            currentCharacterCount: value.length,
+                            maxCharacters: maxCharacters
+                        }
+                    )
+                %>
+            </div>
+        <% } %>
    </div>
 </div>
--- a/openedx/features/course_experience/views/course_home_messages.py
+++ b/openedx/features/course_experience/views/course_home_messages.py
@@ -114,11 +114,8 @@ class CourseHomeMessageFragmentView(EdxFragmentView):
            CourseHomeMessages.register_info_message(
                request,
                Text(_(
-                    "{add_reminder_open_tag}Don't forget to add a calendar reminder!{add_reminder_close_tag}."
-                )).format(
-                    add_reminder_open_tag='',
-                    add_reminder_close_tag=''
-                ),
+                    "Don't forget to add a calendar reminder!"
+                )),
                title=Text("Course starts in {days_until_start_string} on {course_start_date}.").format(
                    days_until_start_string=course_start_data['days_until_start_string'],
                    course_start_date=course_start_data['course_start_date']
--- a/openedx/features/learner_profile/static/learner_profile/js/learner_profile_factory.js
+++ b/openedx/features/learner_profile/static/learner_profile/js/learner_profile_factory.js
@@ -48,6 +48,7 @@
            var accountPrivacyFieldView,
                profileImageFieldView,
                usernameFieldView,
+                nameFieldView,
                sectionOneFieldViews,
                sectionTwoFieldViews,
                BadgeCollection,
@@ -65,10 +66,7 @@
                required: true,
                editable: 'always',
                showMessages: false,
-                title: StringUtils.interpolate(
-                    gettext('{platform_name} learners can see my:'),
-                    {platform_name: options.platform_name}
-                ),
+                title: gettext('Profile Visibility:'),
                valueAttribute: 'account_privacy',
                options: [
                    ['private', gettext('Limited Profile')],
@@ -97,29 +95,37 @@
                helpMessage: ''
            });

+            nameFieldView = new FieldsView.ReadonlyFieldView({
+                model: accountSettingsModel,
+                screenReaderTitle: gettext('Full Name'),
+                valueAttribute: 'name',
+                helpMessage: ''
+            });
+
            sectionOneFieldViews = [
                new FieldsView.DropdownFieldView({
+                    title: gettext('Location'),
+                    titleVisible: true,
                    model: accountSettingsModel,
                    screenReaderTitle: gettext('Country'),
-                    titleVisible: false,
                    required: true,
                    editable: editable,
                    showMessages: false,
-                    iconName: 'fa-map-marker',
                    placeholderValue: gettext('Add Country'),
                    valueAttribute: 'country',
                    options: options.country_options,
                    helpMessage: '',
                    persistChanges: true
                }),
+
                new AccountSettingsFieldViews.LanguageProficienciesFieldView({
+                    title: gettext('Language'),
+                    titleVisible: true,
                    model: accountSettingsModel,
                    screenReaderTitle: gettext('Preferred Language'),
-                    titleVisible: false,
                    required: false,
                    editable: editable,
                    showMessages: false,
-                    iconName: 'fa-comment',
                    placeholderValue: gettext('Add language'),
                    valueAttribute: 'language_proficiencies',
                    options: options.language_options,
@@ -139,7 +145,8 @@
                    valueAttribute: 'bio',
                    helpMessage: '',
                    persistChanges: true,
-                    messagePosition: 'header'
+                    messagePosition: 'header',
+                    maxCharacters: 300
                })
            ];

@@ -172,9 +179,11 @@
                accountPrivacyFieldView: accountPrivacyFieldView,
                profileImageFieldView: profileImageFieldView,
                usernameFieldView: usernameFieldView,
+                nameFieldView: nameFieldView,
                sectionOneFieldViews: sectionOneFieldViews,
                sectionTwoFieldViews: sectionTwoFieldViews,
-                badgeListContainer: badgeListContainer
+                badgeListContainer: badgeListContainer,
+                platformName: options.platform_name
            });

            getProfileVisibility = function() {
--- a/openedx/features/learner_profile/static/learner_profile/js/spec/views/learner_profile_view_spec.js
+++ b/openedx/features/learner_profile/static/learner_profile/js/spec/views/learner_profile_view_spec.js
@@ -1,6 +1,7 @@
 /* eslint-disable vars-on-top */
 define(
    [
+        'gettext',
        'backbone',
        'jquery',
        'underscore',
@@ -18,7 +19,7 @@ define(
        'js/student_account/views/account_settings_fields',
        'js/views/message_banner'
    ],
-    function(Backbone, $, _, PagingCollection, AjaxHelpers, TemplateHelpers, Helpers, LearnerProfileHelpers,
+    function(gettext, Backbone, $, _, PagingCollection, AjaxHelpers, TemplateHelpers, Helpers, LearnerProfileHelpers,
              FieldViews, UserAccountModel, AccountPreferencesModel, LearnerProfileFields, LearnerProfileView,
              BadgeListContainer, AccountSettingsFieldViews, MessageBannerView) {
        'use strict';
@@ -73,13 +74,19 @@ define(
                    helpMessage: ''
                });

+                var nameFieldView = new FieldViews.ReadonlyFieldView({
+                    model: accountSettingsModel,
+                    valueAttribute: 'name',
+                    helpMessage: ''
+                });
+
                var sectionOneFieldViews = [
                    new FieldViews.DropdownFieldView({
+                        title: gettext('Location'),
                        model: accountSettingsModel,
                        required: false,
                        editable: editable,
                        showMessages: false,
-                        iconName: 'fa-map-marker',
                        placeholderValue: '',
                        valueAttribute: 'country',
                        options: Helpers.FIELD_OPTIONS,
@@ -87,11 +94,11 @@ define(
                    }),

                    new AccountSettingsFieldViews.LanguageProficienciesFieldView({
+                        title: gettext('Language'),
                        model: accountSettingsModel,
                        required: false,
                        editable: editable,
                        showMessages: false,
-                        iconName: 'fa-comment',
                        placeholderValue: 'Add language',
                        valueAttribute: 'language_proficiencies',
                        options: Helpers.FIELD_OPTIONS,
@@ -131,6 +138,7 @@ define(
                        preferencesModel: accountPreferencesModel,
                        accountPrivacyFieldView: accountPrivacyFieldView,
                        usernameFieldView: usernameFieldView,
+                        nameFieldView: nameFieldView,
                        profileImageFieldView: profileImageFieldView,
                        sectionOneFieldViews: sectionOneFieldViews,
                        sectionTwoFieldViews: sectionTwoFieldViews,
--- a/openedx/features/learner_profile/static/learner_profile/js/spec/views/section_two_tab_spec.js
+++ b/openedx/features/learner_profile/static/learner_profile/js/spec/views/section_two_tab_spec.js
@@ -65,7 +65,7 @@ define(
                view.render();
                var bio = view.$el.find('.u-field-bio');
                expect(bio.length).toBe(0);
-                var msg = view.$el.find('span.profile-private--message');
+                var msg = view.$el.find('span.profile-private-message');
                expect(msg.length).toBe(1);
                expect(_.count(msg.html(), messageString)).toBeTruthy();
            };
--- a/openedx/features/learner_profile/static/learner_profile/js/spec_helpers/helpers.js
+++ b/openedx/features/learner_profile/static/learner_profile/js/spec_helpers/helpers.js
@@ -41,11 +41,12 @@ define(['underscore', 'URI', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers'
    var expectSectionOneTobeRendered = function(learnerProfileView) {
        var sectionOneFieldElements = $(learnerProfileView.$('.wrapper-profile-section-one')).find('.u-field');

-        expect(sectionOneFieldElements.length).toBe(4);
+        expect(sectionOneFieldElements.length).toBe(5);
        expectProfileElementContainsField(sectionOneFieldElements[0], learnerProfileView.options.profileImageFieldView);
        expectProfileElementContainsField(sectionOneFieldElements[1], learnerProfileView.options.usernameFieldView);
+        expectProfileElementContainsField(sectionOneFieldElements[2], learnerProfileView.options.nameFieldView);

-        _.each(_.rest(sectionOneFieldElements, 2), function(sectionFieldElement, fieldIndex) {
+        _.each(_.rest(sectionOneFieldElements, 3), function(sectionFieldElement, fieldIndex) {
            expectProfileElementContainsField(
                sectionFieldElement,
                learnerProfileView.options.sectionOneFieldViews[fieldIndex]
@@ -89,10 +90,10 @@ define(['underscore', 'URI', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers'
        );

        if (othersProfile) {
-            expect($('.profile-private--message').text())
+            expect($('.profile-private-message').text())
                .toBe('This learner is currently sharing a limited profile.');
        } else {
-            expect($('.profile-private--message').text()).toBe('You are currently sharing a limited profile.');
+            expect($('.profile-private-message').text()).toBe('You are currently sharing a limited profile.');
        }
    };

--- 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
@@ -6,9 +6,10 @@
            'gettext', 'jquery', 'underscore', 'backbone', 'edx-ui-toolkit/js/utils/html-utils',
            'common/js/components/views/tabbed_view',
            'learner_profile/js/views/section_two_tab',
-            'text!learner_profile/templates/learner_profile.underscore'
+            'text!learner_profile/templates/learner_profile.underscore',
+            'edx-ui-toolkit/js/utils/string-utils'
        ],
-        function(gettext, $, _, Backbone, HtmlUtils, TabbedView, SectionTwoTab, learnerProfileTemplate) {
+        function(gettext, $, _, Backbone, HtmlUtils, TabbedView, SectionTwoTab, learnerProfileTemplate, StringUtils) {
            var LearnerProfileView = Backbone.View.extend({

                initialize: function(options) {
@@ -53,10 +54,19 @@
                        ownProfile: this.options.ownProfile
                    });

+
                    HtmlUtils.setHtml(this.$el, HtmlUtils.template(learnerProfileTemplate)({
                        username: self.options.accountSettingsModel.get('username'),
+                        name: self.options.accountSettingsModel.get('name'),
                        ownProfile: self.options.ownProfile,
-                        showFullProfile: self.showFullProfile()
+                        showFullProfile: self.showFullProfile(),
+                        profile_header: gettext('My Profile'),
+                        profile_subheader:
+                            StringUtils.interpolate(
+                                gettext('Build out your profile to personalize your identity on {platform_name}.'), {
+                                    platform_name: self.options.platformName
+                                }
+                            )
                    }));
                    this.renderFields();

@@ -98,7 +108,7 @@
                            Backbone.history.start();
                        }
                    } else {
-                        this.$el.find('.account-settings-container').append(this.sectionTwoView.render().el);
+                        this.$el.find('.wrapper-profile-section-container-two').append(this.sectionTwoView.render().el);
                    }
                    return this;
                },
@@ -120,6 +130,10 @@
                        fieldView.delegateEvents();
                    }

+                    // 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);
+                    }
                    this.$('.profile-section-one-fields').append(this.options.usernameFieldView.render().el);

                    imageView = this.options.profileImageFieldView;
--- a/openedx/features/learner_profile/static/learner_profile/templates/learner_profile.underscore
+++ b/openedx/features/learner_profile/static/learner_profile/templates/learner_profile.underscore
@@ -1,15 +1,25 @@
 <div class="profile <%- ownProfile ? 'profile-self' : 'profile-other' %>">
    <div class="wrapper-profile-field-account-privacy"></div>
    <div class="wrapper-profile-sections account-settings-container">
-        <div class="wrapper-profile-section-one">
-            <div class="profile-image-field">
+        <% if (ownProfile) { %>
+            <div class="profile-header">
+                <div class="header"> <%- profile_header %></div>
+                <div class="subheader"> <%- profile_subheader %></div>
            </div>
-            <div class="profile-section-one-fields">
+        <% } %>
+        <div class="wrapper-profile-section-container-one">
+            <div class="wrapper-profile-section-one">
+                <div class="profile-image-field">
+                </div>
+                <div class="profile-section-one-fields">
+                </div>
+            </div>
+            <div class="ui-loading-error is-hidden">
+                <span class="fa fa-exclamation-triangle message-error" aria-hidden="true"></span>
+                <span class="copy"><%- gettext("An error occurred. Try loading the page again.") %></span>
            </div>
        </div>
-        <div class="ui-loading-error is-hidden">
-            <span class="fa fa-exclamation-triangle message-error" aria-hidden="true"></span>
-            <span class="copy"><%- gettext("An error occurred. Try loading the page again.") %></span>
+        <div class="wrapper-profile-section-container-two">
        </div>
    </div>
 </div>
--- a/openedx/features/learner_profile/static/learner_profile/templates/section_two.underscore
+++ b/openedx/features/learner_profile/static/learner_profile/templates/section_two.underscore
@@ -2,9 +2,9 @@
    <div class="field-container"></div>
    <% if (!showFullProfile) { %>
        <% if(ownProfile) { %>
-            <span class="profile-private--message" tabindex="0"><%- gettext("You are currently sharing a limited profile.") %></span>
+            <span class="profile-private-message"><%- gettext("You are currently sharing a limited profile.") %></span>
        <% } else {  %>
-            <span class="profile-private--message" tabindex="0"><%- gettext("This learner is currently sharing a limited profile.") %></span>
+            <span class="profile-private-message"><%- gettext("This learner is currently sharing a limited profile.") %></span>
        <% } %>
    <% } %>
 </div>