Merge pull request #14673 from edx/aj/missed_headers_styles

Updates to correct a header styling issue
2017-03-20 10:55:15 -04:00
parent 44a8e1b874 91fce2a92b
commit 8ec9012eac
29 changed files with 77 additions and 42 deletions
--- a/common/lib/xmodule/xmodule/js/fixtures/jsinput_problem.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/jsinput_problem.html
@@ -1,4 +1,4 @@
-<h3 class="hd hd-2 problem-header">Custom Javascript Display and Grading</h3>
+<h3 class="hd hd-3 problem-header">Custom Javascript Display and Grading</h3>

 <div class="problem">
    <div>
--- a/common/lib/xmodule/xmodule/js/fixtures/problem_content.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/problem_content.html
@@ -1,4 +1,4 @@
-<h3 class="hd hd-2 problem-header">Problem Header</h3>
+<h3 class="hd hd-3 problem-header">Problem Header</h3>

 <div class='problem-progress'></div>

--- a/common/lib/xmodule/xmodule/js/fixtures/problem_content_1240.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/problem_content_1240.html
@@ -1,4 +1,4 @@
-<h3 class="hd hd-2 problem-header">Problem Header</h3>
+<h3 class="hd hd-3 problem-header">Problem Header</h3>

 <div class='problem-progress'></div>

--- a/common/static/common/js/discussion/views/discussion_inline_view.js
+++ b/common/static/common/js/discussion/views/discussion_inline_view.js
@@ -24,7 +24,6 @@

        initialize: function(options) {
            var match;
-
            this.$el = options.el;
            this.readOnly = options.readOnly;
            this.showByDefault = options.showByDefault || false;
@@ -32,6 +31,12 @@
            this.listenTo(this.model, 'change', this.render);
            this.escKey = 27;

+            if (options.startHeader !== undefined) {
+                this.startHeader = options.startHeader;
+            } else {
+                this.startHeader = 4; // Start the header levels at H<startHeader>
+            }
+
            match = this.page_re.exec(window.location.href);
            if (match) {
                this.page = parseInt(match[1], 10);
@@ -73,7 +78,6 @@
            var discussionHtml,
                user = new DiscussionUser(response.user_info),
                self = this;
-
            $elem.focus();

            window.user = user;
@@ -120,6 +124,7 @@
                collection: this.discussion,
                course_settings: this.courseSettings,
                topicId: discussionId,
+                startHeader: this.startHeader,
                is_commentable_cohorted: response.is_commentable_cohorted
            });

@@ -146,6 +151,7 @@
                el: this.$('.forum-content'),
                model: thread,
                mode: 'inline',
+                startHeader: this.startHeader,
                courseSettings: this.courseSettings
            });
            this.threadView.render();
