diff --git a/lms/static/coffee/src/discussion/views/thread_response_view.coffee b/lms/static/coffee/src/discussion/views/thread_response_view.coffee index 4fd839ad2d..0dcd34a9f0 100644 --- a/lms/static/coffee/src/discussion/views/thread_response_view.coffee +++ b/lms/static/coffee/src/discussion/views/thread_response_view.coffee @@ -1,4 +1,7 @@ +console.log('test 1') + if Backbone? + console.log('test 2') class @ThreadResponseView extends DiscussionContentView tagName: "li" template: _.template($("#thread-response-template").html()) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index c2278fe968..cda3abd45a 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -1612,12 +1612,23 @@ body.discussion { border-bottom: 1px solid #bcbcbc; } + + .discussion-module { @extend .discussion-body; margin: 20px 0; padding: 20px 20px 28px 20px; background: #f6f6f6 !important; - border-radius: 3px; + border-radius: 3px; + + .responses { + margin-top: 40px; + + > li { + margin: 0 20px 20px !important; + padding: 26px 30px 20px !important; + } + } .discussion-show { display: block; @@ -2127,15 +2138,28 @@ body.discussion { .wmd-button-row { // this is being hidden now because the inline styles to position the icons are not being written - display: none; position: relative; height: 12px; } .wmd-button { span { + width: 20px; + height: 20px; background-image: url("/static/images/wmd-buttons.png"); display: inline-block; } } + + .wmd-spacer1 { + left: 50px; + } + + .wmd-spacer2 { + left: 175px; + } + + .wmd-spacer3 { + left: 300px; + } } diff --git a/lms/static/sass/course/_discussions-inline.scss b/lms/static/sass/course/_discussions-inline.scss new file mode 100644 index 0000000000..f9569a80ff --- /dev/null +++ b/lms/static/sass/course/_discussions-inline.scss @@ -0,0 +1,535 @@ +.discussion-module { + @extend .discussion-body; + margin: 20px 0; + padding: 20px 20px 28px 20px; + background: #f6f6f6 !important; + border-radius: 3px; + + .responses { + margin-top: 40px; + + > li { + margin: 0 20px 30px; + } + } + + .discussion-show { + display: block; + width: 200px; + margin: auto; + font-size: 14px; + text-align: center; + + &.shown { + .show-hide-discussion-icon { + background-position: 0 0; + } + } + + .show-hide-discussion-icon { + display: inline-block; + position: relative; + top: 5px; + margin-right: 6px; + width: 21px; + height: 19px; + background: url(../images/show-hide-discussion-icon.png) no-repeat; + background-position: -21px 0; + } + } + + .new-post-btn { + display: inline-block; + } + + section.discussion { + margin-top: 20px; + + .threads { + margin-top: 20px; + } + + /* Course content p has a default margin-bottom of 1.416em, this is just to reset that */ + .discussion-thread { + padding: 0; + @include transition(all .25s); + + .dogear, + .vote-btn { + display: none; + } + + &.expanded { + padding: 20px 0; + + .dogear, + .vote-btn { + display: block; + } + + .discussion-article { + border: 1px solid #b2b2b2; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); + border-radius: 3px; + } + } + + p { + margin-bottom: 0em; + } + + .discussion-article { + border: 1px solid #ddd; + border-bottom-width: 0; + background: #fff; + min-height: 0; + padding: 10px 10px 15px 10px; + box-shadow: 0 1px 0 #ddd; + @include transition(all .2s); + + .discussion-post { + padding: 12px 20px 0 20px; + @include clearfix; + + header { + padding-bottom: 0; + margin-bottom: 15px; + + h3 { + font-size: 19px; + font-weight: 700; + margin-bottom: 0px; + } + + h4 { + font-size: 16px; + } + } + + .post-body { + font-size: 14px; + clear: both; + } + } + + .post-tools { + margin-left: 20px; + + a { + display: block; + font-size: 12px; + line-height: 30px; + + &.expand-post:before { + content: '▾ '; + } + + &.collapse-post:before { + content: '▴ '; + } + + &.collapse-post { + display: none; + } + } + } + + .responses { + margin-top: 10px; + + header { + padding-bottom: 0em; + margin-bottom: 5px; + + .posted-by { + font-size: 0.8em; + } + } + .response-body { + margin-bottom: 0.2em; + font-size: 14px; + } + } + + .discussion-reply-new { + .wmd-input { + height: 120px; + } + } + + // Content that is hidden by default in the inline view + .post-extended-content{ + display: none; + } + + + } + } + } + + .new-post-article { + display: none; + margin-top: 20px; + + .inner-wrapper { + max-width: 1180px; + min-width: 760px; + margin: auto; + } + + .new-post-form { + width: 100%; + margin-bottom: 20px; + padding: 30px; + border-radius: 3px; + background: rgba(0, 0, 0, .55); + color: #fff; + box-shadow: none; + @include clearfix; + @include box-sizing(border-box); + + .form-row { + margin-bottom: 20px; + } + + .new-post-body .wmd-input { + @include discussion-wmd-input; + position: relative; + width: 100%; + height: 200px; + z-index: 1; + padding: 10px; + box-sizing: border-box; + border: 1px solid #333; + border-radius: 3px 3px 0 0; + background: #fff; + font-family: 'Monaco', monospace; + font-size: 13px; + line-height: 1.6; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; + } + + .new-post-body .wmd-preview { + @include discussion-wmd-preview; + position: relative; + width: 100%; + //height: 50px; + margin-top: -1px; + padding: 25px 20px 10px 20px; + box-sizing: border-box; + border: 1px solid #333; + border-radius: 0 0 3px 3px; + background: #e6e6e6; + color: #333; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; + } + + .new-post-preview-label { + position: absolute; + top: 4px; + left: 4px; + font-size: 11px; + color: #aaa; + text-transform: uppercase; + } + + .new-post-title, + .new-post-tags { + width: 100%; + height: 40px; + padding: 0 10px; + box-sizing: border-box; + border-radius: 3px; + border: 1px solid #333; + font-size: 16px; + font-family: 'Open Sans', sans-serif; + color: #333; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; + } + + .new-post-title { + font-weight: 700; + } + + .tagsinput { + padding: 10px; + box-sizing: border-box; + border: 1px solid #333; + border-radius: 3px; + background: #fff; + font-family: 'Monaco', monospace; + font-size: 13px; + line-height: 1.6; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; + + span.tag { + margin-bottom: 0; + } + } + + .submit { + @include blue-button; + float: left; + height: 37px; + margin-top: 10px; + padding-bottom: 2px; + border-color: #333; + + &:hover { + border-color: #222; + } + } + + .new-post-cancel { + @include white-button; + float: left; + margin: 10px 0 0 15px; + border-color: #444; + } + + .options { + margin-top: 5px; + + label { + display: inline; + margin-left: 8px; + font-size: 15px; + color: #fff; + text-shadow: none; + } + } + } + + .thread-tags { + margin-top: 20px; + } + + .thread-tag { + padding: 3px 10px 6px; + border-radius: 3px; + color: #333; + background: #c5eeff; + border: 1px solid #90c4d7; + font-size: 13px; + } + + .thread-title { + display: block; + margin-bottom: 20px; + font-size: 21px; + color: #333; + font-weight: 700; + } + } + + .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: 8px 7px 0 0; + background: url(../images/new-post-icon.png) no-repeat; + } + + .moderator-actions { + padding-left: 0 !important; + } + + section.pagination { + margin-top: 30px; + + nav.discussion-paginator { + float: right; + + ol { + li { + list-style: none; + display: inline-block; + padding-right: 0.5em; + a { + @include white-button; + } + } + + li.current-page{ + height: 35px; + padding: 0 15px; + border: 1px solid #ccc; + border-radius: 3px; + font-size: 13px; + font-weight: 700; + line-height: 32px; + color: #333; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); + } + } + } + } + + .new-post-body { + .wmd-panel { + width: 100%; + min-width: 500px; + } + + .wmd-button-bar { + width: 100%; + } + + .wmd-input { + height: 150px; + width: 100%; + background-color: #e9e9e9; + border: 1px solid #c8c8c8; + 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 { + position: relative; + 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 { + position: relative; + margin-left: 5px; + margin-right: 5px; + margin-bottom: 5px; + margin-top: 10px; + padding: 0px; + height: 20px; + overflow: hidden; + @include transition(all, .2s, easeOut); + } + + .wmd-spacer { + width: 1px; + height: 20px; + margin-left: 14px; + + position: absolute; + background-color: Silver; + display: inline-block; + list-style: none; + } + + .wmd-button { + width: 20px; + height: 20px; + padding-left: 2px; + padding-right: 3px; + position: absolute; + display: inline-block; + list-style: none; + cursor: pointer; + background: none; + } + + .wmd-button > span { + display: inline-block; + background-image: url(../images/new-post-icons-full.png); + background-repeat: no-repeat; + background-position: 0px 0px; + width: 20px; + height: 20px; + } + + .wmd-spacer1 { + left: 50px; + } + .wmd-spacer2 { + left: 175px; + } + + .wmd-spacer3 { + left: 300px; + } + + .wmd-prompt-background { + background-color: Black; + } + + .wmd-prompt-dialog { + @extend .modal; + background: #fff; + } + + .wmd-prompt-dialog { + padding: 20px; + + > div { + font-size: 0.8em; + font-family: arial, helvetica, sans-serif; + } + + b { + font-size: 16px; + } + + > form > input[type="text"] { + border-radius: 3px; + color: #333; + } + + > form > input[type="button"] { + border: 1px solid #888; + font-family: $sans-serif; + font-size: 14px; + } + + > form > input[type="file"] { + margin-bottom: 18px; + } + } + } + + .wmd-button-row { + // this is being hidden now because the inline styles to position the icons are not being written + display: none; + position: relative; + height: 12px; + } + + .wmd-button { + span { + background-image: url("/static/images/wmd-buttons.png"); + display: inline-block; + } + } +} \ No newline at end of file