Skip to content

E
edx-platform
Commit ab6cf914 by Rocky Duan
Options

Merge branch 'brittany' of github.com:dementrock/mitx into lol 

Conflicts:
	lms/templates/discussion/_thread.html
parents 65f84963 f44358ab
Showing with 689 additions and 460 deletions
lms/static/sass/_discussion.scss
$comment_margin_left: 30px; /*** Variables ***/
$discussion_title_size: 1.6em;
$comment_title_size: 1.0em; $comment-margin-left: 30px;
$comment_body_size: 0.9em; $discussion-title-size: 1.6em;
$comment_info_size: 0.75em; $comment-title-size: 1.0em;
$discussion_input_width: 100%; $post-font-size: 0.9em;
$comment-info-size: 0.75em;
$comment-font-size: 0.8em;
$discussion-input-width: 100%;
$tag-background-color: #e7ecdd;
$tag-border-color: #babdb3;
$tag-text-color: #5b614f;
/*** Mixins ***/
@mixin discussion-font { @mixin discussion-font {
font-family: inherit; font-family: inherit;
...@@ -16,132 +27,416 @@ $discussion_input_width: 100%; ...@@ -16,132 +27,416 @@ $discussion_input_width: 100%;
} }
} }
form label { @mixin standard-discussion-link {
@include discussion-font; text-decoration: none;
font-size: 14px; &:hover {
font-style: normal; color: #1C71DD;
font-weight: normal; text-decoration: none;
text-shadow: none; }
} }
div.recent-activity {
margin: 20% 4%;
div.recent-activity-title {
font-weight: bold;
}
a.recent-active-post {
display: block;
font-size: $comment_body_size;
line-height: 120%;
margin-top: 8px;
&:hover {
color: #1C71DD; /*** Discussions ***/
text-decoration: none;
font-weight: normal; .discussion {
}
#open_close_accordion {
display: none;
} }
}
div.trending-tags { p + p, ul + p, ol + p {
font-weight: bold; margin-top: 0;
margin: 15% 0 0 0;
.trending-tag {
margin-top: 5px;
} }
.trending-tag-link {
@include discussion-font;
background: #CDE69C; /*** Sidebar ***/
border: 1px solid #A5D24A;
-moz-border-radius: 2px; .sidebar-module {
-webkit-border-radius: 2px; @include clearfix;
color: #638421; padding: 0 24px 24px 0;
display: block; margin-bottom: 24px;
float: left; border-bottom: 1px solid #d3d3d3;
font-size: 13px; font-size: 0.8em;
margin-right: 4px;
padding: 5px 7px; header {
text-decoration: none; margin-bottom: 14px;
@include clearfix;
&:hover { }
border-color: #1E4612;
color: #1E4612; h4 {
text-decoration: none; float: left;
font-size: 1.1em;
font-weight: bold;
}
.sidebar-new-post-button {
@include button;
display: block;
box-sizing: border-box;
width: 100%;
margin: 20px 0;
padding: 11px;
font-size: 1.1em;
text-align: center;
&:hover {
text-decoration: none;
}
}
.sidebar-view-all {
float: right;
font-size: 0.9em;
line-height: 1.6em;
@include standard-discussion-link;
}
.discussion-sidebar-following-list {
li {
@include clearfix;
margin-bottom: 8px;
}
a {
@include standard-discussion-link;
}
}
.discussion-sidebar-tags-list li {
@include clearfix;
}
.sidebar-tag-count {
color: #9a9a9a;
font-size: .85em;
line-height: 3em;
}
.sidebar-following-name {
float: left;
width: 80%;
}
.sidebar-vote-count {
float: right;
width: 20%;
text-align: right;
color: #9a9a9a;
} }
} }
}
.discussion {
.discussion-non-content { .discussion-non-content {
margin-left: flex-gutter(); margin-left: flex-gutter();
} }
//TITLE /*** Post ***/
.discussion-title { .discussion-title {
@include discussion-font; @include discussion-font;
@include discussion-clickable; @include discussion-clickable;
display: inline-block; display: inline-block;
font-size: $discussion_title_size; font-size: $discussion-title-size;
font-weight: bold; font-weight: bold;
margin-bottom: flex-gutter(6); margin-bottom: flex-gutter(6);
} }
.discussion-title-wrapper { .discussion-title-wrapper {
.discussion-watch-discussion, .discussion-unwatch-discussion { .discussion-watch-discussion, .discussion-unwatch-discussion {
@include discussion-font; @include discussion-font;
display: none; display: none;
font-size: $comment_info_size; font-size: $comment-info-size;
margin-left: 5px; margin-left: 5px;
} }
} }
.blank { .discussion-right-wrapper {
margin: 2%; min-height: 40px;
margin: 24px 0 24px 68px;
} }
.admin-actions {
float: right;
margin: 0.4em 1em 0 2em;
padding: 0;
li {
margin-bottom: 6px !important;
}
a {
display: block;
height: 25px;
padding-left: 25px;
border-radius: 50%;
background: url(../images/admin-actions-sprite.png) no-repeat;
font-size: .8em;
line-height: 25px;
color: #b8b8b8;
@include transition(color, .1s);
&:hover {
text-decoration: none;
}
&.admin-endorse {
background-position: 0 0;
&:hover {
color: #63b141;
background-position: 0 -75px;
}
}
&.admin-edit {
background-position: 0 -25px;
&:hover {
color: #009fe2;
background-position: 0 -100px;
}
}
&.admin-delete {
background-position: 0 -50px;
&:hover {
color: #d45050;
background-position: 0 -125px;
}
}
}
}
.comments {
.admin-actions {
margin-top: 0;
li {
margin-bottom: 2px !important;
}
a {
width: 20px;
height: 20px;
padding-left: 0;
overflow: hidden;
text-indent: -9999px;
&.admin-endorse {
background-position: 0 -150px;
&:hover {
background-position: 0 -225px;
}
}
&.admin-edit {
background-position: 0 -175px;
&:hover {
background-position: 0 -250px;
}
}
&.admin-delete {
background-position: 0 -200px;
&:hover {
background-position: 0 -275px;
}
}
}
}
}
/*** thread ***/
//SORTING .thread {
//display: none;
.thread-title {
@include discussion-font;
@include discussion-clickable;
display: block;
margin-bottom: 1em;
font-size: $comment-title-size;
font-weight: bold;
line-height: 1.4em;
}
.thread-body, .content-body {
@include discussion-font;
font-size: $post-font-size;
margin-bottom: 4px;
margin-top: 3px;
p {
@include discussion-font;
}
}
.thread-tags {
display: inline-block;
}
.info {
@include discussion-font;
color: gray;
font-size: $comment-info-size;
font-style: italic;
margin-top: 1em;
a:hover {
text-decoration: none;
color: #1C71DD;
}
.comment-time {
display: inline;
float: right;
margin-right: 1em;
}
.comment-count {
display: inline;
margin-right: 20px;
}
.discussion-actions {
display: inline;
margin: 0;
padding: 0;
li {
display: inline;
margin-right: 20px;
}
}
.discussion-link {
@include discussion-font;
color: #1d9dd9;
display: inline;
&.discussion-unfollow-thread {
color: #dea03e;
}
}
}
.discussion-content {
border-top: lightgray 1px solid;
overflow: hidden;
// padding: 1.5% 0;
.discussion-reply-new {
@include discussion-font;
margin-left: 68px;
.reply-body {
@include discussion-font;
display: block;
font-size: $post-font-size;
margin-top: 10px;
width: 95%;
}
}
}
.comment > .comments {
margin-left: 68px;
}
//COMMENT STYLES
.comments {
overflow: hidden;
.discussion-votes {
margin-top: 8px;
}
.discussion-right-wrapper {
margin: 10px 0 10px 68px;
}
.comment {
.comment-body, .content-body {
@include discussion-font;
color: black;
display: block;
font-size: $comment-font-size;
margin-top: 3px;
}
&.endorsed {
> .discussion-content {
background-color: #fcfcea;
}
}
}
}
}
/*** Sorting ***/
.discussion-sort { .discussion-sort {
float: right; float: right;
font-size: $comment_body_size; font-size: 0.8em;
margin-top: -2.5%; margin-top: -36px;
.discussion-label {
display: block;
float: left;
padding: 0 14px;
line-height: 34px;
}
.discussion-sort-link { .discussion-sort-link {
display: block;
float: left;
padding: 0 14px;
line-height: 34px;
&:hover { &:hover {
color: #1C71DD; color: #1C71DD;
text-decoration: none; text-decoration: none;
} }
} }
.discussion-sort-link.sorted { .discussion-sort-link.sorted {
color: #1C71DD; color: #000;
font-weight: bold; border-bottom: 2px solid #000;
} }
} }
//SEARCH /*** Search ***/
.search-wrapper-inline { .search-wrapper-inline {
display: inline-block; display: inline-block;
margin-bottom: 6%; margin-bottom: 6%;
margin-top: 3%; margin-top: 3%;
width: 80%; width: 80%;
} }
.search-wrapper {
height: 110px;
}
.discussion-search-form { .discussion-search-form {
display: inline-block; display: inline-block;
margin-bottom: 1%; margin-bottom: 1%;
width: flex-grid(12); width: flex-grid(12);
.discussion-link { .discussion-link {
@include button; @include button(simple, #999);
color: white; color: white;
display: inline-block; display: inline-block;
font-size: inherit; font-size: inherit;
...@@ -150,46 +445,41 @@ div.trending-tags { ...@@ -150,46 +445,41 @@ div.trending-tags {
padding-top: 9px; padding-top: 9px;
text-decoration: none; text-decoration: none;
} }
.discussion-search-text { .discussion-search-text {
@include discussion-font; @include discussion-font;
} }
.search-input { .search-input {
float: left; float: left;
font: inherit; font: inherit;
font-style: normal; font-style: normal;
width: 72%; // width: 72%;
width: flex-grid(8);
margin-left: flex-grid(1);
} }
} }
.search-within { .search-within {
display: block; display: block;
margin-bottom: 3%; margin-bottom: 3%;
} }
.discussion-search-within-board { .discussion-search-within-board {
font: inherit; font: inherit;
font-size: $comment_body_size; font-size: $post-font-size;
font-style: normal; font-style: normal;
} }
//BASIC BUTTON STYLES /*** buttons ***/
.control-button { .control-button {
@include button; @include button;
@include discussion-font; @include discussion-font;
background-color: #959595; background-color: #959595;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #959595),color-stop(100%, #7B7B7B)); @include background-image(linear-gradient(top, #959595, #7B7B7B));
background-image: -webkit-linear-gradient(top, #959595,#7B7B7B);
background-image: -moz-linear-gradient(top, #959595,#7B7B7B);
background-image: -ms-linear-gradient(top, #959595,#7B7B7B);
background-image: -o-linear-gradient(top, #959595,#7B7B7B);
background-image: linear-gradient(top, #959595,#7B7B7B);
border: 1px solid #6F6F6F; border: 1px solid #6F6F6F;
-webkit-box-shadow: inset 0 1px 0 #A2A2A2,0 0 3px #CCC; @include box-shadow(inset 0 1px 0 #A2A2A2, 0 0 3px #CCC);
-moz-box-shadow: inset 0 1px 0 #a2a2a2,0 0 3px #ccc;
box-shadow: inset 0 1px 0 #A2A2A2,0 0 3px #CCC;
color: white; color: white;
display: inline-block; display: inline-block;
font-size: inherit; font-size: inherit;
...@@ -199,132 +489,106 @@ div.trending-tags { ...@@ -199,132 +489,106 @@ div.trending-tags {
width: inherit; width: inherit;
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
&:hover { &:hover {
background-color: #A2A2A2; background-color: #A2A2A2;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A2A2A2),color-stop(100%, #7B7B7B)); @include background-image(linear-gradient(top, #A2A2A2, #7B7B7B));
background-image: -webkit-linear-gradient(top, #A2A2A2,#7B7B7B);
background-image: -moz-linear-gradient(top, #A2A2A2,#7B7B7B);
background-image: -ms-linear-gradient(top, #A2A2A2,#7B7B7B);
background-image: -o-linear-gradient(top, #A2A2A2,#7B7B7B);
background-image: linear-gradient(top, #A2A2A2,#7B7B7B);
border: 1px solid #555; border: 1px solid #555;
-webkit-box-shadow: inset 0 1px 0 #BBB,0 0 3px #CCC; @include box-shadow(inset 0 1px 0 #BBB, 0 0 3px #CCC);
-moz-box-shadow: inset 0 1px 0 #bbb,0 0 3px #ccc;
box-shadow: inset 0 1px 0 #BBB,0 0 3px #CCC;
} }
} }
//FOLLOW BUTTON
.follow-wrapper { .follow-wrapper {
float: right; display: inline;
.discussion-link {
@include button;
background-color: #BEBEBE;
background-image: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: inline-block;
font-size: $comment_info_size;
padding: 5px 8px;
text-decoration: none;
text-shadow: none;
&:hover {
background-color: #AAA;
background-image: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
} }
//VOTES /*** votes ***/
.discussion-votes { .discussion-votes {
float: left; float: left;
height: flex-grid(3); width: 60px;
margin: 1% 2%; margin-top: 18px;
text-align: center; text-align: center;
.discussion-vote-count { .discussion-vote {
@include discussion-font; display: block;
font-size: $comment_body_size; width: 50px;
} height: 17px;
margin: auto;
a.discussion-vote { background: url(../images/vote-arrows.png) no-repeat;
color: black;
display: block;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
color: black;
@include hide-text;
@include transition(all, 0, easeOut);
}
.discussion-vote-up {
margin-bottom: 5px;
background-position: -50px -3px;
&:hover { &:hover {
color: #1C71DD; background-position: -50px -5px;
text-decoration: none; @include transition-duration(0.05s);
} }
&.discussion-vote-up { &.voted {
margin-bottom: 3px; background-position: 0 -3px;
color: #1C71DD;
@include transition-duration(0);
} }
}
&.discussion-vote-down {
margin-top: 5px; .discussion-vote-down {
margin-top: 7px;
background-position: -50px -30px;
&:hover {
background-position: -50px -28px;
@include transition-duration(0.05s);
} }
&.voted { &.voted {
background-position: 0 -30px;
color: #1C71DD; color: #1C71DD;
@include transition-duration(0);
} }
}
.discussion-vote-count {
@include discussion-font;
font-size: $post-font-size;
} }
}
//CREATE NEW AND EDIT POSTS .discussion-votes-point {
font-size: 1.1em;
.discussion-right-wrapper { font-weight: bold;
float: left; color: #9a9a9a;
min-height: 40px; }
width: 90%;
} }
/*** new post ***/
.new-post-form, .discussion-thread-edit { .new-post-form, .discussion-thread-edit {
.title-input, .body-input { .title-input, .body-input {
display: block !important; display: block !important;
font: inherit; font: inherit;
font-style: normal; font-style: normal;
width: $discussion_input_width !important; width: $discussion-input-width !important;
}
.new-post-similar-posts-wrapper {
@include border-radius(3px);
border: 1px solid #EEE;
font-size: $comment_body_size;
line-height: 150%;
margin-top: 1%;
padding: 1% 1.5%;
}
.hide-similar-posts {
float: right;
} }
.new-post-similar-posts { .discussion-errors {
font: inherit; color: #8F0E0E;
.similar-post { display: block;
display: block; margin-left: -5%;
line-height: 150%;
}
} }
.new-post-body { .new-post-body {
margin-top: flex-gutter(); margin-top: flex-gutter();
} }
.tagsinput { .tagsinput {
background: #FAFAFA; background: #FAFAFA;
border: 1px solid #C8C8C8; border: 1px solid #C8C8C8;
...@@ -352,7 +616,7 @@ div.trending-tags { ...@@ -352,7 +616,7 @@ div.trending-tags {
color: #8F0E0E; color: #8F0E0E;
display: block; display: block;
font: inherit; font: inherit;
font-size: $comment_body_size; font-size: $post_font_size;
list-style: none; list-style: none;
margin-left: -3%; margin-left: -3%;
padding-left: 2em; padding-left: 2em;
...@@ -362,30 +626,51 @@ div.trending-tags { ...@@ -362,30 +626,51 @@ div.trending-tags {
color: #1C71DD; color: #1C71DD;
text-decoration: none; text-decoration: none;
}; };
&.collapsed {
.wmd-button-row {
height: 0;
}
.wmd-input {
height: 100px;
@include border-radius(3px);
}
.wmd-preview {
height: 0;
padding: 0;
border-width: 0;
}
.post-options {
height: 0;
}
.reply-post-control {
height: 0;
}
}
.new-post-control { .new-post-control {
margin-left: 80%; margin-left: 80%;
margin-top: 1%; margin-top: 1%;
} }
.reply-post-control {
margin-left: 73%;
}
.edit-post-control { .edit-post-control {
margin-left: 79%; margin-left: 79%;
margin-top: 1%; margin-top: 1%;
} }
.control-button { .control-button {
@include button; @include button;
@include discussion-font; @include discussion-font;
margin-right: 16px;
padding-top: 9px;
color: white; color: white;
display: inline-block; display: inline-block;
font-size: inherit; font-size: inherit;
font-weight: bold; font-weight: bold;
margin-left: 5%;
padding-top: 9px;
text-decoration: none; text-decoration: none;
width: inherit; width: inherit;
...@@ -393,12 +678,19 @@ div.trending-tags { ...@@ -393,12 +678,19 @@ div.trending-tags {
color: white; color: white;
} }
} }
label {
font-family: $sans-serif;
font-size: .8em;
font-style: normal;
font-weight: 400;
}
} }
.new-post-form { .new-post-form {
margin: 10px 0 40px 0; margin: 10px 0 40px 0;
} }
.discussion-reply-new { .discussion-reply-new {
.discussion-auto-watch { .discussion-auto-watch {
...@@ -406,162 +698,38 @@ div.trending-tags { ...@@ -406,162 +698,38 @@ div.trending-tags {
} }
} }
//THREAD STYLES .thread-tag {
background: $tag-background-color;
.thread { border: 1px solid $tag-border-color;
//display: none; -moz-border-radius: 2px;
-webkit-border-radius: 2px;
.search-highlight { color: $tag-text-color;
display: inline; float: left;
font-weight: bold; font-size: 13px;
background-color: lightyellow; margin: 5px 7px 5px 0;
} padding: 5px 7px;
text-decoration: none;
.thread-title {
@include discussion-font;
@include discussion-clickable;
display: block;
font-size: $comment_title_size;
font-weight: bold;
}
.thread-body, .content-body {
@include discussion-font;
font-size: $comment_body_size;
margin-bottom: 4px;
margin-top: 3px;
min-height: 35px;
p {
@include discussion-font;
margin: 0;
}
}
.thread-tags {
display: inline-block;
.thread-tag { &:hover {
@include discussion-font; border-color: #7b8761;
background: #CDE69C; color: #2f381c;
border: 1px solid #A5D24A; text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: #638421;
float: left;
font-size: 13px;
margin: 5px 7px 5px 0;
padding: 5px 7px;
text-decoration: none;
&:hover {
border-color: #1E4612;
color: #1E4612;
}
}
} }
}
.info { /*** pagination ***/
@include discussion-font;
color: gray;
font-size: $comment_info_size;
font-style: italic;
margin-top: 2%;
a {
&:hover {
text-decoration: none;
color: #1C71DD;
}
}
.comment-time {
display: inline;
float: right;
margin-right: -4%;
}
.comment-count {
display: inline;
}
.discussion-reply {
margin-left: 4px;
}
.discussion-link {
@include discussion-font;
color: #1d9dd9;
display: inline;
margin-left: 2px;
&:hover {
text-decoration: none;
color: #1C71DD;
}
}
}
.discussion-content {
border-top: lightgray 1px solid;
overflow: hidden;
padding: 1.5% 0;
.discussion-reply-new {
@include discussion-font;
margin-left: 5%;
.reply-body {
@include discussion-font;
display: block;
font-size: $comment_body_size;
margin-top: 10px;
width: 95%;
}
}
}
//COMMENT STYLES
.comments {
//display: none;
margin-left: $comment_margin_left;
overflow: hidden;
.comment {
.comment-body, .content-body {
@include discussion-font;
color: black;
display: block;
font-size: $comment_body_size;
margin-top: 3px;
}
&.endorsed {
> .discussion-content {
background-color: lightyellow;
}
}
}
}
}
//PAGES
.discussion-paginator { .discussion-paginator {
font-size: $comment_body_size; font-size: $post-font-size;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
div { div {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
margin: 0 5px; margin: 0 5px;
a { a {
background: #EEE; background: #EEE;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
...@@ -573,45 +741,92 @@ div.trending-tags { ...@@ -573,45 +741,92 @@ div.trending-tags {
font-weight: normal; font-weight: normal;
padding: 4px 10px; padding: 4px 10px;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background: #DDD; background: #DDD;
} }
} }
} }
} }
&.inline-discussion {
.new-post-form {
margin: 24px 60px;
.post-options {
margin: 8px 0 16px 0;
overflow: hidden;
label {
margin-right: 15px;
}
}
.reply-post-control {
overflow: hidden;
}
}
}
} }
//EDITOR STYLES
.wmd-panel
{ /*** base editor styles ***/
.wmd-panel {
width: 100%; width: 100%;
min-width: 500px; min-width: 500px;
} }
.wmd-button-bar .wmd-button-bar {
{
width: 100%; width: 100%;
background-color: Silver; background-color: Silver;
} }
.wmd-input .wmd-input {
{
height: 150px; height: 150px;
width: 100%; width: 100%;
background-color: Gainsboro; background-color: #e9e9e9;
border: 1px solid DarkGray; border: 1px solid #c8c8c8;
font: inherit; font-family: Monaco, 'Lucida Console', monospace;
font-style: normal;
font-size: 0.8em;
line-height: 1.6em;
@include border-radius(3px 3px 0 0);
&::-webkit-input-placeholder {
color: #888;
}
} }
.wmd-preview .wmd-preview {
{ position: relative;
background-color: #c0e0ff; font-family: $sans-serif;
padding: 25px 20px 10px 20px;
margin-bottom: 5px;
box-sizing: border-box;
border: 1px solid #c8c8c8;
border-top-width: 0;
@include border-radius(0 0 3px 3px);
overflow: hidden;
@include transition(all, .2s, easeOut);
&:before {
content: 'PREVIEW';
position: absolute;
top: 3px;
left: 5px;
font-size: 11px;
color: #bbb;
}
p {
font-family: $sans-serif;
}
background-color: #fafafa;
} }
.wmd-button-row .wmd-button-row {
{
position: relative; position: relative;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
...@@ -619,10 +834,11 @@ div.trending-tags { ...@@ -619,10 +834,11 @@ div.trending-tags {
margin-top: 10px; margin-top: 10px;
padding: 0px; padding: 0px;
height: 20px; height: 20px;
overflow: hidden;
@include transition(all, .2s, easeOut);
} }
.wmd-spacer .wmd-spacer {
{
width: 1px; width: 1px;
height: 20px; height: 20px;
margin-left: 14px; margin-left: 14px;
...@@ -653,26 +869,22 @@ div.trending-tags { ...@@ -653,26 +869,22 @@ div.trending-tags {
display: inline-block; display: inline-block;
} }
.wmd-spacer1 .wmd-spacer1 {
{
left: 50px; left: 50px;
} }
.wmd-spacer2 .wmd-spacer2 {
{
left: 175px; left: 175px;
} }
.wmd-spacer3
{ .wmd-spacer3 {
left: 300px; left: 300px;
} }
.wmd-prompt-background .wmd-prompt-background {
{
background-color: Black; background-color: Black;
} }
.wmd-prompt-dialog .wmd-prompt-dialog {
{
border: 1px solid #999999; border: 1px solid #999999;
background-color: #F5F5F5; background-color: #F5F5F5;
} }
...@@ -688,7 +900,7 @@ div.trending-tags { ...@@ -688,7 +900,7 @@ div.trending-tags {
color: black; color: black;
} }
.wmd-prompt-dialog > form > input[type="button"]{ .wmd-prompt-dialog > form > input[type="button"] {
border: 1px solid #888888; border: 1px solid #888888;
font-family: trebuchet MS, helvetica, sans-serif; font-family: trebuchet MS, helvetica, sans-serif;
font-size: 0.8em; font-size: 0.8em;
......
lms/templates/discussion/_accordion.html
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<% <article class="sidebar-module">
def url_for(commentable): <a href="#" class="sidebar-new-post-button">New Post</a>
return reverse('django_comment_client.forum.views.forum_form_discussion', args=[course.id, commentable['discussion_id']]) </article>
%>
<%def name="make_category(category, commentables)"> <article class="discussion-sidebar-following sidebar-module">
<h3><a href="#">${category}</a></h3> <header>
<h4>Following</h4>
<a href="#" class="sidebar-view-all">view all &rsaquo;</a>
</header>
<ol class="discussion-sidebar-following-list">
<li><a href="#"><span class="sidebar-following-name">Hints on HW4</span> <span class="sidebar-vote-count">1348</span></a></li>
<li><a href="#"><span class="sidebar-following-name">Answers to Mi-term</span> <span class="sidebar-vote-count">-37</span></a></li>
<li><a href="#"><span class="sidebar-following-name">Summaries for Lectures 1 to 12 (more added, links fixed)</span> <span class="sidebar-vote-count">128</span></a></li>
<ol>
</article>
<ul> <article class="discussion-sidebar-tags sidebar-module">
% for commentable in commentables: <header>
<li${' class="active"' if active == commentable['discussion_id'] else ''}> <h4>Recent Tags</h4>
<a href="${url_for(commentable)}"> </header>
<p>${commentable['title']}</p> <ol class="discussion-sidebar-tags-list">
</a> <li><a href="#" class="thread-tag">week-1</a><span class="sidebar-tag-count">&times;1348</span></li>
% endfor <li><a href="#" class="thread-tag">S2V8: Method 3</a><span class="sidebar-tag-count">&times;37</span></li>
</ul> <li><a href="#" class="thread-tag">artificial-intelligence</a><span class="sidebar-tag-count">&times;128</span></li>
</%def> <ol>
</article>
% for category, commentables in discussion_info.items(): \ No newline at end of file
${make_category(category, commentables)}
% endfor
lms/templates/discussion/_forum.html
<%namespace name="renderer" file="_thread.html"/> <%namespace name="renderer" file="_thread.html"/>
<section class="discussion inline-discussion" _id="${discussion_id}"> <section class="discussion inline-discussion" _id="${discussion_id}">
<div class="discussion-non-content discussion-local">
<div class="discussion-title-wrapper"> <div class="discussion-non-content">
<a class="discussion-title" href="javascript:void(0)">Discussion</a>
</div>
<div class="search-wrapper"> <div class="search-wrapper">
<%include file="_search_bar.html" /> <%include file="_search_bar.html" />
</div> </div>
<div class="search-within">
<input type="checkbox" id="discussion-search-within-board-${discussion_id}" class="discussion-search-within-board" checked/>
<label for="discussion-search-within-board-${discussion_id}" class="discussion-search-within-board">Search within board</label>
</div>
<div class="discussion-new-post control-button" href="javascript:void(0)">New Post</div>
</div> </div>
% if len(threads) == 0: % if len(threads) == 0:
<div class="blank"> <div class="blank">
......
lms/templates/discussion/_inline.html
<%namespace name="renderer" file="_thread.html"/> <%namespace name="renderer" file="_thread.html"/>
<script type="text/javascript">
$('#wmd-input-reply-body').bind('focus', function(e) {
$('.new-post-form').removeClass('collapsed');
});
</script>
<section class="discussion inline-discussion" _id="${discussion_id}"> <section class="discussion inline-discussion" _id="${discussion_id}">
<div class="discussion-non-content discussion-local">
<div class="search-wrapper-inline search-wrapper"> <div class="discussion-non-content">
<%include file="_search_bar.html" /> <form class="new-post-form collapsed" id="new-post-form" style="display: block; ">
</div> <ul class="discussion-errors"></ul>
<div class="discussion-new-post control-button" href="javascript:void(0)">New Post</div> <div class="reply-body"><div class="wmd-panel"><div id="wmd-button-bar-reply-body-502021ba30e78e7d4d00031d"><ul id="wmd-button-row-reply-body-502021ba30e78e7d4d00031d" class="wmd-button-row"><li class="wmd-button" style="left: 0px; " id="wmd-bold-button-reply-body-502021ba30e78e7d4d00031d" title="Strong &lt;strong&gt; Ctrl+B"><span style="background-position: 0px 0px; "></span></li><li class="wmd-button" style="left: 25px; " id="wmd-italic-button-reply-body-502021ba30e78e7d4d00031d" title="Emphasis &lt;em&gt; Ctrl+I"><span style="background-position: -20px 0px; "></span></li><li class="wmd-spacer wmd-spacer1" id="wmd-spacer1-reply-body-502021ba30e78e7d4d00031d"></li><li class="wmd-button" style="left: 75px; " id="wmd-link-button-reply-body-502021ba30e78e7d4d00031d" title="Hyperlink &lt;a&gt; Ctrl+L"><span style="background-position: -40px 0px; "></span></li><li class="wmd-button" style="left: 100px; " id="wmd-quote-button-reply-body-502021ba30e78e7d4d00031d" title="Blockquote &lt;blockquote&gt; Ctrl+Q"><span style="background-position: -60px 0px; "></span></li><li class="wmd-button" style="left: 125px; " id="wmd-code-button-reply-body-502021ba30e78e7d4d00031d" title="Code Sample &lt;pre&gt;&lt;code&gt; Ctrl+K"><span style="background-position: -80px 0px; "></span></li><li class="wmd-button" style="left: 150px; " id="wmd-image-button-reply-body-502021ba30e78e7d4d00031d" title="Image &lt;img&gt; Ctrl+G"><span style="background-position: -100px 0px; "></span></li><li class="wmd-spacer wmd-spacer2" id="wmd-spacer2-reply-body-502021ba30e78e7d4d00031d"></li><li class="wmd-button" style="left: 200px; " id="wmd-olist-button-reply-body-502021ba30e78e7d4d00031d" title="Numbered List &lt;ol&gt; Ctrl+O"><span style="background-position: -120px 0px; "></span></li><li class="wmd-button" style="left: 225px; " id="wmd-ulist-button-reply-body-502021ba30e78e7d4d00031d" title="Bulleted List &lt;ul&gt; Ctrl+U"><span style="background-position: -140px 0px; "></span></li><li class="wmd-button" style="left: 250px; " id="wmd-heading-button-reply-body-502021ba30e78e7d4d00031d" title="Heading &lt;h1&gt;/&lt;h2&gt; Ctrl+H"><span style="background-position: -160px 0px; "></span></li><li class="wmd-button" style="left: 275px; " id="wmd-hr-button-reply-body-502021ba30e78e7d4d00031d" title="Horizontal Rule &lt;hr&gt; Ctrl+R"><span style="background-position: -180px 0px; "></span></li><li class="wmd-spacer wmd-spacer3" id="wmd-spacer3-reply-body-502021ba30e78e7d4d00031d"></li><li class="wmd-button" style="left: 325px; " id="wmd-undo-button-reply-body-502021ba30e78e7d4d00031d" title="Undo - Ctrl+Z"><span style="background-position: -200px -20px; "></span></li><li class="wmd-button" style="left: 350px; " id="wmd-redo-button-reply-body-502021ba30e78e7d4d00031d" title="Redo - Ctrl+Shift+Z"><span style="background-position: -220px -20px; "></span></li></ul></div><textarea class="wmd-input" id="wmd-input-reply-body" placeholder="Post a question or comment…"></textarea><div id="wmd-preview-reply-body-502021ba30e78e7d4d00031d" class="wmd-panel wmd-preview"></div></div></div>
<div class="post-options">
<input type="checkbox" class="discussion-post-anonymously" id="discussion-post-anonymously-502021ba30e78e7d4d00031d">
<label for="discussion-post-anonymously-502021ba30e78e7d4d00031d">post anonymously</label>
<input type="checkbox" class="discussion-auto-watch" id="discussion-autowatch-502021ba30e78e7d4d00031d" checked="">
<label for="discussion-auto-watch-502021ba30e78e7d4d00031d">follow this thread</label>
</div>
<div class="reply-post-control">
<a class="discussion-submit-post control-button" href="javascript:void(0)">Submit</a>
</div>
</form>
</div> </div>
% if len(threads) == 0:
<div class="blank"> <div class="threads">
<%include file="_blank_slate.html" /> % for thread in threads:
</div> ${renderer.render_thread(course_id, thread, show_comments=False)}
<div class="threads"></div> % endfor
% else: </div>
<%include file="_sort.html" />
<div class="threads"> <%include file="_paginator.html" />
% for thread in threads:
${renderer.render_thread(course_id, thread, show_comments=False)}
% endfor
</div>
<%include file="_paginator.html" />
% endif
</section> </section>
<%! <%!
...@@ -36,3 +48,5 @@ ...@@ -36,3 +48,5 @@
} }
$$annotated_content_info = $.extend($$annotated_content_info, JSON.parse("${annotated_content_info | escape_quotes}")); $$annotated_content_info = $.extend($$annotated_content_info, JSON.parse("${annotated_content_info | escape_quotes}"));
</script> </script>
lms/templates/discussion/_sort.html
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<%def name="link_to_sort(key, title)"> <%def name="link_to_sort(key, title)">
% if key == sort_key: % if key == sort_key:
% if sort_order.lower() == 'desc': % if sort_order.lower() == 'desc':
${_link_to_sort(key, 'asc', title + ' &#x25BC;', 'sorted')} ${_link_to_sort(key, 'asc', title + '', 'sorted')}
% else: % else:
${_link_to_sort(key, 'desc', title + ' &#x25B2;', 'sorted')} ${_link_to_sort(key, 'desc', title + '', 'sorted')}
% endif % endif
% else: % else:
${_link_to_sort(key, 'desc', title)} ${_link_to_sort(key, 'desc', title)}
...@@ -22,14 +22,14 @@ ...@@ -22,14 +22,14 @@
%> %>
<a class="discussion-sort-link ${cls}" href="javascript:void(0)" sort-url="${url_for_sort(key, order)}">${title}</a> <a class="discussion-sort-link ${cls}" href="javascript:void(0)" sort-url="${url_for_sort(key, order)}">${title}</a>
</%def> </%def>
<div class="discussion-sort discussion-local"> <div class="discussion-sort">
Sort by: <span class="discussion-label">Sort by:</span>
${link_to_sort('top', 'top')}
${link_to_sort('date', 'date')} ${link_to_sort('date', 'date')}
|
${link_to_sort('activity', 'activity')}
|
${link_to_sort('votes', 'votes')} ${link_to_sort('votes', 'votes')}
|
${link_to_sort('comments', 'comments')} ${link_to_sort('comments', 'comments')}
</div> </div>
lms/templates/discussion/_thread.html
...@@ -36,10 +36,15 @@ ...@@ -36,10 +36,15 @@
<%def name="render_content(content, type, **kwargs)"> <%def name="render_content(content, type, **kwargs)">
<div class="discussion-content"> <div class="discussion-content">
<div class="discussion-content-wrapper clearfix"> <div class="discussion-content-wrapper clearfix">
<div class="follow-wrapper">
</div>
${render_vote(content)} ${render_vote(content)}
<div class="discussion-right-wrapper clearfix"> <div class="discussion-right-wrapper clearfix">
<ul class="admin-actions">
<li><a href="#" class="admin-endorse">Endorse</a></li>
<li><a href="#" class="admin-edit">Edit</a></li>
<li><a href="#" class="admin-delete">Delete</a></li>
</ul>
${render_title(content, type, **kwargs)} ${render_title(content, type, **kwargs)}
<div class="discussion-content-view"> <div class="discussion-content-view">
<a name="${content['id']}"></a> <a name="${content['id']}"></a>
...@@ -84,30 +89,23 @@ ...@@ -84,30 +89,23 @@
</%def> </%def>
<%def name="render_bottom_bar(content, type, **kwargs)"> <%def name="render_bottom_bar(content, type, **kwargs)">
<div class="info"> <div class="info">
${render_info(content)} ${render_info(content)}
${render_link("discussion-link discussion-reply discussion-reply-" + type, "Reply")} <ul class="discussion-actions">
${render_link("discussion-link discussion-edit", "Edit")} <li>${render_link("discussion-link discussion-reply discussion-reply-" + type, "Reply")}</li>
<li><div class="follow-wrapper"></div></li>
<span class="discussion-endorse-control"> <li>${render_link("discussion-link discussion-edit", "Edit")}</li>
% if content.get('endorsed', False): <li>
<input type="checkbox" checked="checked" class="discussion-link discussion-endorse" id="discussion-endorse-${content['id']}" /> % if type == "comment" and request.user.is_staff:
% else: % if content['endorsed']:
<input type="checkbox" class="discussion-link discussion-endorse" id="discussion-endorse-${content['id']}" /> <input type="checkbox" checked="checked" class="discussion-link discussion-endorse" id="discussion-endorse-${content['id']}">
% endif % else:
<label class="discussion-link" for="discussion-endorse-${content['id']}">Endorsed</label> <input type="checkbox" class="discussion-link discussion-endorse" id="discussion-endorse-${content['id']}">
</span> % endif
<label class="discussion-link" for="discussion-endorse-${content['id']}">Endorsed</label>
% if type == "thread" and request.user.is_staff:
% if content['closed']:
<a class="discussion-openclose" id="discussion-openclose-${content['id']}" href="javascript:void(0);">Re-open thread</a>
% else:
<a class="discussion-openclose" id="discussion-openclose-${content['id']}" href="javascript:void(0);">Close thread</a>
% endif % endif
% endif </li>
</ul>
${render_link("discussion-link discussion-delete", "Delete")}
</div> </div>
</%def> </%def>
...@@ -122,7 +120,13 @@ ...@@ -122,7 +120,13 @@
</div> </div>
<div class="comment-count"> <div class="comment-count">
% if content.get('comments_count', -1) >= 0: % if content.get('comments_count', -1) >= 0:
<a href="javascript:void(0)" class="discussion-show-comments"> Show ${content['comments_count']} comment(s)</a> <a href="javascript:void(0)" class="discussion-show-comments">
% if content.get('comments_count', -1) >= 2:
Show ${content['comments_count']} comments
% else:
Show ${content['comments_count']} comment
% endif
</a>
% endif % endif
</div> </div>
</%def> </%def>
...@@ -133,8 +137,8 @@ ...@@ -133,8 +137,8 @@
<%def name="render_vote(content)"> <%def name="render_vote(content)">
<div class="discussion-votes"> <div class="discussion-votes">
${render_link("discussion-vote discussion-vote-up", "&#x2C4;")} ${render_link("discussion-vote discussion-vote-up", "&#9650;")}
<div class="discussion-votes-point">${content['votes']['point']}</div> <div class="discussion-votes-point">${content['votes']['point']}</div>
${render_link("discussion-vote discussion-vote-down", "&#x2C5;")} ${render_link("discussion-vote discussion-vote-down", "&#9660;")}
</div> </div>
</%def> </%def>
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