diff --git a/lms/static/images/browse-icon.png b/lms/static/images/browse-icon.png
new file mode 100644
index 0000000000..25df634b4a
Binary files /dev/null and b/lms/static/images/browse-icon.png differ
diff --git a/lms/static/images/follow-dog-ear.png b/lms/static/images/follow-dog-ear.png
index af3bb4544a..50371690ba 100644
Binary files a/lms/static/images/follow-dog-ear.png and b/lms/static/images/follow-dog-ear.png differ
diff --git a/lms/static/images/nested-icon.png b/lms/static/images/nested-icon.png
new file mode 100644
index 0000000000..49dd1a8b69
Binary files /dev/null and b/lms/static/images/nested-icon.png differ
diff --git a/lms/static/images/sidebar-resolved-icons.png b/lms/static/images/sidebar-resolved-icons.png
new file mode 100644
index 0000000000..4ade554454
Binary files /dev/null and b/lms/static/images/sidebar-resolved-icons.png differ
diff --git a/lms/static/images/vote-plus-icon.png b/lms/static/images/vote-plus-icon.png
new file mode 100644
index 0000000000..1b9f87ad19
Binary files /dev/null and b/lms/static/images/vote-plus-icon.png differ
diff --git a/lms/static/sass/_discussion-old.scss b/lms/static/sass/_discussion-old.scss
new file mode 100644
index 0000000000..01380faa77
--- /dev/null
+++ b/lms/static/sass/_discussion-old.scss
@@ -0,0 +1,477 @@
+@mixin blue-button {
+ display: block;
+ height: 33px;
+ margin: 12px;
+ padding: 0 15px;
+ border-radius: 3px;
+ border: 1px solid #4697c1;
+ background: -webkit-linear-gradient(top, #6dccf1, #38a8e5);
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 30px;
+ color: #fff;
+ text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+
+ &:hover {
+ border-color: #297095;
+ background: -webkit-linear-gradient(top, #4fbbe4, #2090d0);
+ }
+}
+
+.discussion-body {
+
+ .vote-btn {
+ float: right;
+ display: block;
+ height: 27px;
+ padding: 0 8px;
+ border-radius: 5px;
+ border: 1px solid #b2b2b2;
+ background: -webkit-linear-gradient(top, #fff 35%, #ebebeb);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 25px;
+ color: #333;
+
+ .plus-icon {
+ float: left;
+ margin-right: 6px;
+ font-size: 18px;
+ color: #17b429;
+ }
+
+ &.is-cast {
+ border-color: #379a42;
+ background: -webkit-linear-gradient(top, #50cc5e, #3db84b);
+ color: #fff;
+ text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
+ box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px rgba(0, 0, 0, .2);
+
+ .plus-icon {
+ color: #336a39;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
+ }
+ }
+ }
+
+
+ .new-post-btn {
+ @include blue-button;
+ float: right;
+ }
+
+ .new-post-icon {
+ display: block;
+ float: left;
+ width: 16px;
+ height: 17px;
+ margin: 7px 7px 0 0;
+ background: url(../images/new-post-icon.png) no-repeat;
+ }
+
+ .post-search {
+ float: right;
+ }
+
+ .post-search-field {
+ width: 280px;
+ height: 30px;
+ padding: 0 15px 0 30px;
+ margin-top: 14px;
+ border: 1px solid #acacac;
+ border-radius: 30px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5);
+ background: url(../images/search-icon.png) no-repeat 8px center #fff;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 30px;
+ color: #333;
+ outline: 0;
+ -webkit-transition: border-color .1s;
+
+ &:focus {
+ border-color: #4697c1;
+ }
+ }
+
+ h1, ul, li, a, ol {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+ ul, li {
+ list-style-type: none;
+ }
+ a {
+ text-decoration: none;
+ color: #009fe2;
+ }
+
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ height: 500px;
+ background: #fff;
+ border-radius: 3px;
+ border: 1px solid #aaa;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+ .sidebar {
+ display: table-cell;
+ vertical-align: top;
+ width: 27.7%;
+ background: #f6f6f6;
+ border-radius: 3px 0 0 3px;
+ border-right: 1px solid #bcbcbc;
+ .post-list {
+ background-color: #ddd;
+
+ li:last-child a {
+ border-bottom: 1px solid #ddd;
+ }
+
+ a {
+ position: relative;
+ display: block;
+ height: 36px;
+ padding: 0 10px;
+ margin-bottom: 1px;
+ background: #fff;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 34px;
+ color: #333;
+
+ &.read .title {
+ font-weight: 400;
+ color: #737373;
+ }
+
+ &.followed:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 12px;
+ height: 12px;
+ background: url(../images/following-flag.png) no-repeat;
+ }
+
+ &.active {
+ background: -webkit-linear-gradient(top, #96e0fd, #61c7fc);
+ border-color: #4697c1;
+ box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1;
+
+ .title {
+ color: #333;
+ }
+
+ .votes-count,
+ .comments-count {
+ background: -webkit-linear-gradient(top, #3994c7, #4da7d3);
+ color: #fff;
+
+ &:after {
+ color: #4da7d3;
+ }
+ }
+
+ &.followed:after {
+ background-position: 0 -12px;
+ }
+ }
+ }
+
+ .title {
+ display: block;
+ float: left;
+ width: 70%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ .votes-count,
+ .comments-count {
+ display: block;
+ float: right;
+ width: 32px;
+ height: 16px;
+ margin-top: 9px;
+ border-radius: 2px;
+ background: -webkit-linear-gradient(top, #d4d4d4, #dfdfdf);
+ font-size: 9px;
+ font-weight: 700;
+ line-height: 16px;
+ text-align: center;
+ color: #767676;
+ }
+
+ .comments-count {
+ position: relative;
+ margin-left: 4px;
+
+ &:after {
+ content: '◥';
+ display: block;
+ position: absolute;
+ top: 11px;
+ right: 3px;
+ font-size: 6px;
+ color: #dfdfdf;
+ }
+
+ &.new {
+ background: -webkit-linear-gradient(top, #84d7fe, #99e0fe);
+ color: #333;
+
+ &:after {
+ color: #99e0fe;
+ }
+ }
+ }
+ }
+ }
+
+ .board-drop-btn {
+ display: block;
+ height: 60px;
+ border-bottom: 1px solid #a3a3a3;
+ border-radius: 3px 0 0 0;
+ background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9);
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 58px;
+ text-align: center;
+ color: #333;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
+ }
+
+ .sort-bar {
+ height: 27px;
+ border-bottom: 1px solid #a3a3a3;
+ background: -webkit-linear-gradient(top, #cdcdcd, #b6b6b6);
+ box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset;
+
+ a {
+ display: block;
+ float: right;
+ height: 27px;
+ margin-right: 10px;
+ font-size: 11px;
+ font-weight: bold;
+ line-height: 23px;
+ color: #333;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+
+ .sort-label {
+ font-size: 9px;
+ text-transform: uppercase;
+ }
+ }
+ }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.global-discussion-actions {
+ height: 60px;
+ background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9);
+ border-radius: 0 3px 0 0;
+ border-bottom: 1px solid #bcbcbc;
+}
+
+
+
+
+
+
+
+
+
+
+
+.discussion-article {
+ position: relative;
+ display: table-cell;
+ vertical-align: top;
+ width: 72.3%;
+ padding: 40px;
+
+ h1 {
+ font-size: 28px;
+ font-weight: 700;
+ }
+
+ .posted-details {
+ font-size: 12px;
+ font-style: italic;
+ color: #888;
+ }
+
+ p + p {
+ margin-top: 20px;
+ }
+
+ .dogear {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: -1px;
+ width: 52px;
+ height: 51px;
+ background: url(../images/follow-dog-ear.png) 0 -51px no-repeat;
+
+ &.is-followed {
+ background-position: 0 0;
+ }
+ }
+}
+
+.discussion-post header,
+.responses li header {
+ margin-bottom: 20px;
+}
+
+.responses {
+ margin-top: 40px;
+
+ > li {
+ margin: 0 -10px;
+ padding: 30px;
+ border-radius: 3px;
+ border: 1px solid #b2b2b2;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
+ }
+
+ .posted-by {
+ font-weight: 700;
+ }
+}
+
+.endorse-btn {
+ display: block;
+ float: right;
+ width: 27px;
+ height: 27px;
+ margin-right: 10px;
+ border-radius: 27px;
+ border: 1px solid #a0a0a0;
+ background: -webkit-linear-gradient(top, #fff 35%, #ebebeb);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
+
+ .check-icon {
+ display: block;
+ width: 13px;
+ height: 12px;
+ margin: 8px auto;
+ background: url(../images/endorse-icon.png) no-repeat;
+ }
+
+ &.is-endorsed {
+ border: 1px solid #4697c1;
+ background: -webkit-linear-gradient(top, #6dccf1, #38a8e5);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, .4) inset;
+
+ .check-icon {
+ background-position: 0 -12px;
+ }
+ }
+}
+
+.comments {
+ margin-top: 20px;
+ border-top: 1px solid #ddd;
+
+ li {
+ background: #f6f6f6;
+ border-bottom: 1px solid #ddd;
+ }
+
+ p {
+ font-size: 13px;
+ padding: 10px 20px;
+
+ .posted-details {
+ font-size: 11px;
+ white-space: nowrap;
+ }
+ }
+}
+
+.comment-form {
+ padding: 8px 20px;
+}
+
+.comment-form-input {
+ width: 100%;
+ height: 31px;
+ padding: 0 10px;
+ box-sizing: border-box;
+ border: 1px solid #b2b2b2;
+ border-radius: 3px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
+ -webkit-transition: border-color .1s;
+ outline: 0;
+
+ &:focus {
+ border-color: #4697c1;
+ }
+}
+
+.moderator-actions {
+ margin-top: 20px;
+ @include clearfix;
+
+ li {
+ float: left;
+ margin-right: 8px;
+ }
+
+ a {
+ display: block;
+ height: 26px;
+ padding: 0 12px;
+ border-radius: 3px;
+ border: 1px solid #b2b2b2;
+ background: -webkit-linear-gradient(top, #fff 35%, #ebebeb);
+ font-size: 13px;
+ line-height: 24px;
+ color: #737373;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+
+ .delete-icon {
+ display: block;
+ float: left;
+ width: 10px;
+ height: 10px;
+ margin: 8px 4px 0 0;
+ background: url(../images/moderator-delete-icon.png) no-repeat;
+ }
+
+ .edit-icon {
+ display: block;
+ float: left;
+ width: 10px;
+ height: 10px;
+ margin: 7px 4px 0 0;
+ background: url(../images/moderator-edit-icon.png) no-repeat;
+ }
+ }
+}
diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index 01380faa77..62c56cd921 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -1,14 +1,13 @@
@mixin blue-button {
display: block;
- height: 33px;
- margin: 12px;
+ height: 35px;
padding: 0 15px;
border-radius: 3px;
- border: 1px solid #4697c1;
+ border: 1px solid #2d81ad;
background: -webkit-linear-gradient(top, #6dccf1, #38a8e5);
font-size: 13px;
font-weight: 700;
- line-height: 30px;
+ line-height: 32px;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
@@ -19,7 +18,523 @@
}
}
+
+
+
+body.discussion {
+ .new-post-btn {
+ @include blue-button;
+ }
+
+ .new-post-icon {
+ display: block;
+ float: left;
+ width: 16px;
+ height: 17px;
+ margin: 8px 7px 0 0;
+ background: url(../images/new-post-icon.png) no-repeat;
+ }
+}
+
.discussion-body {
+ line-height: 1.4;
+
+ .sidebar {
+ display: table-cell;
+ vertical-align: top;
+ width: 27.7%;
+ background: #f6f6f6;
+ border-radius: 3px 0 0 3px;
+ border-right: 1px solid #bcbcbc;
+ }
+
+ .browse-search {
+ display: block;
+ position: relative;
+ height: 60px;
+ border-bottom: 1px solid #a3a3a3;
+ border-radius: 3px 0 0 0;
+
+
+ .browse,
+ .search {
+ position: relative;
+ float: left;
+ width: 20%;
+ height: 100%;
+ background: -webkit-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)) #dcdcdc;
+ -webkit-transition: all .2s ease-out;
+
+ &:hover {
+ background-color: #e9e9e9;
+ }
+
+ &.is-open {
+ width: 80%;
+ }
+ }
+
+ .browse {
+ border-radius: 3px 0 0 0;
+ box-shadow: -1px 0 0 #aaa inset;
+
+ &.is-open {
+ .board-drop-btn span {
+ opacity: 1;
+ }
+
+ .board-drop-icon {
+ opacity: 0;
+ }
+
+ &.is-dropped {
+ .board-drop-btn {
+ color: #fff;
+ text-shadow: none;
+ border-color: #4b4b4b;
+ }
+ }
+ }
+
+ &.is-dropped {
+ .board-drop-btn {
+ background-color: #616161;
+ }
+ }
+
+ &.is-dropped {
+ .board-drop-icon {
+ background-position: 0 -16px;
+ }
+ }
+ }
+
+ .search {
+ cursor: pointer;
+
+ &.is-open {
+ cursor: auto;
+
+ .post-search {
+ padding: 0 10px;
+ max-width: 1000px;
+ }
+
+ .post-search-field {
+ cursor: text;
+ pointer-events: auto;
+
+ &::-webkit-input-placeholder {
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ .board-drop-btn {
+ display: block;
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ z-index: 50;
+ width: 100%;
+ height: 100%;
+ border-radius: 3px 0 0 0;
+ border: 1px solid transparent;
+ text-align: center;
+ overflow: hidden;
+
+ .current-board {
+ white-space: nowrap;
+ }
+
+ span {
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 58px;
+ color: #333;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
+ opacity: 0;
+ -webkit-transition: opacity .2s;
+ }
+ }
+
+ .board-drop-icon {
+ display: block;
+ position: absolute;
+ top: 21px;
+ left: 50%;
+ z-index: 100;
+ width: 29px;
+ height: 16px;
+ margin-left: -12px;
+ background: url(../images/browse-icon.png) no-repeat;
+ opacity: 1;
+ -webkit-transition: opacity .2s;
+ }
+
+ .board-drop-menu {
+ display: none;
+ position: absolute;
+ top: 60px;
+ left: -1px;
+ z-index: 9999;
+ width: 100%;
+ background: #737373;
+ border: 1px solid #4b4b4b;
+ border-radius: 0 0 3px 3px;
+
+ > li:first-child a {
+ border-top: none;
+ }
+
+ a {
+ display: block;
+ height: 50px;
+ padding: 0 20px;
+ border-top: 1px solid #5f5f5f;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 48px;
+ color: #fff;
+
+ &:hover {
+ background-color: #636363;
+ }
+
+ .unread {
+ float: right;
+ padding: 0 5px;
+ margin-top: 13px;
+ font-size: 11px;
+ line-height: 22px;
+ border-radius: 2px;
+ background: -webkit-linear-gradient(top, #4c4c4c, #5a5a5a);
+ }
+ }
+
+ li li {
+ a {
+ padding-left: 44px;
+ background: url(../images/nested-icon.png) no-repeat 22px 14px;
+ }
+ }
+
+ li li li {
+ a {
+ padding-left: 68px;
+ background: url(../images/nested-icon.png) no-repeat 46px 14px;
+ }
+ }
+ }
+
+ .post-search {
+ width: 100%;
+ max-width: 30px;
+ margin: auto;
+ box-sizing: border-box;
+ -webkit-transition: all .2s;
+ }
+
+ .post-search-field {
+ display: block;
+ width: 100%;
+ height: 30px;
+ padding: 0;
+ margin: 14px auto;
+ box-sizing: border-box;
+ border: 1px solid #acacac;
+ border-radius: 30px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5);
+ background: url(../images/search-icon.png) no-repeat 7px center #fff;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 20px;
+ text-indent: 30px;
+ color: #333;
+ outline: 0;
+ cursor: pointer;
+ pointer-events: none;
+ -webkit-transition: all .2s ease-out;
+
+ &::-webkit-input-placeholder {
+ opacity: 0;
+ -webkit-transition: opacity .2s;
+ }
+
+ &:focus {
+ border-color: #4697c1;
+ }
+ }
+ }
+
+ .sort-bar {
+ height: 27px;
+ border-bottom: 1px solid #a3a3a3;
+ background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #aeaeae;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
+ font-size: 9px;
+ font-weight: bold;
+ line-height: 25px;
+ color: #333;
+ text-transform: uppercase;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
+
+ .sort-label {
+ display: block;
+ float: left;
+ margin: 0 10px;
+ }
+
+ li {
+ float: left;
+ margin: 4px 4px 0 0;
+ }
+
+ a {
+ display: block;
+ height: 18px;
+ padding: 0 9px;
+ border-radius: 19px;
+ color: #333;
+ line-height: 17px;
+
+ &:hover {
+ background: -webkit-linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2));
+ }
+
+ &.active {
+ background: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) #999;
+ color: #fff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, .2) inset;
+ }
+ }
+ }
+
+ .post-list {
+ background-color: #ddd;
+
+ li:last-child a {
+ border-bottom: 1px solid #ddd;
+ }
+
+ a {
+ position: relative;
+ display: block;
+ height: 36px;
+ padding: 0 10px;
+ margin-bottom: 1px;
+ background: #fff;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 34px;
+ color: #333;
+
+ &.read .title {
+ font-weight: 400;
+ color: #737373;
+ }
+
+ &.resolved:before {
+ content: '';
+ position: absolute;
+ top: 12px;
+ right: 75px;
+ width: 9px;
+ height: 8px;
+ background: url(../images/sidebar-resolved-icons.png) no-repeat;
+ }
+
+ &.followed:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 12px;
+ height: 12px;
+ background: url(../images/following-flag.png) no-repeat;
+ }
+
+ &.active {
+ background: -webkit-linear-gradient(top, #96e0fd, #61c7fc);
+ border-color: #4697c1;
+ box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1;
+
+ .title {
+ color: #333;
+ }
+
+ .votes-count,
+ .comments-count {
+ background: -webkit-linear-gradient(top, #3994c7, #4da7d3);
+ color: #fff;
+
+ &:after {
+ color: #4da7d3;
+ }
+ }
+
+ &.followed:after {
+ background-position: 0 -12px;
+ }
+
+ &.resolved:before {
+ background-position: 0 -8px;
+ }
+ }
+ }
+
+ .title {
+ display: block;
+ float: left;
+ width: 70%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ .votes-count,
+ .comments-count {
+ display: block;
+ float: right;
+ width: 32px;
+ height: 16px;
+ margin-top: 9px;
+ border-radius: 2px;
+ background: -webkit-linear-gradient(top, #d4d4d4, #dfdfdf);
+ font-size: 9px;
+ font-weight: 700;
+ line-height: 16px;
+ text-align: center;
+ color: #767676;
+ }
+
+ .comments-count {
+ position: relative;
+ width: 25px;
+ margin-left: 4px;
+
+ &:after {
+ content: '◥';
+ display: block;
+ position: absolute;
+ top: 11px;
+ right: 3px;
+ font-size: 6px;
+ color: #dfdfdf;
+ }
+
+ &.new {
+ background: -webkit-linear-gradient(top, #84d7fe, #99e0fe);
+ color: #333;
+
+ &:after {
+ color: #99e0fe;
+ }
+ }
+ }
+ }
+
+
+
+
+ .discussion-column {
+ display: table-cell;
+ vertical-align: top;
+ width: 72.3%;
+ }
+
+ .discussion-article {
+ position: relative;
+ padding: 40px;
+
+ h1 {
+ margin-bottom: 10px;
+ font-size: 28px;
+ font-weight: 700;
+ line-height: 1.2;
+ }
+
+ .posted-details {
+ font-size: 12px;
+ font-style: italic;
+ color: #888;
+ }
+
+ p + p {
+ margin-top: 20px;
+ }
+
+ .dogear {
+ display: block;
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ width: 52px;
+ height: 51px;
+ background: url(../images/follow-dog-ear.png) 0 -52px no-repeat;
+ @include transition(none);
+
+ &.is-followed {
+ background-position: 0 0;
+ }
+ }
+ }
+
+ .discussion-post {
+ padding: 10px 20px;
+
+ > header .vote-btn {
+ margin-top: 5px;
+ }
+ }
+
+ .discussion-post header,
+ .responses li header {
+ margin-bottom: 20px;
+ }
+
+ .responses {
+ list-style: none;
+ margin-top: 40px;
+ padding: 0;
+
+ > li {
+ position: relative;
+ margin: 0 -10px 30px;
+ padding: 26px 30px 30px;
+ border-radius: 3px;
+ border: 1px solid #b2b2b2;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
+
+ &.staff {
+ padding-top: 38px;
+ border-color: #009fe2;
+ }
+
+ .staff-banner {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 14px;
+ padding: 1px 5px;
+ box-sizing: border-box;
+ border-radius: 2px 2px 0 0;
+ background: #009fe2;
+ font-size: 9px;
+ font-weight: 700;
+ color: #fff;
+ text-transform: uppercase;
+ }
+ }
+
+ .posted-by {
+ font-weight: 700;
+ }
+ }
.vote-btn {
float: right;
@@ -37,9 +552,15 @@
.plus-icon {
float: left;
- margin-right: 6px;
+ display: block;
+ width: 10px;
+ height: 10px;
+ margin: 8px 6px 0 0;
+ background: url(../images/vote-plus-icon.png) no-repeat;
font-size: 18px;
+ text-indent: -9999px;
color: #17b429;
+ overflow: hidden;
}
&.is-cast {
@@ -50,233 +571,203 @@
box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px rgba(0, 0, 0, .2);
.plus-icon {
+ background-position: 0 -10px;
color: #336a39;
text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
}
}
-
- .new-post-btn {
- @include blue-button;
- float: right;
- }
-
- .new-post-icon {
+ .endorse-btn {
display: block;
- float: left;
- width: 16px;
- height: 17px;
- margin: 7px 7px 0 0;
- background: url(../images/new-post-icon.png) no-repeat;
- }
-
- .post-search {
float: right;
+ width: 27px;
+ height: 27px;
+ margin-right: 10px;
+ border-radius: 27px;
+ border: 1px solid #a0a0a0;
+ background: -webkit-linear-gradient(top, #fff 35%, #ebebeb);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
+
+ .check-icon {
+ display: block;
+ width: 13px;
+ height: 12px;
+ margin: 8px auto;
+ background: url(../images/endorse-icon.png) no-repeat;
+ }
+
+ &.is-endorsed {
+ border: 1px solid #4697c1;
+ background: -webkit-linear-gradient(top, #6dccf1, #38a8e5);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, .4) inset;
+
+ .check-icon {
+ background-position: 0 -12px;
+ }
+ }
}
- .post-search-field {
- width: 280px;
- height: 30px;
- padding: 0 15px 0 30px;
- margin-top: 14px;
- border: 1px solid #acacac;
- border-radius: 30px;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5);
- background: url(../images/search-icon.png) no-repeat 8px center #fff;
- font-family: 'Open Sans', sans-serif;
- font-weight: 400;
- font-size: 13px;
- line-height: 30px;
- color: #333;
- outline: 0;
+ .comments {
+ list-style: none;
+ margin-top: 20px;
+ padding: 0;
+ border-top: 1px solid #ddd;
+
+ li {
+ background: #f6f6f6;
+ border-bottom: 1px solid #ddd;
+
+ &.new-comment-form {
+ background: #eee;
+ }
+ }
+
+ p {
+ font-size: 13px;
+ padding: 10px 20px;
+
+ .posted-details {
+ font-size: 11px;
+ white-space: nowrap;
+ }
+ }
+
+ .staff-label {
+ margin-left: 2px;
+ padding: 0 4px;
+ border-radius: 2px;
+ background: #009FE2;
+ font-size: 9px;
+ font-weight: 700;
+ font-style: normal;
+ color: white;
+ text-transform: uppercase;
+ }
+ }
+
+ .comment-form {
+ padding: 8px 20px;
+ }
+
+ .comment-form-input {
+ width: 100%;
+ height: 31px;
+ padding: 0 10px;
+ box-sizing: border-box;
+ border: 1px solid #b2b2b2;
+ border-radius: 3px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
-webkit-transition: border-color .1s;
+ outline: 0;
&:focus {
border-color: #4697c1;
}
}
- h1, ul, li, a, ol {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
- ul, li {
- list-style-type: none;
- }
- a {
- text-decoration: none;
- color: #009fe2;
- }
+ .moderator-actions {
+ margin-top: 20px;
+ @include clearfix;
- display: table;
- table-layout: fixed;
- width: 100%;
- height: 500px;
- background: #fff;
- border-radius: 3px;
- border: 1px solid #aaa;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
- .sidebar {
- display: table-cell;
- vertical-align: top;
- width: 27.7%;
- background: #f6f6f6;
- border-radius: 3px 0 0 3px;
- border-right: 1px solid #bcbcbc;
- .post-list {
- background-color: #ddd;
-
- li:last-child a {
- border-bottom: 1px solid #ddd;
- }
-
- a {
- position: relative;
- display: block;
- height: 36px;
- padding: 0 10px;
- margin-bottom: 1px;
- background: #fff;
- font-size: 13px;
- font-weight: 700;
- line-height: 34px;
- color: #333;
-
- &.read .title {
- font-weight: 400;
- color: #737373;
- }
-
- &.followed:after {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- width: 12px;
- height: 12px;
- background: url(../images/following-flag.png) no-repeat;
- }
-
- &.active {
- background: -webkit-linear-gradient(top, #96e0fd, #61c7fc);
- border-color: #4697c1;
- box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1;
-
- .title {
- color: #333;
- }
-
- .votes-count,
- .comments-count {
- background: -webkit-linear-gradient(top, #3994c7, #4da7d3);
- color: #fff;
-
- &:after {
- color: #4da7d3;
- }
- }
-
- &.followed:after {
- background-position: 0 -12px;
- }
- }
- }
-
- .title {
- display: block;
- float: left;
- width: 70%;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
-
- .votes-count,
- .comments-count {
- display: block;
- float: right;
- width: 32px;
- height: 16px;
- margin-top: 9px;
- border-radius: 2px;
- background: -webkit-linear-gradient(top, #d4d4d4, #dfdfdf);
- font-size: 9px;
- font-weight: 700;
- line-height: 16px;
- text-align: center;
- color: #767676;
- }
-
- .comments-count {
- position: relative;
- margin-left: 4px;
-
- &:after {
- content: '◥';
- display: block;
- position: absolute;
- top: 11px;
- right: 3px;
- font-size: 6px;
- color: #dfdfdf;
- }
-
- &.new {
- background: -webkit-linear-gradient(top, #84d7fe, #99e0fe);
- color: #333;
-
- &:after {
- color: #99e0fe;
- }
- }
- }
+ li {
+ float: left;
+ margin-right: 8px;
}
- }
-
- .board-drop-btn {
- display: block;
- height: 60px;
- border-bottom: 1px solid #a3a3a3;
- border-radius: 3px 0 0 0;
- background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9);
- font-size: 16px;
- font-weight: 700;
- line-height: 58px;
- text-align: center;
- color: #333;
- text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
- }
-
- .sort-bar {
- height: 27px;
- border-bottom: 1px solid #a3a3a3;
- background: -webkit-linear-gradient(top, #cdcdcd, #b6b6b6);
- box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset;
a {
display: block;
- float: right;
- height: 27px;
- margin-right: 10px;
- font-size: 11px;
- font-weight: bold;
- line-height: 23px;
- color: #333;
- text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+ height: 26px;
+ padding: 0 12px;
+ border-radius: 3px;
+ border: 1px solid #b2b2b2;
+ background: -webkit-linear-gradient(top, #fff 35%, #ebebeb);
+ font-size: 13px;
+ line-height: 24px;
+ color: #737373;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
- .sort-label {
- font-size: 9px;
- text-transform: uppercase;
+ .delete-icon {
+ display: block;
+ float: left;
+ width: 10px;
+ height: 10px;
+ margin: 8px 4px 0 0;
+ background: url(../images/moderator-delete-icon.png) no-repeat;
+ }
+
+ .edit-icon {
+ display: block;
+ float: left;
+ width: 10px;
+ height: 10px;
+ margin: 7px 4px 0 0;
+ background: url(../images/moderator-edit-icon.png) no-repeat;
}
}
}
+
+
+
+
+
+ .tooltip {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 99999;
+ padding: 0 10px;
+ border-radius: 3px;
+ background: rgba(0, 0, 0, .85);
+ font-size: 11px;
+ font-weight: 400;
+ line-height: 26px;
+ color: #fff;
+ pointer-events: none;
+ opacity: 0;
+ -webkit-transition: opacity .1s;
+
+ &:after {
+ content: '▾';
+ display: block;
+ position: absolute;
+ bottom: -14px;
+ left: 50%;
+ margin-left: -7px;
+ font-size: 20px;
+ color: rgba(0, 0, 0, .85);
+ }
+ }
+
+
+
+
+ .main-article.new {
+ display: none;
+ padding: 50px;
+ }
+
+ .new-post-form {
+ margin-top: 20px;
+ @include clearfix;
+ }
+
+ .new-post-form .submit {
+ @include blue-button;
+ float: left;
+ margin-top: 10px;
+ padding-bottom: 2px;
+ }
+
+ .new-post-form .options {
+ float: right;
+ margin-top: 20px;
+ font-size: 14px;
+
+ label {
+ margin-left: 4px;
+ }
+ }
}
@@ -288,8 +779,6 @@
-
-
.global-discussion-actions {
height: 60px;
background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9);
@@ -307,171 +796,11 @@
-.discussion-article {
- position: relative;
- display: table-cell;
- vertical-align: top;
- width: 72.3%;
- padding: 40px;
- h1 {
- font-size: 28px;
- font-weight: 700;
- }
- .posted-details {
- font-size: 12px;
- font-style: italic;
- color: #888;
- }
- p + p {
- margin-top: 20px;
- }
- .dogear {
- display: block;
- position: absolute;
- top: 0;
- right: -1px;
- width: 52px;
- height: 51px;
- background: url(../images/follow-dog-ear.png) 0 -51px no-repeat;
- &.is-followed {
- background-position: 0 0;
- }
- }
-}
-.discussion-post header,
-.responses li header {
- margin-bottom: 20px;
-}
-.responses {
- margin-top: 40px;
- > li {
- margin: 0 -10px;
- padding: 30px;
- border-radius: 3px;
- border: 1px solid #b2b2b2;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
- }
-
- .posted-by {
- font-weight: 700;
- }
-}
-
-.endorse-btn {
- display: block;
- float: right;
- width: 27px;
- height: 27px;
- margin-right: 10px;
- border-radius: 27px;
- border: 1px solid #a0a0a0;
- background: -webkit-linear-gradient(top, #fff 35%, #ebebeb);
- box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
-
- .check-icon {
- display: block;
- width: 13px;
- height: 12px;
- margin: 8px auto;
- background: url(../images/endorse-icon.png) no-repeat;
- }
-
- &.is-endorsed {
- border: 1px solid #4697c1;
- background: -webkit-linear-gradient(top, #6dccf1, #38a8e5);
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, .4) inset;
-
- .check-icon {
- background-position: 0 -12px;
- }
- }
-}
-
-.comments {
- margin-top: 20px;
- border-top: 1px solid #ddd;
-
- li {
- background: #f6f6f6;
- border-bottom: 1px solid #ddd;
- }
-
- p {
- font-size: 13px;
- padding: 10px 20px;
-
- .posted-details {
- font-size: 11px;
- white-space: nowrap;
- }
- }
-}
-
-.comment-form {
- padding: 8px 20px;
-}
-
-.comment-form-input {
- width: 100%;
- height: 31px;
- padding: 0 10px;
- box-sizing: border-box;
- border: 1px solid #b2b2b2;
- border-radius: 3px;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
- -webkit-transition: border-color .1s;
- outline: 0;
-
- &:focus {
- border-color: #4697c1;
- }
-}
-
-.moderator-actions {
- margin-top: 20px;
- @include clearfix;
-
- li {
- float: left;
- margin-right: 8px;
- }
-
- a {
- display: block;
- height: 26px;
- padding: 0 12px;
- border-radius: 3px;
- border: 1px solid #b2b2b2;
- background: -webkit-linear-gradient(top, #fff 35%, #ebebeb);
- font-size: 13px;
- line-height: 24px;
- color: #737373;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-
- .delete-icon {
- display: block;
- float: left;
- width: 10px;
- height: 10px;
- margin: 8px 4px 0 0;
- background: url(../images/moderator-delete-icon.png) no-repeat;
- }
-
- .edit-icon {
- display: block;
- float: left;
- width: 10px;
- height: 10px;
- margin: 7px 4px 0 0;
- background: url(../images/moderator-edit-icon.png) no-repeat;
- }
- }
-}
diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index ba0f47de52..ee46c08361 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -43,6 +43,7 @@ p {
span {
font: normal 1em/1.6em $sans-serif;
}
+
/* Fix for CodeMirror: prevent top-level span from affecting deeply-embedded span in CodeMirror */
.CodeMirror span {
font: inherit;
diff --git a/lms/templates/discussion/single_thread.html b/lms/templates/discussion/single_thread.html
index 59882a2443..757b33cf3a 100644
--- a/lms/templates/discussion/single_thread.html
+++ b/lms/templates/discussion/single_thread.html
@@ -17,16 +17,49 @@
<%include file="../courseware/course_navigation.html" args="active_page='discussion'" />
+
+