Merge pull request #14673 from edx/aj/missed_headers_styles

Updates to correct a header styling issue

common/lib/xmodule/xmodule/js/fixtures/jsinput_problem.html

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

common/lib/xmodule/xmodule/js/fixtures/problem_content.html

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

common/lib/xmodule/xmodule/js/fixtures/problem_content_1240.html

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

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();

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);

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,

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);

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));

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;

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);

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;

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);

common/static/common/templates/components/paging-header.underscore

 <% 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">

common/static/common/templates/discussion/new-post.underscore

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

common/static/common/templates/discussion/response-comment-edit.underscore

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

common/static/common/templates/discussion/thread-edit.underscore

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

common/static/common/templates/discussion/thread-response-edit.underscore

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

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(

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

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();
 

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();

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;

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>

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;

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;

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>

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}">

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>

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>