Update discussion tab sidebar header
The home button is removed, the search box is always displayed, and many visual adjustments are made, along with a large amount of refactoring. Originally reviewed in #4211
This commit is contained in:
Greg Price
@@ -59,24 +59,79 @@ describe "DiscussionThreadListView", ->
|
||||
</li>
|
||||
</script>
|
||||
<script type="text/template" id="thread-list-template">
|
||||
<div class="browse-search">
|
||||
<div class="home"></div>
|
||||
<div class="browse is-open"></div>
|
||||
<div class="search">
|
||||
<form class="post-search">
|
||||
<label class="sr" for="search-discussions">Search</label>
|
||||
<input type="text" id="search-discussions" placeholder="Search all discussions" class="post-search-field">
|
||||
</form>
|
||||
</div>
|
||||
<div class="forum-nav-header">
|
||||
<a href="#" class="forum-nav-browse" aria-haspopup="true">
|
||||
<i class="icon icon-reorder"></i>
|
||||
<span class="sr">Discussion topics; current selection is: </span>
|
||||
<span class="forum-nav-browse-current">All Discussions</span>
|
||||
▾
|
||||
</a>
|
||||
<form class="forum-nav-search">
|
||||
<label>
|
||||
<span class="sr">Search</span>
|
||||
<input class="forum-nav-search-input" type="text" placeholder="Search all posts">
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
<div class="forum-nav-refine-bar">
|
||||
<span class="forum-nav-sort">
|
||||
<select class="forum-nav-sort-control">
|
||||
<option value="date">by recent activity</option>
|
||||
<option value="comments">by most activity</option>
|
||||
<option value="votes">by most votes</option>
|
||||
</select>
|
||||
</span>
|
||||
<div class="forum-nav-browse-menu-wrapper" style="display: none">
|
||||
<form class="forum-nav-browse-filter">
|
||||
<label>
|
||||
<span class="sr">Filter Topics</span>
|
||||
<input type="text" class="forum-nav-browse-filter-input" placeholder="filter topics">
|
||||
</label>
|
||||
</form>
|
||||
<ul class="forum-nav-browse-menu">
|
||||
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-all">
|
||||
<a href="#" class="forum-nav-browse-title">All Discussions</a>
|
||||
</li>
|
||||
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-flagged">
|
||||
<a href="#" class="forum-nav-browse-title"><i class="icon icon-flag"></i>Flagged Discussions</a>
|
||||
</li>
|
||||
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-following">
|
||||
<a href="#" class="forum-nav-browse-title"><i class="icon icon-star"></i>Posts I'm Following</a>
|
||||
</li>
|
||||
<li class="forum-nav-browse-menu-item">
|
||||
<a href="#" class="forum-nav-browse-title">Parent</a>
|
||||
<ul class="forum-nav-browse-submenu">
|
||||
<li class="forum-nav-browse-menu-item">
|
||||
<a href="#" class="forum-nav-browse-title">Target</a>
|
||||
<ul class="forum-nav-browse-submenu">
|
||||
<li
|
||||
class="forum-nav-browse-menu-item"
|
||||
data-discussion-id='{"sort_key": null, "id": "child"}'
|
||||
data-cohorted="false"
|
||||
>
|
||||
<a href="#" class="forum-nav-browse-title">Child</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li
|
||||
class="forum-nav-browse-menu-item"
|
||||
data-discussion-id='{"sort_key": null, "id": "sibling"}'
|
||||
data-cohorted="false"
|
||||
>
|
||||
<a href="#" class="forum-nav-browse-title">Sibling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
class="forum-nav-browse-menu-item"
|
||||
data-discussion-id='{"sort_key": null, "id": "other"}'
|
||||
data-cohorted="false"
|
||||
>
|
||||
<a href="#" class="forum-nav-browse-title">Other Category</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="forum-nav-thread-list-wrapper">
|
||||
<div class="forum-nav-refine-bar">
|
||||
<span class="forum-nav-sort">
|
||||
<select class="forum-nav-sort-control">
|
||||
<option value="date">by recent activity</option>
|
||||
<option value="comments">by most activity</option>
|
||||
<option value="votes">by most votes</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-alerts"></div>
|
||||
<ul class="forum-nav-thread-list"></ul>
|
||||
@@ -372,3 +427,135 @@ describe "DiscussionThreadListView", ->
|
||||
it "when none should be present", ->
|
||||
renderSingleThreadWithProps({})
|
||||
expect($(".forum-nav-thread-labels").length).toEqual(0)
|
||||
|
||||
describe "browse menu", ->
|
||||
setupAjax = (callback) ->
|
||||
$.ajax.andCallFake(
|
||||
(params) =>
|
||||
if callback
|
||||
callback(params)
|
||||
params.success({discussion_data: [], page: 1, num_pages: 1})
|
||||
{always: ->}
|
||||
)
|
||||
|
||||
afterEach ->
|
||||
# Remove handler added to make browse menu disappear
|
||||
$("body").unbind("click")
|
||||
|
||||
expectBrowseMenuVisible = (isVisible) ->
|
||||
expect($(".forum-nav-browse-menu:visible").length).toEqual(if isVisible then 1 else 0)
|
||||
expect($(".forum-nav-thread-list-wrapper:visible").length).toEqual(if isVisible then 0 else 1)
|
||||
|
||||
it "should not be visible by default", ->
|
||||
expectBrowseMenuVisible(false)
|
||||
|
||||
it "should show when header button is clicked", ->
|
||||
$(".forum-nav-browse").click()
|
||||
expectBrowseMenuVisible(true)
|
||||
|
||||
describe "when shown", ->
|
||||
beforeEach ->
|
||||
$(".forum-nav-browse").click()
|
||||
|
||||
it "should hide when header button is clicked", ->
|
||||
$(".forum-nav-browse").click()
|
||||
expectBrowseMenuVisible(false)
|
||||
|
||||
it "should hide when a click outside the menu occurs", ->
|
||||
$(".forum-nav-search-input").click()
|
||||
expectBrowseMenuVisible(false)
|
||||
|
||||
it "should hide when a search is executed", ->
|
||||
setupAjax()
|
||||
$(".forum-nav-search-input").trigger($.Event("keydown", {which: 13}))
|
||||
expectBrowseMenuVisible(false)
|
||||
|
||||
it "should hide when a category is clicked", ->
|
||||
$(".forum-nav-browse-title")[0].click()
|
||||
expectBrowseMenuVisible(false)
|
||||
|
||||
it "should still be shown when filter input is clicked", ->
|
||||
$(".forum-nav-browse-filter-input").click()
|
||||
expectBrowseMenuVisible(true)
|
||||
|
||||
describe "filtering", ->
|
||||
checkFilter = (filterText, expectedItems) ->
|
||||
$(".forum-nav-browse-filter-input").val(filterText).keyup()
|
||||
visibleItems = $(".forum-nav-browse-title:visible").map(
|
||||
(i, elem) -> $(elem).text()
|
||||
).get()
|
||||
expect(visibleItems).toEqual(expectedItems)
|
||||
|
||||
it "should be case-insensitive", ->
|
||||
checkFilter("flagged", ["Flagged Discussions"])
|
||||
|
||||
it "should match partial words", ->
|
||||
checkFilter("ateg", ["Other Category"])
|
||||
|
||||
it "should show ancestors and descendants of matches", ->
|
||||
checkFilter("Target", ["Parent", "Target", "Child"])
|
||||
|
||||
it "should handle multiple words regardless of order", ->
|
||||
checkFilter("Following Posts", ["Posts I'm Following"])
|
||||
|
||||
it "should handle multiple words in different depths", ->
|
||||
checkFilter("Parent Child", ["Parent", "Target", "Child"])
|
||||
|
||||
describe "selecting an item", ->
|
||||
it "should clear the search box", ->
|
||||
setupAjax()
|
||||
$(".forum-nav-search-input").val("foobar")
|
||||
$(".forum-nav-browse-menu-following .forum-nav-browse-title").click()
|
||||
expect($(".forum-nav-search-input").val()).toEqual("")
|
||||
|
||||
it "should change the button text", ->
|
||||
setupAjax()
|
||||
$(".forum-nav-browse-menu-following .forum-nav-browse-title").click()
|
||||
expect($(".forum-nav-browse-current").text()).toEqual("Posts I'm Following")
|
||||
|
||||
testSelectionRequest = (callback, itemText) ->
|
||||
setupAjax(callback)
|
||||
$(".forum-nav-browse-title:contains(#{itemText})").click()
|
||||
|
||||
it "should get all discussions", ->
|
||||
testSelectionRequest(
|
||||
(params) -> expect(params.url.path()).toEqual(DiscussionUtil.urlFor("threads")),
|
||||
"All"
|
||||
)
|
||||
|
||||
it "should get flagged threads", ->
|
||||
testSelectionRequest(
|
||||
(params) ->
|
||||
expect(params.url.path()).toEqual(DiscussionUtil.urlFor("search"))
|
||||
expect(params.data.flagged).toEqual(true)
|
||||
,
|
||||
"Flagged"
|
||||
)
|
||||
|
||||
it "should get followed threads", ->
|
||||
testSelectionRequest(
|
||||
(params) ->
|
||||
expect(params.url.path()).toEqual(
|
||||
DiscussionUtil.urlFor("followed_threads", window.user.id)
|
||||
)
|
||||
,
|
||||
"Following"
|
||||
)
|
||||
|
||||
it "should get threads for the selected leaf", ->
|
||||
testSelectionRequest(
|
||||
(params) ->
|
||||
expect(params.url.path()).toEqual(DiscussionUtil.urlFor("search"))
|
||||
expect(params.data.commentable_ids).toEqual("child")
|
||||
,
|
||||
"Child"
|
||||
)
|
||||
|
||||
it "should get threads for children of the selected intermediate node", ->
|
||||
testSelectionRequest(
|
||||
(params) ->
|
||||
expect(params.url.path()).toEqual(DiscussionUtil.urlFor("search"))
|
||||
expect(params.data.commentable_ids).toEqual("child,sibling")
|
||||
,
|
||||
"Parent"
|
||||
)
|
||||
|
||||
@@ -93,6 +93,10 @@ class @DiscussionUtil
|
||||
"notifications_status" : "/notification_prefs/status/"
|
||||
}[name]
|
||||
|
||||
@ignoreEnterKey: (event) =>
|
||||
if event.which == 13
|
||||
event.preventDefault()
|
||||
|
||||
@activateOnSpace: (event, func) ->
|
||||
if event.which == 32
|
||||
event.preventDefault()
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
if Backbone?
|
||||
class @DiscussionThreadListView extends Backbone.View
|
||||
events:
|
||||
"click .search": "showSearch"
|
||||
"click .home": "goHome"
|
||||
"click .browse": "toggleTopicDrop"
|
||||
"keydown .post-search-field": "performSearch"
|
||||
"focus .post-search-field": "showSearch"
|
||||
"click .forum-nav-browse": "toggleBrowseMenu"
|
||||
"keypress .forum-nav-browse-filter-input": (event) => DiscussionUtil.ignoreEnterKey(event)
|
||||
"keyup .forum-nav-browse-filter-input": "filterTopics"
|
||||
"click .forum-nav-browse-menu-wrapper": "ignoreClick"
|
||||
"click .forum-nav-browse-title": "selectTopic"
|
||||
"keydown .forum-nav-search-input": "performSearch"
|
||||
"change .forum-nav-sort-control": "sortThreads"
|
||||
"click .browse-topic-drop-menu": "filterTopic"
|
||||
"click .browse-topic-drop-search-input": "ignoreClick"
|
||||
"click .forum-nav-thread-link": "threadSelected"
|
||||
"click .forum-nav-load-more-link": "loadMorePages"
|
||||
"change .forum-nav-filter-cohort-control": "chooseCohort"
|
||||
'keyup .browse-topic-drop-search-input': DiscussionFilter.filterDrop
|
||||
|
||||
initialize: ->
|
||||
@displayedCollection = new Discussion(@collection.models, pages: @collection.pages)
|
||||
@@ -77,8 +75,8 @@ if Backbone?
|
||||
#TODO fix this entire chain of events
|
||||
addAndSelectThread: (thread) =>
|
||||
commentable_id = thread.get("commentable_id")
|
||||
commentable = @$(".board-name[data-discussion_id]").filter(-> $(this).data("discussion_id").id == commentable_id)
|
||||
@setTopicHack(commentable)
|
||||
menuItem = @$(".forum-nav-browse-menu-item[data-discussion-id]").filter(-> $(this).data("discussion-id").id == commentable_id)
|
||||
@setCurrentTopicDisplay(@getPathText(menuItem))
|
||||
@retrieveDiscussion commentable_id, =>
|
||||
@trigger "thread:created", thread.get('id')
|
||||
|
||||
@@ -97,9 +95,6 @@ if Backbone?
|
||||
else
|
||||
sidebar.css('top', '0');
|
||||
|
||||
sidebarWidth = .31 * $(".discussion-body").width();
|
||||
sidebar.css('width', sidebarWidth + 'px');
|
||||
|
||||
sidebarHeight = windowHeight - Math.max(discussionsBodyTop - scrollTop, @sidebar_padding)
|
||||
|
||||
topOffset = scrollTop + windowHeight
|
||||
@@ -110,14 +105,15 @@ if Backbone?
|
||||
sidebarHeight = Math.min(sidebarHeight + 1, discussionBody.outerHeight())
|
||||
sidebar.css 'height', sidebarHeight
|
||||
|
||||
browseSearchHeight = @$(".browse-search").outerHeight()
|
||||
headerHeight = @$(".forum-nav-header").outerHeight()
|
||||
refineBarHeight = @$(".forum-nav-refine-bar").outerHeight()
|
||||
@$('.forum-nav-thread-list').css('height', (sidebarHeight - browseSearchHeight - refineBarHeight - 2) + 'px')
|
||||
@$('.forum-nav-thread-list').css('height', (sidebarHeight - headerHeight - refineBarHeight - 2) + 'px')
|
||||
@$('.forum-nav-browse-menu-wrapper').css('height', (sidebarHeight - headerHeight - 2) + 'px')
|
||||
|
||||
|
||||
# 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.
|
||||
# Without this, clicking the search field would also close the menu.
|
||||
# closed, we need to stop propagation of a click in any part of the menu
|
||||
# that is not a link.
|
||||
ignoreClick: (event) ->
|
||||
event.stopPropagation()
|
||||
|
||||
@@ -243,14 +239,6 @@ if Backbone?
|
||||
@$(".forum-nav-thread[data-id!='#{thread_id}'] .forum-nav-thread-link").removeClass("is-active")
|
||||
@$(".forum-nav-thread[data-id='#{thread_id}'] .forum-nav-thread-link").addClass("is-active")
|
||||
|
||||
showSearch: ->
|
||||
@$(".browse").removeClass('is-dropped')
|
||||
@hideTopicDrop()
|
||||
|
||||
@$(".search").addClass('is-open')
|
||||
@$(".browse").removeClass('is-open')
|
||||
setTimeout (-> @$(".post-search-field").focus()), 200 unless @$(".post-search-field").is(":focus")
|
||||
|
||||
goHome: ->
|
||||
@template = _.template($("#discussion-home").html())
|
||||
$(".discussion-column").html(@template)
|
||||
@@ -269,51 +257,64 @@ if Backbone?
|
||||
@trigger("thread:removed")
|
||||
#select all threads
|
||||
|
||||
isBrowseMenuVisible: =>
|
||||
@$(".forum-nav-browse-menu-wrapper").is(":visible")
|
||||
|
||||
toggleTopicDrop: (event) =>
|
||||
showBrowseMenu: =>
|
||||
if not @isBrowseMenuVisible()
|
||||
@$(".forum-nav-browse").addClass("is-active")
|
||||
@$(".forum-nav-browse-menu-wrapper").show()
|
||||
@$(".forum-nav-thread-list-wrapper").hide()
|
||||
$(".forum-nav-browse-filter-input").focus()
|
||||
$("body").bind "click", @hideBrowseMenu
|
||||
|
||||
hideBrowseMenu: =>
|
||||
if @isBrowseMenuVisible()
|
||||
@$(".forum-nav-browse").removeClass("is-active")
|
||||
@$(".forum-nav-browse-menu-wrapper").hide()
|
||||
@$(".forum-nav-thread-list-wrapper").show()
|
||||
$("body").unbind "click", @hideBrowseMenu
|
||||
|
||||
toggleBrowseMenu: (event) =>
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
if @current_search != ""
|
||||
@clearSearch()
|
||||
@$(".search").removeClass('is-open')
|
||||
@$(".browse").addClass('is-open')
|
||||
@$(".browse").toggleClass('is-dropped')
|
||||
|
||||
if @$(".browse").hasClass('is-dropped')
|
||||
@$(".browse-topic-drop-menu-wrapper").show()
|
||||
$(".browse-topic-drop-search-input").focus()
|
||||
$("body").bind "click", @toggleTopicDrop
|
||||
$("body").bind "keydown", @setActiveItem
|
||||
if @isBrowseMenuVisible()
|
||||
@hideBrowseMenu()
|
||||
else
|
||||
@hideTopicDrop()
|
||||
@showBrowseMenu()
|
||||
|
||||
hideTopicDrop: ->
|
||||
@$(".browse-topic-drop-menu-wrapper").hide()
|
||||
$("body").unbind "click", @toggleTopicDrop
|
||||
$("body").unbind "keydown", @setActiveItem
|
||||
# Given a menu item, get the text for it and its ancestors
|
||||
# (starting from the root, separated by " / ")
|
||||
getPathText: (item) ->
|
||||
path = item.parents(".forum-nav-browse-menu-item").andSelf()
|
||||
pathTitles = path.children(".forum-nav-browse-title").map((i, elem) -> $(elem).text()).get()
|
||||
pathText = pathTitles.join(" / ")
|
||||
|
||||
# TODO get rid of this asap
|
||||
setTopicHack: (boardNameContainer) ->
|
||||
item = $(boardNameContainer).closest('a')
|
||||
boardName = item.find(".board-name").html()
|
||||
_.each item.parents('ul').not('.browse-topic-drop-menu'), (parent) ->
|
||||
boardName = $(parent).siblings('a').find('.board-name').html() + ' / ' + boardName
|
||||
@$(".current-board").html(@fitName(boardName))
|
||||
filterTopics: (event) =>
|
||||
query = $(event.target).val()
|
||||
items = @$(".forum-nav-browse-menu-item")
|
||||
if query.length == 0
|
||||
items.show()
|
||||
else
|
||||
# If all filter terms occur in the path to an item then that item and
|
||||
# all its descendants are displayed
|
||||
items.hide()
|
||||
items.each (i, item) =>
|
||||
item = $(item)
|
||||
if not item.is(":visible")
|
||||
pathText = @getPathText(item).toLowerCase()
|
||||
if query.split(" ").every((term) -> pathText.search(term.toLowerCase()) != -1)
|
||||
path = item.parents(".forum-nav-browse-menu-item").andSelf()
|
||||
path.add(item.find(".forum-nav-browse-menu-item")).show()
|
||||
|
||||
setTopic: (event) ->
|
||||
item = $(event.target).closest('a')
|
||||
boardName = item.find(".board-name").html()
|
||||
_.each item.parents('ul').not('.browse-topic-drop-menu'), (parent) ->
|
||||
boardName = $(parent).siblings('a').find('.board-name').html() + ' / ' + boardName
|
||||
@$(".current-board").html(@fitName(boardName))
|
||||
|
||||
setSelectedTopic: (name) ->
|
||||
@$(".current-board").html(@fitName(name))
|
||||
setCurrentTopicDisplay: (text) ->
|
||||
@$(".forum-nav-browse-current").text(@fitName(text))
|
||||
|
||||
getNameWidth: (name) ->
|
||||
test = $("<div>")
|
||||
test.css
|
||||
"font-size": @$(".current-board").css('font-size')
|
||||
"font-size": @$(".forum-nav-browse-current").css('font-size')
|
||||
opacity: 0
|
||||
position: 'absolute'
|
||||
left: -1000
|
||||
@@ -325,52 +326,55 @@ if Backbone?
|
||||
return width
|
||||
|
||||
fitName: (name) ->
|
||||
@maxNameWidth = (@$el.width() * .8) - 50
|
||||
@maxNameWidth = @$(".forum-nav-browse").width() -
|
||||
parseInt(@$(".forum-nav-browse").css("padding-left")) -
|
||||
parseInt(@$(".forum-nav-browse").css("padding-right")) -
|
||||
@$(".forum-nav-browse .icon").outerWidth(true) -
|
||||
@$(".forum-nav-browse-drop-arrow").outerWidth(true)
|
||||
width = @getNameWidth(name)
|
||||
if width < @maxNameWidth
|
||||
return name
|
||||
path = (x.replace /^\s+|\s+$/g, "" for x in name.split("/"))
|
||||
prefix = ""
|
||||
while path.length > 1
|
||||
prefix = gettext("…") + "/"
|
||||
path.shift()
|
||||
partialName = gettext("…") + "/" + path.join("/")
|
||||
partialName = prefix + path.join("/")
|
||||
if @getNameWidth(partialName) < @maxNameWidth
|
||||
return partialName
|
||||
rawName = path[0]
|
||||
name = gettext("…") + "/" + rawName
|
||||
name = prefix + rawName
|
||||
while @getNameWidth(name) > @maxNameWidth
|
||||
rawName = rawName[0...rawName.length-1]
|
||||
name = gettext("…") + "/" + rawName + gettext("…")
|
||||
name = prefix + rawName + gettext("…")
|
||||
return name
|
||||
|
||||
filterTopic: (event) ->
|
||||
if @current_search != ""
|
||||
@setTopic(event)
|
||||
@clearSearch @filterTopic, event
|
||||
selectTopic: (event) ->
|
||||
event.preventDefault()
|
||||
@hideBrowseMenu()
|
||||
@clearSearch()
|
||||
|
||||
item = $(event.target).closest('.forum-nav-browse-menu-item')
|
||||
@setCurrentTopicDisplay(@getPathText(item))
|
||||
if item.hasClass("forum-nav-browse-menu-all")
|
||||
@discussionIds = ""
|
||||
@$('.forum-nav-filter-cohort').show()
|
||||
@retrieveAllThreads()
|
||||
else if item.hasClass("forum-nav-browse-menu-flagged")
|
||||
@discussionIds = ""
|
||||
@$('.forum-nav-filter-cohort').hide()
|
||||
@retrieveFlaggedThreads()
|
||||
else if item.hasClass("forum-nav-browse-menu-following")
|
||||
@retrieveFollowed()
|
||||
@$('.forum-nav-filter-cohort').hide()
|
||||
else
|
||||
@setTopic(event) # just sets the title for the dropdown
|
||||
item = $(event.target).closest('li')
|
||||
discussionId = item.find("span.board-name").data("discussion_id")
|
||||
if discussionId == "#all"
|
||||
@discussionIds = ""
|
||||
@$(".post-search-field").val("")
|
||||
@$('.forum-nav-filter-cohort').show()
|
||||
@retrieveAllThreads()
|
||||
else if discussionId == "#flagged"
|
||||
@discussionIds = ""
|
||||
@$(".post-search-field").val("")
|
||||
@$('.forum-nav-filter-cohort').hide()
|
||||
@retrieveFlaggedThreads()
|
||||
else if discussionId == "#following"
|
||||
@retrieveFollowed(event)
|
||||
@$('.forum-nav-filter-cohort').hide()
|
||||
else
|
||||
discussionIds = _.map item.find(".board-name[data-discussion_id]"), (board) -> $(board).data("discussion_id").id
|
||||
|
||||
if $(event.target).attr('cohorted') == "True"
|
||||
@retrieveDiscussions(discussionIds, "function(){$('.forum-nav-filter-cohort').show();}")
|
||||
else
|
||||
@retrieveDiscussions(discussionIds, "function(){$('.forum-nav-filter-cohort').hide();}")
|
||||
|
||||
allItems = item.find(".forum-nav-browse-menu-item").andSelf()
|
||||
discussionIds = allItems.filter("[data-discussion-id]").map(
|
||||
(i, elem) -> $(elem).data("discussion-id").id
|
||||
).get()
|
||||
@retrieveDiscussions(discussionIds)
|
||||
@$(".forum-nav-filter-cohort").toggle(item.data('cohorted') == true)
|
||||
|
||||
chooseCohort: (event) ->
|
||||
@group_id = @$('.forum-nav-filter-cohort-control :selected').val()
|
||||
@collection.current_page = 0
|
||||
@@ -420,10 +424,12 @@ if Backbone?
|
||||
performSearch: (event) ->
|
||||
if event.which == 13
|
||||
event.preventDefault()
|
||||
text = @$(".post-search-field").val()
|
||||
@hideBrowseMenu()
|
||||
@setCurrentTopicDisplay(gettext("Search Results"))
|
||||
text = @$(".forum-nav-search-input").val()
|
||||
@searchFor(text)
|
||||
|
||||
searchFor: (text, callback, value) ->
|
||||
searchFor: (text) ->
|
||||
@clearSearchAlerts()
|
||||
@mode = 'search'
|
||||
@current_search = text
|
||||
@@ -432,7 +438,7 @@ if Backbone?
|
||||
# Mainly because this currently does not reset any pagination variables which could cause problems.
|
||||
# This doesn't use pagination either.
|
||||
DiscussionUtil.safeAjax
|
||||
$elem: @$(".post-search-field")
|
||||
$elem: @$(".forum-nav-search-input")
|
||||
data: { text: text }
|
||||
url: url
|
||||
type: "GET"
|
||||
@@ -441,8 +447,7 @@ if Backbone?
|
||||
loadingCallback: =>
|
||||
@$(".forum-nav-thread-list").html("<li class='forum-nav-load-more'>" + @getLoadingContent(gettext("Loading thread list")) + "</li>")
|
||||
loadedCallback: =>
|
||||
if callback
|
||||
callback.apply @, [value]
|
||||
@$(".forum-nav-thread-list .forum-nav-load-more").remove()
|
||||
success: (response, textStatus) =>
|
||||
if textStatus == 'success'
|
||||
# TODO: Augment existing collection?
|
||||
@@ -488,40 +493,13 @@ if Backbone?
|
||||
)
|
||||
@addSearchAlert(message)
|
||||
|
||||
clearSearch: (callback, value) ->
|
||||
@$(".post-search-field").val("")
|
||||
@searchFor("", callback, value)
|
||||
clearSearch: ->
|
||||
@$(".forum-nav-search-input").val("")
|
||||
@current_search = ""
|
||||
|
||||
setActiveItem: (event) ->
|
||||
if event.which == 13
|
||||
$(".browse-topic-drop-menu-wrapper .focused").click()
|
||||
return
|
||||
if event.which != 40 && event.which != 38
|
||||
return
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
items = $.makeArray($(".browse-topic-drop-menu-wrapper a").not(".hidden"))
|
||||
index = items.indexOf($('.browse-topic-drop-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)
|
||||
|
||||
$(".browse-topic-drop-menu-wrapper .focused").removeClass("focused")
|
||||
$(items[index]).addClass("focused")
|
||||
|
||||
itemTop = $(items[index]).parent().offset().top
|
||||
scrollTop = $(".browse-topic-drop-menu").scrollTop()
|
||||
itemFromTop = $(".browse-topic-drop-menu").offset().top - itemTop
|
||||
scrollTarget = Math.min(scrollTop - itemFromTop, scrollTop)
|
||||
scrollTarget = Math.max(scrollTop - itemFromTop - $(".browse-topic-drop-menu").height() + $(items[index]).height(), scrollTarget)
|
||||
$(".browse-topic-drop-menu").scrollTop(scrollTarget)
|
||||
|
||||
retrieveFollowed: (event)=>
|
||||
retrieveFollowed: () =>
|
||||
@mode = 'followed'
|
||||
@retrieveFirstPage(event)
|
||||
@retrieveFirstPage()
|
||||
|
||||
updateEmailNotifications: () =>
|
||||
if $('input.email-setting').attr('checked')
|
||||
|
||||
@@ -353,12 +353,7 @@ class DiscussionTabHomePage(CoursePage, DiscussionPageMixin):
|
||||
return self.q(css=".discussion-body section.home-header").present
|
||||
|
||||
def perform_search(self, text="dummy"):
|
||||
self.q(css=".discussion-body .sidebar .search").first.click()
|
||||
EmptyPromise(
|
||||
lambda: self.q(css=".discussion-body .sidebar .search.is-open").present,
|
||||
"waiting for search input to be available"
|
||||
).fulfill()
|
||||
self.q(css="#search-discussions").fill(text + chr(10))
|
||||
self.q(css=".forum-nav-search-input").fill(text + chr(10))
|
||||
EmptyPromise(
|
||||
self.is_ajax_finished,
|
||||
"waiting for server to return result"
|
||||
|
||||
@@ -595,299 +595,6 @@ body.discussion {
|
||||
box-shadow: none;
|
||||
line-height: 1.4;
|
||||
|
||||
.sidebar {
|
||||
@include box-sizing(border-box);
|
||||
float: left;
|
||||
border: 1px solid #aaa;
|
||||
border-right: 1px solid #bcbcbc;
|
||||
border-radius: 3px;
|
||||
width: 31%;
|
||||
height: 550px;
|
||||
background: #f6f6f6;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.browse-search {
|
||||
position: relative;
|
||||
display: block;
|
||||
border-bottom: 1px solid #a3a3a3;
|
||||
border-radius: 3px 0 0 0;
|
||||
height: 60px;
|
||||
|
||||
|
||||
.home, .browse,
|
||||
.search {
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
|
||||
@include transition(all .2s ease-out);
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
background-color: #dedede;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include transition(all .2s ease-out);
|
||||
z-index: 100;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: #aeaeae;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
line-height: 60px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.home {
|
||||
border-radius: 3px 0 0 0;
|
||||
box-shadow: -1px 0 0 #aaa inset;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.home-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.browse {
|
||||
border-radius: 3px 0 0 0;
|
||||
box-shadow: -1px 0 0 #aaa inset;
|
||||
|
||||
&.is-open {
|
||||
width:60%;
|
||||
.browse-topic-drop-btn {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.browse-topic-drop-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.is-dropped {
|
||||
.browse-topic-drop-btn {
|
||||
|
||||
span {
|
||||
color: $white;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
border-color: #4b4b4b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dropped {
|
||||
.browse-topic-drop-btn {
|
||||
background-color: #616161;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
cursor: pointer;
|
||||
border-radius: 0 3px 0 0;
|
||||
|
||||
&.is-open {
|
||||
cursor: auto;
|
||||
width: 60%;
|
||||
|
||||
.home {
|
||||
width:0%;
|
||||
}
|
||||
|
||||
.post-search {
|
||||
padding: 0 $baseline/2;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.post-search-field {
|
||||
cursor: text;
|
||||
pointer-events: auto;
|
||||
|
||||
&::-webkit-input-placeholder,
|
||||
&:-moz-placeholder,
|
||||
&:-ms-input-placeholder {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-topic-drop-btn {
|
||||
@include transition(none);
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid transparent;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 58px;
|
||||
color: #333;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.drop-arrow {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-topic-drop-icon {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
@include transition(none);
|
||||
}
|
||||
|
||||
.browse-topic-drop-menu-wrapper {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: -1px;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
background: #797979;
|
||||
border: 1px solid #4b4b4b;
|
||||
border-left: none;
|
||||
border-radius: 0 0 3px 3px;
|
||||
box-shadow: 1px 0 0 #4b4b4b inset;
|
||||
|
||||
.browse-topic-drop-menu {
|
||||
max-height: 400px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
position: inline;
|
||||
}
|
||||
|
||||
> li:first-child a {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 $baseline;
|
||||
border-top: 1px solid #5f5f5f;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
color: $white;
|
||||
@include clearfix;
|
||||
@include transition(none);
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #636363;
|
||||
}
|
||||
|
||||
.board-name {
|
||||
float: left;
|
||||
width: 80%;
|
||||
margin: 13px 0;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.unread {
|
||||
float: right;
|
||||
padding: 0 5px;
|
||||
margin-top: 13px;
|
||||
font-size: 11px;
|
||||
line-height: 22px;
|
||||
border-radius: 2px;
|
||||
@include linear-gradient(top, #4c4c4c, #5a5a5a);
|
||||
}
|
||||
}
|
||||
|
||||
li li {
|
||||
a {
|
||||
padding-left: 44px;
|
||||
background: url(../images/nested-icon.png) no-repeat 22px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
li li li {
|
||||
a {
|
||||
padding-left: 68px;
|
||||
background: url(../images/nested-icon.png) no-repeat 46px 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-topic-drop-search {
|
||||
padding: $baseline/2;
|
||||
}
|
||||
|
||||
.browse-topic-drop-search-input {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
padding: 0 15px;
|
||||
@include box-sizing(border-box);
|
||||
border-radius: 30px;
|
||||
border: 1px solid #333;
|
||||
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;
|
||||
}
|
||||
|
||||
.post-search {
|
||||
width: 100%;
|
||||
max-width: 30px;
|
||||
margin: auto;
|
||||
@include box-sizing(border-box);
|
||||
@include transition(all .2s linear 0s);
|
||||
}
|
||||
|
||||
.post-search-field {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
padding: 0 0 0 30px;
|
||||
margin: 14px auto;
|
||||
@include box-sizing(border-box);
|
||||
border: 1px solid #acacac;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5);
|
||||
background: url(../images/search-icon.png) no-repeat 7px center #fff;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
pointer-events: none;
|
||||
@include transition(all .2s ease-out 0s);
|
||||
|
||||
&::-webkit-input-placeholder,
|
||||
&:-moz-placeholder,
|
||||
&:-ms-input-placeholder {
|
||||
opacity: 0.0;
|
||||
@include transition(opacity .2s linear 0s);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #4697c1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-post-status {
|
||||
padding: 30px;
|
||||
font-size: 20px;
|
||||
|
||||
@@ -1,3 +1,96 @@
|
||||
.forum-nav {
|
||||
@include box-sizing(border-box);
|
||||
float: left;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
// ------
|
||||
// Header
|
||||
// ------
|
||||
.forum-nav-header {
|
||||
@include box-sizing(border-box);
|
||||
display: table;
|
||||
border-bottom: 1px solid $gray-l2;
|
||||
background-color: $gray-l3;
|
||||
}
|
||||
|
||||
.forum-nav-browse {
|
||||
@include box-sizing(border-box);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 50%;
|
||||
padding: ($baseline/4);
|
||||
|
||||
&:hover, &:focus, &.is-active {
|
||||
background-color: $gray-l5;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
.forum-nav-browse-current {
|
||||
@include font-size(12);
|
||||
}
|
||||
|
||||
.forum-nav-browse-drop-arrow {
|
||||
margin-left: ($baseline/4);
|
||||
}
|
||||
|
||||
.forum-nav-search {
|
||||
@include box-sizing(border-box);
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 50%;
|
||||
padding: ($baseline/4);
|
||||
}
|
||||
|
||||
.forum-nav-search .icon {
|
||||
@include font-size(12);
|
||||
position: absolute;
|
||||
margin-top: -6px;
|
||||
top: 50%;
|
||||
right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
|
||||
}
|
||||
|
||||
.forum-nav-search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// -----------
|
||||
// Browse menu
|
||||
// -----------
|
||||
.forum-nav-browse-menu-wrapper {
|
||||
overflow-y: scroll;
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
background: $gray-l5;
|
||||
}
|
||||
|
||||
.forum-nav-browse-filter {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $gray-l2;
|
||||
padding: ($baseline/4);
|
||||
}
|
||||
|
||||
.forum-nav-browse-filter .icon {
|
||||
@include font-size(12);
|
||||
position: absolute;
|
||||
margin-top: -6px;
|
||||
top: 50%;
|
||||
right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
|
||||
}
|
||||
|
||||
.forum-nav-browse-filter-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.forum-nav-browse-title .icon {
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
|
||||
// -------------------
|
||||
// Sort and filter bar
|
||||
// -------------------
|
||||
|
||||
@@ -1,3 +1,85 @@
|
||||
// -------------------
|
||||
// navigation - header
|
||||
// -------------------
|
||||
|
||||
// Override global a rules
|
||||
.forum-nav-browse {
|
||||
color: $black !important;
|
||||
}
|
||||
|
||||
// Override global label rules
|
||||
.forum-nav-search label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Override global input rules
|
||||
.forum-nav-search-input {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid $gray-l2 !important;
|
||||
border-radius: 3px !important;
|
||||
height: auto !important;
|
||||
padding-left: ($baseline/4) !important;
|
||||
padding-right: ($baseline/2 + 12px) !important; // Leave room for icon
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
// Firefox does not compute the correct containing box for absolute positioning
|
||||
// of .forum-nav-search .icon, so there's an extra div to make it happy
|
||||
.forum-nav-search-ff-position-fix {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// The sidebar class does a lot of things that we don't want in the thread list;
|
||||
// the following rules contain styling that is necessary and would otherwise
|
||||
// reside in elements/_navigation.scss if the sidebar styling did not make the
|
||||
// !important directive necessary.
|
||||
|
||||
.forum-nav {
|
||||
width: 31% !important;
|
||||
}
|
||||
|
||||
// ------------------------
|
||||
// navigation - browse menu
|
||||
// ------------------------
|
||||
|
||||
// Override global a rules
|
||||
.forum-nav-browse-title {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
// Override global label rules
|
||||
.forum-nav-browse-filter label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Override global input rules
|
||||
.forum-nav-browse-filter-input {
|
||||
box-shadow: none !important;
|
||||
border-radius: 3px !important;
|
||||
height: auto !important;
|
||||
padding-left: ($baseline/4) !important;
|
||||
padding-right: ($baseline/2 + 12px) !important; // Leave room for icon
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
// The sidebar class does a lot of things that we don't want in the thread list;
|
||||
// the following rules contain styling that is necessary and would otherwise
|
||||
// reside in elements/_navigation.scss if the sidebar styling did not make the
|
||||
// !important directive necessary.
|
||||
|
||||
.forum-nav-browse-title {
|
||||
border-bottom: 1px solid $gray-l3 !important;
|
||||
padding: ($baseline/2) ($baseline/2) !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: $forum-color-active-thread !important;
|
||||
}
|
||||
}
|
||||
|
||||
.forum-nav-browse-submenu {
|
||||
padding-left: $baseline !important;
|
||||
}
|
||||
|
||||
// --------------------------------
|
||||
// navigation - sort and filter bar
|
||||
// --------------------------------
|
||||
|
||||
@@ -12,41 +12,43 @@
|
||||
</%def>
|
||||
|
||||
<%def name="render_entry(entries, entry)">
|
||||
<li><a href="#" class="drop-menu-entry"><span class="board-name" data-discussion_id='${json.dumps(entries[entry])}' cohorted = "${str(entries[entry]['is_cohorted']).lower()}">${entry}</span></a></li>
|
||||
<li
|
||||
class="forum-nav-browse-menu-item"
|
||||
data-discussion-id='${json.dumps(entries[entry])}'
|
||||
data-cohorted="${str(entries[entry]['is_cohorted']).lower()}"
|
||||
>
|
||||
<a href="#" class="forum-nav-browse-title">${entry}</a>
|
||||
</li>
|
||||
</%def>
|
||||
|
||||
<%def name="render_category(categories, category)">
|
||||
<li>
|
||||
<a href="#" class="drop-menu-parent-category"><span class="board-name">${category}</span></a>
|
||||
<ul>
|
||||
<li class="forum-nav-browse-menu-item">
|
||||
<a href="#" class="forum-nav-browse-title">${category}</a>
|
||||
<ul class="forum-nav-browse-submenu">
|
||||
${render_dropdown(categories[category])}
|
||||
</ul>
|
||||
</li>
|
||||
</%def>
|
||||
|
||||
<div class="browse-topic-drop-menu-wrapper">
|
||||
<div class="browse-topic-drop-search">
|
||||
<label class="sr" for="browse-topic">${_("Filter Topics")}</label>
|
||||
<input type="text" id="browse-topic" class="browse-topic-drop-search-input" placeholder="${_('filter topics')}">
|
||||
</div>
|
||||
<ul class="browse-topic-drop-menu">
|
||||
<li>
|
||||
<a href="#" class="drop-menu-meta-category">
|
||||
<span class="board-name" data-discussion_id='#all'>${_("Show All Discussions")}</span>
|
||||
</a>
|
||||
<div class="forum-nav-browse-menu-wrapper" style="display: none">
|
||||
<form class="forum-nav-browse-filter">
|
||||
<label>
|
||||
<span class="sr">${_("Filter Topics")}</span>
|
||||
<input type="text" class="forum-nav-browse-filter-input" placeholder="${_("filter topics")}">
|
||||
<i class="icon icon-filter"></i>
|
||||
</label>
|
||||
</form>
|
||||
<ul class="forum-nav-browse-menu">
|
||||
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-all">
|
||||
<a href="#" class="forum-nav-browse-title">${_("All Discussions")}</a>
|
||||
</li>
|
||||
%if flag_moderator:
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="board-name" data-discussion_id='#flagged'><i class="icon-flag" style="padding-right:5px;"></i>${_("Show Flagged Discussions")}</span>
|
||||
</a>
|
||||
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-flagged">
|
||||
<a href="#" class="forum-nav-browse-title"><i class="icon icon-flag"></i>${_("Flagged Discussions")}</a>
|
||||
</li>
|
||||
|
||||
%endif
|
||||
<li>
|
||||
<a href="#" class="drop-menu-meta-category">
|
||||
<span class="board-name" data-discussion_id='#following'><i class="icon-star" style="padding-right:5px;"></i>${_("Posts I'm Following")}</span>
|
||||
</a>
|
||||
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-following">
|
||||
<a href="#" class="forum-nav-browse-title"><i class="icon icon-star"></i>${_("Posts I'm Following")}</a>
|
||||
</li>
|
||||
${render_dropdown(category_map)}
|
||||
</ul>
|
||||
|
||||
@@ -1,53 +1,48 @@
|
||||
<%! from django.utils.translation import ugettext as _ %>
|
||||
<script type="text/template" id="thread-list-template">
|
||||
<div class="browse-search">
|
||||
<div class="home">
|
||||
<a href="#" class="home-icon">
|
||||
<i class="icon icon-home"></i>
|
||||
<span class="sr">${_("Discussion Home")}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="browse is-open">
|
||||
<a href="#" class="browse-topic-drop-icon">
|
||||
<i class="icon icon-reorder"></i>
|
||||
<span class="sr">${_("Discussion Topics")}</span>
|
||||
</a>
|
||||
<a href="#" class="browse-topic-drop-btn" aria-haspopup="true" aria-owns="browse-topic-drop-menu">
|
||||
<span class="sr">${_("Discussion topics; current selection is: ")}</span>
|
||||
<span class="current-board">${_("Show All Discussions")}</span>
|
||||
<span class="drop-arrow" aria-hidden="true">▾</span>
|
||||
</a>
|
||||
</div>
|
||||
<%include file="_filter_dropdown.html" />
|
||||
<div class="search">
|
||||
<form class="post-search">
|
||||
<label class="sr" for="search-discussions">${_("Search")}</label>
|
||||
<input type="text" id="search-discussions" placeholder="${_("Search all discussions")}" class="post-search-field">
|
||||
</form>
|
||||
</div>
|
||||
<div class="forum-nav-header">
|
||||
<a href="#" class="forum-nav-browse" aria-haspopup="true">
|
||||
## There is no whitespace between these because the front-end JS code
|
||||
## needs to precisely compute the available width for forum-nav-
|
||||
## browse-current in order to do truncation of topic names.
|
||||
<i class="icon icon-reorder"></i><span class="sr">${_("Discussion topics; current selection is: ")}</span><span class="forum-nav-browse-current">${_("All Discussions")}</span><span class="forum-nav-browse-drop-arrow">▾</span>
|
||||
</a>
|
||||
<form class="forum-nav-search">
|
||||
<div class="forum-nav-search-ff-position-fix">
|
||||
<label>
|
||||
<span class="sr">${_("Search")}</span>
|
||||
<input class="forum-nav-search-input" type="text" placeholder="${_("Search all posts")}">
|
||||
<i class="icon icon-search"></i>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="forum-nav-refine-bar">
|
||||
%if is_course_cohorted and is_moderator:
|
||||
<span class="forum-nav-filter-cohort">
|
||||
<select class="forum-nav-filter-cohort-control">
|
||||
<option value="all">${_("View all cohorts")}</option>
|
||||
%for c in cohorts:
|
||||
<option value="${c['id']}">${_("View as {cohort_name}").format(cohort_name=c['name'])}</option>
|
||||
%endfor
|
||||
</select>
|
||||
%endif
|
||||
<%include file="_filter_dropdown.html" />
|
||||
<div class="forum-nav-thread-list-wrapper">
|
||||
<div class="forum-nav-refine-bar">
|
||||
%if is_course_cohorted and is_moderator:
|
||||
<span class="forum-nav-filter-cohort">
|
||||
<select class="forum-nav-filter-cohort-control">
|
||||
<option value="all">${_("View all cohorts")}</option>
|
||||
%for c in cohorts:
|
||||
<option value="${c['id']}">${_("View as {cohort_name}").format(cohort_name=c['name'])}</option>
|
||||
%endfor
|
||||
</select>
|
||||
</span>
|
||||
%endif
|
||||
|
||||
<span class="forum-nav-sort">
|
||||
<select class="forum-nav-sort-control">
|
||||
## Translators: This is a menu option for sorting forum threads
|
||||
<option value="date">${_("by recent activity")}</option>
|
||||
## Translators: This is a menu option for sorting forum threads
|
||||
<option value="comments">${_("by most activity")}</option>
|
||||
## Translators: This is a menu option for sorting forum threads
|
||||
<option value="votes">${_("by most votes")}</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="forum-nav-sort">
|
||||
<select class="forum-nav-sort-control">
|
||||
## Translators: This is a menu option for sorting forum threads
|
||||
<option value="date">${_("by recent activity")}</option>
|
||||
## Translators: This is a menu option for sorting forum threads
|
||||
<option value="comments">${_("by most activity")}</option>
|
||||
## Translators: This is a menu option for sorting forum threads
|
||||
<option value="votes">${_("by most votes")}</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
<div class="search-alerts"></div>
|
||||
<ul class="forum-nav-thread-list"></ul>
|
||||
</div>
|
||||
<div class="search-alerts"></div>
|
||||
<ul class="forum-nav-thread-list"></ul>
|
||||
</script>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
data-user-cohort-id="${user_cohort}"
|
||||
data-course-settings="${course_settings}">
|
||||
<div class="discussion-body">
|
||||
<div class="sidebar"></div>
|
||||
<div class="sidebar forum-nav"></div>
|
||||
<div class="discussion-column">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user