Skip to content

E
edx-platform
Commit 2a984c60 by Brian Jacobel
Options

Replace discussion topic selector with a native dropdown 

TNL-5165
parent 4b9ab319
Showing with 90 additions and 368 deletions
common/static/common/js/discussion/views/discussion_topic_menu_view.js
/* globals Backbone, _ */
(function() { (function() {
'use strict'; 'use strict';
if (Backbone) { if (Backbone) {
this.DiscussionTopicMenuView = Backbone.View.extend({ this.DiscussionTopicMenuView = Backbone.View.extend({
events: { events: {
'click .post-topic-button': 'toggleTopicDropdown', 'change .post-topic': 'handleTopicEvent'
'click .topic-menu-wrapper': 'handleTopicEvent',
'click .topic-filter-label': 'ignoreClick',
'keyup .topic-filter-input': 'filterDrop'
}, },
attributes: { attributes: {
'class': 'post-field' class: 'post-field'
}, },
initialize: function(options) { initialize: function(options) {
this.course_settings = options.course_settings; this.course_settings = options.course_settings;
this.currentTopicId = options.topicId; this.currentTopicId = options.topicId;
this.maxNameWidth = 26;
_.bindAll(this, _.bindAll(this,
'toggleTopicDropdown', 'handleTopicEvent', 'hideTopicDropdown', 'ignoreClick' 'handleTopicEvent'
); );
return this; return this;
}, },
/**
* When the menu is expanded, a click on the body element (outside of the menu) or on a menu element
* should close the menu except when the target is the search field. To accomplish this, we have to ignore
* clicks on the search field by stopping the propagation of the event.
*/
ignoreClick: function(event) {
event.stopPropagation();
return this;
},
render: function() { render: function() {
var context = _.clone(this.course_settings.attributes); var $general,
context = _.clone(this.course_settings.attributes);
context.topics_html = this.renderCategoryMap(this.course_settings.get('category_map')); context.topics_html = this.renderCategoryMap(this.course_settings.get('category_map'));
this.$el.html(_.template($('#topic-template').html())(context)); edx.HtmlUtils.setHtml(this.$el, edx.HtmlUtils.template($('#topic-template').html())(context));
this.dropdownButton = this.$('.post-topic-button');
this.topicMenu = this.$('.topic-menu-wrapper'); $general = this.$('.post-topic option:contains(General)');
this.selectedTopic = this.$('.js-selected-topic');
this.hideTopicDropdown();
if (this.getCurrentTopicId()) { if (this.getCurrentTopicId()) {
this.setTopic(this.$('.topic-title').filter( this.setTopic(this.$('.post-topic option').filter(
'[data-discussion-id="' + this.getCurrentTopicId() + '"]') '[data-discussion-id="' + this.getCurrentTopicId() + '"]'
); ));
} else if ($general) {
this.setTopic($general);
} else { } else {
this.setTopic(this.$('button.topic-title').first()); this.setTopic(this.$('.post-topic option').first());
} }
return this.$el; return this.$el;
}, },
renderCategoryMap: function(map) { renderCategoryMap: function(map) {
var category_template = _.template($('#new-post-menu-category-template').html()), var categoryTemplate = edx.HtmlUtils.template($('#new-post-menu-category-template').html()),
entry_template = _.template($('#new-post-menu-entry-template').html()); entryTemplate = edx.HtmlUtils.template($('#new-post-menu-entry-template').html()),
mappedCategorySnippets = _.map(map.children, function(name) {
return _.map(map.children, function(name) { var entry,
var html = '', entry; html = '';
if (_.has(map.entries, name)) { if (_.has(map.entries, name)) {
entry = map.entries[name]; entry = map.entries[name];
html = entry_template({ html = entryTemplate({
text: name, text: name,
id: entry.id, id: entry.id,
is_cohorted: entry.is_cohorted is_cohorted: entry.is_cohorted
}); });
} else { // subcategory } else { // subcategory
html = category_template({ html = categoryTemplate({
text: name, text: name,
entries: this.renderCategoryMap(map.subcategories[name]) entries: this.renderCategoryMap(map.subcategories[name])
}); });
} }
return html; return html;
}, this).join(''); }, this);
},
toggleTopicDropdown: function(event) {
event.preventDefault();
event.stopPropagation();
if (this.menuOpen) {
this.hideTopicDropdown();
} else {
this.showTopicDropdown();
}
return this;
},
showTopicDropdown: function() {
this.menuOpen = true;
this.dropdownButton.addClass('dropped');
this.topicMenu.show();
$(document.body).on('click.topicMenu', this.hideTopicDropdown);
return this;
},
hideTopicDropdown: function() { return edx.HtmlUtils.joinHtml.apply(null, mappedCategorySnippets);
this.menuOpen = false;
this.dropdownButton.removeClass('dropped');
this.topicMenu.hide();
$(document.body).off('click.topicMenu');
return this;
}, },
handleTopicEvent: function(event) { handleTopicEvent: function(event) {
event.preventDefault(); this.setTopic($('option:selected', event.target));
event.stopPropagation();
this.setTopic($(event.target));
return this; return this;
}, },
...@@ -112,9 +76,8 @@ ...@@ -112,9 +76,8 @@
if ($target.data('discussion-id')) { if ($target.data('discussion-id')) {
this.topicText = this.getFullTopicName($target); this.topicText = this.getFullTopicName($target);
this.currentTopicId = $target.data('discussion-id'); this.currentTopicId = $target.data('discussion-id');
this.setSelectedTopicName(this.topicText); $target.prop('selected', true);
this.trigger('thread:topic_change', $target); this.trigger('thread:topic_change', $target);
this.hideTopicDropdown();
} }
return this; return this;
}, },
...@@ -123,9 +86,6 @@ ...@@ -123,9 +86,6 @@
return this.currentTopicId; return this.currentTopicId;
}, },
setSelectedTopicName: function(text) {
return this.selectedTopic.text(this.fitName(text));
},
/** /**
* Return full name for the `topicElement` if it is passed. * Return full name for the `topicElement` if it is passed.
* Otherwise, full name for the current topic will be returned. * Otherwise, full name for the current topic will be returned.
...@@ -136,74 +96,13 @@ ...@@ -136,74 +96,13 @@
var name; var name;
if (topicElement) { if (topicElement) {
name = topicElement.html(); name = topicElement.html();
_.each(topicElement.parents('.topic-submenu'), function(item) { _.each(topicElement.parents('optgroup'), function(item) {
name = $(item).siblings('.topic-title').text() + ' / ' + name; name = $(item).attr('label') + ' / ' + name;
}); });
return name; return name;
} else { } else {
return this.topicText; return this.topicText;
} }
},
// @TODO move into utils.coffee
fitName: function(name) {
var ellipsisText = gettext('…'),
partialName, path, rawName, concatedLength;
if (name.length < this.maxNameWidth) {
return name;
} else {
path = _.map(name.split('/'), function(item) {
return item.replace(/^\s+|\s+$/g, '');
});
while (path.length > 1) {
path.shift();
partialName = ellipsisText + '/' + path.join('/');
if (partialName.length < this.maxNameWidth) {
return partialName;
}
}
rawName = path[0];
name = ellipsisText + ' / ' + rawName;
if (name.length > this.maxNameWidth) {
concatedLength = ellipsisText.length + ' / '.length + ellipsisText.length;
rawName = rawName.slice(0, this.maxNameWidth - concatedLength);
name = ellipsisText + ' / ' + rawName + ' ' + ellipsisText;
}
}
return name;
},
// 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: function(e) {
var $drop, $items, query;
$drop = $(e.target).parents('.topic-menu-wrapper');
query = $(e.target).val();
$items = $drop.find('.topic-menu-item');
if (query.length === 0) {
$items.removeClass('hidden');
return;
}
$items.addClass('hidden');
$items.each(function(_index, item) {
var path, pathText, pathTitles;
path = $(item).parents('.topic-menu-item').andSelf();
pathTitles = path.children('.topic-title').map(function(_, elem) {
return $(elem).text();
}).get();
pathText = pathTitles.join(' / ').toLowerCase();
if (query.split(' ').every(function(term) {
return pathText.search(term.toLowerCase()) !== -1;
})) {
$(item).removeClass('hidden');
$(item).find('.topic-menu-item').removeClass('hidden');
$(item).parents('.topic-menu-item').removeClass('hidden');
}
});
} }
}); });
} }
......
common/static/common/js/discussion/views/new_post_view.js
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
}); });
this.$el.html(_.template($('#new-post-template').html())(context)); this.$el.html(_.template($('#new-post-template').html())(context));
threadTypeTemplate = _.template($('#thread-type-template').html()); threadTypeTemplate = _.template($('#thread-type-template').html());
if ($('.js-group-select').is(':disabled')) { if ($('.js-group-select').prop('disabled')) {
$('.group-selector-wrapper').addClass('disabled'); $('.group-selector-wrapper').addClass('disabled');
} }
this.addField(threadTypeTemplate({ this.addField(threadTypeTemplate({
......
common/static/common/js/spec/discussion/view/discussion_thread_edit_view_spec.js
...@@ -47,10 +47,10 @@ ...@@ -47,10 +47,10 @@
} }
}; };
}); });
view.$el.find('.topic-title').filter(function(idx, el) { view.$el.find('.topic-title').filter(function(idx, el) {
return $(el).data('discussionId') === newTopicId; return $(el).data('discussionId') === newTopicId;
}).click(); // set new topic }).prop('selected', true); // set new topic
view.$('.post-topic').trigger('change');
view.$('.edit-post-title').val('changed thread title'); // set new title view.$('.edit-post-title').val('changed thread title'); // set new title
if (discussionMode !== 'inline') { if (discussionMode !== 'inline') {
view.$("label[for$='post-type-discussion']").click(); // set new thread type view.$("label[for$='post-type-discussion']").click(); // set new thread type
......
common/static/common/js/spec/discussion/view/discussion_topic_menu_view_spec.js
/* globals DiscussionTopicMenuView, DiscussionSpecHelper, DiscussionCourseSettings */ /* globals DiscussionTopicMenuView, DiscussionSpecHelper, DiscussionCourseSettings, _ */
(function() { (function() {
'use strict'; 'use strict';
describe('DiscussionTopicMenuView', function() { describe('DiscussionTopicMenuView', function() {
...@@ -10,21 +10,6 @@ ...@@ -10,21 +10,6 @@
}, options); }, options);
this.view = new DiscussionTopicMenuView(options); this.view = new DiscussionTopicMenuView(options);
this.view.render().appendTo('#fixture-element'); this.view.render().appendTo('#fixture-element');
this.defaultTextWidth = this.completeText.length;
};
this.openMenu = function() {
var menuWrapper = this.view.$('.topic-menu-wrapper');
expect(menuWrapper).toBeHidden();
this.view.$el.find('.post-topic-button').first().click();
expect(menuWrapper).toBeVisible();
};
this.closeMenu = function() {
var menuWrapper = this.view.$('.topic-menu-wrapper');
expect(menuWrapper).toBeVisible();
this.view.$el.find('.post-topic-button').first().click();
expect(menuWrapper).toBeHidden();
}; };
DiscussionSpecHelper.setUpGlobals(); DiscussionSpecHelper.setUpGlobals();
...@@ -89,89 +74,25 @@ ...@@ -89,89 +74,25 @@
}, },
'is_cohorted': true 'is_cohorted': true
}); });
this.parentCategoryText = 'Basic Question Types';
this.selectedOptionText = 'Selection From Options';
this.completeText = this.parentCategoryText + ' / ' + this.selectedOptionText;
});
it('completely show parent category and sub-category', function() {
var dropdownText;
this.createTopicView();
this.view.maxNameWidth = this.defaultTextWidth + 1;
this.view.$el.find('.topic-menu-entry').first().click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(this.completeText).toEqual(dropdownText);
});
it('truncation happens with specific title lengths', function() {
var dropdownText;
this.createTopicView();
this.view.$el.find('.topic-menu-entry')[2].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('…/Very long category name');
this.view.$el.find('.topic-menu-entry')[5].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('… / What Are Your Goals f …');
}); });
it('truncation happens with longer title lengths', function() { it('defaults to first subtopic', function() {
var dropdownText;
this.createTopicView(); this.createTopicView();
this.view.$el.find('.topic-menu-entry')[3].click(); expect(this.view.$el.find('option.topic-title:selected').text()).toEqual('Selection From Options');
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('… / Very very very very l …');
}); });
it('titles are escaped before display', function() { it('titles are escaped before display', function() {
var dropdownText;
this.createTopicView(); this.createTopicView();
this.view.$el.find('.topic-menu-entry')[4].click(); $(this.view.$el.find('option.topic-title')[4]).prop('selected', true);
dropdownText = this.view.$el.find('.js-selected-topic').text(); expect(this.view.$el.find('option.topic-title:selected').text()).toContain('<em>');
expect(dropdownText).toContain('em&gt;');
});
it('broken span doesn\'t occur', function() {
var dropdownText;
this.createTopicView();
this.view.maxNameWidth = this.selectedOptionText.length + 100;
this.view.$el.find('button.topic-title').first().click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText.indexOf('/ span>')).toEqual(-1);
}); });
it('appropriate topic is selected if `topicId` is passed', function() { it('appropriate topic is selected if `topicId` is passed', function() {
var completeText = this.parentCategoryText + ' / Numerical Input',
dropdownText;
this.createTopicView({ this.createTopicView({
topicId: 'c49f0dfb8fc94c9c8d9999cc95190c56' topicId: 'c49f0dfb8fc94c9c8d9999cc95190c56'
}); });
this.view.maxNameWidth = this.defaultTextWidth + 1;
this.view.render(); this.view.render();
dropdownText = this.view.$el.find('.js-selected-topic').text(); expect(this.view.$el.find('option.topic-title:selected').text()).toEqual('Numerical Input');
expect(completeText).toEqual(dropdownText);
});
it("defaults to the first topic if you don't click one", function() {
this.createTopicView();
expect(
this.view.$el.find('.js-selected-topic').text()
).toMatch(
this.view.$el.find('.topic-menu-entry')[0].innerHTML
);
});
it('click outside of the dropdown close it', function() {
this.createTopicView();
this.openMenu();
$(document.body).click();
expect(this.view.$('.topic-menu-wrapper')).toBeHidden();
});
it('can toggle the menu', function() {
this.createTopicView();
this.openMenu();
this.closeMenu();
}); });
}); });
}).call(this); }).call(this);
common/static/common/js/spec/discussion/view/new_post_view_spec.js
...@@ -34,29 +34,33 @@ ...@@ -34,29 +34,33 @@
describe('cohort selector', function() { describe('cohort selector', function() {
beforeEach(function() { beforeEach(function() {
this.course_settings = new DiscussionCourseSettings({ this.course_settings = new DiscussionCourseSettings({
'category_map': { category_map: {
'children': ['Topic', 'General'], children: ['Topic', 'General', 'Not Cohorted'],
'entries': { entries: {
'Topic': { Topic: {
'is_cohorted': true, is_cohorted: true,
'id': 'topic' id: 'topic'
}, },
'General': { General: {
'is_cohorted': false, is_cohorted: true,
'id': 'general' id: 'general'
},
'Not Cohorted': {
is_cohorted: false,
id: 'not-cohorted'
} }
} }
}, },
'allow_anonymous': false, allow_anonymous: false,
'allow_anonymous_to_peers': false, allow_anonymous_to_peers: false,
'is_cohorted': true, is_cohorted: true,
'cohorts': [ cohorts: [
{ {
'id': 1, id: 1,
'name': 'Cohort1' name: 'Cohort1'
}, { }, {
'id': 2, id: 2,
'name': 'Cohort2' name: 'Cohort2'
} }
] ]
}); });
...@@ -71,20 +75,24 @@ ...@@ -71,20 +75,24 @@
it('is not visible to students', function() { it('is not visible to students', function() {
return checkVisibility(this.view, false, false, true); return checkVisibility(this.view, false, false, true);
}); });
it('allows TAs to see the cohort selector', function() { it('allows TAs to see the cohort selector when the topic is cohorted', function() {
DiscussionSpecHelper.makeTA(); DiscussionSpecHelper.makeTA();
return checkVisibility(this.view, true, false, true); return checkVisibility(this.view, true, false, true);
}); });
it('allows moderators to see the cohort selector', function() { it('allows moderators to see the cohort selector when the topic is cohorted', function() {
DiscussionSpecHelper.makeModerator(); DiscussionSpecHelper.makeModerator();
return checkVisibility(this.view, true, false, true); return checkVisibility(this.view, true, false, true);
}); });
it('only enables the cohort selector when applicable', function() { it('only enables the cohort selector when applicable', function() {
DiscussionSpecHelper.makeModerator(); DiscussionSpecHelper.makeModerator();
checkVisibility(this.view, true, false, true); checkVisibility(this.view, true, false, true);
$('.topic-menu-entry:contains(General)').click();
$('option:contains(Not Cohorted)').prop('selected', true);
$('.post-topic').trigger('change');
checkVisibility(this.view, true, true, false); checkVisibility(this.view, true, true, false);
$('.topic-menu-entry:contains(Topic)').click();
$('option:contains(Topic)').prop('selected', true);
$('.post-topic').trigger('change');
return checkVisibility(this.view, true, false, false); return checkVisibility(this.view, true, false, false);
}); });
it('allows the user to make a cohort selection', function() { it('allows the user to make a cohort selection', function() {
...@@ -218,7 +226,7 @@ ...@@ -218,7 +226,7 @@
expect(view.$('.js-anon')).not.toBeChecked(); expect(view.$('.js-anon')).not.toBeChecked();
expect(view.$('.js-anon-peers')).not.toBeChecked(); expect(view.$('.js-anon-peers')).not.toBeChecked();
if (mode === 'tab') { if (mode === 'tab') {
return expect(view.$('.js-selected-topic').text()).toEqual('General'); return expect(view.$('.post-topic option:selected').text()).toEqual('General');
} }
}; };
return _.each(['tab', 'inline'], function(mode) { return _.each(['tab', 'inline'], function(mode) {
......
common/static/common/templates/discussion/new-post-menu-category.underscore
<li role="menuitem" class="topic-menu-item"> <optgroup label="<%- text %>">
<span class="topic-title"><%- text %></span> <%= edx.HtmlUtils.ensureHtml(entries) %>
<ul role="menu" class="topic-submenu"><%= entries %></ul> </optgroup>
</li>
common/static/common/templates/discussion/new-post-menu-entry.underscore
<li role="menuitem" class="topic-menu-item"> <option class="topic-title" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></option>
<button class="btn-link topic-title topic-menu-entry" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></button>
</li>
common/static/common/templates/discussion/topic.underscore
<% // Using div here instead of label because we are using a non-native control %> <label class="field-label">
<div class="field-label"> <span class="field-label-text">
<span class="field-label-text"><%- gettext("Topic Area:") %></span><div class="field-input post-topic"> <%- gettext("Topic Area:") %>
<button type="button" class="post-topic-button"> </span><select class="post-topic field-input" aria-describedby="field_help_topic_area" required>
<span class="sr"><%- gettext("Discussion topics; currently listing: ") %></span> <%= edx.HtmlUtils.ensureHtml(topics_html) %>
<span class="js-selected-topic"></span> </select>
<span class="drop-arrow" aria-hidden="true">▾</span> </label><span class="field-help" id="field_help_topic_area">
</button>
<div class="topic-menu-wrapper">
<label class="topic-filter-label">
<span class="sr"><%- gettext("Filter topics") %></span>
<input aria-describedby="field_help_topic_area" type="text" class="topic-filter-input" placeholder="<%- gettext('Filter topics') %>">
</label>
<ul class="topic-menu" role="menu"><%= topics_html %></ul>
</div>
</div>
</div><span class="field-help" id="field_help_topic_area">
<%- gettext("Add your post to a relevant topic to help others find it.") %> <%- gettext("Add your post to a relevant topic to help others find it.") %>
</span> </span>
lms/static/sass/discussion/_mixins.scss
...@@ -35,7 +35,6 @@ ...@@ -35,7 +35,6 @@
width: 100%; width: 100%;
height: 125px; height: 125px;
background: $forum-color-background; background: $forum-color-background;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
font-family: $sans-serif; font-family: $sans-serif;
line-height: 1.6; line-height: 1.6;
......
lms/static/sass/discussion/utilities/_shame.scss
...@@ -96,28 +96,9 @@ li[class*=forum-nav-thread-label-] { ...@@ -96,28 +96,9 @@ li[class*=forum-nav-thread-label-] {
text-shadow: none; text-shadow: none;
} }
.post-type, .topic-filter-label { .post-type {
margin-bottom: 0;
}
// Override global ul rules
.topic-menu {
@include padding-left(0);
}
.topic-menu, .topic-submenu {
margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
// Override global span rules
.post-topic-button .drop-arrow {
line-height: 36px;
}
.topic-title {
line-height: 14px;
}
} }
// ------- // -------
......
lms/static/sass/discussion/views/_create-edit-post.scss
...@@ -29,8 +29,8 @@ ...@@ -29,8 +29,8 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
vertical-align: top; vertical-align: top;
border-width: 0;
&:not([type="text"]) { &:not([type="text"]) {
border-width: 0;
padding: 0; padding: 0;
} }
} }
...@@ -77,22 +77,6 @@ ...@@ -77,22 +77,6 @@
// UI: inputs // UI: inputs
.forum-new-post-form, .forum-new-post-form,
.edit-post-form { .edit-post-form {
.post-topic-button {
@include white-button;
@extend %cont-truncated;
z-index: 1000;
padding: 0 $baseline 0 ($baseline*0.75);
width: 100%;
height: 40px;
font-size: $forum-base-font-size;
line-height: 36px;
.drop-arrow {
@include float(right);
color: #999;
}
}
.post-type-input { .post-type-input {
@extend %text-sr; @extend %text-sr;
} }
...@@ -108,6 +92,7 @@ ...@@ -108,6 +92,7 @@
height: 40px; height: 40px;
text-align: center; text-align: center;
color: $gray-d3; color: $gray-d3;
border: 1px solid $forum-color-border;
font-weight: 600; font-weight: 600;
line-height: 36px; line-height: 36px;
@include float(left); @include float(left);
...@@ -122,6 +107,7 @@ ...@@ -122,6 +107,7 @@
} }
.post-type-input:checked + .post-type-label { .post-type-input:checked + .post-type-label {
border: none;
background-color: $forum-color-active-thread; background-color: $forum-color-active-thread;
color: $forum-color-active-text; color: $forum-color-active-text;
background-image: none; background-image: none;
...@@ -138,13 +124,17 @@ ...@@ -138,13 +124,17 @@
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
padding: 0 $baseline/2; padding: 0 $baseline/2;
height: 40px; height: 40px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
color: #333; color: #333;
font-weight: 700; font-weight: 700;
font-size: $forum-large-font-size; font-size: $forum-large-font-size;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
select.field-input {
border: 1px solid $forum-color-border !important; // !important required to override -webkit-appearance
height: 40px;
}
.post-option { .post-option {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
...@@ -193,66 +183,3 @@ ...@@ -193,66 +183,3 @@
list-style: none; list-style: none;
} }
} }
// ====================
// UI: topic menu
// TO-DO: refactor to use _navigation.scss as general topic selector
.forum-new-post-form .post-topic ,
.edit-post-form .post-topic {
position: relative;
.topic-menu-wrapper {
@extend %ui-depth4;
@include left(0);
box-sizing: border-box;
position: absolute;
top: 40px;
width: 100%;
background: $forum-color-background;
box-shadow: 0 2px 1px $shadow;
}
.topic-filter-label {
border-bottom: 1px solid $forum-color-border;
}
.topic-filter-input {
box-sizing: border-box;
border: none;
border-bottom: 1px solid $forum-color-border;
padding: 0 15px;
width: 100%;
height: 30px;
color: #333;
font-size: $forum-small-font-size;
line-height: 16px;
}
.topic-menu {
@include margin-left($baseline/2);
overflow-y: scroll;
max-height: 400px;
list-style: none;
}
.topic-submenu {
@include margin-left($baseline);
list-style: none;
}
.topic-title {
display: block;
padding: ($baseline/4) ($baseline/2);
font-size: $forum-base-font-size;
}
button.topic-title {
@include transition(none);
&:hover, &:focus {
background-color: $gray-l4;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment