From 854621be6023628bfa0a95b32439063faf6490f1 Mon Sep 17 00:00:00 2001 From: Greg Price Date: Mon, 21 Jul 2014 10:43:45 -0400 Subject: [PATCH] Update forum new post form Add help text to several fields, update visual styling, and make it appear in the right-hand pane of the discussion tab instead of sliding down from the top. Co-authored-by: jsa Co-authored-by: marco --- .../discussion_thread_list_view_spec.coffee | 6 +- .../discussion/view/new_post_view_spec.coffee | 218 +++--- .../src/discussion/discussion_filter.coffee | 26 +- .../discussion/discussion_module_view.coffee | 2 +- .../src/discussion/discussion_router.coffee | 23 +- .../static/coffee/src/discussion/utils.coffee | 2 +- .../views/discussion_thread_list_view.coffee | 6 +- .../src/discussion/views/new_post_view.coffee | 172 ++--- lms/static/sass/application-extend2.scss.mako | 3 + .../sass/course/_discussions-inline.scss | 103 --- lms/static/sass/discussion/_discussion.scss | 635 +----------------- lms/static/sass/discussion/_mixins.scss | 116 ++++ .../sass/discussion/elements/_editor.scss | 168 +++++ .../sass/discussion/elements/_navigation.scss | 3 + .../sass/discussion/utilities/_shame.scss | 30 + .../sass/discussion/views/_new-post.scss | 224 ++++++ .../discussion/_filter_dropdown.html | 2 +- .../discussion/_underscore_templates.html | 184 +++-- lms/templates/discussion/index.html | 4 +- 19 files changed, 847 insertions(+), 1080 deletions(-) create mode 100644 lms/static/sass/discussion/_mixins.scss create mode 100644 lms/static/sass/discussion/elements/_editor.scss create mode 100644 lms/static/sass/discussion/views/_new-post.scss diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee index ffb6c1b84b..4d6c80da9f 100644 --- a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee +++ b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee @@ -98,7 +98,7 @@ describe "DiscussionThreadListView", ->
  • Child @@ -106,7 +106,7 @@ describe "DiscussionThreadListView", ->
  • Sibling @@ -115,7 +115,7 @@ describe "DiscussionThreadListView", ->
  • Other Category diff --git a/common/static/coffee/spec/discussion/view/new_post_view_spec.coffee b/common/static/coffee/spec/discussion/view/new_post_view_spec.coffee index 7cea95b0e3..fe98c09cd0 100644 --- a/common/static/coffee/spec/discussion/view/new_post_view_spec.coffee +++ b/common/static/coffee/spec/discussion/view/new_post_view_spec.coffee @@ -3,101 +3,53 @@ describe "NewPostView", -> beforeEach -> setFixtures( """ -
    -
    -
    -
    -
    -
    +
    +
    +
    -
    + - - - - - - - - - """ ) window.$$course_id = "edX/999/test" @@ -106,30 +58,31 @@ describe "NewPostView", -> describe "Drop down works correct", -> beforeEach -> + @course_settings = new DiscussionCourseSettings({ + "category_map": { + "subcategories": { + "Basic Question Types": { + "subcategories": {}, + "children": ["Selection From Options"], + "entries": { + "Selection From Options": { + "sort_key": null, + "is_cohorted": true, + "id": "cba3e4cd91d0466b9ac50926e495b76f" + } + }, + }, + }, + "children": ["Basic Question Types"], + "entries": {} + }, + "allow_anonymous": true, + "allow_anonymous_to_peers": true + }) @view = new NewPostView( el: $(".new-post-article"), collection: @discussion, - course_settings: new DiscussionCourseSettings({ - "category_map": { - "subcategories": { - "Basic Question Types": { - "subcategories": {}, - "children": ["Selection From Options"], - "entries": { - "Selection From Options": { - "sort_key": null, - "is_cohorted": true, - "id": "cba3e4cd91d0466b9ac50926e495b76f" - } - }, - }, - }, - "children": ["Basic Question Types"], - "entries": {} - }, - "allow_anonymous": true, - "allow_anonymous_to_peers": true - }), + course_settings: @course_settings, mode: "tab" ) @view.render() @@ -140,16 +93,16 @@ describe "NewPostView", -> complete_text = @parent_category_text + " / " + @selected_option_text selected_text_width = @view.getNameWidth(complete_text) @view.maxNameWidth = selected_text_width + 1 - @view.$el.find( "ul.topic_menu li[role='menuitem'] > a" )[1].click() - dropdown_text = @view.$el.find(".form-topic-drop > a").text() - expect(complete_text+' ▾').toEqual(dropdown_text) + @view.$el.find( "a.topic-title" ).first().click() + dropdown_text = @view.$el.find(".js-selected-topic").text() + expect(complete_text).toEqual(dropdown_text) it "completely show just sub-category", -> complete_text = @parent_category_text + " / " + @selected_option_text selected_text_width = @view.getNameWidth(complete_text) @view.maxNameWidth = selected_text_width - 10 - @view.$el.find( "ul.topic_menu li[role='menuitem'] > a" )[1].click() - dropdown_text = @view.$el.find(".form-topic-drop > a").text() + @view.$el.find( "a.topic-title" ).first().click() + dropdown_text = @view.$el.find(".js-selected-topic").text() expect(dropdown_text.indexOf("…")).toEqual(0) expect(dropdown_text).toContain(@selected_option_text) @@ -158,8 +111,8 @@ describe "NewPostView", -> complete_text = @parent_category_text + " / " + @selected_option_text selected_text_width = @view.getNameWidth(complete_text) @view.maxNameWidth = selected_text_width - parent_width - @view.$el.find( "ul.topic_menu li[role='menuitem'] > a" )[1].click() - dropdown_text = @view.$el.find(".form-topic-drop > a").text() + @view.$el.find( "a.topic-title" ).first().click() + dropdown_text = @view.$el.find(".js-selected-topic").text() expect(dropdown_text.indexOf("…")).toEqual(0) expect(dropdown_text.lastIndexOf("…")).toBeGreaterThan(0) @@ -167,10 +120,49 @@ describe "NewPostView", -> complete_text = @parent_category_text + " / " + @selected_option_text selected_text_width = @view.getNameWidth(complete_text) @view.maxNameWidth = @view.getNameWidth(@selected_option_text) + 100 - @view.$el.find( "ul.topic_menu li[role='menuitem'] > a" )[1].click() - dropdown_text = @view.$el.find(".form-topic-drop > a").text() + @view.$el.find( "a.topic-title" ).first().click() + dropdown_text = @view.$el.find(".js-selected-topic").text() expect(dropdown_text.indexOf("/ span>")).toEqual(-1) + describe "cohort selector", -> + renderWithCohortedTopics = (course_settings, view, isCohortedFirst) -> + course_settings.set( + "category_map", + { + "children": if isCohortedFirst then ["Cohorted", "Non-Cohorted"] else ["Non-Cohorted", "Cohorted"], + "entries": { + "Non-Cohorted": { + "sort_key": null, + "is_cohorted": false, + "id": "non-cohorted" + }, + "Cohorted": { + "sort_key": null, + "is_cohorted": true, + "id": "cohorted" + } + } + } + ) + view.render() + + expectCohortSelectorEnabled = (view, enabled) -> + expect(view.$(".js-group-select").prop("disabled")).toEqual(not enabled) + if not enabled + expect(view.$(".js-group-select option:selected").attr("value")).toEqual("") + + it "is disabled with non-cohorted default topic and enabled by selecting cohorted topic", -> + renderWithCohortedTopics(@course_settings, @view, false) + expectCohortSelectorEnabled(@view, false) + @view.$("a.topic-title[data-discussion-id=cohorted]").click() + expectCohortSelectorEnabled(@view, true) + + it "is enabled with cohorted default topic and disabled by selecting non-cohorted topic", -> + renderWithCohortedTopics(@course_settings, @view, true) + expectCohortSelectorEnabled(@view, true) + @view.$("a.topic-title[data-discussion-id=non-cohorted]").click() + expectCohortSelectorEnabled(@view, false) + it "posts to the correct URL", -> topicId = "test_topic" spyOn($, "ajax").andCallFake( @@ -189,5 +181,5 @@ describe "NewPostView", -> topicId: topicId ) view.render() - view.$(".new-post-form").submit() + view.$(".forum-new-post-form").submit() expect($.ajax).toHaveBeenCalled() diff --git a/common/static/coffee/src/discussion/discussion_filter.coffee b/common/static/coffee/src/discussion/discussion_filter.coffee index 6b3ab03689..f9cc710e0d 100644 --- a/common/static/coffee/src/discussion/discussion_filter.coffee +++ b/common/static/coffee/src/discussion/discussion_filter.coffee @@ -1,8 +1,13 @@ class @DiscussionFilter + + # TODO: this helper class duplicates functionality in DiscussionThreadListView.filterTopics + # for use with a very similar category dropdown in the New Post form. The two menus' implementations + # should be merged into a single reusable view. + @filterDrop: (e) -> - $drop = $(e.target).parents('.topic_menu_wrapper, .browse-topic-drop-menu-wrapper') + $drop = $(e.target).parents('.topic-menu-wrapper') query = $(e.target).val() - $items = $drop.find('a') + $items = $drop.find('.topic-menu-item') if(query.length == 0) $items.removeClass('hidden') @@ -10,19 +15,14 @@ class @DiscussionFilter $items.addClass('hidden') $items.each (i) -> - thisText = $(this).not('.unread').text() - $(this).parents('ul').siblings('a').not('.unread').each (i) -> - thisText = thisText + ' ' + $(this).text(); - test = true - terms = thisText.split(' ') + path = $(this).parents(".topic-menu-item").andSelf() + pathTitles = path.children(".topic-title").map((i, elem) -> $(elem).text()).get() + pathText = pathTitles.join(" / ").toLowerCase() - if(thisText.toLowerCase().search(query.toLowerCase()) == -1) - test = false - - if(test) + if query.split(" ").every((term) -> pathText.search(term.toLowerCase()) != -1) $(this).removeClass('hidden') # show children - $(this).parent().find('a').removeClass('hidden'); + $(this).find('.topic-menu-item').removeClass('hidden'); # show parents - $(this).parents('ul').siblings('a').removeClass('hidden'); + $(this).parents('.topic-menu-item').removeClass('hidden'); diff --git a/common/static/coffee/src/discussion/discussion_module_view.coffee b/common/static/coffee/src/discussion/discussion_module_view.coffee index 811305037b..d941fad375 100644 --- a/common/static/coffee/src/discussion/discussion_module_view.coffee +++ b/common/static/coffee/src/discussion/discussion_module_view.coffee @@ -7,7 +7,7 @@ if Backbone? "click .new-post-btn": "toggleNewPost" "keydown .new-post-btn": (event) -> DiscussionUtil.activateOnSpace(event, @toggleNewPost) - "click .new-post-cancel": "hideNewPost" + "click .cancel": "hideNewPost" "click .discussion-paginator a": "navigateToPage" paginationTemplate: -> DiscussionUtil.getTemplate("_pagination") diff --git a/common/static/coffee/src/discussion/discussion_router.coffee b/common/static/coffee/src/discussion/discussion_router.coffee index e61a40e6a1..ade48a3d56 100644 --- a/common/static/coffee/src/discussion/discussion_router.coffee +++ b/common/static/coffee/src/discussion/discussion_router.coffee @@ -25,7 +25,7 @@ if Backbone? @newPostView.render() $('.new-post-btn').bind "click", @showNewPost $('.new-post-btn').bind "keydown", (event) => DiscussionUtil.activateOnSpace(event, @showNewPost) - $('.new-post-cancel').bind "click", @hideNewPost + @newPostView.$('.cancel').bind "click", @hideNewPost allThreads: -> @nav.updateSidebar() @@ -45,8 +45,12 @@ if Backbone? if(@main) @main.cleanup() @main.undelegateEvents() + unless($(".forum-content").is(":visible")) + $(".forum-content").fadeIn() + if(@newPost.is(":visible")) + @newPost.fadeOut() - @main = new DiscussionThreadView(el: $(".discussion-column"), model: @thread) + @main = new DiscussionThreadView(el: $(".forum-content"), model: @thread) @main.render() @main.on "thread:responses:rendered", => @nav.updateSidebar() @@ -59,8 +63,17 @@ if Backbone? @navigate("", trigger: true) showNewPost: (event) => - @newPost.slideDown(300) - $('.new-post-title').focus() + $('.forum-content').fadeOut( + duration: 200 + complete: => + @newPost.fadeIn(200) + $('.new-post-title').focus() + ) hideNewPost: (event) => - @newPost.slideUp(300) + @newPost.fadeOut( + duration: 200 + complete: => + $('.forum-content').fadeIn(200) + ) + diff --git a/common/static/coffee/src/discussion/utils.coffee b/common/static/coffee/src/discussion/utils.coffee index 50530622b2..157852a8f6 100644 --- a/common/static/coffee/src/discussion/utils.coffee +++ b/common/static/coffee/src/discussion/utils.coffee @@ -167,7 +167,7 @@ class @DiscussionUtil @formErrorHandler: (errorsField) -> (xhr, textStatus, error) -> makeErrorElem = (message) -> - $("
  • ").addClass("new-post-form-error").html(message) + $("
  • ").addClass("post-error").html(message) errorsField.empty().show() if xhr.status == 400 response = JSON.parse(xhr.responseText) diff --git a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee index 23a090c8f5..a271cc99bc 100644 --- a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee +++ b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee @@ -75,7 +75,7 @@ if Backbone? #TODO fix this entire chain of events addAndSelectThread: (thread) => commentable_id = thread.get("commentable_id") - menuItem = @$(".forum-nav-browse-menu-item[data-discussion-id]").filter(-> $(this).data("discussion-id").id == commentable_id) + menuItem = @$(".forum-nav-browse-menu-item[data-discussion-id]").filter(-> $(this).data("discussion-id") == commentable_id) @setCurrentTopicDisplay(@getPathText(menuItem)) @retrieveDiscussion commentable_id, => @trigger "thread:created", thread.get('id') @@ -242,7 +242,7 @@ if Backbone? goHome: -> @template = _.template($("#discussion-home").html()) - $(".discussion-column").html(@template) + $(".forum-content").html(@template) $(".forum-nav-thread-list a").removeClass("is-active") $("input.email-setting").bind "click", @updateEmailNotifications url = DiscussionUtil.urlFor("notifications_status",window.user.get("id")) @@ -373,7 +373,7 @@ if Backbone? else allItems = item.find(".forum-nav-browse-menu-item").andSelf() discussionIds = allItems.filter("[data-discussion-id]").map( - (i, elem) -> $(elem).data("discussion-id").id + (i, elem) -> $(elem).data("discussion-id") ).get() @retrieveDiscussions(discussionIds) @$(".forum-nav-filter-cohort").toggle(item.data('cohorted') == true) diff --git a/common/static/coffee/src/discussion/views/new_post_view.coffee b/common/static/coffee/src/discussion/views/new_post_view.coffee index cd4d959f3a..a801d4e1d1 100644 --- a/common/static/coffee/src/discussion/views/new_post_view.coffee +++ b/common/static/coffee/src/discussion/views/new_post_view.coffee @@ -10,72 +10,50 @@ if Backbone? @topicId = options.topicId render: () -> + context = _.clone(@course_settings.attributes) + _.extend(context, { + cohort_options: @getCohortOptions(), + mode: @mode + }) + context.topics_html = @renderCategoryMap(@course_settings.get("category_map")) if @mode is "tab" + @$el.html(_.template($("#new-post-template").html(), context)) + if @mode is "tab" - @$el.html( - _.template( - $("#new-post-tab-template").html(), { - topic_dropdown_html: @getTopicDropdownHTML(), - options_html: @getOptionsHTML(), - editor_html: @getEditorHTML() - } - ) - ) # set up the topic dropdown in tab mode - @dropdownButton = @$(".topic_dropdown_button") - @topicMenu = @$(".topic_menu_wrapper") - @menuOpen = @dropdownButton.hasClass('dropped') - @topicId = @$(".topic").first().data("discussion_id") - @topicText = @getFullTopicName(@$(".topic").first()) - $('.choose-cohort').hide() unless @$(".topic_menu li a").first().is("[cohorted=true]") - @setSelectedTopic() - else # inline - @$el.html( - _.template( - $("#new-post-inline-template").html(), { - options_html: @getOptionsHTML(), - editor_html: @getEditorHTML() - } - ) - ) - DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), "new-post-body" + @dropdownButton = @$(".post-topic-button") + @topicMenu = @$(".topic-menu-wrapper") + @hideTopicDropdown() + @setTopic(@$("a.topic-title").first()) - getTopicDropdownHTML: () -> - # populate the category menu (topic dropdown) - _renderCategoryMap = (map) -> - category_template = _.template($("#new-post-menu-category-template").html()) - entry_template = _.template($("#new-post-menu-entry-template").html()) - html = "" - for name in map.children - if name of map.entries - entry = map.entries[name] - html += entry_template({text: name, id: entry.id, is_cohorted: entry.is_cohorted}) - else # subcategory - html += category_template({text: name, entries: _renderCategoryMap(map.subcategories[name])}) - html - topics_html = _renderCategoryMap(@course_settings.get("category_map")) - _.template($("#new-post-topic-dropdown-template").html(), {topics_html: topics_html}) + DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), "js-post-body" - getEditorHTML: () -> - _.template($("#new-post-editor-template").html(), {}) + renderCategoryMap: (map) -> + category_template = _.template($("#new-post-menu-category-template").html()) + entry_template = _.template($("#new-post-menu-entry-template").html()) + html = "" + for name in map.children + if name of map.entries + entry = map.entries[name] + html += entry_template({text: name, id: entry.id, is_cohorted: entry.is_cohorted}) + else # subcategory + html += category_template({text: name, entries: @renderCategoryMap(map.subcategories[name])}) + html - getOptionsHTML: () -> - # cohort options? + getCohortOptions: () -> if @course_settings.get("is_cohorted") and DiscussionUtil.isStaff() user_cohort_id = $("#discussion-container").data("user-cohort-id") - cohort_options = _.map @course_settings.get("cohorts"), (cohort) -> + _.map @course_settings.get("cohorts"), (cohort) -> {value: cohort.id, text: cohort.name, selected: cohort.id==user_cohort_id} else - cohort_options = null - context = _.clone(@course_settings.attributes) - context.cohort_options = cohort_options - _.template($("#new-post-options-template").html(), context) + null events: - "submit .new-post-form": "createPost" - "click .topic_dropdown_button": "toggleTopicDropdown" - "click .topic_menu_wrapper": "setTopic" - "click .topic_menu_search": "ignoreClick" - "keyup .form-topic-drop-search-input": DiscussionFilter.filterDrop + "submit .forum-new-post-form": "createPost" + "click .post-topic-button": "toggleTopicDropdown" + "click .topic-menu-wrapper": "handleTopicEvent" + "click .topic-filter-label": "ignoreClick" + "keyup .topic-filter-input": DiscussionFilter.filterDrop + "change .post-option-input": "postOptionChange" # Because we want the behavior that when the body is clicked the menu is # closed, we need to ignore clicks in the search field and stop propagation. @@ -83,15 +61,23 @@ if Backbone? ignoreClick: (event) -> event.stopPropagation() + postOptionChange: (event) -> + $target = $(event.target) + $optionElem = $target.closest(".post-option") + if $target.is(":checked") + $optionElem.addClass("is-enabled") + else + $optionElem.removeClass("is-enabled") + createPost: (event) -> event.preventDefault() - title = @$(".new-post-title").val() - body = @$(".new-post-body").find(".wmd-input").val() - group = @$(".new-post-group option:selected").attr("value") + title = @$(".js-post-title").val() + body = @$(".js-post-body").find(".wmd-input").val() + group = @$(".js-group-select option:selected").attr("value") - anonymous = false || @$("input.discussion-anonymous").is(":checked") - anonymous_to_peers = false || @$("input.discussion-anonymous-to-peers").is(":checked") - follow = false || @$("input.discussion-follow").is(":checked") + anonymous = false || @$(".js-anon").is(":checked") + anonymous_to_peers = false || @$(".js-anon-peers").is(":checked") + follow = false || @$(".js-follow").is(":checked") url = DiscussionUtil.urlFor('create_thread', @topicId) @@ -109,18 +95,20 @@ if Backbone? anonymous_to_peers: anonymous_to_peers auto_subscribe: follow group_id: group - error: DiscussionUtil.formErrorHandler(@$(".new-post-form-errors")) + error: DiscussionUtil.formErrorHandler(@$(".post-errors")) success: (response, textStatus) => # TODO: Move this out of the callback, this makes it feel sluggish thread = new Thread response['content'] - DiscussionUtil.clearFormErrors(@$(".new-post-form-errors")) + DiscussionUtil.clearFormErrors(@$(".post-errors")) @$el.hide() - @$(".new-post-title").val("").attr("prev-text", "") - @$(".new-post-body textarea").val("").attr("prev-text", "") + @$(".js-post-title").val("").attr("prev-text", "") + @$(".js-post-body textarea").val("").attr("prev-text", "") @$(".wmd-preview p").html("") # only line not duplicated in new post inline view @collection.add thread + toggleTopicDropdown: (event) -> + event.preventDefault() event.stopPropagation() if @menuOpen @hideTopicDropdown() @@ -133,7 +121,6 @@ if Backbone? @topicMenu.show() $(".form-topic-drop-search-input").focus() - $("body").bind "keydown", @setActiveItem $("body").bind "click", @hideTopicDropdown # Set here because 1) the window might get resized and things could @@ -146,28 +133,33 @@ if Backbone? @dropdownButton.removeClass('dropped') @topicMenu.hide() - $("body").unbind "keydown", @setActiveItem $("body").unbind "click", @hideTopicDropdown - setTopic: (event) -> - $target = $(event.target) - if $target.data('discussion_id') + handleTopicEvent: (event) -> + event.preventDefault() + event.stopPropagation() + @setTopic($(event.target)) + + setTopic: ($target) -> + if $target.data('discussion-id') @topicText = $target.html() @topicText = @getFullTopicName($target) - @topicId = $target.data('discussion_id') + @topicId = $target.data('discussion-id') @setSelectedTopic() - if $target.is('[cohorted=true]') - $('.choose-cohort').show(); + if $target.data("cohorted") + $(".js-group-select").prop("disabled", false) else - $('.choose-cohort').hide(); + $(".js-group-select").val("") + $(".js-group-select").prop("disabled", true) + @hideTopicDropdown() setSelectedTopic: -> - @dropdownButton.html(@fitName(@topicText) + ' ▾') + @$(".js-selected-topic").html(@fitName(@topicText)) getFullTopicName: (topicElement) -> name = topicElement.html() - topicElement.parents('ul').not('.topic_menu').each -> - name = $(this).siblings('a').text() + ' / ' + name + topicElement.parents('.topic-submenu').each -> + name = $(this).siblings('.topic-title').text() + ' / ' + name return name getNameWidth: (name) -> @@ -204,29 +196,3 @@ if Backbone? name = gettext("…") + " / " + rawName + " " + gettext("…") return name - - setActiveItem: (event) -> - if event.which == 13 - $(".topic_menu_wrapper .focused").click() - return - if event.which != 40 && event.which != 38 - return - event.preventDefault() - - items = $.makeArray($(".topic_menu_wrapper a").not(".hidden")) - index = items.indexOf($('.topic_menu_wrapper .focused')[0]) - - if event.which == 40 - index = Math.min(index + 1, items.length - 1) - if event.which == 38 - index = Math.max(index - 1, 0) - - $(".topic_menu_wrapper .focused").removeClass("focused") - $(items[index]).addClass("focused") - - itemTop = $(items[index]).parent().offset().top - scrollTop = $(".topic_menu").scrollTop() - itemFromTop = $(".topic_menu").offset().top - itemTop - scrollTarget = Math.min(scrollTop - itemFromTop, scrollTop) - scrollTarget = Math.max(scrollTop - itemFromTop - $(".topic_menu").height() + $(items[index]).height() + 20, scrollTarget) - $(".topic_menu").scrollTop(scrollTarget) diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako index 1bce4f4e77..af7e17894e 100644 --- a/lms/static/sass/application-extend2.scss.mako +++ b/lms/static/sass/application-extend2.scss.mako @@ -49,7 +49,10 @@ // applications @import "discussion/utilities/variables"; +@import "discussion/mixins"; @import 'discussion/discussion'; // Process old file after definitions but before everything else +@import "discussion/views/new-post"; +@import "discussion/elements/editor"; @import "discussion/elements/navigation"; @import 'discussion/utilities/developer'; @import 'discussion/utilities/shame'; diff --git a/lms/static/sass/course/_discussions-inline.scss b/lms/static/sass/course/_discussions-inline.scss index 798b9f1e01..0aa6307164 100644 --- a/lms/static/sass/course/_discussions-inline.scss +++ b/lms/static/sass/course/_discussions-inline.scss @@ -177,109 +177,6 @@ margin: auto; } - .new-post-form { - width: 100%; - margin-bottom: 20px; - padding: 30px; - border-radius: 3px; - background: rgba(0, 0, 0, .55); - color: #fff; - box-shadow: none; - @include clearfix; - @include box-sizing(border-box); - - .form-row { - margin-bottom: 20px; - } - - .new-post-body .wmd-input { - @include discussion-wmd-input; - position: relative; - width: 100%; - height: 200px; - z-index: 1; - padding: 10px; - box-sizing: border-box; - border: 1px solid #333; - border-radius: 3px 3px 0 0; - background: #fff; - font-family: 'Monaco', monospace; - font-size: 13px; - line-height: 1.6; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; - } - - .new-post-body .wmd-preview { - @include discussion-wmd-preview; - position: relative; - width: 100%; - //height: 50px; - margin-top: -1px; - padding: 25px 20px 10px 20px; - box-sizing: border-box; - border: 1px solid #333; - border-radius: 0 0 3px 3px; - background: #e6e6e6; - color: #333; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; - } - - .new-post-preview-label { - position: absolute; - top: 4px; - left: 4px; - font-size: 11px; - color: #aaa; - text-transform: uppercase; - } - - .new-post-title{ - width: 100%; - height: 40px; - padding: 0 10px; - box-sizing: border-box; - border-radius: 3px; - border: 1px solid #333; - font-size: 16px; - font-weight: 700; - font-family: 'Open Sans', sans-serif; - color: #333; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; - } - - .submit { - @include blue-button; - float: left; - height: 37px; - margin-top: 10px; - padding-bottom: 2px; - border-color: #333; - - &:hover, &:focus { - border-color: #222; - } - } - - .new-post-cancel { - @include white-button; - float: left; - margin: 10px 0 0 15px; - border-color: #444; - } - - .options { - margin-top: 5px; - - label { - display: inline; - margin-left: 8px; - font-size: 15px; - color: #fff; - text-shadow: none; - } - } - } - .thread-title { display: block; margin-bottom: 20px; diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 903ba66143..5b08f91570 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -1,144 +1,8 @@ -// forums - main styling +// forums - main app styling // ==================== -// mixins and extends -@mixin blue-button { - display: block; - height: 35px; - padding: 0 ($baseline*.75); - border-radius: 3px; - border: 1px solid #2d81ad; - @include linear-gradient(top, #6dccf1, #38a8e5); - font-size: 13px; - font-weight: 700; - line-height: 32px; - color: $white; - text-shadow: 0 1px 0 rgba(0, 0, 0, .3); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); - - &:hover, &:focus { - border-color: #297095; - @include linear-gradient(top, #4fbbe4, #2090d0); - } -} - -@mixin white-button { - @include linear-gradient(top, #eee, #ccc); - display: block; - border: 1px solid #aaa; - border-radius: 3px; - padding: 0 ($baseline*.75); - height: 35px; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); - color: $dark-gray; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); - font-weight: 700; - font-size: 13px; - line-height: 32px; - - &:hover, &:focus { - @include linear-gradient(top, $white, #ddd); - } -} - -@mixin dark-grey-button { - display: block; - height: 35px; - padding: 0 ($baseline*.75); - border-radius: 3px; - border: 1px solid #222; - background: -webkit-linear-gradient(top, #777, #555); - font-size: 13px; - font-weight: 700; - line-height: 32px; - color: $white; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); - - &:hover, &:focus { - background: -webkit-linear-gradient(top, #888, #666); - } -} - -@mixin discussion-wmd-input { - width: 100%; - height: 240px; - margin-top: 0; - padding: ($baseline/2); - @include box-sizing(border-box); - border: 1px solid #aaa; - border-radius: 3px 3px 0 0; - background: $white; - font-family: 'Monaco', monospace; - font-size: 13px; - line-height: 1.6; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -} - -@mixin discussion-wmd-preview-container { - width: 100%; - @include box-sizing(border-box); - border: 1px solid #aaa; - border-top: none; - border-radius: 0 0 3px 3px; - background: #eee; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -} - -@mixin discussion-new-post-wmd-preview-container { - @include discussion-wmd-preview-container; - border-color: #333; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; -} - -@mixin discussion-wmd-preview-label { - width: 100%; - padding-top: 3px; - padding-left: 5px; - color: #bbb; - font-size: 11px; - text-transform: uppercase; -} - -@mixin discussion-wmd-preview { - width: 100%; - padding: 10px 20px; - color: #333; -} - -@-webkit-keyframes fadeIn { - 0% { opacity: 0.0; } - 100% { opacity: 1.0; } -} - -// =============== - -// main styling body.discussion { - // new post creation - .new-post-form-errors { - display: none; - background: $error-red; - padding: 0; - border: 1px solid $dark-gray; - list-style: none; - color: $white; - line-height: 1.6; - border-radius: 3px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2); - - li { - padding: ($baseline/2) $baseline 12px 45px; - border-bottom: 1px solid #dc4949; - background: url(../images/white-error-icon.png) no-repeat 15px 14px; - - &:last-child { - border-bottom: none; - } - } - } - .course-tabs .right { float: right; @@ -155,148 +19,6 @@ body.discussion { } } - .new-post-article { - display: none; - margin-top: $baseline; - - .inner-wrapper { - max-width: 1180px; - min-width: 760px; - margin: auto; - } - - .left-column { - @include box-sizing(border-box); - float: left; - padding: ($baseline*2); - width: 32%; - - .topic-dropdown-label { - font-size: 22px; - font-weight: 700; - color: $white; - text-shadow: none; - } - - .form-topic-drop { - position: relative; - - ul { - list-style: none; - margin: 0; - padding: 0; - } - } - - .form-group-label { - display: block; - padding-top: ($baseline/4); - color: $white; - } - - .topic_dropdown_button { - @include white-button; - position: relative; - z-index: 1000; - margin-top: 15px; - border-color: #444; - height: 40px; - line-height: 36px; - - .drop-arrow { - float: right; - color: #999; - line-height: 37px; - } - } - - .topic_menu_wrapper { - display: none; - position: absolute; - top: $baseline*2; - left: 0; - z-index: 9999; - width: 100%; - @include box-sizing(border-box); - background: #797979; - border: 1px solid $dark-gray; - box-shadow: 0 2px 50px rgba(0, 0, 0, .4); - } - - .topic_menu { - max-height: 400px; - overflow-y: scroll; - - a { - display: block; - padding: ($baseline/2) 15px; - border-top: 1px solid #5f5f5f; - font-size: 14px; - font-weight: 700; - line-height: 18px; - color: #eee; - @include transition(none); - - &:hover, &:focus { - background-color: #666; - } - - .topic-menu-span { - color: #eee; - } - } - - li li { - a { - padding-left: 39px; - background: url(../images/nested-icon.png) no-repeat 17px 10px; - } - } - - li li li { - a { - padding-left: 63px; - background: url(../images/nested-icon.png) no-repeat 41px 10px; - } - } - } - - .topic_menu_search { - padding: $baseline/2; - border-bottom: 1px solid black; - } - - .form-topic-drop-search-input { - width: 100%; - height: 30px; - padding: 0 15px; - @include box-sizing(border-box); - border-radius: 30px; - border: 1px solid $dark-gray; - box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset; - background: -webkit-linear-gradient(top, #eee, $white); - font-size: 11px; - line-height: 16px; - color: #333; - } - } - - .right-column { - float: left; - width: 68%; - padding: ($baseline*2); - @include box-sizing(border-box); - } - - .wmd-button { - background: none; - } - - .wmd-button span { - background: url(../images/new-post-icons-full.png) no-repeat; - } - } - .edit-post-form { @include clearfix; margin-bottom: ($baseline*2); @@ -341,92 +63,12 @@ body.discussion { font-size: 16px; font-family: $sans-serif; } - } .comments .edit-post-form h1 { @extend %t-title6; } - .new-post-form { - @include clearfix; - border-radius: 3px; - width: 100%; - background: $shadow-d2; - box-shadow: 0 1px 2px $shadow-d2 inset, 0 1px 0 rgba(255, 255, 255, .5); - color: $white; - - .form-row { - margin-bottom: $baseline; - } - - .new-post-body .wmd-input { - @include discussion-wmd-input; - @include box-sizing(border-box); - position: relative; - z-index: 1; - width: 100%; - height: 150px; - background: $white; - } - - .new-post-body .wmd-preview-container { - @include discussion-new-post-wmd-preview-container; - } - - .new-post-body .wmd-preview-label { - @include discussion-wmd-preview-label; - } - - .new-post-body .wmd-preview { - @include discussion-wmd-preview; - } - - .new-post-title { - @include box-sizing(border-box); - border: 1px solid $dark-gray; - border-radius: 3px; - padding: 0 ($baseline/2); - width: 100%; - height: 40px; - box-shadow: 0 1px 3px $shadow inset; - color: $dark-gray; - font-weight: 700; - } - - .submit { - @include blue-button; - float: left; - margin-top: ($baseline/2); - border-color: $dark-gray; - padding-bottom: ($baseline/10); - height: 37px; - - &:hover, &:focus { - border-color: #222; - } - } - - .new-post-cancel { - @include white-button; - float: left; - margin: ($baseline/2) 0 0 ($baseline*.75); - border-color: #444; - } - - .options { - margin-top: ($baseline*2); - - label { - display: inline; - margin-left: ($baseline/2); - color: $white; - text-shadow: none; - font-size: 15px; - } - } - } - .thread-title { display: block; margin-bottom: $baseline; @@ -467,9 +109,6 @@ body.discussion { } } - - - .wmd-panel { min-width: 500px; width: 100%; @@ -776,7 +415,7 @@ body.discussion { .discussion-article { position: relative; - min-height: 468px; + min-height: 500px; background-image: url(../images/bg-texture.png); a { @@ -831,9 +470,6 @@ body.discussion { background-position: 0 0; } } - - - } .discussion-post { @@ -860,8 +496,6 @@ body.discussion { margin-bottom: $baseline; } - - .responses { list-style: none; margin-top: $baseline; @@ -917,7 +551,6 @@ body.discussion { text-transform: uppercase; } - &.loading { height: 0; margin: 0; @@ -1198,40 +831,11 @@ body.discussion { } } - - - .main-article.new { display: none; padding: ($baseline*2.5); } - .new-post-form { - margin-top: $baseline; - @include clearfix; - } - - .new-post-form .submit { - @include blue-button; - float: left; - margin-top: ($baseline/2); - padding-bottom: ($baseline/10); - } - - .new-post-form .options { - float: right; - margin-top: $baseline; - font-size: 14px; - - label { - margin-left: ($baseline/5); - } - } - - - - - .discussion-reply-new { padding: $baseline ($baseline*1.5); @include clearfix; @@ -1524,97 +1128,6 @@ body.discussion { margin: auto; } - .new-post-form { - width: 100%; - margin-bottom: $baseline; - padding: 30px; - border-radius: 3px; - background: rgba(0, 0, 0, .55); - color: $white; - box-shadow: none; - @include clearfix; - @include box-sizing(border-box); - - .form-row { - margin-bottom: $baseline; - } - - .new-post-body .wmd-input { - @include discussion-wmd-input; - position: relative; - width: 100%; - height: 200px; - z-index: 1; - padding: $baseline/2; - @include box-sizing(border-box); - border: 1px solid #333; - border-radius: 3px 3px 0 0; - background: $white; - font-family: 'Monaco', monospace; - font-size: 13px; - line-height: 1.6; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; - } - - .new-post-body .wmd-preview-container { - @include discussion-new-post-wmd-preview-container; - } - - .new-post-body .wmd-preview-label { - @include discussion-wmd-preview-label; - } - - .new-post-body .wmd-preview { - @include discussion-wmd-preview; - } - - .new-post-title{ - width: 100%; - height: 40px; - padding: 0 $baseline/2; - @include box-sizing(border-box); - border-radius: 3px; - border: 1px solid #333; - font-size: 16px; - font-weight: 700; - font-family: 'Open Sans', sans-serif; - color: #333; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; - } - - .submit { - @include blue-button; - float: left; - height: 37px; - margin-top: $baseline/2; - padding-bottom: 2px; - border-color: #333; - - &:hover, &:focus { - border-color: #222; - } - } - - .new-post-cancel { - @include white-button; - float: left; - margin: $baseline/2 0 0 15px; - border-color: #444; - } - - .options { - margin-top: 5px; - - label { - display: inline; - margin-left: 8px; - font-size: 15px; - color: $white; - text-shadow: none; - } - } - } - .thread-title { display: block; margin-bottom: $baseline; @@ -1678,148 +1191,6 @@ body.discussion { } } - .new-post-body { - .wmd-panel { - width: 100%; - min-width: 500px; - } - - .wmd-button-bar { - width: 100%; - } - - .wmd-input { - height: 150px; - width: 100%; - background-color: #e9e9e9; - border: 1px solid #c8c8c8; - font-family: Monaco, 'Lucida Console', monospace; - font-style: normal; - font-size: 0.8em; - line-height: 1.6em; - border-radius: 3px 3px 0 0; - - &::-webkit-input-placeholder { - color: #888; - } - } - - .wmd-button-row { - position: relative; - margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4); - padding: 0; - height: 30px; - overflow: hidden; - @include transition(all .2s ease-out 0s); - } - - .wmd-spacer { - width: 1px; - height: 20px; - margin-left: 14px; - - position: absolute; - background-color: Silver; - display: inline-block; - list-style: none; - } - - .wmd-button { - width: 20px; - height: 20px; - padding-left: 2px; - padding-right: 3px; - position: absolute; - display: inline-block; - list-style: none; - cursor: pointer; - background: none; - } - - .wmd-button > span { - display: inline-block; - background-image: url(../images/new-post-icons-full.png); - background-repeat: no-repeat; - background-position: 0px 0px; - width: 20px; - height: 20px; - } - - .wmd-spacer1 { - left: 50px; - } - .wmd-spacer2 { - left: 175px; - } - - .wmd-spacer3 { - left: 300px; - } - - .wmd-prompt-background { - background-color: Black; - } - - .wmd-prompt-dialog { - @extend .modal; - background: $white; - } - - .wmd-prompt-dialog { - padding: $baseline; - - > div { - font-size: 0.8em; - font-family: arial, helvetica, sans-serif; - } - - b { - font-size: 16px; - } - - > form > input[type="text"] { - border-radius: 3px; - color: #333; - } - - > form > input[type="button"] { - border: 1px solid #888; - font-family: $sans-serif; - font-size: 14px; - } - - > form > input[type="file"] { - margin-bottom: 18px; - } - } - } - - .wmd-button-row { - // this is being hidden now because the inline styles to position the icons are not being written - position: relative; - height: 25px; - } - - .wmd-button { - span { - width: 20px; - height: 20px; - background-image: url("/static/images/wmd-buttons.png"); - display: inline-block; - } - } - - .wmd-spacer1 { - left: 50px; - } - - .wmd-spacer2 { - left: 175px; - } - - .wmd-spacer3 { - left: 300px; - } .edit-post-form { width: 100%; margin-bottom: $baseline; @@ -1867,8 +1238,6 @@ body.discussion { @extend .discussion-module } -// ==================== - // post actions - pinning .discussion-pin { font-size: 12px; diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss new file mode 100644 index 0000000000..34d6df7090 --- /dev/null +++ b/lms/static/sass/discussion/_mixins.scss @@ -0,0 +1,116 @@ +// discussion - mixins and extends +// ==================== + +@mixin blue-button { + @include linear-gradient(top, #6dccf1, #38a8e5); + display: block; + border: 1px solid #2d81ad; + border-radius: 3px; + padding: 0 ($baseline*.75); + height: 35px; + color: $white; + text-shadow: none; + font-size: 13px; + line-height: 35px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); + + &:hover, &:focus { + @include linear-gradient(top, #4fbbe4, #2090d0); + border-color: #297095; + } +} + +@mixin white-button { + @include linear-gradient(top, $white, $gray-l5); + display: block; + border: 1px solid #aaa; + border-radius: 3px; + padding: 0 ($baseline*.75); + height: 35px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); + color: $dark-gray; + text-shadow: none; + font-size: 13px; + line-height: 35px; + + &:hover, &:focus { + @include linear-gradient(top, $white, $gray-l6); + } +} + +@mixin dark-grey-button { + display: block; + border: 1px solid #222; + border-radius: 3px; + padding: 0 ($baseline*.75); + height: 35px; + background: -webkit-linear-gradient(top, #777, #555); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); + color: $white; + text-shadow: none; + font-size: 13px; + line-height: 35px; + + &:hover, &:focus { + background: -webkit-linear-gradient(top, #888, #666); + } +} + +@mixin discussion-wmd-input { + @include box-sizing(border-box); + margin-top: 0; + border: 1px solid #aaa; + border-radius: 3px 3px 0 0; + padding: ($baseline/2); + width: 100%; + height: 240px; + background: $white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; + font-size: 13px; + font-family: 'Monaco', monospace; + line-height: 1.6; +} + +@mixin discussion-wmd-preview-container { + @include box-sizing(border-box); + border: 1px solid #aaa; + border-top: none; + border-radius: 0 0 3px 3px; + width: 100%; + background: #eee; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; +} + +@mixin discussion-new-post-wmd-preview-container { + @include discussion-wmd-preview-container; + border-color: #333; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; +} + +@mixin discussion-wmd-preview-label { + padding-top: 3px; + padding-left: 5px; + width: 100%; + color: #bbb; + text-transform: uppercase; + font-size: 11px; +} + +@mixin discussion-wmd-preview { + padding: 10px 20px; + width: 100%; + color: #333; +} + +@-webkit-keyframes fadeIn { + 0% { opacity: 0.0; } + 100% { opacity: 1.0; } +} + +// extends - content - text overflow by ellipsis +%cont-truncated { + @include box-sizing(border-box); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} \ No newline at end of file diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss new file mode 100644 index 0000000000..96ec8ea801 --- /dev/null +++ b/lms/static/sass/discussion/elements/_editor.scss @@ -0,0 +1,168 @@ +// discussion - elements - editor +// ==================== + +// UI: general editor styling + +// TO-DO: isolate out all editing styling from _discussion.scss and clean up cases defined below once general syling exists + +// ========================= + +// CASE: new post +.forum-new-post-form { + .wmd-input { + @include discussion-wmd-input; + @include box-sizing(border-box); + position: relative; + z-index: 1; + width: 100%; + height: 150px; + background: $white; + } + + .wmd-preview-container { + @include discussion-new-post-wmd-preview-container; + } + + .wmd-preview-label { + @include discussion-wmd-preview-label; + } + + .wmd-preview { + @include discussion-wmd-preview; + } + + .wmd-button { + background: none; + } +} + +// ========================= + +// CASE: inline styling +// TO-DO: additional styling cleanup here necessary, for now this case was ported over from _discussion.scss +.discussion-module .forum-new-post-form { + + .wmd-panel { + width: 100%; + min-width: 500px; + } + + .wmd-button-bar { + width: 100%; + } + + .wmd-input { + width: 100%; + height: 150px; + border-radius: 3px 3px 0 0; + font-style: normal; + font-size: 0.8em; + font-family: Monaco, 'Lucida Console', monospace; + line-height: 1.6em; + + &::-webkit-input-placeholder { + color: #888; + } + } + + .wmd-button-row { + @include transition(all .2s ease-out 0s); + position: relative; + overflow: hidden; + margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4); + padding: 0; + height: 30px; + } + + .wmd-spacer { + position: absolute; + display: inline-block; + margin-left: 14px; + width: 1px; + height: 20px; + background-color: Silver; + list-style: none; + } + + .wmd-button { + position: absolute; + display: inline-block; + padding-right: 3px; + padding-left: 2px; + width: 20px; + height: 20px; + background: none; + list-style: none; + cursor: pointer; + } + + .wmd-button > span { + display: inline-block; + width: 20px; + height: 20px; + background-image: url('/static/images/wmd-buttons-transparent.png'); + background-position: 0px 0px; + background-repeat: no-repeat; + } + + .wmd-spacer1 { + left: 50px; + } + .wmd-spacer2 { + left: 175px; + } + + .wmd-spacer3 { + left: 300px; + } + + .wmd-prompt-background { + background-color: Black; + } + + .wmd-prompt-dialog { + @extend .modal; + background: $white; + } + + .wmd-prompt-dialog { + padding: $baseline; + + > div { + font-size: 0.8em; + font-family: arial, helvetica, sans-serif; + } + + b { + font-size: 16px; + } + + > form > input[type="text"] { + border-radius: 3px; + color: #333; + } + + > form > input[type="button"] { + border: 1px solid #888; + font-family: $sans-serif; + font-size: 14px; + } + + > form > input[type="file"] { + margin-bottom: 18px; + } + } + + .wmd-button-row { + // this is being hidden now because the inline styles to position the icons are not being written + position: relative; + height: 25px; + } + + .wmd-button { + span { + background-image: url("/static/images/wmd-buttons.png"); + display: inline-block; + } + } +} diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index cdb15d324e..9adf6e6fe6 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -1,3 +1,6 @@ +// discussion - elements - navigation +// ==================== + .forum-nav { @include box-sizing(border-box); float: left; diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss index 347ae0d683..22d6bbf1d6 100644 --- a/lms/static/sass/discussion/utilities/_shame.scss +++ b/lms/static/sass/discussion/utilities/_shame.scss @@ -95,3 +95,33 @@ li[class*=forum-nav-thread-label-] { display: none !important; } } + +// ------------- +// new post form +// ------------- + +.forum-new-post-form { + // Override global label rules + .topic-filter-label { + margin-bottom: 0; + } + + // Override global ul rules + .topic-menu { + padding-left: 0; + } + + .topic-menu, .topic-submenu { + margin-top: 0; + margin-bottom: 0; + } + + // Override global span rules + .post-topic-button .drop-arrow { + line-height: 36px; + } + + .topic-title { + line-height: 14px; + } +} diff --git a/lms/static/sass/discussion/views/_new-post.scss b/lms/static/sass/discussion/views/_new-post.scss new file mode 100644 index 0000000000..070494e19a --- /dev/null +++ b/lms/static/sass/discussion/views/_new-post.scss @@ -0,0 +1,224 @@ +// discussion - views - new post +// ==================== + +// UI: form structure +.forum-new-post-form { + @include clearfix; + box-sizing: border-box; + margin: 0; + border-radius: 3px; + padding: ($baseline*2); + min-width: 760px; + max-width: 1180px; + background: $gray-l5; + + .post-field { + margin-bottom: $baseline; + + .field-label { + display: inline-block; + width: 50%; + vertical-align: top; + line-height: 40px; + + .field-input { + display: inline-block; + width: 100%; + } + + .field-label-text { + display: inline-block; + width: 25%; + vertical-align: top; + text-transform: uppercase; + font-size: 12px; + line-height: 40px; + } + + .field-label-text + .field-input { + width: 75%; + } + } + + // UI: support text for input fields + .field-help { + @include box-sizing(border-box); + display: inline-block; + padding-left: $baseline; + width: 50%; + font-size: 12px; + } + } + + .post-options { + margin-bottom: ($baseline/2); + } +} + +// CASE: inline styling +.discussion-module .forum-new-post-form { + background: $white; +} + +// ==================== + +// UI: inputs +.forum-new-post-form { + .post-topic-button { + @include white-button; + @extend %cont-truncated; + z-index: 1000; + padding: 0 $baseline 0 ($baseline*.75); + height: 40px; + font-size: 14px; + line-height: 36px; + + .drop-arrow { + float: right; + color: #999; + } + } + + input[type=text].field-input { + @include box-sizing(border-box); + border: 1px solid $gray-l2; + border-radius: 3px; + padding: 0 $baseline/2; + height: 40px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; + color: #333; + font-weight: 700; + font-size: 16px; + font-family: 'Open Sans', sans-serif; + } + + .post-option { + @include box-sizing(border-box); + display: inline-block; + margin-right: $baseline; + border: 1px solid transparent; + border-radius: 3px; + padding: ($baseline/2); + + &:hover { + border-color: $gray-l3; + } + + &.is-enabled { + border-color: $blue; + color: $blue; + } + + .post-option-input { + margin-right: ($baseline/2); + } + + .icon { + margin-right: 0.5em; + } + } +} + +// ==================== + +// UI: actions +.forum-new-post-form { + .submit { + @include blue-button; + display: inline-block; + margin-right: ($baseline/2); + } + + .cancel { + @include white-button; + display: inline-block; + } +} + +// ==================== + +// UI: errors - new post creation +.forum-new-post-form { + .post-errors { + margin-bottom: $baseline; + border-radius: 3px; + padding: 0; + background: $error-red; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2); + color: $white; + list-style: none; + + .post-error { + padding: ($baseline/2) $baseline 12px 45px; + border-bottom: 1px solid $red; + background: url(../images/white-error-icon.png) no-repeat 15px 14px; + + &:last-child { + border-bottom: none; + } + } + } +} + +// ==================== + +// UI: topic menu + +// TO-DO: refactor to use _navigation.scss as general topic selector +.forum-new-post-form .post-topic { + position: relative; + + .topic-menu-wrapper { + @include box-sizing(border-box); + position: absolute; + top: 40px; + left: 0; + z-index: 9999; + border: 1px solid $gray-l3; + width: 100%; + background: $white; + box-shadow: 0 2px 1px $shadow; + } + + .topic-filter-label { + border-bottom: 1px solid $gray-l2; + padding: ($baseline/4); + } + + .topic-filter-input { + @include box-sizing(border-box); + border: 1px solid $gray-l3; + padding: 0 15px; + width: 100%; + height: 30px; + color: #333; + font-size: 11px; + line-height: 16px; + } + + .topic-menu { + overflow-y: scroll; + max-height: 400px; + list-style: none; + } + + .topic-submenu { + padding-left: $baseline; + list-style: none; + } + + .topic-title { + display: block; + border-bottom: 1px solid $gray-l3; + padding: ($baseline/2); + font-size: 14px; + } + + a.topic-title { + @include transition(none); + + &:hover, &:focus { + background-color: $gray-l4; + } + } +} diff --git a/lms/templates/discussion/_filter_dropdown.html b/lms/templates/discussion/_filter_dropdown.html index 7fb3cbfa8f..6ba420f422 100644 --- a/lms/templates/discussion/_filter_dropdown.html +++ b/lms/templates/discussion/_filter_dropdown.html @@ -14,7 +14,7 @@ <%def name="render_entry(entries, entry)">
  • ${entry} diff --git a/lms/templates/discussion/_underscore_templates.html b/lms/templates/discussion/_underscore_templates.html index d6dc58ffca..aed33d9850 100644 --- a/lms/templates/discussion/_underscore_templates.html +++ b/lms/templates/discussion/_underscore_templates.html @@ -257,7 +257,7 @@ ) %> +${'<%='}${js_block}${'%>'} - <% + <% js_block = u""" var fmt; // Counts in data do not include the post itself, but the UI should @@ -345,8 +345,7 @@ % endif - - + - - - - - - - - - - diff --git a/lms/templates/discussion/index.html b/lms/templates/discussion/index.html index 1ed39aeede..38eddd692d 100644 --- a/lms/templates/discussion/index.html +++ b/lms/templates/discussion/index.html @@ -23,8 +23,6 @@ <%include file="_discussion_course_navigation.html" args="active_page='discussion'" /> -
    -
    + +