Skip to content

E
edx-platform
Commit 4454c819 by Chris Rodriguez
Options

LMS: forum markup tweaks and cleanup

parent d2392b45
Showing with 103 additions and 66 deletions
common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
......@@ -6,17 +6,17 @@ describe "DiscussionThreadListView", ->
appendSetFixtures("""
<script type="text/template" id="thread-list-template">
<div class="forum-nav-header">
<a href="#" class="forum-nav-browse" aria-haspopup="true">
<i class="icon fa fa-bars"></i>
<span class="sr">Discussion topics; current selection is: </span>
<button type="button" class="forum-nav-browse" id="forum-nav-browse" aria-haspopup="true">
<span class="icon fa fa-bars" aria-hidden="true"></span>
<span class="sr">Discussion topics; currently listing: </span>
<span class="forum-nav-browse-current">All Discussions</span>
▾
</a>
</button>
<form class="forum-nav-search">
<label>
<span class="sr">Search</span>
<input class="forum-nav-search-input" type="text" placeholder="Search all posts">
<i class="icon fa fa-search"></i>
<span class="sr">Search all posts</span>
<input class="forum-nav-search-input" id="forum-nav-search" type="text" placeholder="Search all posts">
<span class="icon fa fa-search" aria-hidden="true"></span>
</label>
</form>
</div>
......@@ -66,7 +66,7 @@ describe "DiscussionThreadListView", ->
</li>
</ul>
</div>
<div class="forum-nav-thread-list-wrapper">
<div class="forum-nav-thread-list-wrapper" id="sort-filter-wrapper" tabindex="-1">
<div class="forum-nav-refine-bar">
<label class="forum-nav-filter-main">
<select class="forum-nav-filter-main-control">
......
common/static/common/templates/discussion/discussion-home.underscore
......@@ -15,43 +15,43 @@
</span>
<table class="home-helpgrid">
<tr class="helpgrid-row helpgrid-row-navigation">
<td class="row-title"><%- gettext("Find discussions") %></td>
<th scope="row" class="row-title"><%- gettext("Find discussions") %></td>
<td class="row-item">
<i class="icon fa fa-reorder"></i>
<span class="row-description"><%- gettext("Focus in on specific topics") %></span>
<span class="icon fa fa-reorder" aria-hidden="true"></span>
<span class="row-description"><%- gettext("Use the Discussion Topics menu to find specific topics.") %></span>
</td>
<td class="row-item">
<i class="icon fa fa-search"></i>
<span class="row-description"><%- gettext("Search for specific posts") %></span>
<span class="icon fa fa-search" aria-hidden="true"></span>
<span class="row-description"><%- gettext("Search all posts") %></span>
</td>
<td class="row-item">
<i class="icon fa fa-sort"></i>
<span class="row-description"><%- gettext("Sort by date, vote, or comments") %></span>
<span class="icon fa fa-sort" aria-hidden="true"></span>
<span class="row-description"><%- gettext("Filter and sort topics") %></span>
</td>
</tr>
<tr class="helpgrid-row helpgrid-row-participation">
<td class="row-title"><%- gettext("Engage with posts") %></td>
<th scope="row" class="row-title"><%- gettext("Engage with posts") %></td>
<td class="row-item">
<i class="icon fa fa-plus"></i>
<span class="row-description"><%- gettext("Upvote posts and good responses") %></span>
<span class="icon fa fa-plus" aria-hidden="true"></span>
<span class="row-description"><%- gettext("Vote for good posts and responses") %></span>
</td>
<td class="row-item">
<i class="icon fa fa-flag"></i>
<span class="row-description"><%- gettext("Report Forum Misuse") %></span>
<span class="icon fa fa-flag" aria-hidden="true"></span>
<span class="row-description"><%- gettext("Report abuse, topics, and responses") %></span>
</td>
<td class="row-item">
<i class="icon fa fa-star"></i>
<span class="row-description"><%- gettext("Follow posts for updates") %></span>
<span class="icon fa fa-star" aria-hidden="true"></span>
<span class="row-description"><%- gettext("Follow or unfollow posts") %></span>
</td>
</tr>
<tr class="helpgrid-row helpgrid-row-notification">
<td class="row-title"><%- gettext('Receive updates') %></td>
<th scope="row" class="row-title"><%- gettext('Receive updates') %></td>
<td class="row-item-full" colspan="3">
<label for="email-setting-checkbox">
<span class="sr"><%- gettext("Toggle Notifications Setting") %></span>
<span class="notification-checkbox">
<input type="checkbox" id="email-setting-checkbox" class="email-setting" name="email-notification"/>
<i class="icon fa fa-envelope"></i>
<span class="icon fa fa-envelope" aria-hidden="true"></span>
</span>
</label>
<span class="row-description"><%- gettext("Check this box to receive an email digest once a day notifying you about new, unread activity from posts you are following.") %></span>
......
common/static/common/templates/discussion/new-post.underscore
......@@ -30,7 +30,7 @@
<div class="post-options">
<label class="post-option is-enabled">
<input type="checkbox" name="follow" class="post-option-input js-follow" checked>
<i class="icon fa fa-star"></i><%- gettext("follow this post") %>
<span class="icon fa fa-star" aria-hidden="true"></span><%- gettext("follow this post") %>
</label>
<% if (allow_anonymous) { %>
<label class="post-option">
......@@ -47,6 +47,6 @@
</div>
<div>
<input type="submit" class="submit" value="<%- gettext('Add Post') %>">
<a href="#" class="cancel"><%- gettext('Cancel') %></a>
<button type="button" class="cancel"><%- gettext('Cancel') %></button>
</div>
</form>
common/static/common/templates/discussion/thread-type.underscore
......@@ -6,13 +6,13 @@
</span><fieldset class="field-input"><legend class="sr"><%- gettext("Post type:") %></legend>
<input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="post-type-input" id="<%= form_id %>-post-type-question" value="question">
<label for="<%= form_id %>-post-type-question" class="post-type-label">
<i class="icon fa fa-question"></i>
<span class="icon fa fa-question" aria-hidden="true"></span>
<% // Translators: This is a forum post type %>
<%- gettext("Question") %>
</label>
<input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="post-type-input" id="<%= form_id %>-post-type-discussion" value="discussion" checked>
<label for="<%= form_id %>-post-type-discussion" class="post-type-label">
<i class="icon fa fa-comments"></i>
<span class="icon fa fa-comments" aria-hidden="true"></span>
<% // Translators: This is a forum post type %>
<%- gettext("Discussion") %>
</label>
......
common/static/common/templates/discussion/topic.underscore
<% // Using div here instead of label because we are using a non-native control %>
<div class="field-label">
<span class="field-label-text"><%- gettext("Topic Area:") %></span><div class="field-input post-topic">
<a href="#" class="post-topic-button">
<span class="sr"><%- gettext("Discussion topics; current selection is: ") %></span>
<button type="button" class="post-topic-button">
<span class="sr"><%- gettext("Discussion topics; currently listing: ") %></span>
<span class="js-selected-topic"></span>
<span class="drop-arrow" aria-hidden="true">▾</span>
</a>
</button>
<div class="topic-menu-wrapper">
<label class="topic-filter-label">
<span class="sr"><%- gettext("Filter topics") %></span>
......
lms/static/sass/discussion/elements/_navigation.scss
......@@ -22,15 +22,25 @@
}
.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;
}
@include box-sizing(border-box);
display: table-cell;
vertical-align: middle;
width: auto;
padding: 11px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
&:hover,
&:focus,
&.is-active {
// converted to button from a;
// need importants to overwrite later button styles
box-shadow: none !important;
background-image: none !important;
background-color: $gray-l5 !important;
}
.icon {
@include font-size(14);
......@@ -93,6 +103,33 @@
width: 100%;
}
.forum-nav-browse-title {
display: block;
width: 100%;
border: 0;
border-radius: 0;
border-bottom: 1px solid $gray-l3;
padding: ($baseline/2) ($baseline/2);
background: transparent;
box-shadow: none;
background-image: none;
color: $link-color;
text-align: left;
&:hover,
&:focus {
// switched from a to button;
// need to override button styles
background-image: none !important;
box-shadow: none !important;
background: $forum-color-active-thread !important;
}
}
.forum-nav-browse-title .icon {
@include margin-right($baseline/2);
}
.forum-nav-browse-menu {
@include font-size(14);
overflow-y: scroll;
......@@ -100,22 +137,15 @@
}
.forum-nav-browse-submenu {
padding-left: $baseline;
list-style: none;
}
.forum-nav-browse-title {
display: block;
border-bottom: 1px solid $gray-l3;
padding: ($baseline/2) ($baseline/2);
list-style: none;
padding: 0;
&:hover, &:focus {
background: $forum-color-active-thread;
}
}
li {
.forum-nav-browse-title .icon {
@include margin-right($baseline/2);
.forum-nav-browse-title {
padding-left: $baseline;
}
}
}
// -------------------
......
lms/static/sass/discussion/views/_create-edit-post.scss
......@@ -70,6 +70,7 @@
@extend %cont-truncated;
z-index: 1000;
padding: 0 $baseline 0 ($baseline*0.75);
width: 100%;
height: 40px;
font-size: 14px;
line-height: 36px;
......
lms/templates/discussion/_filter_dropdown.html
......@@ -19,13 +19,13 @@ import json
data-discussion-id='${entries[entry]["id"]}'
data-cohorted="${str(entries[entry]['is_cohorted']).lower()}"
>
<a href="#" class="forum-nav-browse-title">${entry}</a>
<button type="button" class="forum-nav-browse-title">${entry}</button>
</li>
</%def>
<%def name="render_category(categories, category)">
<li class="forum-nav-browse-menu-item">
<a href="#" class="forum-nav-browse-title">${category}</a>
<button type="button" class="forum-nav-browse-title">${category}</button>
<ul class="forum-nav-browse-submenu">
${render_dropdown(categories[category])}
</ul>
......@@ -37,15 +37,18 @@ import json
<label>
<span class="sr">${_("Filter Topics")}</span>
<input type="text" class="forum-nav-browse-filter-input" placeholder="${_("filter topics")}">
<i class="icon fa fa-filter"></i>
<span class="icon fa fa-filter" aria-hidden="true"></span>
</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>
<button type="button" class="forum-nav-browse-title">${_("All Discussions")}</button>
</li>
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-following">
<a href="#" class="forum-nav-browse-title"><i class="icon fa fa-star"></i>${_("Posts I'm Following")}</a>
<button type="button" class="forum-nav-browse-title">
<span class="icon fa fa-star" aria-hidden="true"></span>
${_("Posts I'm Following")}
</button>
</li>
${render_dropdown(category_map)}
</ul>
......
lms/templates/discussion/_thread_list_template.html
<%! from django.utils.translation import ugettext as _ %>
<script type="text/template" id="thread-list-template">
<div class="forum-nav-header">
<a href="#" class="forum-nav-browse" aria-haspopup="true">
<button type="button" class="forum-nav-browse" id="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 fa fa-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>
<span class="icon fa fa-reorder" aria-hidden="true"></span>
<span class="sr">${_("Discussion topics; currently listing: ")}</span>
<span class="forum-nav-browse-current">${_("All Discussions")}</span>
<span class="forum-nav-browse-drop-arrow" aria-hidden="true">▾</span>
</button>
<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 fa fa-search"></i>
<span class="sr">${_("Search all posts")}</span>
<input class="forum-nav-search-input" id="forum-nav-search" type="text" placeholder="${_("Search all posts")}">
<span class="icon fa fa-search" aria-hidden="true"></span>
</label>
</div>
</form>
</div>
<%include file="_filter_dropdown.html" />
<div class="forum-nav-thread-list-wrapper">
<div class="forum-nav-thread-list-wrapper" id="sort-filter-wrapper" tabindex="-1">
<div class="forum-nav-refine-bar">
<label class="forum-nav-filter-main">
## Translators: This labels a filter menu in forum navigation
......
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