--- a/common/static/common/js/discussion/views/discussion_thread_edit_view.js
+++ b/common/static/common/js/discussion/views/discussion_thread_edit_view.js
@@ -16,6 +16,7 @@
            initialize: function(options) {
                this.container = options.container || $('.thread-content-wrapper');
                this.mode = options.mode || 'inline';
+                this.startHeader = options.startHeader;
                this.course_settings = options.course_settings;
                this.threadType = this.model.get('thread_type');
                this.topicId = this.model.get('commentable_id');
@@ -28,8 +29,10 @@
                var formId = _.uniqueId('form-'),
                    threadTypeTemplate = edx.HtmlUtils.template($('#thread-type-template').html()),
                    $threadTypeSelector = $(threadTypeTemplate({form_id: formId}).toString()),
+                    context,
                    mainTemplate = edx.HtmlUtils.template($('#thread-edit-template').html());
-                edx.HtmlUtils.setHtml(this.$el, mainTemplate(this.model.toJSON()));
+                context = $.extend({mode: this.mode, startHeader: this.startHeader}, this.model.attributes);
+                edx.HtmlUtils.setHtml(this.$el, mainTemplate(context));
                this.container.append(this.$el);
                this.$submitBtn = this.$('.post-update');
                this.addField($threadTypeSelector);
--- a/common/static/common/js/discussion/views/discussion_thread_show_view.js
+++ b/common/static/common/js/discussion/views/discussion_thread_show_view.js
@@ -30,15 +30,16 @@
                var _ref;
                DiscussionThreadShowView.__super__.initialize.call(this);
                this.mode = options.mode || 'inline';
+                this.startHeader = options.startHeader;
                if ((_ref = this.mode) !== 'tab' && _ref !== 'inline') {
                    throw new Error('invalid mode: ' + this.mode);
                }
            };

            DiscussionThreadShowView.prototype.renderTemplate = function() {
-                var context;
-                context = $.extend({
+                var context = $.extend({
                    mode: this.mode,
+                    startHeader: this.startHeader,
                    flagged: this.model.isFlagged(),
                    author_display: this.getAuthorDisplay(),
                    cid: this.model.cid,
--- a/common/static/common/js/discussion/views/discussion_thread_view.js
+++ b/common/static/common/js/discussion/views/discussion_thread_view.js
@@ -80,6 +80,7 @@
                this.mode = options.mode || 'inline';
                this.context = options.context || 'course';
                this.options = _.extend({}, options);
+                this.startHeader = options.startHeader;
                if ((_ref = this.mode) !== 'tab' && _ref !== 'inline') {
                    throw new Error('invalid mode: ' + this.mode);
                }
@@ -91,6 +92,7 @@
                        self.model = collection.get(id);
                    }
                });
+
                this.createShowView();
                this.responses = new Comments();
                this.loadedResponses = false;
@@ -116,7 +118,8 @@
            };

            DiscussionThreadView.prototype.renderTemplate = function() {
-                var container, templateData;
+                var container,
+                    templateData;
                this.template = _.template($('#thread-template').html());
                container = $('#discussion-container');
                if (!container.length) {
@@ -124,6 +127,7 @@
                }
                templateData = _.extend(this.model.toJSON(), {
                    readOnly: this.readOnly,
+                    startHeader: this.startHeader + 1, // this is a child so headers should be increased
                    can_create_comment: container.data('user-create-comment')
                });
                return this.template(templateData);
@@ -299,7 +303,8 @@
                var view;
                response.set('thread', this.model);
                view = new ThreadResponseView($.extend({
-                    model: response
+                    model: response,
+                    startHeader: this.startHeader + 1 // this is a child so headers should be increased
                }, options));
                view.on('comment:add', this.addComment);
                view.on('comment:endorse', this.endorseThread);
@@ -396,6 +401,7 @@
                    model: this.model,
                    mode: this.mode,
                    context: this.context,
+                    startHeader: this.startHeader,
                    course_settings: this.options.courseSettings
                });
                this.editView.bind('thread:updated thread:cancel_edit', this.closeEditView);
