diff --git a/common/static/common/js/discussion/views/discussion_thread_edit_view.js b/common/static/common/js/discussion/views/discussion_thread_edit_view.js index b5e8af2b6e..2db0eed848 100644 --- a/common/static/common/js/discussion/views/discussion_thread_edit_view.js +++ b/common/static/common/js/discussion/views/discussion_thread_edit_view.js @@ -58,7 +58,7 @@ save: function() { var title = this.$('.edit-post-title').val(), - threadType = this.$('.post-type-input:checked').val(), + threadType = this.$('.input-radio:checked').val(), body = this.$('.edit-post-body textarea').val(), postData = { title: title, diff --git a/common/static/common/js/discussion/views/new_post_view.js b/common/static/common/js/discussion/views/new_post_view.js index 87070f63e5..4992fc9227 100644 --- a/common/static/common/js/discussion/views/new_post_view.js +++ b/common/static/common/js/discussion/views/new_post_view.js @@ -132,7 +132,7 @@ var anonymous, anonymousToPeers, body, follow, group, threadType, title, topicId, url, self = this; event.preventDefault(); - threadType = this.$('.post-type-input:checked').val(); + threadType = this.$('.input-radio:checked').val(); title = this.$('.js-post-title').val(); body = this.$('.js-post-body').find('.wmd-input').val(); group = this.$('.js-group-select option:selected').attr('value'); diff --git a/common/static/common/js/spec/discussion/view/new_post_view_spec.js b/common/static/common/js/spec/discussion/view/new_post_view_spec.js index 6726036980..975352becb 100644 --- a/common/static/common/js/spec/discussion/view/new_post_view_spec.js +++ b/common/static/common/js/spec/discussion/view/new_post_view_spec.js @@ -214,9 +214,9 @@ view.$('.js-post-title').val('Test Title'); view.$('.js-post-body textarea').val('Test body'); view.$('.wmd-preview p').html('Test body'); - view.$('.js-follow').prop('checked', false); - view.$('.js-anon').prop('checked', true); - view.$('.js-anon-peers').prop('checked', true); + view.$('input[name=follow]').prop('checked', false); + view.$('input[name=anonymous]').prop('checked', true); + view.$('input[name=anonymous_to_peers]').prop('checked', true); if (mode === 'tab') { view.$("a[data-discussion-id='2b3a858d0c884eb4b272dbbe3f2ffddd']").click(); } @@ -227,9 +227,9 @@ expect($("input[id$='post-type-question']")).not.toBeChecked(); expect(view.$('.js-post-title').val()).toEqual(''); expect(view.$('.js-post-body textarea').val()).toEqual(''); - expect(view.$('.js-follow')).toBeChecked(); - expect(view.$('.js-anon')).not.toBeChecked(); - expect(view.$('.js-anon-peers')).not.toBeChecked(); + expect(view.$('input[name=follow]')).toBeChecked(); + expect(view.$('input[name=anonymous]')).not.toBeChecked(); + expect(view.$('input[name=anonymous_to_peers]')).not.toBeChecked(); if (mode === 'tab') { return expect(view.$('.post-topic option:selected').text()).toEqual('General'); } diff --git a/common/static/common/templates/discussion/new-post.underscore b/common/static/common/templates/discussion/new-post.underscore index 1bd577b968..11f1003781 100644 --- a/common/static/common/templates/discussion/new-post.underscore +++ b/common/static/common/templates/discussion/new-post.underscore @@ -46,20 +46,22 @@
-
<% } %> diff --git a/common/static/common/templates/discussion/thread-edit.underscore b/common/static/common/templates/discussion/thread-edit.underscore index cc40f80091..f9996a0298 100644 --- a/common/static/common/templates/discussion/thread-edit.underscore +++ b/common/static/common/templates/discussion/thread-edit.underscore @@ -1,4 +1,4 @@ -

<%- gettext("Editing post") %>

+

<%- gettext("Editing post") %>

diff --git a/common/static/common/templates/discussion/thread-type.underscore b/common/static/common/templates/discussion/thread-type.underscore index bb3bd0159c..7e6c3a19b8 100644 --- a/common/static/common/templates/discussion/thread-type.underscore +++ b/common/static/common/templates/discussion/thread-type.underscore @@ -1,5 +1,5 @@
-
+
+
diff --git a/common/static/common/templates/discussion/topic.underscore b/common/static/common/templates/discussion/topic.underscore index 952d5f1f66..e3dec1f041 100644 --- a/common/static/common/templates/discussion/topic.underscore +++ b/common/static/common/templates/discussion/topic.underscore @@ -1,15 +1,13 @@ -
- -
+ diff --git a/common/static/sass/edx-pattern-library-shims/_form.scss b/common/static/sass/edx-pattern-library-shims/_form.scss new file mode 100644 index 0000000000..12891fa241 --- /dev/null +++ b/common/static/sass/edx-pattern-library-shims/_form.scss @@ -0,0 +1,27 @@ +/* + This file mirror UXPL Form field styles +*/ + +@import 'base/variables'; + +.post-type-label { + @include margin-right($baseline); + display: inline-block; + line-height: 100%; +} + +.field-label { + + .post-options & { + display: inline-block; + } + + .field-input:checked + .field-input-label { + color: $uxpl-blue-base; + } + +} + +.input-radio, .input-checkbox { + @include margin-right($baseline / 2); +} diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss index 8e8ea20cad..39f291e1c8 100644 --- a/lms/static/sass/discussion/views/_create-edit-post.scss +++ b/lms/static/sass/discussion/views/_create-edit-post.scss @@ -37,7 +37,6 @@ .field-input { display: inline-block; - width: 70%; vertical-align: top; &:not([type="text"]) { border-width: 0; @@ -66,7 +65,7 @@ line-height: 1.5; &#field_help_post_type { - margin-top: ($baseline / 2) 0 ($baseline / 3) 0; + @include margin($baseline / 2, 0, $baseline * 0.75, 0); } &#new-post-editor-description { @@ -81,7 +80,15 @@ } .post-options { - margin-bottom: ($baseline/2); + margin: $baseline 0; + + .field-label { + @include margin-right($baseline); + } + + .icon { + @include margin-right($baseline / 4); + } } } @@ -137,39 +144,10 @@ // UI: inputs .forum-new-post-form, .edit-post-form { - .post-type-input { - @extend %text-sr; - } .post-type-label { - @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; - height: 36px; - text-align: center; + @include margin-right($baseline); color: $gray-d3; - border: 1px solid $forum-color-border; - font-weight: 600; - line-height: 36px; - - .icon { - @include margin-right($baseline/4); - } - } - - .post-type-input:checked + .post-type-label { - border: none; - background-color: $forum-color-active-thread; - color: $forum-color-active-text; - background-image: none; - box-shadow: none; - } - - .post-type-input:focus + .post-type-label { - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 0 2px 2px $blue; } input[type=text].field-input { @@ -177,6 +155,7 @@ border: 1px solid $forum-color-border; border-radius: $forum-border-radius; padding: 0 $baseline/2; + width: 70%; height: 40px; color: #333; font-size: $forum-large-font-size; diff --git a/lms/static/sass/discussion/views/_inline.scss b/lms/static/sass/discussion/views/_inline.scss index 5848e97347..19584bc9e9 100644 --- a/lms/static/sass/discussion/views/_inline.scss +++ b/lms/static/sass/discussion/views/_inline.scss @@ -1,6 +1,8 @@ // forums - inline discussion styling // ==================== +@import '../../edx-pattern-library-shims/form'; + .discussion.inline-discussion { .inline-threads { border: 1px solid $forum-color-border;