Skip to content

E
edx-platform
Commit 41620e05 by alisan617
Options

new discussion post form layout

parent bde0f7b2
Showing with 106 additions and 95 deletions
common/static/common/js/discussion/views/new_post_view.js
......@@ -97,6 +97,9 @@
};
NewPostView.prototype.events = {
'keypress .forum-new-post-form input:not(.wmd-input)': function(event) {
return DiscussionUtil.ignoreEnterKey(event);
},
'submit .forum-new-post-form': 'createPost',
'change .post-option-input': 'postOptionChange',
'click .cancel': 'cancel',
......
common/static/common/templates/discussion/new-post.underscore
<form class="forum-new-post-form">
<h3 class="thread-title"><%- gettext("Add a Post") %></h3>
<% if (mode === 'inline') { %>
<h3 class="thread-title"><%- gettext("Add a Post") %></h3>
<button class="btn-default add-post-cancel">
<span class="sr"><%- gettext('Cancel') %></span>
<span class="fa fa-close" aria-hidden="true"></span>
......@@ -13,28 +13,36 @@
<label class="field-label">
<span class="field-label-text">
<% //Translators: This labels the selector for which group of students can view a post %>
<%- gettext("Visible To:") %>
</span><select aria-describedby="field_help_visible_to" class="field-input js-group-select" name="group_id" <% if (!is_commentable_cohorted) { print("disabled"); } %>>
<option value=""><%- gettext("All Groups") %></option>
<% _.each(cohort_options, function(opt) { %>
<option value="<%- opt.value %>" <% if (opt.selected) { print("selected"); } %>><%- opt.text %></option>
<% }); %>
</select>
</label><div class="field-help" id="field_help_visible_to">
<%- gettext("Discussion admins, moderators, and TAs can make their posts visible to all students or specify a single cohort.") %>
</div>
<%- gettext("Visible to") %>
</span>
<div class="field-help" id="field_help_visible_to">
<%- gettext("Discussion admins, moderators, and TAs can make their posts visible to all students or specify a single cohort.") %>
</div>
<div class="field-input">
<select aria-describedby="field_help_visible_to" class="post-topic field-input js-group-select" name="group_id" <% if (!is_commentable_cohorted) { print("disabled"); } %>>
<option value=""><%- gettext("All Groups") %></option>
<% _.each(cohort_options, function(opt) { %>
<option value="<%- opt.value %>" <% if (opt.selected) { print("selected"); } %>><%- opt.text %></option>
<% }); %>
</select>
</div>
</label>
</div>
<% } %>
<div class="post-field">
<label class="field-label">
<span class="field-label-text"><%- gettext("Title:") %></span><input aria-describedby="field_help_title" type="text" class="js-post-title field-input" name="title">
</label><span class="field-help" id="field_help_title">
<%- gettext("Add a clear and descriptive title to encourage participation.") %>
</span>
<span class="field-label-text"><%- gettext("Title") %></span>
<div class="field-help" id="field_help_title">
<%- gettext("Add a clear and descriptive title to encourage participation.") %>
</div>
<div>
<input aria-describedby="field_help_title" type="text" class="js-post-title field-input" name="title">
</div>
</label>
</div>
<div class="post-field">
<p class="sr-only field-help" id="new-post-editor-description"><%- gettext('Enter your question or comment.') %></p>
<div>
<span class="field-label-text field-label-text-full" id="new-post-editor-description"><%- gettext('Your question or idea') %></span>
<div class="js-post-body editor" aria-describedby="new-post-editor-description" name="body"></div>
</div>
<div class="post-options">
......@@ -52,11 +60,11 @@
<label class="post-option">
<input type="checkbox" name="anonymous_to_peers" class="post-option-input js-anon-peers">
<%- gettext("post anonymously to classmates") %>
</label>
</div>
<% } %>
</div>
<div>
<button type="submit" class="btn-brand submit"><%- gettext('Add Post') %></button>
<button type="submit" class="btn-brand submit"><%- gettext('Submit') %></button>
<button type="button" class="btn cancel"><%- gettext('Cancel') %></button>
</div>
</form>
common/static/common/templates/discussion/thread-edit.underscore
<h1><%- gettext("Editing post") %></h1>
<h4><%- gettext("Editing post") %></h4>
<ul class="post-errors"></ul>
<div class="forum-edit-post-form-wrapper"></div>
<div class="post-field">
<label class="field-label">
<span class="field-label-text"><%- gettext("Title:") %></span><input aria-describedby="field_help_title" type="text" class="edit-post-title field-input" name="title" value="<%- title %>">
</label><span class="field-help" id="field_help_title">
<%- gettext("Add a clear and descriptive title to encourage participation.") %>
</span>
<span class="field-label-text"><%- gettext("Title") %></span>
<div class="field-help" id="field_help_title">
<%- gettext("Add a clear and descriptive title to encourage participation.") %>
</div>
<input aria-describedby="field_help_title" type="text" class="edit-post-title field-input" name="title" value="<%- title %>">
</label>
</div>
<div class="form-row post-field">
<p class="sr-only field-help" id="edit-post-editor-description"><%- gettext('Edit your post below.') %></p>
......
common/static/common/templates/discussion/thread-type.underscore
......@@ -2,23 +2,27 @@
<div class="field-label">
<span class="field-label-text">
<% // Translators: This is the label for a control to select a forum post type %>
<%- gettext("Post type:") %>
</span><fieldset class="field-input">
<legend class="sr"><%- gettext("Post type:") %></legend>
<input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="post-type-input" id="<%= form_id %>-post-type-question" value="question">
<label for="<%= form_id %>-post-type-question" class="post-type-label">
<span class="icon fa fa-question" aria-hidden="true"></span>
<% // Translators: This is a forum post type %>
<%- gettext("Question") %>
</label>
<input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="post-type-input" id="<%= form_id %>-post-type-discussion" value="discussion" checked>
<label for="<%= form_id %>-post-type-discussion" class="post-type-label">
<span class="icon fa fa-comments" aria-hidden="true"></span>
<% // Translators: This is a forum post type %>
<%- gettext("Discussion") %>
</label>
</fieldset>
</div><span class="field-help" id="field_help_post_type">
<%- gettext("Questions raise issues that need answers. Discussions share ideas and start conversations.") %>
</span>
<%- gettext("Post type") %>
</span>
<div class="field-help" id="field_help_post_type">
<%- gettext("Questions raise issues that need answers. Discussions share ideas and start conversations.") %>
</div>
<div class="field-label">
<fieldset class="field-input">
<legend class="sr"><%- gettext("Post type") %></legend>
<input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="post-type-input" id="<%= form_id %>-post-type-question" value="question">
<label for="<%= form_id %>-post-type-question" class="post-type-label">
<span class="icon fa fa-question" aria-hidden="true"></span>
<% // Translators: This is a forum post type %>
<%- gettext("Question") %>
</label>
<input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="post-type-input" id="<%= form_id %>-post-type-discussion" value="discussion" checked>
<label for="<%= form_id %>-post-type-discussion" class="post-type-label">
<span class="icon fa fa-comments" aria-hidden="true"></span>
<% // Translators: This is a forum post type %>
<%- gettext("Discussion") %>
</label>
</fieldset>
</div>
</div>
</div>
common/static/common/templates/discussion/topic.underscore
<label class="field-label">
<span class="field-label-text">
<%- gettext("Topic Area:") %>
</span><select class="post-topic field-input" aria-describedby="field_help_topic_area" required>
<%= edx.HtmlUtils.ensureHtml(topics_html) %>
</select>
</label><span class="field-help" id="field_help_topic_area">
<%- gettext("Add your post to a relevant topic to help others find it.") %>
</span>
<div class="post-field">
<label class="field-label">
<span class="field-label-text">
<%- gettext("Topic area") %>
</span>
<div class="field-help" id="field_help_topic_area">
<%- gettext("Add your post to a relevant topic to help others find it.") %>
</div>
<div class="field-input">
<select class="post-topic field-input" aria-describedby="field_help_topic_area" required>
<%= edx.HtmlUtils.ensureHtml(topics_html) %>
</select>
</div>
</label>
</div>
lms/static/sass/discussion/_discussion.scss
......@@ -356,7 +356,7 @@ section.discussion {
margin-bottom: $baseline;
font-size: $forum-x-large-font-size;
color: $gray-d3;
font-weight: 700;
font-weight: 600;
}
}
......
lms/static/sass/discussion/elements/_editor.scss
......@@ -44,7 +44,6 @@
.wmd-panel {
width: 100%;
min-width: 500px;
}
.wmd-button-bar {
......
lms/static/sass/discussion/views/_create-edit-post.scss
......@@ -11,23 +11,25 @@
padding: $baseline;
max-width: 1180px;
label,
.field-label-text {
-webkit-font-smoothing: initial;
}
.post-errors {
padding: 0 !important;
list-style: none !important;
}
.post-field {
margin-bottom: $baseline;
margin-bottom: $baseline * 1.5;
.field-label {
display: inline-block;
width: 50%;
vertical-align: top;
margin: 0;
.field-input {
display: inline-block;
width: 100%;
width: 70%;
vertical-align: top;
&:not([type="text"]) {
border-width: 0;
......@@ -36,30 +38,38 @@
}
.field-label-text {
display: inline-block;
width: 25%;
vertical-align: top;
font-size: $forum-small-font-size;
line-height: 40px;
margin: $baseline 0 0 0;
display: block;
}
.field-label-text + .field-input {
width: 75%;
}
.js-post-title {
width: 85%;
}
}
// UI: support text for input fields
.field-help {
box-sizing: border-box;
display: inline-block;
@include padding-left($baseline);
width: 50%;
margin: ($baseline / 4) 0 ($baseline / 4) 0;
font-size: $forum-small-font-size;
line-height: 1.5;
&#field_help_post_type {
margin-top: ($baseline / 2) 0 ($baseline / 3) 0;
}
&#new-post-editor-description {
@include padding-left(0);
}
}
.field-input {
padding: 0;
border: none;
}
}
.post-options {
......@@ -82,24 +92,18 @@
}
.post-type-label {
@extend %cont-truncated;
@include margin(0, $baseline / 2, 0, 0);
@include white-button;
font-size: $forum-base-font-size;
box-sizing: border-box;
display: inline-block;
padding: 0 ($baseline/2);
width: 48%;
height: 40px;
padding: 0 $baseline;
height: 36px;
text-align: center;
color: $gray-d3;
border: 1px solid $forum-color-border;
font-weight: 600;
line-height: 36px;
@include float(left);
&:last-of-type {
@include float(right);
}
.icon {
@include margin-right($baseline/4);
......@@ -111,7 +115,7 @@
background-color: $forum-color-active-thread;
color: $forum-color-active-text;
background-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: none;
}
.post-type-input:focus + .post-type-label {
......@@ -125,7 +129,6 @@
padding: 0 $baseline/2;
height: 40px;
color: #333;
font-weight: 700;
font-size: $forum-large-font-size;
font-family: 'Open Sans', sans-serif;
}
......@@ -139,25 +142,16 @@
box-sizing: border-box;
display: inline-block;
@include margin-right($baseline);
border: 1px solid transparent;
border-radius: $forum-border-radius;
padding: ($baseline/2);
cursor: pointer;
&:hover {
border-color: $forum-color-border;
}
&.is-enabled {
border-color: $forum-color-following;
color: $forum-color-following;
}
.post-option-input {
@include margin-right($baseline/2);
}
.icon {
@include margin-right($baseline/2);
@include margin-right($baseline / 4);
}
}
}
......
lms/static/sass/views/_teams.scss
......@@ -341,11 +341,6 @@
display: inline-block;
width: flex-grid(8, 12);
vertical-align: top;
.forum-new-post-form,
.edit-post-form {
min-width: 700px;
}
}
.page-content-secondary {
......
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