Commit 91fce2a9 by Albert St. Aubin

Updates to correct a header styling issue and to make the starting header level selectable

parent bf08c6ed
<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>
......
<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>
......
<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>
......
......@@ -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();
......
......@@ -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);
......
......@@ -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,
......
......@@ -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);
......
......@@ -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));
......
......@@ -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;
......
......@@ -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);
......
......@@ -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;
......
......@@ -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);
......
<% 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">
......
<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>
......
<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>
......
<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">
......
<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>
......
......@@ -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(
......
......@@ -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">
......
......@@ -55,7 +55,8 @@
el: $('.new-post-article'),
collection: discussion,
course_settings: courseSettings,
mode: 'tab'
mode: 'tab',
startHeader: 2
});
newPostView.render();
......
......@@ -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();
......
......@@ -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;
......
......@@ -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>
......
......@@ -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;
......
......@@ -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;
......
......@@ -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>
......
......@@ -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}">
......
......@@ -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>
......
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment