Skip to content

E
edx-platform
Commit 15794b93 by alisan617 Committed by GitHub
Options

Merge pull request #14138 from edx/alisan/new-post-discussion-TNL-6006 

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