@@ -415,7 +421,8 @@
            DiscussionThreadView.prototype.createShowView = function() {
                this.showView = new DiscussionThreadShowView({
                    model: this.model,
-                    mode: this.mode
+                    mode: this.mode,
+                    startHeader: this.startHeader
                });
                this.showView.bind('thread:_delete', this._delete);
                return this.showView.bind('thread:edit', this.edit);
--- a/common/static/common/js/discussion/views/new_post_view.js
+++ b/common/static/common/js/discussion/views/new_post_view.js
@@ -36,6 +36,7 @@
            NewPostView.prototype.initialize = function(options) {
                var _ref;
                this.mode = options.mode || 'inline';
+                this.startHeader = options.startHeader;
                if ((_ref = this.mode) !== 'tab' && _ref !== 'inline') {
                    throw new Error('invalid mode: ' + this.mode);
                }
@@ -45,12 +46,14 @@
            };

            NewPostView.prototype.render = function() {
-                var context, threadTypeTemplate;
+                var context,
+                    threadTypeTemplate;
                context = _.clone(this.course_settings.attributes);
                _.extend(context, {
                    cohort_options: this.getCohortOptions(),
                    is_commentable_cohorted: this.is_commentable_cohorted,
                    mode: this.mode,
+                    startHeader: this.startHeader,
                    form_id: this.mode + (this.topicId ? '-' + this.topicId : '')
                });
                this.$el.html(_.template($('#new-post-template').html())(context));
--- a/common/static/common/js/discussion/views/response_comment_edit_view.js
+++ b/common/static/common/js/discussion/views/response_comment_edit_view.js
@@ -22,7 +22,8 @@
        this.ResponseCommentEditView = (function(_super) {
            __extends(ResponseCommentEditView, _super);

-            function ResponseCommentEditView() {
+            function ResponseCommentEditView(options) {
+                this.options = options;
                return ResponseCommentEditView.__super__.constructor.apply(this, arguments);
            }

@@ -40,8 +41,10 @@
            };

            ResponseCommentEditView.prototype.render = function() {
+                var context = $.extend({mode: this.options.mode, startHeader: this.options.startHeader},
+                    this.model.attributes);
                this.template = _.template($('#response-comment-edit-template').html());
-                this.$el.html(this.template(this.model.toJSON()));
+                this.$el.html(this.template(context));
                this.delegateEvents();
                DiscussionUtil.makeWmdEditor(this.$el, $.proxy(this.$, this), 'edit-comment-body');
                return this;
--- a/common/static/common/js/discussion/views/response_comment_view.js
+++ b/common/static/common/js/discussion/views/response_comment_view.js
@@ -45,7 +45,8 @@
                return this.$el.find(selector);
            };

-            ResponseCommentView.prototype.initialize = function() {
+            ResponseCommentView.prototype.initialize = function(options) {
+                this.startHeader = options.startHeader;
                return ResponseCommentView.__super__.initialize.call(this);
            };

@@ -84,7 +85,8 @@
                        this.showView = null;
                    }
                    this.editView = new ResponseCommentEditView({
-                        model: this.model
+                        model: this.model,
+                        startHeader: this.startHeader
                    });
                    this.editView.bind('comment:update', this.update);
                    this.editView.bind('comment:cancel_edit', this.cancelEdit);
--- a/common/static/common/js/discussion/views/thread_response_edit_view.js
+++ b/common/static/common/js/discussion/views/thread_response_edit_view.js
@@ -35,13 +35,16 @@
                return this.$el.find(selector);
            };

-            ThreadResponseEditView.prototype.initialize = function() {
+            ThreadResponseEditView.prototype.initialize = function(options) {
+                this.options = options;
                return ThreadResponseEditView.__super__.initialize.call(this);
            };

            ThreadResponseEditView.prototype.render = function() {
+                var context = $.extend({mode: this.options.mode, startHeader: this.options.startHeader},
+                    this.model.attributes);
                this.template = _.template($('#thread-response-edit-template').html());
-                this.$el.html(this.template(this.model.toJSON()));
+                this.$el.html(this.template(context));
                this.delegateEvents();
                DiscussionUtil.makeWmdEditor(this.$el, $.proxy(this.$, this), 'edit-post-body');
                return this;
--- a/common/static/common/js/discussion/views/thread_response_view.js
+++ b/common/static/common/js/discussion/views/thread_response_view.js
@@ -59,6 +59,7 @@
            };

            ThreadResponseView.prototype.initialize = function(options) {
+                this.startHeader = options.startHeader;
                this.collapseComments = options.collapseComments;
                this.createShowView();
                this.readOnly = $('.discussion-module').data('read-only');
@@ -155,7 +156,8 @@
                    self = this;
                comment.set('thread', this.model.get('thread'));
                view = new ResponseCommentView({
-                    model: comment
+                    model: comment,
+                    startHeader: this.startHeader
                });
                view.render();
                if (this.readOnly) {
@@ -246,7 +248,8 @@
                    this.editView.model = this.model;
                } else {
                    this.editView = new ThreadResponseEditView({
-                        model: this.model
+                        model: this.model,
+                        startHeader: this.startHeader
                    });
                    this.editView.bind('response:update', this.update);
                    return this.editView.bind('response:cancel_edit', this.cancelEdit);
--- a/common/static/common/templates/components/paging-header.underscore
+++ b/common/static/common/templates/components/paging-header.underscore
@@ -1,5 +1,5 @@
 <% if (!_.isUndefined(srInfo)) { %>
-  <h2 class="sr" id="<%- srInfo.id %>"><%- srInfo.text %></h2>
+  <h3 class="sr" id="<%- srInfo.id %>"><%- srInfo.text %></h3>
 <% } %>
 <div class="search-tools listing-tools">
    <span class="search-count listing-count">
--- a/common/static/common/templates/discussion/new-post.underscore
+++ b/common/static/common/templates/discussion/new-post.underscore
@@ -1,5 +1,6 @@
 <form class="forum-new-post-form">
-    <h2 class="thread-title"><%- gettext("Add a Post") %></h2>
+    <h<%- startHeader %> class="thread-title"><%- gettext("Add a Post") %></h<%- startHeader %>>
+
    <% if (mode === 'inline') { %>
        <button class="btn-default add-post-cancel">
            <span class="sr"><%- gettext('Cancel') %></span>
--- a/common/static/common/templates/discussion/response-comment-edit.underscore
+++ b/common/static/common/templates/discussion/response-comment-edit.underscore
@@ -1,5 +1,5 @@
 <div class="edit-post-form" id="comment_<%- id %>">
-    <h1><%- gettext("Editing comment") %></h1>
+    <h<%- startHeader %> ><%- gettext("Editing comment") %></h<%- startHeader%>>
    <ul class="edit-comment-form-errors"></ul>
    <div class="form-row">
        <div class="edit-comment-body" name="body" data-id="<%- id %>"><%- body %></div>
--- a/common/static/common/templates/discussion/thread-edit.underscore
+++ b/common/static/common/templates/discussion/thread-edit.underscore
@@ -1,4 +1,4 @@
-<h2 class="thread-title"><%- gettext("Editing post") %></h2>
+<h<%- startHeader%> class="thread-title"><%- gettext("Editing post") %></h<%- startHeader%>>
 <ul class="post-errors"></ul>
 <div class="forum-edit-post-form-wrapper"></div>
 <div class="post-field">
--- a/common/static/common/templates/discussion/thread-response-edit.underscore
+++ b/common/static/common/templates/discussion/thread-response-edit.underscore
@@ -1,5 +1,5 @@
 <div class="edit-post-form">
-    <h1><%- gettext("Editing response") %></h1>
+    <h<%- startHeader %>><%- gettext("Editing response") %></h<%- startHeader %>>
    <ul class="edit-post-form-errors"></ul>
    <div class="form-row">
        <div class="edit-post-body" name="body" data-id="<%- id %>"><%- body %></div>
--- a/common/static/common/templates/discussion/thread-show.underscore
+++ b/common/static/common/templates/discussion/thread-show.underscore
@@ -17,7 +17,7 @@
            </div>
        <% } %>
        <div class="post-header-content">
-            <h2 class="post-title"><%- title %></h2>
+            <h<%- startHeader %> class="post-title"><%- title %></h<%- startHeader%>>
            <p class="posted-details">
            <%
            var timeAgoHtml = interpolate(
--- a/common/static/common/templates/discussion/thread.underscore
+++ b/common/static/common/templates/discussion/thread.underscore
@@ -24,7 +24,8 @@
            </div>
            <% if (can_create_comment && !readOnly) { %>
            <form class="discussion-reply-new" data-id="<%- id %>">
-                <h3><%- gettext("Add a response:") %></h3>
+                <h<%- startHeader %> class="add-response"><%- gettext("Add a response:") %></h<%- startHeader %> >
+
                <ul class="discussion-errors"></ul>
                <div class="reply-body" data-id="<%- id %>"></div>
                <div class="reply-post-control">
--- a/lms/djangoapps/discussion/static/discussion/js/discussion_board_factory.js
+++ b/lms/djangoapps/discussion/static/discussion/js/discussion_board_factory.js
@@ -55,7 +55,8 @@
                    el: $('.new-post-article'),
                    collection: discussion,
                    course_settings: courseSettings,
-                    mode: 'tab'
+                    mode: 'tab',
+                    startHeader: 2
                });
                newPostView.render();

--- a/lms/djangoapps/discussion/static/discussion/js/discussion_router.js
+++ b/lms/djangoapps/discussion/static/discussion/js/discussion_router.js
@@ -23,6 +23,12 @@
                    this.courseSettings = options.courseSettings;
                    this.discussionBoardView = options.discussionBoardView;
                    this.newPostView = options.newPostView;
+                    if (options.startHeader !== undefined) {
+                        this.startHeader = options.startHeader;
+                    } else {
+                        this.startHeader = 2; // Start the header levels at H<startHeader>
+                    }
+
                },

                start: function() {
@@ -95,6 +101,7 @@
                        el: $('.forum-content'),
                        model: this.thread,
                        mode: 'tab',
+                        startHeader: this.startHeader,
                        courseSettings: this.courseSettings
                    });
                    this.main.render();
--- a/lms/djangoapps/teams/static/teams/js/views/team_discussion.js
+++ b/lms/djangoapps/teams/static/teams/js/views/team_discussion.js
@@ -15,7 +15,8 @@
                    var discussionInlineView = new DiscussionInlineView({
                        el: this.$el,
                        showByDefault: true,
-                        readOnly: this.readOnly
+                        readOnly: this.readOnly,
+                        startHeader: 3
                    });
                    discussionInlineView.render();
                    return this;
--- a/lms/djangoapps/teams/static/teams/templates/team-profile.underscore
+++ b/lms/djangoapps/teams/static/teams/templates/team-profile.underscore
@@ -8,7 +8,7 @@
    </div>

    <div class="page-content-secondary">
-        <h4 class="team-detail-header"><%- gettext("Team Details") %></h4>
+        <h3 class="team-detail-header"><%- gettext("Team Details") %></h3>
        <% if (isMember) { %>
            <div class="team-user-membership-status">
                <p><%- gettext("You are a member of this team.") %></p>
--- a/lms/static/sass/base/_headings.scss
+++ b/lms/static/sass/base/_headings.scss
@@ -115,17 +115,12 @@ $headings-base-color:                       $gray-d2;

 .xblock .xblock {

-    h3 {
+    h2 {
        @extend %hd-2;
        font-weight: $headings-font-weight-bold;
        // override external modules and xblocks that use inline CSS
        text-transform: initial;

-        &.unit-title {
-            margin-bottom: 0;
-            font-size: 1.5em;
-        }
-
        &.discussion-module-title {
            margin-bottom: 0;
            display: inline-block;
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -446,8 +446,6 @@ html.video-fullscreen {
          }

          h2 {
-            @include float(right);
-            @include text-align(right);
            @include border-right(0);
            @include padding-right(0);
            margin: 12px 0 0;
--- a/lms/templates/components/header/header.underscore
+++ b/lms/templates/components/header/header.underscore
@@ -9,7 +9,7 @@
            <% }) %>
            </nav>
        <% } %>
-        <h3 class="hd hd-2 page-title"><%- title %></h3>
+        <h2 class="hd hd-2 page-title"><%- title %></h2>
        <p class="page-description"><%- description %></p>
    </div>
    <div class="page-header-secondary"></div>
--- a/lms/templates/discussion/_discussion_inline.html
+++ b/lms/templates/discussion/_discussion_inline.html
@@ -14,7 +14,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
    data-user-create-subcomment="${json_dumps(can_create_subcomment)}"
    data-read-only="${'false' if can_create_thread else 'true'}">
    <div class="discussion-module-header">
-        <h3 class="discussion-module-title">${_(display_name)}</h3>
+        <h3 class="hd hd-3 discussion-module-title">${_(display_name)}</h3>
        <div class="inline-discussion-topic"><span class="inline-discussion-topic-title">${_("Topic:")}</span> ${discussion_category} / ${discussion_target}</div>
    </div>
    <button class="discussion-show btn" data-discussion-id="${discussion_id}">
--- a/lms/templates/lti.html
+++ b/lms/templates/lti.html
@@ -3,7 +3,7 @@ import json
 from django.utils.translation import ugettext as _
 %>

-<h3 class="hd hd-2 problem-header">
+<h3 class="hd hd-3 problem-header">
    ## Translators:  "External resource" means that this learning module is hosted on a platform external to the edX LMS
    ${display_name} (${_('External resource')})
 </h3>
--- a/lms/templates/problem.html
+++ b/lms/templates/problem.html
@@ -5,7 +5,7 @@ from openedx.core.djangolib.markup import HTML
 %>

 <%namespace name='static' file='static_content.html'/>
-<h3 class="hd hd-2 problem-header" id="${ short_id }-problem-title" aria-describedby="${ id }-problem-progress" tabindex="-1">
+<h3 class="hd hd-3 problem-header" id="${ short_id }-problem-title" aria-describedby="${ id }-problem-progress" tabindex="-1">
  ${ problem['name'] }
 </h3>