Skip to content

E
edx-platform
Commit 7e2a174e by Andy Armstrong
Options

Move discussion board to the Pattern Library 

TNL-4622
parent ed798bb9
Showing with 1066 additions and 683 deletions
cms/static/sass/_base.scss
......@@ -626,7 +626,7 @@ hr.divide {
// ====================
// UI - semantically hide text
.sr {
.sr, .sr-only {
@extend %cont-text-sr;
}
......
common/static/coffee/spec/discussion/view/discussion_thread_view_spec.coffee
......@@ -133,8 +133,8 @@ describe "DiscussionThreadView", ->
checkVoteDisplay = (originallyClosed, mode) ->
view = createDiscussionThreadView(originallyClosed, mode)
expect(view.$('.forum-thread-main-wrapper .action-vote').is(":visible")).toBe(not originallyClosed)
expect(view.$('.forum-thread-main-wrapper .display-vote').is(":visible")).toBe(originallyClosed)
expect(view.$('.thread-main-wrapper .action-vote').is(":visible")).toBe(not originallyClosed)
expect(view.$('.thread-main-wrapper .display-vote').is(":visible")).toBe(originallyClosed)
view.$(".action-close").click()
expect(view.$('.action-vote').is(":visible")).toBe(originallyClosed)
expect(view.$('.display-vote').is(":visible")).toBe(not originallyClosed)
......
common/static/common/templates/discussion/discussion-home.underscore
<div class="discussion-article view-discussion-home">
<section class="home-header">
<span class="label"><%- gettext("DISCUSSION HOME:") %></span>
<span class="label"><%- gettext("Discussion Home") %></span>
<% if (window.courseName) { %>
<h1 class="home-title"><%- window.courseName %></h1>
<% } %>
......
common/static/common/templates/discussion/thread.underscore
<article class="discussion-article" data-id="<%- id %>" tabindex="-1">
<div class="thread-wrapper">
<div class="forum-thread-main-wrapper">
<div class="thread-main-wrapper">
<div class="thread-content-wrapper"></div>
<div class="post-extended-content">
<ol class="responses js-marked-answer-list"></ol>
</div>
</div>
<div class="post-extended-content">
<div class="response-count"/>
<div class="post-extended-content thread-responses-wrapper">
<% if (!readOnly) { %>
<div class="add-response">
<button class="button add-response-btn">
<span class="icon fa fa-reply" aria-hidden="true"></span>
<span class="add-response-btn-text"><%- gettext("Add a Response") %></span>
<button class="btn-brand btn-small add-response-btn">
<%- gettext("Add a Response") %>
</button>
</div>
<% } %>
<div class="response-count"/>
<ol class="responses js-response-list"/>
<div class="response-pagination"/>
<div class="post-status-closed bottom-post-status" style="display: none">
......@@ -23,7 +22,7 @@
</div>
<% if (can_create_comment && !readOnly) { %>
<form class="discussion-reply-new" data-id="<%- id %>">
<h4><%- gettext("Post a response:") %></h4>
<h4><%- gettext("Add a response:") %></h4>
<ul class="discussion-errors"></ul>
<div class="reply-body" data-id="<%- id %>"></div>
<div class="reply-post-control">
......
common/test/acceptance/tests/discussion/test_discussion.py
......@@ -403,17 +403,17 @@ class DiscussionOpenClosedThreadTest(BaseDiscussionTestCase):
def test_originally_open_thread_vote_display(self):
page = self.setup_openclosed_thread_page()
self.assertFalse(page._is_element_visible('.forum-thread-main-wrapper .action-vote'))
self.assertTrue(page._is_element_visible('.forum-thread-main-wrapper .display-vote'))
self.assertFalse(page._is_element_visible('.response_response1 .action-vote'))
self.assertTrue(page._is_element_visible('.response_response1 .display-vote'))
self.assertFalse(page.is_element_visible('.thread-main-wrapper .action-vote'))
self.assertTrue(page.is_element_visible('.thread-main-wrapper .display-vote'))
self.assertFalse(page.is_element_visible('.response_response1 .action-vote'))
self.assertTrue(page.is_element_visible('.response_response1 .display-vote'))
def test_originally_closed_thread_vote_display(self):
page = self.setup_openclosed_thread_page(True)
self.assertTrue(page._is_element_visible('.forum-thread-main-wrapper .action-vote'))
self.assertFalse(page._is_element_visible('.forum-thread-main-wrapper .display-vote'))
self.assertTrue(page._is_element_visible('.response_response1 .action-vote'))
self.assertFalse(page._is_element_visible('.response_response1 .display-vote'))
self.assertTrue(page.is_element_visible('.thread-main-wrapper .action-vote'))
self.assertFalse(page.is_element_visible('.thread-main-wrapper .display-vote'))
self.assertTrue(page.is_element_visible('.response_response1 .action-vote'))
self.assertFalse(page.is_element_visible('.response_response1 .display-vote'))
@attr('a11y')
def test_page_accessibility(self):
......
common/test/acceptance/tests/lms/test_lms.py
......@@ -186,38 +186,44 @@ class LoginFromCombinedPageTest(UniqueCourseTest):
course_names = self.dashboard_page.wait_for_page().available_courses
self.assertIn(self.course_info["display_name"], course_names)
# Now logout and check that we can log back in instantly (because the account is linked):
LogoutPage(self.browser).visit()
self.login_page.visit()
self.login_page.click_third_party_dummy_provider()
try:
# Now logout and check that we can log back in instantly (because the account is linked):
LogoutPage(self.browser).visit()
self.dashboard_page.wait_for_page()
self.login_page.visit()
self.login_page.click_third_party_dummy_provider()
self._unlink_dummy_account()
self.dashboard_page.wait_for_page()
finally:
self._unlink_dummy_account()
def test_hinted_login(self):
""" Test the login page when coming from course URL that specified which third party provider to use """
# Create a user account and link it to third party auth with the dummy provider:
AutoAuthPage(self.browser, course_id=self.course_id).visit()
self._link_dummy_account()
LogoutPage(self.browser).visit()
# When not logged in, try to load a course URL that includes the provider hint ?tpa_hint=...
course_page = CoursewarePage(self.browser, self.course_id)
self.browser.get(course_page.url + '?tpa_hint=oa2-dummy')
# We should now be redirected to the login page
self.login_page.wait_for_page()
self.assertIn("Would you like to sign in using your Dummy credentials?", self.login_page.hinted_login_prompt)
# Baseline screen-shots are different for chrome and firefox.
self.assertScreenshot('#hinted-login-form', 'hinted-login-{}'.format(self.browser.name))
self.login_page.click_third_party_dummy_provider()
try:
LogoutPage(self.browser).visit()
# When not logged in, try to load a course URL that includes the provider hint ?tpa_hint=...
course_page = CoursewarePage(self.browser, self.course_id)
self.browser.get(course_page.url + '?tpa_hint=oa2-dummy')
# We should now be redirected to the login page
self.login_page.wait_for_page()
self.assertIn(
"Would you like to sign in using your Dummy credentials?",
self.login_page.hinted_login_prompt
)
# We should now be redirected to the course page
course_page.wait_for_page()
# Baseline screen-shots are different for chrome and firefox.
self.assertScreenshot('#hinted-login-form', 'hinted-login-{}'.format(self.browser.name))
self.login_page.click_third_party_dummy_provider()
self._unlink_dummy_account()
# We should now be redirected to the course page
course_page.wait_for_page()
finally:
self._unlink_dummy_account()
def _link_dummy_account(self):
""" Go to Account Settings page and link the user's account to the Dummy provider """
......
lms/djangoapps/courseware/testutils.py
......@@ -26,7 +26,7 @@ class RenderXBlockTestMixin(object):
# DOM elements that appear in the LMS Courseware,
# but are excluded from the xBlock-only rendering.
COURSEWARE_CHROME_HTML_ELEMENTS = [
'<ol class="course-tabs"',
'<ol class="tabs course-tabs"',
'<footer id="footer-openedx"',
'<div class="window-wrap"',
'<div class="preview-menu"',
......
lms/djangoapps/django_comment_client/forum/views.py
......@@ -287,7 +287,9 @@ def forum_form_discussion(request, course_key):
'is_course_cohorted': is_course_cohorted(course_key), # still needed to render _thread_list_template
'sort_preference': user.default_sort_key,
'category_map': course_settings["category_map"],
'course_settings': json.dumps(course_settings)
'course_settings': json.dumps(course_settings),
'disable_courseware_js': True,
'uses_pattern_library': True,
}
# print "start rendering.."
return render_to_response('discussion/index.html', context)
......@@ -402,7 +404,9 @@ def single_thread(request, course_key, discussion_id, thread_id):
'user_cohort': user_cohort,
'sort_preference': cc_user.default_sort_key,
'category_map': course_settings["category_map"],
'course_settings': json.dumps(course_settings)
'course_settings': json.dumps(course_settings),
'disable_courseware_js': True,
'uses_pattern_library': True,
}
return render_to_response('discussion/index.html', context)
......
lms/djangoapps/teams/static/teams/templates/team-profile.underscore
......@@ -4,8 +4,10 @@
data-read-only="<%- readOnly %>"
data-user-create-comment="<%- !readOnly %>"
data-user-create-subcomment="<%- !readOnly %>">
<% if (!readOnly) { %>
<button type="button" class="btn new-post-btn"><span class="icon fa fa-edit new-post-icon" aria-hidden="true"></span><%- gettext("New Post") %></button>
<% if ( !readOnly) { %>
<button type="button" class="btn-neutral btn-small new-post-btn">
<%- gettext("Add a Post") %>
</button>
<% } %>
</div>
</div>
......
lms/envs/common.py
......@@ -1445,6 +1445,18 @@ PIPELINE_CSS = {
],
'output_filename': 'css/lms-style-student-notes.css',
},
'style-discussion-main': {
'source_filenames': [
'css/discussion/lms-discussion-main.css',
],
'output_filename': 'css/discussion/lms-discussion-main.css',
},
'style-discussion-main-rtl': {
'source_filenames': [
'css/discussion/lms-discussion-main-rtl.css',
],
'output_filename': 'css/discussion/lms-discussion-main-rtl.css',
},
'style-xmodule-annotations': {
'source_filenames': [
'css/vendor/ova/annotator.css',
......
lms/static/sass/_build-lms-v1.scss
......@@ -62,7 +62,7 @@
@import 'views/api-access';
// app - discussion
@import "discussion/utilities/variables";
@import "discussion/utilities/variables-v1";
@import "discussion/mixins";
@import 'discussion/discussion'; // Process old file after definitions but before everything else, partial is deprecated.
@import "discussion/elements/actions";
......
lms/static/sass/_build-lms-v2.scss
......@@ -9,9 +9,12 @@
@import 'base-v2/extends';
// Extensions
@import 'shared-v2/variables';
@import 'shared-v2/base';
@import 'shared-v2/navigation';
@import 'shared-v2/header';
@import 'shared-v2/footer';
@import 'shared-v2/layouts';
@import 'shared-v2/components';
@import 'shared-v2/modal';
@import 'shared-v2/help-tab';
lms/static/sass/_developer.scss
......@@ -181,8 +181,8 @@
//efischer TNL-3226
.search-field::-ms-clear {
width: 0px;
height: 0px;
width: 0;
height: 0;
}
}
......@@ -202,7 +202,7 @@
&:focus {
box-shadow: none;
border: 0px;
border: 0;
}
}
......@@ -222,7 +222,7 @@
&:focus {
box-shadow: none;
border: 0px;
border: 0;
}
}
......
lms/static/sass/base/_base.scss
......@@ -327,7 +327,7 @@ mark {
}
// UI - semantically hide text
.sr {
.sr, .sr-only {
@extend %text-sr;
@extend %a11y-ensure-contrast;
}
......
lms/static/sass/base/_variables.scss
......@@ -138,7 +138,7 @@ $yellow-u1: desaturate($yellow,15%);
$yellow-u2: desaturate($yellow,30%);
$yellow-u3: desaturate($yellow,45%);
$blue: rgb(0, 120, 176);
$blue: rgb(0, 121, 188);
$blue-l1: tint($blue,20%);
$blue-l2: tint($blue,40%);
$blue-l3: tint($blue,60%);
......@@ -489,7 +489,6 @@ $dashboard-course-cover-border: rgb(221, 221, 221) !default;
// course elements
$content-wrapper-bg: $white !default;
$course-bg-color: #f2f2f2 !default;
$course-bg-image: url('#{$static-path}/images/bg-texture.png') !default;
$account-content-wrapper-bg: shade($body-bg, 2%) !default;
$course-profile-bg: rgb(245,245,245) !default;
$course-header-bg: rgba(255,255,255, 0.93) !default;
......
lms/static/sass/course/base/_base.scss
......@@ -37,9 +37,6 @@
body {
min-height: 100%;
background-color: $course-bg-color;
//for background texture:
//background-image: $course-bg-image;
}
body, h1, h2, h3, h4, h5, h6, p, label {
......
lms/static/sass/course/courseware/_sidebar.scss
......@@ -5,7 +5,7 @@
display: table-cell; // needed to extend the sidebar the full height of the area
// provides sufficient contrast for all screen reader-only elements
.sr {
.sr, .sr-only {
color: $black;
background: $white;
}
......
lms/static/sass/discussion/_build.scss 0 → 100644
// ------------------------------
// Discussion shared build
// Set the relative path to the static root
$static-path: '../..' !default;
// Configuration
@import '../config';
@import '../base/variables';
@import '../base-v2/extends';
// Common extensions
@import '../shared-v2/variables';
@import '../shared-v2/base';
@import '../shared-v2/navigation';
@import '../shared-v2/header';
@import '../shared-v2/footer';
@import '../shared-v2/layouts';
@import '../shared-v2/components';
@import '../shared-v2/modal';
@import '../shared-v2/help-tab';
// Compatibility support for non-Pattern Library mixins and extensions
@import 'utilities/v1-compatibility';
@import 'utilities/variables-v2';
// Discussion styling
@import 'mixins';
@import 'discussion'; // Process old file after definitions but before everything else, partial is deprecated.
@import 'elements/actions';
@import 'elements/editor';
@import 'elements/labels';
@import 'elements/navigation';
@import 'views/home';
@import 'views/thread';
@import 'views/create-edit-post';
@import 'views/response';
@import 'utilities/developer';
@import 'utilities/shame';
lms/static/sass/discussion/_discussion.scss
......@@ -6,23 +6,11 @@ body.discussion {
.course-tabs .right {
@include float(right);
.new-post-btn {
@include blue-button;
@include margin-right(4px);
}
.new-post-icon {
@include margin-right(7px);
font-size: 16px;
vertical-align: middle;
color: $white;
}
}
.edit-post-form {
@include clearfix();
@include box-sizing(border-box);
box-sizing: border-box;
width: 100%;
h1 {
......@@ -52,8 +40,8 @@ body.discussion {
}
.edit-post-title {
@include box-sizing(border-box);
border: 1px solid #aaa;
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-radius: 3px;
padding: 0 ($baseline/2);
width: 100%;
......@@ -78,6 +66,7 @@ body.discussion {
}
section.user-profile {
// TODO: don't use table-cell for layout purposes as it switches the screenreader mode
display: table-cell;
border-right: 1px solid #ddd;
border-radius: 3px 0 0 3px;
......@@ -120,7 +109,7 @@ body.discussion {
.wmd-input {
@include border-radius(3px, 3px, 0, 0);
border: 1px solid $gray-l3;
border: 1px solid $forum-color-border;
width: 100%;
height: 150px;
background-color: $gray-l4;
......@@ -169,8 +158,7 @@ body.discussion {
display: inline-block;
width: 20px;
height: 20px;
background-image: url('/static/images/wmd-buttons-transparent.png');
background-position: 0px 0px;
background-image: url('#{$static-path}/images/wmd-buttons-transparent.png');
background-repeat: no-repeat;
}
......@@ -191,7 +179,7 @@ body.discussion {
.wmd-prompt-dialog {
@extend .modal;
background: $white;
background: $forum-color-background;
}
.wmd-prompt-dialog {
......@@ -241,20 +229,17 @@ body.discussion {
.discussion-column {
@include float(right);
@include box-sizing(border-box);
box-sizing: border-box;
padding-left: ($baseline/2);
width: 68%;
max-width: 800px;
min-height: 500px;
border: 1px solid #aaa;
border-radius: 3px;
background: $white;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.discussion-article {
position: relative;
min-height: 500px;
background-image: url('#{$static-path}/images/bg-texture.png');
a {
word-wrap: break-word;
......@@ -297,8 +282,8 @@ body.discussion {
width: 100%;
height: 31px;
padding: 0 ($baseline/2);
@include box-sizing(border-box);
border: 1px solid $gray-l2;
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-radius: 3px;
box-shadow: 0 1px 3px $shadow-l1 inset;
@include transition(border-color .1s linear 0s);
......@@ -314,9 +299,9 @@ body.discussion {
}
.discussion-reply-new {
padding: $baseline ($baseline*1.5);
@include clearfix();
@include transition(opacity .2s linear 0s);
padding: 0 ($baseline/2);
h4 {
font-size: 16px;
......@@ -376,37 +361,15 @@ body.discussion {
}
}
.new-post-btn {
@include float(right);
@include margin-right(4px);
@include blue-button;
}
div.add-response.post-extended-content {
margin-top: $baseline;
margin-bottom: $baseline;
button.add-response-btn {
@include white-button;
@include linear-gradient(top, $white 35%, $gray-l4);
position: relative;
padding-left: ($baseline*1.5);
width: 100%;
box-shadow: 0 1px 1px $shadow-l1;
@include text-align(left);
.fa-reply:before {
@include ltr {
content: "\f112"; // FA icon arrow to the left
}
@include rtl {
content: "\f064"; // FA icon arrow to the right
}
}
&:hover, &:focus {
@include linear-gradient(top, $white 35%, #ddd);
}
span.add-response-btn-text {
padding-left: 4px;
}
}
}
.loading-animation {
......@@ -437,11 +400,6 @@ body.discussion {
}
}
.new-post-btn {
display: inline-block;
@include float(right);
}
section.discussion {
clear: both;
padding-top: $baseline;
......@@ -460,19 +418,20 @@ body.discussion {
.discussion-article {
@include transition(all .2s linear 0s);
border: 1px solid #ddd;
border: 1px solid $forum-color-border;
border-radius: 3px;
min-height: 0;
background: $white;
padding: 0;
background: $forum-color-background;
box-shadow: 0 1px 0 $shadow;
@include transition(all .2s linear 0s);
.thread-wrapper {
@include border-radius(3px, 3px, 0, 0);
position: relative;
overflow-x: hidden;
overflow-y: auto;
max-height: 600px;
background-color: $forum-color-background;
.discussion-post {
......@@ -570,26 +529,6 @@ body.discussion {
}
}
.new-post-btn {
@include blue-button;
display: inline-block;
font-size: 13px;
margin-right: 4px;
}
.new-post-icon {
display: block;
float: left;
width: 16px;
height: 17px;
margin-top: 8px;
@include margin-right(7px);
font-size: 16px;
@include padding-right($baseline/2);
vertical-align: middle;
color: $white;
}
section.discussion-pagination {
margin-top: ($baseline*1.5);
......@@ -608,7 +547,7 @@ body.discussion {
display: inline-block;
height: 35px;
padding: 0 ($baseline*0.75);
border: 1px solid $gray-l3;
border: 1px solid $forum-color-border;
border-radius: 3px;
font-size: 13px;
font-weight: 700;
......@@ -625,7 +564,7 @@ body.discussion {
width: 100%;
margin-bottom: $baseline;
@include clearfix();
@include box-sizing(border-box);
box-sizing: border-box;
.form-row {
margin-top: $baseline;
......@@ -653,9 +592,9 @@ body.discussion {
width: 100%;
height: 40px;
padding: 0 ($baseline/2);
@include box-sizing(border-box);
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #aaa;
border: 1px solid $forum-color-border;
font-size: 16px;
font-family: $sans-serif;
color: $gray-d3;
......@@ -680,17 +619,12 @@ body.discussion {
// post pagination
.response-count {
margin-top: $baseline;
padding: 0 ($baseline*1.5);
color: $gray;
font-size: 14px;
@include float(right);
}
.response-pagination {
visibility: visible;
padding: ($baseline/2) ($baseline*1.5);
background-color: $gray-l6;
box-shadow: 0 1px 1px $gray-l4 inset, 0 -1px 1px $gray-l4 inset;
padding: 0 ($baseline/2);
&:empty {
visibility: hidden;
......@@ -708,15 +642,10 @@ body.discussion {
@include linear-gradient(top, $white 35%, $gray-l4);
position: relative;
margin: ($baseline/2) 0;
border: 1px solid $gray-l2;
border: 1px solid $forum-color-border;
width: 100%;
box-shadow: 0 1px 1px $shadow-l1;
text-align: left;
font-weight: normal;
span.add-response-btn-text {
padding-left: ($baseline/5);
}
}
}
lms/static/sass/discussion/_mixins.scss
......@@ -57,14 +57,14 @@
}
@mixin discussion-wmd-input {
@include box-sizing(border-box);
box-sizing: border-box;
margin-top: 0;
border: 1px solid #aaa;
border: 1px solid $forum-color-border;
border-radius: 3px 3px 0 0;
padding: ($baseline/2);
width: 100%;
height: 125px;
background: $white;
background: $forum-color-background;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
font-size: 13px;
font-family: $sans-serif;
......@@ -72,7 +72,7 @@
}
@mixin discussion-wmd-preview-container {
@include box-sizing(border-box);
box-sizing: border-box;
@include border-radius(0, 0, 3px, 3px);
border: 1px solid $gray-l1;
border-top: none;
......@@ -92,7 +92,6 @@
padding-top: 3px;
width: 100%;
color: $gray-l2;
text-transform: uppercase;
font-size: 11px;
}
......@@ -114,7 +113,7 @@
// extends - content - text overflow by ellipsis
%cont-truncated {
@include box-sizing(border-box);
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......@@ -128,7 +127,6 @@
border: 1px solid;
border-radius: 3px;
padding: 1px 6px;
text-transform: uppercase;
white-space: nowrap;
border-color: $color;
......@@ -156,6 +154,5 @@
padding: 0 ($baseline/5);
background: $color;
font-style: normal;
text-transform: uppercase;
color: white;
}
lms/static/sass/discussion/elements/_actions.scss
......@@ -11,7 +11,7 @@
@include text-align(right);
.actions-item {
@include box-sizing(border-box);
box-sizing: border-box;
display: block;
margin: ($baseline/4) 0;
......@@ -44,7 +44,7 @@
}
.actions-dropdown-list {
@include box-sizing(border-box);
box-sizing: border-box;
box-shadow: 0 1px 1px $shadow-l1;
position: relative;
width: 100%;
......@@ -52,7 +52,7 @@
margin: ($baseline/4) 0 0 0;
border: 1px solid $gray-l3;
padding: ($baseline/2) ($baseline*0.75);
background: $white;
background: $forum-color-background;
// ui triangle/nub
&:after,
......@@ -76,7 +76,7 @@
&:before {
border-color: $transparent;
border-bottom-color: $gray-l3;
border-bottom-color: $forum-color-border;
border-width: 7px;
}
}
......@@ -96,7 +96,7 @@
// UI: general action
.action-button {
@include transition(border .5s linear 0s);
@include box-sizing(border-box);
box-sizing: border-box;
display: inline-block;
border: 1px solid transparent;
border-radius: ($baseline/4);
......@@ -196,7 +196,7 @@
&:hover, &:focus {
border-color: $blue-d2;
background-color: $white;
background-color: $forum-color-background;
.action-label {
color: $blue-d2;
......@@ -217,7 +217,7 @@
&:hover, &:focus {
border-color: $green-d1;
background-color: $white;
background-color: $forum-color-background;
.action-label {
color: $green-d2;
......@@ -231,7 +231,7 @@
&:hover, &:focus {
border-color: $gray;
background-color: $white;
background-color: $forum-color-background;
.action-icon {
border: 1px solid $gray;
......
lms/static/sass/discussion/elements/_editor.scss
......@@ -11,12 +11,12 @@
.forum-new-post-form {
.wmd-input {
@include discussion-wmd-input;
@include box-sizing(border-box);
box-sizing: border-box;
position: relative;
z-index: 1;
width: 100%;
height: 150px;
background: $white;
background: $forum-color-background;
}
.wmd-preview-container {
......@@ -100,7 +100,7 @@
display: inline-block;
width: 20px;
height: 20px;
background-image: url('/static/images/wmd-buttons-transparent.png');
background-image: url('#{$static-path}/images/wmd-buttons-transparent.png');
background-position: 0 0;
background-repeat: no-repeat;
}
......@@ -122,7 +122,7 @@
.wmd-prompt-dialog {
@extend .modal;
background: $white;
background: $forum-color-background;
}
.wmd-prompt-dialog {
......@@ -161,7 +161,7 @@
.wmd-button {
span {
background-image: url("/static/images/wmd-buttons.png");
background-image: url("#{$static-path}/images/wmd-buttons.png");
display: inline-block;
}
}
......
lms/static/sass/discussion/elements/_navigation.scss
......@@ -2,7 +2,7 @@
// ====================
.forum-nav {
@include box-sizing(border-box);
box-sizing: border-box;
@include float(left);
position: relative;
width: 31%;
......@@ -14,15 +14,17 @@
// Header
// ------
.forum-nav-header {
@include box-sizing(border-box);
box-sizing: border-box;
// TODO: don't use table for layout purposes as it switches the screenreader mode
display: table;
border-bottom: 1px solid $gray-l2;
border-bottom: 1px solid $forum-color-border;
width: 100%;
background-color: $gray-l3;
}
.forum-nav-browse {
@include box-sizing(border-box);
box-sizing: border-box;
// TODO: don't use table-cell for layout purposes as it switches the screenreader mode
display: table-cell;
vertical-align: middle;
width: auto;
......@@ -57,7 +59,8 @@
}
.forum-nav-search {
@include box-sizing(border-box);
box-sizing: border-box;
// TODO: don't use table-cell for layout purposes as it switches the screenreader mode
display: table-cell;
position: relative;
vertical-align: middle;
......@@ -81,13 +84,13 @@
// Browse menu
// -----------
.forum-nav-browse-menu-wrapper {
border-bottom: 1px solid $gray-l3;
border-bottom: 1px solid $forum-color-border;
background: $gray-l5;
}
.forum-nav-browse-filter {
position: relative;
border-bottom: 1px solid $gray-l2;
border-bottom: 1px solid $forum-color-border;
padding: ($baseline/4);
}
......@@ -108,8 +111,8 @@
width: 100%;
border: 0;
border-radius: 0;
border-bottom: 1px solid $gray-l3;
padding: ($baseline/2) ($baseline/2);
border-bottom: 1px solid $forum-color-border;
padding: ($baseline/2);
background: transparent;
box-shadow: none;
background-image: none;
......@@ -122,7 +125,7 @@
// need to override button styles
background-image: none !important;
box-shadow: none !important;
background: $forum-color-active-thread !important;
background: $forum-color-background !important;
}
}
......@@ -154,7 +157,7 @@
.forum-nav-refine-bar {
@include clearfix();
@include font-size(11);
border-bottom: 1px solid $gray-l3;
border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5;
padding: ($baseline/4) ($baseline/2);
color: $black;
......@@ -162,14 +165,14 @@
}
.forum-nav-filter-main {
@include box-sizing(border-box);
box-sizing: border-box;
display: inline-block;
width: 50%;
@include text-align(left);
}
.forum-nav-filter-cohort, .forum-nav-sort {
@include box-sizing(border-box);
box-sizing: border-box;
display: inline-block;
width: 50%;
@include text-align(right);
......@@ -202,11 +205,11 @@
}
.forum-nav-thread {
border-bottom: 1px solid $gray-l4;
background-color: $gray-l6;
border-bottom: 1px solid $forum-color-border;
background-color: $forum-color-background;
&.is-unread {
background: $white;
background: $forum-color-background;
color: $blue-d1;
.forum-nav-thread-comments-count {
......@@ -225,7 +228,7 @@
padding: ($baseline/4) ($baseline/2);
&.is-active {
background-color: $white;
background-color: $forum-color-background;
color: $base-font-color;
.forum-nav-thread-comments-count {
......@@ -344,7 +347,7 @@
}
.forum-nav-load-more {
border-bottom: 1px solid $gray-l3;
border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5;
}
......
lms/static/sass/discussion/lms-discussion-main-rtl.scss 0 → 100644
// ------------------------------
// LMS discussion main styling
//
// NOTE: This is the right-to-left (RTL) configured style compile.
// It should mirror lms-discussion-main w/ the exception of bi-app references.
// Load the RTL version of the edX Pattern Library
$pattern-library-path: '../../edx-pattern-library' !default;
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
// Configure RTL variables
@import 'base/variables-rtl';
// Load the shared build
@import 'build';
lms/static/sass/discussion/lms-discussion-main.scss 0 → 100644
// ------------------------------
// LMS discussion main styling
//
// NOTE: This is the left-to-right (LTR) configured style compile.
// It should mirror lms-discussion-main-rtl w/ the exception of bi-app references.
// Load the LTR version of the edX Pattern Library
$pattern-library-path: '../../edx-pattern-library' !default;
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
// Configure LTR variables
@import 'base/variables-ltr';
// Load the shared build
@import 'build';
lms/static/sass/discussion/utilities/_shame.scss
......@@ -15,7 +15,7 @@
// Override global input rules
.forum-nav-search-input {
box-shadow: none !important;
border: 1px solid $gray-l2 !important;
border: 1px solid $forum-color-border !important;
border-radius: 3px !important;
height: auto !important;
@include padding-left($baseline/4 !important);
......
lms/static/sass/discussion/utilities/_v1-compatibility.scss 0 → 100644
// Utilities to provide v1-styling compatibility
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
}
@mixin line-height($fontSize: auto){
line-height: ($fontSize*1.48) + px;
}
%text-sr {
// clip has been deprecated but is still supported
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
margin: -1px;
height: 1px;
width: 1px;
border: 0;
padding: 0;
overflow: hidden;
// ensure there are spaces in sr text
word-wrap: normal;
}
// extends - UI - depth levels
%ui-depth0 { z-index: 0; }
%ui-depth1 { z-index: 10; }
%ui-depth2 { z-index: 100; }
%ui-depth3 { z-index: 1000; }
%ui-depth4 { z-index: 10000; }
%ui-depth5 { z-index: 100000; }
%t-icon1 {
@include font-size(48);
}
%t-icon2 {
@include font-size(36);
}
%t-icon3 {
@include font-size(24);
}
%t-icon4 {
@include font-size(18);
}
%t-icon5 {
@include font-size(16);
}
%t-icon6 {
@include font-size(14);
}
%t-icon7 {
@include font-size(12);
}
%t-icon8 {
@include font-size(11);
}
%t-icon9 {
@include font-size(10);
}
%t-icon-solo {
@include line-height(0);
}
// weights
%t-ultrastrong {
font-weight: 700;
}
%t-strong {
font-weight: 600;
}
%t-demi-strong {
font-weight: 500;
}
%t-regular {
font-weight: 400;
}
%t-light {
font-weight: 300;
}
%t-ultralight {
font-weight: 200;
}
// headings/titles
%t-title {
font-family: $f-sans-serif;
}
%t-title1 {
@extend %t-title;
@include font-size(60);
@include line-height(60);
}
%t-title2 {
@extend %t-title;
@include font-size(48);
@include line-height(48);
}
%t-title3 {
@include font-size(36);
@include line-height(36);
}
%t-title4 {
@extend %t-title;
@include font-size(24);
@include line-height(24);
}
%t-title5 {
@extend %t-title;
@include font-size(18);
@include line-height(18);
}
%t-title6 {
@extend %t-title;
@include font-size(16);
@include line-height(16);
}
%t-title7 {
@extend %t-title;
@include font-size(14);
@include line-height(14);
}
%t-title8 {
@extend %t-title;
@include font-size(12);
@include line-height(12);
}
%t-title9 {
@extend %t-title;
@include font-size(11);
@include line-height(11);
}
// copy
%t-copy {
font-family: $f-sans-serif;
}
%t-copy-base {
@extend %t-copy;
@include font-size(16);
@include line-height(16);
}
%t-copy-lead1 {
@extend %t-copy;
@include font-size(18);
@include line-height(18);
}
%t-copy-lead2 {
@extend %t-copy;
@include font-size(24);
@include line-height(24);
}
%t-copy-sub1 {
@extend %t-copy;
@include font-size(14);
@include line-height(14);
}
%t-copy-sub2 {
@extend %t-copy;
@include font-size(12);
@include line-height(12);
}
// extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
%ui-no-list {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
li, dt, dd {
margin: 0;
padding: 0;
}
}
lms/static/sass/discussion/utilities/_variables-v1.scss 0 → 100644
// discussion - utilities - variables
// ====================
// color variables
$forum-color-background: $white;
$forum-color-active-thread: $white !default;
$forum-color-active-text: $base-font-color !default;
$forum-color-pinned: $pink !default;
$forum-color-reported: $pink !default;
$forum-color-closed: $black !default;
$forum-color-following: $blue !default;
$forum-color-staff: $blue !default;
$forum-color-community-ta: $green-d1 !default;
$forum-color-marked-answer: $green-d1 !default;
$forum-color-border: $gray-l3 !default;
$forum-color-error: $red !default;
// post images
$post-image-dimension: ($baseline*3) !default; // image size + margin
$response-image-dimension: ($baseline*2.5) !default; // image size + margin
$comment-image-dimension: ($baseline*2) !default; // image size + margin
lms/static/sass/discussion/utilities/_variables-v2.scss 0 → 100644
// discussion - utilities - variables
// ====================
// color variables
$forum-color-background: $lms-container-background-color !default;
$forum-color-active-thread: $lms-active-color !default;
$forum-color-active-text: $lms-container-background-color !default;
$forum-color-pinned: $pink !default;
$forum-color-reported: $pink !default;
$forum-color-closed: $black !default;
$forum-color-following: $blue !default;
$forum-color-staff: $blue !default;
$forum-color-community-ta: $green-d1 !default;
$forum-color-marked-answer: $green-d1 !default;
$forum-color-border: palette(grayscale, base) !default;
$forum-color-error: palette(error, base) !default;
// post images
$post-image-dimension: ($baseline*3) !default; // image size + margin
$response-image-dimension: ($baseline*2.5) !default; // image size + margin
$comment-image-dimension: ($baseline*2) !default; // image size + margin
lms/static/sass/discussion/utilities/_variables.scss deleted 100644 → 0
// discussion - utilities - variables
// ====================
// color variables
$forum-color-active-thread: $white;
$forum-color-pinned: $pink;
$forum-color-reported: $pink;
$forum-color-closed: $black;
$forum-color-following: $blue;
$forum-color-staff: $blue;
$forum-color-community-ta: $green-d1;
$forum-color-marked-answer: $green-d1;
// post images
$post-image-dimension: ($baseline*3); // image size + margin
$response-image-dimension: ($baseline*2.5); // image size + margin
$comment-image-dimension: ($baseline*2); // image size + margin
lms/static/sass/discussion/views/_create-edit-post.scss
......@@ -8,7 +8,7 @@
box-sizing: border-box;
margin: 0;
border-radius: 3px;
padding: ($baseline);
padding: $baseline;
max-width: 1180px;
.post-field {
......@@ -18,19 +18,20 @@
display: inline-block;
width: 50%;
vertical-align: top;
line-height: 40px;
margin: 0;
.field-input {
display: inline-block;
width: 100%;
vertical-align: top;
border-width: 0;
padding: 0 ($baseline/2);
}
.field-label-text {
display: inline-block;
width: 25%;
vertical-align: top;
text-transform: uppercase;
font-size: 12px;
line-height: 40px;
}
......@@ -42,7 +43,7 @@
// UI: support text for input fields
.field-help {
@include box-sizing(border-box);
box-sizing: border-box;
display: inline-block;
@include padding-left($baseline);
width: 50%;
......@@ -57,7 +58,7 @@
// CASE: inline styling
.discussion-module .forum-new-post-form {
background: $white;
background: $forum-color-background;
}
// ====================
......@@ -87,9 +88,9 @@
.post-type-label {
@extend %cont-truncated;
@include box-sizing(border-box);
@include white-button;
@include font-size(14);
box-sizing: border-box;
display: inline-block;
padding: 0 ($baseline/2);
width: 48%;
......@@ -106,6 +107,7 @@
.post-type-input:checked + .post-type-label {
background-color: $forum-color-active-thread;
color: $forum-color-active-text;
background-image: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset;
}
......@@ -115,8 +117,8 @@
}
input[type=text].field-input {
@include box-sizing(border-box);
border: 1px solid $gray-l2;
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-radius: 3px;
padding: 0 $baseline/2;
height: 40px;
......@@ -128,7 +130,7 @@
}
.post-option {
@include box-sizing(border-box);
box-sizing: border-box;
display: inline-block;
@include margin-right($baseline);
border: 1px solid transparent;
......@@ -186,7 +188,7 @@
.post-error {
padding: ($baseline/2) $baseline 12px 45px;
border-bottom: 1px solid $red;
border-bottom: 1px solid $forum-color-error;
background: url('#{$static-path}/images/white-error-icon.png') no-repeat 15px 14px;
&:last-child {
......@@ -206,25 +208,25 @@
position: relative;
.topic-menu-wrapper {
@include box-sizing(border-box);
box-sizing: border-box;
@extend %ui-depth4;
position: absolute;
top: 40px;
left: 0;
border: 1px solid $gray-l3;
border: 1px solid $forum-color-border;
width: 100%;
background: $white;
background: $forum-color-background;
box-shadow: 0 2px 1px $shadow;
}
.topic-filter-label {
border-bottom: 1px solid $gray-l2;
border-bottom: 1px solid $forum-color-border;
padding: ($baseline/4);
}
.topic-filter-input {
@include box-sizing(border-box);
border: 1px solid $gray-l3;
box-sizing: border-box;
border: 1px solid $forum-color-border;
padding: 0 15px;
width: 100%;
height: 30px;
......@@ -246,7 +248,7 @@
.topic-title {
display: block;
border-bottom: 1px solid $gray-l3;
border-bottom: 1px solid $forum-color-border;
padding: ($baseline/2);
font-size: 14px;
}
......
lms/static/sass/discussion/views/_home.scss
......@@ -3,10 +3,10 @@
// home - layout
.container .view-discussion-home {
padding: ($baseline*2) ($baseline*2) ($baseline/2);
padding-left: $baseline;
section {
border-bottom: 1px solid $gray-l3;
border-bottom: 1px solid $forum-color-border;
}
.label {
......@@ -17,7 +17,6 @@
.label-settings {
padding-top: $baseline;
padding-bottom: ($baseline/2);
text-transform: uppercase;
}
.home-header {
......@@ -75,12 +74,12 @@
.home-helpgrid {
border-bottom: none;
border-radius: 3px;
border: 1px solid $gray-l2;
border: 1px solid $forum-color-border;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.helpgrid-row {
border-bottom: 1px solid $gray-l2;
border-bottom: 1px solid $forum-color-border;
.row-title {
padding: ($baseline*1.5) $baseline;
......@@ -90,7 +89,7 @@
.row-item-full, .row-item {
font-size: 12px;
padding: 0px $baseline/2;
padding: 0 ($baseline/2);
width: 26%;
vertical-align: middle;
......@@ -98,6 +97,7 @@
padding: 0 ($baseline/2);
font-size: 24px;
vertical-align: middle;
// TODO: don't use table-cell for layout purposes as it switches the screenreader mode
display: table-cell;
}
......@@ -107,6 +107,7 @@
.row-description {
vertical-align: middle;
// TODO: don't use table-cell for layout purposes as it switches the screenreader mode
display: table-cell;
}
}
......@@ -159,4 +160,4 @@
.fa-square {color: $green;}
.fa-envelope {color: $light-gray;}
}
}
\ No newline at end of file
}
lms/static/sass/discussion/views/_response.scss
......@@ -12,9 +12,7 @@
// +wrapper - response list
.container .discussion-body .responses {
list-style: none;
margin-top: $baseline;
padding: 0 ($baseline*1.5);
@extend %ui-no-list;
&:empty {
display: none;
......@@ -25,17 +23,17 @@
@include animation(fadeIn .3s);
position: relative;
margin: $baseline 0;
border: 1px solid $gray-l2;
border: 1px solid $forum-color-border;
border-radius: 3px;
box-shadow: 0 0 1px $shadow;
}
// wrapper - main response area
.discussion-response {
@include box-sizing(border-box);
box-sizing: border-box;
@include border-radius(3px, 3px, 0, 0);
padding: $baseline;
background-color: $white;
background-color: $forum-color-background;
}
.posted-by {
......@@ -64,40 +62,14 @@
// +element - add response area
.container .discussion-body .add-response {
margin-top: $baseline;
padding: 0 ($baseline*1.5);
.add-response-btn {
@include white-button;
@include linear-gradient(top, $white 35%, $gray-l4);
position: relative;
border: 1px solid $gray-l2;
padding: 0 18px;
width: 100%;
box-shadow: 0 1px 1px $shadow-l1;
@include text-align(left);
font-size: 13px;
.fa-reply:before { // flip the icon for RTL
@include ltr {
content: "\f112"; // FA icon arrow to the left
}
@include rtl {
content: "\f064"; // FA icon arrow to the right
}
}
span.add-response-btn-text {
@include padding-left($baseline/5);
}
}
display: inline;
padding: $baseline/2;
}
// +CASE: answered question - collapsed comments in answers
.forum-response .action-show-comments {
@include box-sizing(border-box);
@include font-size(13);
box-sizing: border-box;
display: block;
padding: ($baseline/2) $baseline;
width: 100%;
......@@ -129,13 +101,12 @@
width: 100%;
height: 14px;
padding: 1px ($baseline/4);
@include box-sizing(border-box);
box-sizing: border-box;
border-radius: 2px 2px 0 0;
background: #009fe2;
font-size: 9px;
font-weight: 700;
color: $white;
text-transform: uppercase;
}
// CASE: banner - community TA response
......@@ -146,13 +117,12 @@
width: 100%;
height: 14px;
padding: 1px ($baseline/4);
@include box-sizing(border-box);
box-sizing: border-box;
border-radius: 2px 2px 0 0;
background: $forum-color-community-ta;
font-size: 9px;
font-weight: 700;
color: $white;
text-transform: uppercase;
}
// STATE: loading - response list
......@@ -173,11 +143,10 @@
box-shadow: 0 1px 3px -1px $shadow inset;
> li {
border-top: 1px solid $gray-l4;
border-top: 1px solid $forum-color-border;
padding: ($baseline/2) $baseline;
}
blockquote {
background: $gray-l4;
border-radius: 3px;
......@@ -190,7 +159,7 @@
.comment-form-input {
padding: ($baseline/4) ($baseline/2);
background-color: $white;
background-color: $forum-color-background;
font-size: 14px;
}
......
lms/static/sass/discussion/views/_thread.scss
......@@ -14,9 +14,7 @@ body.discussion, .discussion-module {
// post layout
.discussion-post {
@include padding(($baseline*1.5), ($baseline*1.5), $baseline, ($baseline*1.5));
@include border-radius(3px, 3px, 0, 0);
background-color: $white;
padding: 0 ($baseline/2);
.wrapper-post-header {
padding-bottom: 0;
......@@ -30,11 +28,25 @@ body.discussion, .discussion-module {
.post-header-actions {
@include float(right);
width: flex-grid(3,12);
}
.posted-details {
color: $gray-d1;
.post-body {
width: flex-grid(10,12);
}
}
.posted-details {
@extend %t-copy-sub2;
margin-top: ($baseline/5);
color: $gray-d1;
.username {
@extend %t-strong;
display: inline;
}
.timeago, .top-post-status {
color: inherit;
}
}
......@@ -52,7 +64,7 @@ body.discussion, .discussion-module {
@include float(right);
@include right($baseline);
position: absolute;
top: ($baseline);
top: $baseline;
}
}
......@@ -73,18 +85,14 @@ body.discussion, .discussion-module {
.comment-actions-list {
@include float(right);
}
.posted-details {
margin-top: 0;
}
}
}
// +thread - wrapper styling
.forum-thread-main-wrapper {
@include border-radius(3px, 3px, 0, 0);
border-bottom: 1px solid $white; // Prevent collapsing margins
background-color: $white;
.thread-wrapper {
.thread-main-wrapper {
padding-bottom: $baseline;
}
}
// +thread - elements - shared styles
......@@ -126,25 +134,9 @@ body.discussion {
border-radius: 3px;
}
}
// thread - header content details
.posted-details {
@extend %t-copy-sub2;
margin-top: ($baseline/5);
color: $gray-d1;
.username {
@extend %t-strong;
display: inline;
}
.timeago, .top-post-status {
color: inherit;
}
}
}
.discussion-post .post-body, .discussion-response .response-body {
.discussion-response .response-body {
@include padding-right($baseline); //ensures content doesn't overlap on post or response actions.
}
}
......@@ -179,11 +171,8 @@ body.view-in-course .discussion-article {
@extend %t-copy-sub2;
margin-top: $baseline;
color: $gray-d1;
padding: ($baseline*0.75);
background-color: $gray-l6;
border-radius: 3px;
// CASE: no courseware context or cohort visiblity rules
// CASE: no courseware context or cohort visibility rules
&:empty {
display: none;
}
......@@ -195,10 +184,22 @@ body.view-in-course .discussion-article {
}
}
// +post - answered question - collapsed comment area
body.discussion, .discussion-thread.expanded {
.forum-thread-main-wrapper {
box-shadow: 0 1px 3px $shadow;
// Layout control for discussion modules that does not apply to the discussion board
.discussion-module {
.discussion-thread {
.thread-main-wrapper, .thread-responses-wrapper {
padding: $baseline;
}
}
}
.btn-brand {
@include blue-button;
display: inline-block;
padding-bottom: ($baseline/10);
height: 37px;
&:hover, &:focus {
border-color: #222;
}
}
}
lms/static/sass/elements/_program-card.scss
......@@ -10,7 +10,7 @@
@include span(12);
border: 1px solid $border-color-l3;
border-bottom: none;
margin-bottom: $baseline + px;
margin-bottom: $baseline;
position: relative;
@include susy-media($bp-screen-md) {
......@@ -58,7 +58,7 @@
}
.text-section{
padding: 40px $baseline + px $baseline + px;
padding: 40px $baseline $baseline;
position: relative;
margin-top: 156px;
......@@ -71,7 +71,7 @@
font-size: font-size(x-small);
color: palette(grayscale, dark);
position: absolute;
top: $baseline + px;
top: $baseline;
width: calc(100% - 40px);
}
......@@ -91,18 +91,18 @@
.xseries-icon{
@include float(right);
@include margin-right($baseline*0.25 + px);
@include margin-right($baseline*0.25);
background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat;
background-color: transparent;
background-size: 100%;
width: ($baseline*0.7 + px);
height: ($baseline*0.7 + px);
width: ($baseline*0.7);
height: ($baseline*0.7);
}
}
.hd-3 {
color: palette(grayscale, x-dark);
min-height: ($baseline*3) + px;
min-height: ($baseline*3);
line-height: 1;
}
......
lms/static/sass/shared-v2/_base.scss
// LMS base styles
.window-wrap {
background-color: $lms-background-color;
}
.content-wrapper {
width: span(12);
margin: 0 auto;
background: palette(grayscale, white-t);
width: span(12);
margin: 0 auto;
@media print {
padding-bottom: 0;
}
}
@media print {
padding-bottom: 0;
}
// Support .sr as well as .sr-only for backward compatibility
.sr {
@extend .sr-only;
}
lms/static/sass/shared-v2/_components.scss 0 → 100644
// TODO: tabs should be added to the Pattern Library
.tabs {
@include clearfix();
@extend %reset-lists;
@include border-top-radius(4px);
padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
.tab {
@include float(left);
list-style: none;
margin-bottom: 0;
&.prominent {
@include margin-right(16px);
background: rgba(255, 255, 255, 0.5);
border-radius: 3px;
}
&.prominent + li {
@include border-left(1px solid $lms-border-color);
padding-left: $baseline*0.75;
}
a,
a:visited {
padding: ($baseline/2) ($baseline*0.75) 13px ($baseline*0.75);
display: block;
text-align: center;
text-decoration: none;
border-style: solid;
border-width: 0 0 4px 0;
border-bottom-color: transparent;
color: $lms-label-color;
font-size: 14px;
&:hover,
&:focus {
color: $lms-active-color;
border-bottom-color: $lms-active-color;
}
&.active {
color: $lms-active-color;
border-bottom-color: $lms-active-color;
background-color: transparent;
}
}
}
}
lms/static/sass/shared-v2/_footer.scss
......@@ -3,9 +3,10 @@
.wrapper-footer {
@extend %ui-print-excluded;
margin-top: ($baseline*2);
box-shadow: 0 -1px 5px 0 $shadow-l1;
border-top: 1px solid tint(palette(grayscale, light), 50%);
padding: 25px ($baseline/2 + px) ($baseline*1.5 + px) ($baseline/2 + px);
padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
background: $footer-bg;
clear: both;
......@@ -46,9 +47,13 @@
@include clearfix();
margin: $footer_margin;
ol {
list-style: none;
}
li {
@include float(left);
margin-right: ($baseline*0.75) + px;
margin-right: ($baseline*0.75);
a {
color: tint($black, 20%);
......@@ -79,8 +84,8 @@
p {
@include float(left);
@include span(9);
margin-left: $baseline + px;
padding-left: $baseline + px;
margin-left: $baseline;
padding-left: $baseline;
font-size: font-size(small);
background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
}
......@@ -95,7 +100,7 @@
}
.wrapper-logo {
margin: ($baseline*0.75) + px 0;
margin: ($baseline*0.75) 0;
a {
display: inline-block;
......@@ -124,7 +129,7 @@
.nav-legal-02 a {
&:before {
@include margin-right(($baseline/4) + px);
@include margin-right(($baseline/4));
content: "-";
}
}
......@@ -189,7 +194,7 @@
width: 960px;
.colophon-about img {
margin-top: ($baseline*1.5) + px;
margin-top: ($baseline*1.5);
}
}
}
lms/static/sass/shared-v2/_header.scss
// LMS header styles
.header-global {
@extend %ui-depth1;
box-sizing: border-box;
position: relative;
width: 100%;
border-bottom: 1px solid $gray-l1;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
.wrapper-header {
@include clearfix();
@extend %ui-depth1;
box-sizing: border-box;
height: 74px;
margin: 0 auto;
padding: 10px 10px 0;
position: relative;
width: 100%;
max-width: 1180px;
.logo {
@include float(left);
@include margin-right(39px);
@include margin-left(10px);
margin-top: 4px;
margin-bottom: 0;
position: relative;
}
border-bottom: 1px solid $gray-l1;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
.left {
@include float(left);
}
.wrapper-header {
@include clearfix();
box-sizing: border-box;
height: 74px;
margin: 0 auto;
padding: 10px 10px 0;
width: 100%;
max-width: 1180px;
.right {
@include float(right);
}
.left {
@include float(left);
}
.wrapper-user-menu {
@include float(right);
margin-top: 4px;
width: auto;
}
.right {
@include float(right);
}
.dropdown-menu {
@include text-align(left);
top: inherit;
}
.logo {
@include float(left);
@include margin-left(10px);
@include margin-right(10px);
margin-top: 4px;
margin-bottom: 0;
position: relative;
}
.course-header {
@include float(left);
@include margin(12px, 10px, 0px, 10px);
color: $lms-label-color;
}
.wrapper-user-menu {
@include float(right);
margin-top: 4px;
width: auto;
}
.list-inline {
&.nav-global {
margin-top: 12px;
}
.dropdown-menu {
@include text-align(left);
top: inherit;
}
.list-inline {
&.nav-global {
margin-top: 12px;
margin-bottom: 0;
}
&.nav-courseware {
margin-top: 5px;
}
&.nav-courseware {
margin-top: 5px;
}
.item {
font-weight: font-weight(semi-bold);
text-transform: uppercase;
.item {
font-weight: font-weight(semi-bold);
text-transform: uppercase;
&.active {
a {
text-decoration: none;
color: $link-color;
}
&.active {
a {
text-decoration: none;
color: $link-color;
}
}
}
}
}
}
.tab-nav-item{
@include float(left);
display: flex;
margin: 0;
justify-content: center;
.tab-nav-link{
font-size: font-size(base);
font-weight: font-weight(semi-bold);
color: palette(grayscale, dark);
padding: 5px 25px 23px;
display: inline-block;
&:active,
&:focus,
&:hover {
border-bottom: 4px solid $courseware-border-bottom-color;
.tab-nav-item{
@include float(left);
display: flex;
margin: 0;
justify-content: center;
.tab-nav-link{
font-size: font-size(base);
font-weight: font-weight(semi-bold);
color: palette(grayscale, dark);
padding: 5px 25px 23px;
display: inline-block;
&:active,
&:focus,
&:hover {
border-bottom: 4px solid $lms-border-color;
}
}
.active{
border-bottom: 4px solid $black-t3 !important;
}
}
}
}
// Style the courseware's slim version of the header
&.slim {
.wrapper-header {
height: 60px;
.logo img {
margin-top: 4px;
height: 30px;
}
.active{
border-bottom: 4px solid $black-t3 !important;
}
.course-header {
margin-top: 10px;
}
.list-inline.nav-global {
margin-top: 10px;
}
.wrapper-user-menu {
margin-top: 0;
}
}
}
}
}
lms/static/sass/shared-v2/_help-tab.scss
......@@ -9,9 +9,9 @@
a:link,
a:visited {
cursor: pointer;
border: 1px solid palette(grayscale, light);
border: 1px solid $lms-border-color;
border-top-style: none;
border-radius: 0 0 ($baseline/2) + px ($baseline/2) + px;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize(palette(grayscale, white-t), 0.25);
color: transparentize(palette(grayscale-cool, x-dark), 0.25);
font-weight: bold;
......@@ -28,25 +28,25 @@
}
.help-buttons {
padding: ($baseline/2) + px ($baseline*2.5) + px;
padding: ($baseline/2) ($baseline*2.5);
a:link, a:visited {
padding: ($baseline*0.75) + px 0;
padding: ($baseline*0.75) 0;
text-align: center;
cursor: pointer;
background: palette(grayscale, white-t);
text-decoration: none;
display: block;
border: 1px solid palette(grayscale, light);
border: 1px solid $lms-border-color;
&#feedback_link_problem {
border-bottom-style: none;
border-radius: ($baseline/2) + px ($baseline/2) + px 0 0;
border-radius: ($baseline/2) ($baseline/2) 0 0;
}
&#feedback_link_question {
border-top-style: none;
border-radius: 0 0 ($baseline/2) + px ($baseline/2) + px;
border-radius: 0 0 ($baseline/2) ($baseline/2);
}
&:hover, &:focus {
......@@ -72,6 +72,6 @@
#feedback_success_wrapper {
p {
padding: 0 $baseline + px $baseline + px $baseline + px;
padding: 0 $baseline $baseline $baseline;
}
}
lms/static/sass/shared-v2/_layouts.scss 0 → 100644
// LMS layouts
.content-wrapper {
max-width: 1180px;
padding-top: 10px;
.page-header {
@include clearfix();
border-bottom: 1px solid $lms-border-color;
padding: $baseline $baseline ($baseline/2) $baseline;
.page-title {
@extend %t-title4;
margin-bottom: ($baseline/4);
text-transform: none;
color: $black;
}
.page-description {
@extend %t-copy-sub1;
margin-bottom: ($baseline/4);
color: $gray;
}
}
.page-header.has-secondary {
.page-header-main {
display: inline-block;
width: flex-grid(8,12);
}
.page-header-secondary {
@include text-align(right);
display: inline-block;
width: flex-grid(4,12);
vertical-align: text-bottom;
}
}
.container {
border: 1px solid #c8c8c8;
background-color: $lms-container-background-color;
padding: $baseline;
}
}
lms/static/sass/shared-v2/_modal.scss
......@@ -26,12 +26,12 @@
z-index: z-index(mid-front);
background: $modal-bg-color;
border-radius: 0;
border: 1px solid rgba(0, 0, 0, 0.9);
border: 1px solid $lms-border-color;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
overflow: hidden;
padding-left: ($baseline/2) + px;
padding-right: ($baseline/2) + px;
padding-bottom: ($baseline/2) + px;
padding-left: ($baseline/2);
padding-right: ($baseline/2);
padding-bottom: ($baseline/2);
position: relative;
p {
......@@ -46,15 +46,11 @@
}
}
.sr {
@extend .sr-only;
}
header {
z-index: z-index(mid-front);
margin-bottom: ($baseline*1.5) + px;
margin-bottom: ($baseline*1.5);
overflow: hidden;
padding: 28px $baseline + px 0;
padding: 28px $baseline 0;
position: relative;
&::before {
......@@ -115,7 +111,7 @@
border: 1px solid rgb(143, 14, 14);
color: rgb(143, 14, 14);
display: none;
margin-bottom: $baseline + px;
margin-bottom: $baseline;
padding: 12px;
}
......@@ -124,21 +120,21 @@
border: 1px solid darken($yellow, 60%);
color: darken($yellow, 60%);
display: none;
margin-bottom: $baseline + px;
margin-bottom: $baseline;
padding: 12px;
}
.activation-message, .message {
padding: 0 ($baseline*2) + px ($baseline/2) + px;
padding: 0 ($baseline*2) ($baseline/2);
p {
margin-bottom: ($baseline/2) + px;
margin-bottom: ($baseline/2);
}
}
form {
margin-bottom: 12px;
padding: 0 ($baseline*2) + px $baseline + px;
padding: 0 ($baseline*2) $baseline;
position: relative;
z-index: 2;
......@@ -146,8 +142,8 @@
@include clearfix();
border-bottom: 1px solid rgb(210,210,210);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
margin-bottom: ($baseline*1.5) + px;
padding-bottom: ($baseline/2) + px;
margin-bottom: ($baseline*1.5);
padding-bottom: ($baseline/2);
}
label {
......@@ -170,14 +166,14 @@
}
input[type="checkbox"] {
margin-right: ($baseline/4) + px;
margin-right: ($baseline/4);
}
textarea {
background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: $baseline + px;
margin-bottom: $baseline;
width: 100%;
}
......@@ -187,12 +183,12 @@
background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: $baseline + px;
margin-bottom: $baseline;
width: 100%;
}
.submit {
padding-top: ($baseline/2) + px;
padding-top: ($baseline/2);
input[type="submit"] {
@extend .btn-brand;
......@@ -244,10 +240,10 @@
#help_wrapper,
#feedback_form_wrapper,
.discussion-alert-wrapper {
padding: 0 ($baseline*1.5) + px ($baseline*1.5) + px ($baseline*1.5) + px;
padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
header {
margin-bottom: $baseline + px;
margin-bottom: $baseline;
padding-right: 0;
padding-left: 0;
}
......@@ -258,7 +254,7 @@
family: $font-family-sans-serif;
}
line-height: 1.475;
margin-top: ($baseline/2) + px;
margin-top: ($baseline/2);
color: $lighter-base-font-color;
}
}
......
lms/static/sass/shared-v2/_navigation.scss
......@@ -9,7 +9,7 @@
top: -($baseline*30);
overflow: hidden;
background: $white;
border-bottom: 1px solid palette(grayscale, white);
border-bottom: 1px solid $lms-border-color;
padding: ($baseline*0.75) ($baseline/2);
&:focus,
......
lms/static/sass/shared-v2/_variables.scss 0 → 100644
// LMS variables
$lms-background-color: palette(grayscale, white); // Why is the Pattern Library default background different?
$lms-container-background-color: palette(grayscale, white-t);
$lms-border-color: palette(grayscale, light);
$lms-label-color: palette(grayscale, black);
$lms-active-color: palette(primary, base);
lms/static/sass/views/_program-list.scss
.program-list-wrapper {
padding: $baseline + px;
padding: $baseline;
}
.program-cards-container {
......@@ -13,15 +13,15 @@
.sidebar {
@include span(12);
@include float(right);
margin-bottom: $baseline + px;
margin-bottom: $baseline;
@include susy-media($bp-screen-md) {
@include span(3);
}
.aside {
padding: $baseline + px;
margin-bottom: $baseline + px;
padding: $baseline;
margin-bottom: $baseline;
background-color: $body-bg;
box-sizing: border-box;
border: 1px solid $border-color-l3;
......@@ -40,7 +40,7 @@
.advertise-message {
font-size: font-size(x-small);
color: palette(grayscale, black);
margin-bottom: $baseline + px;
margin-bottom: $baseline;
}
}
......@@ -48,11 +48,11 @@
.hd-6 {
color: palette(grayscale, dark);
font-weight: font-weight(normal);
margin-bottom: $baseline + px;
margin-bottom: $baseline;
}
.certificate-link {
padding-top: $baseline + px;
padding-top: $baseline;
color: palette(primary, base);
display: block;
......@@ -69,13 +69,13 @@
.empty-programs-message {
border: 3px solid $gray-l4;
background: $gray-l6;
padding: ($baseline*2) + px 0;
padding: ($baseline*2) 0;
text-align: center;
margin-bottom: 20px;
.hd-3 {
color: $black;
margin-bottom: $baseline + px;
margin-bottom: $baseline;
}
.find-xseries-programs {
......@@ -85,13 +85,13 @@
.action-xseries-icon {
@include float(left);
@include margin-right($baseline*0.4 + px);
@include margin-right($baseline*0.4);
display: inline;
background: url('#{$static-path}/images/icon-sm-xseries-white.png') no-repeat;
background-color: transparent;
width: ($baseline*1.1) + px;
height: ($baseline*1.1) + px;
width: ($baseline*1.1);
height: ($baseline*1.1);
}
&:active,
......
lms/templates/courseware/course_navigation.html
## mako
<%page args="active_page=None" expression_filter="h" />
<%namespace name='static' file='/static_content.html'/>
<%!
from django.utils.translation import ugettext as _
......@@ -10,7 +11,6 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json
from openedx.core.djangolib.markup import HTML, Text
from student.models import CourseEnrollment
%>
<%page args="active_page=None" expression_filter="h" />
<%
if active_page is None and active_page_context is not UNDEFINED:
......@@ -88,7 +88,7 @@ include_special_exams = settings.FEATURES.get('ENABLE_SPECIAL_EXAMS', False) and
tab_list = get_course_tab_list(request, course)
tabs_tmpl = static.get_template_path('/courseware/tabs.html')
%>
<ol class="course-tabs">
<ol class="tabs course-tabs">
<%include file="${tabs_tmpl}" args="tab_list=tab_list,active_page=active_page,default_tab=default_tab,tab_image=tab_image" />
<%block name="extratabs" />
</ol>
......
lms/templates/courseware/tabs.html
## mako
<%namespace name='static' file='/static_content.html'/>
<%!
from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse
%>
<%page args="tab_list, active_page, default_tab, tab_image" />
<%page args="tab_list, active_page, default_tab, tab_image" expression_filter="h" />
<%
def url_class(is_active):
......@@ -17,9 +18,9 @@ def url_class(is_active):
tab_is_active = tab.tab_id in (active_page, default_tab)
tab_class = url_class(tab_is_active)
%>
<li>
<a href="${tab.link_func(course, reverse) | h}" class="${tab_class}">
${_(tab.name) | h}
<li class="tab">
<a href="${tab.link_func(course, reverse)}" class="${tab_class}">
${_(tab.name)}
% if tab_is_active:
<span class="sr">, current location</span>
%endif
......
lms/templates/discussion/_discussion_course_navigation.html
<%page expression_filter="h"/>
<%inherit file="../courseware/course_navigation.html" />
<%!
from django.utils.translation import ugettext as _
......@@ -6,6 +7,8 @@ from django_comment_client.permissions import has_permission
<%block name="extratabs">
% if has_permission(user, 'create_thread', course.id):
<li class="right"><a href="#" class="new-post-btn" role="button"><span class="icon fa fa-edit new-post-icon"></span>${_("New Post")}</a></li>
<li class="right">
<button class="new-post-btn btn-neutral btn-small">${_("Add a Post")}</button>
</li>
% endif
</%block>
lms/templates/discussion/_discussion_module.html
<%page expression_filter="h"/>
<%include file="_underscore_templates.html" />
<%!
from django.utils.translation import ugettext as _
%>
<div class="discussion-module" data-discussion-id="${discussion_id | h}" data-user-create-comment="${can_create_comment}" data-user-create-subcomment="${can_create_subcomment}" data-read-only="false">
<a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}" role="button"><span class="show-hide-discussion-icon"></span><span class="button-text">${_("Show Discussion")}</span></a>
<div class="discussion-module" data-discussion-id="${discussion_id}" data-user-create-comment="${can_create_comment}" data-user-create-subcomment="${can_create_subcomment}" data-read-only="false">
<a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id}" role="button">
<span class="show-hide-discussion-icon"></span><span class="button-text">${_("Show Discussion")}</span>
</a>
% if can_create_thread:
<a href="#" class="new-post-btn" role="button"><span class="icon fa fa-edit new-post-icon"></span>${_("New Post")}</a>
<button class="new-post-btn btn-neutral btn-small">${_("Add a Post")}</button>
% endif
</div>
lms/templates/discussion/index.html
## mako
<%! main_css = "style-discussion-main" %>
<%page expression_filter="h"/>
<%inherit file="../main.html" />
<%namespace name='static' file='../static_content.html'/>
<%!
......@@ -7,12 +12,9 @@ from django.core.urlresolvers import reverse
%>
<%block name="bodyclass">discussion</%block>
<%block name="pagetitle">${_("Discussion - {course_number}").format(course_number=course.display_number_with_default) | h}</%block>
<%block name="pagetitle">${_("Discussion - {course_number}").format(course_number=course.display_number_with_default)}</%block>
<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
<%include file="_js_head_dependencies.html" />
</%block>
......@@ -24,21 +26,22 @@ from django.core.urlresolvers import reverse
<%include file="_discussion_course_navigation.html" args="active_page='discussion'" />
<%block name="content">
<section class="discussion container" id="discussion-container"
data-roles="${roles | h}"
data-course-id="${course_id | h}"
data-course-name="${course.display_name_with_default_escaped | h}"
data-user-info="${user_info | h}"
data-user-create-comment="${can_create_comment | h}"
data-user-create-subcomment="${can_create_subcomment | h}"
data-roles="${roles}"
data-course-id="${course_id}"
data-course-name="${course.display_name_with_default}"
data-user-info="${user_info}"
data-user-create-comment="${can_create_comment}"
data-user-create-subcomment="${can_create_subcomment}"
data-read-only="false"
data-threads="${threads | h}"
data-thread-pages="${thread_pages | h}"
data-content-info="${annotated_content_info | h}"
data-sort-preference="${sort_preference | h}"
data-flag-moderator="${flag_moderator | h}"
data-user-cohort-id="${user_cohort | h}"
data-course-settings="${course_settings | h}">
data-threads="${threads}"
data-thread-pages="${thread_pages}"
data-content-info="${annotated_content_info}"
data-sort-preference="${sort_preference}"
data-flag-moderator="${flag_moderator}"
data-user-cohort-id="${user_cohort}"
data-course-settings="${course_settings}">
<div class="discussion-body">
<div class="forum-nav" role="complementary" aria-label="${_("Discussion thread list")}"></div>
<div class="discussion-column" id="discussion-column">
......@@ -49,6 +52,7 @@ from django.core.urlresolvers import reverse
</div>
</div>
</section>
</%block>
<%include file="_underscore_templates.html" />
<%include file="_thread_list_template.html" />
package.json
......@@ -4,7 +4,7 @@
"dependencies": {
"backbone": "~1.3.2",
"coffee-script": "1.6.1",
"edx-pattern-library": "~0.12.4",
"edx-pattern-library": "0.13.0",
"edx-ui-toolkit": "~1.1.0",
"jquery": "~2.2.0",
"jquery-migrate": "^1.4.1",
......
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