Merge branch 'feature/tomg/new-discussions' of github.com:MITx/mitx into…

Merge branch 'feature/tomg/new-discussions' of github.com:MITx/mitx into feature/tomg/new-discussions

lms/static/coffee/src/discussion/discussion_module_view.coffee

@@ -16,13 +16,15 @@ if Backbone?
       else
         @page = 1
 
-
     toggleNewPost: (event) ->
+      event.preventDefault()
       if @newPostForm.is(':hidden')
         @newPostForm.slideDown(300)
       else
         @newPostForm.slideUp(300)
+
     hideNewPost: (event) ->
+      event.preventDefault()
       @newPostForm.slideUp(300)
 
     toggleDiscussion: (event) ->

lms/static/coffee/src/discussion/views/discussion_thread_inline_view.coffee

@@ -195,8 +195,8 @@ class @DiscussionThreadInlineView extends DiscussionContentView
     @expanded = true
     @$el.find('.post-body').html(@model.get('body'))
     @convertMath()
-    @$el.find('.expand-post').hide()
-    @$el.find('.collapse-post').show()
+    @$el.find('.expand-post').css('display', 'none')
+    @$el.find('.collapse-post').css('display', 'block')
     @$el.find('.post-extended-content').show()
     @makeWmdEditor "reply-body"
     if @$el.find('.loading').length
@@ -206,6 +206,6 @@ class @DiscussionThreadInlineView extends DiscussionContentView
     @expanded = false
     @$el.find('.post-body').html(@model.get('abbreviatedBody'))
     @convertMath()
-    @$el.find('.collapse-post').hide()
+    @$el.find('.collapse-post').css('display', 'none')
     @$el.find('.post-extended-content').hide()
-    @$el.find('.expand-post').show()
+    @$el.find('.expand-post').css('display', 'block')

lms/static/sass/_discussion.scss

@@ -23,7 +23,7 @@
   height: 35px;
   padding: 0 15px;
   border-radius: 3px;
-  border: 1px solid #444;
+  border: 1px solid #aaa;
   @include linear-gradient(top, #eee, #ccc);
   font-size: 13px;
   font-weight: 700;
@@ -37,6 +37,25 @@
   }
 }
 
+@mixin dark-grey-button {
+  display: block;
+  height: 35px;
+  padding: 0 15px;
+  border-radius: 3px;
+  border: 1px solid #222;
+  background: -webkit-linear-gradient(top, #777, #555);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 32px;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+
+  &:hover {
+    background: -webkit-linear-gradient(top, #888, #666);
+  }
+}
+
 @mixin discussion-wmd-input {
   width: 100%;
   height: 240px;
@@ -291,6 +310,7 @@ body.discussion {
         @include white-button;
         height: 40px;
         margin-top: 15px;
+        border-color: #444;
         line-height: 36px;
 
         .drop-arrow {
@@ -488,6 +508,7 @@ body.discussion {
 
     .new-post-cancel {
       @include white-button;
+      bordre-color: #444;
       float: left;
       margin: 10px 0 0 15px;
     }
@@ -1198,27 +1219,32 @@ body.discussion {
     padding: 10px 20px;
 
     > header .vote-btn {
+      position: relative;
+      z-index: 100;
       margin-top: 5px;
     }
 
     .post-tools {
+      @include clearfix;
+      margin-top: 15px;
+
       .ui-icon {
         display: inline;
-        float: right;
-      }
-      a {
-        display: inline;
         float: left;
-        height: 26px;
-        padding: 0 12px;
-        border-radius: 3px;
-        border: 1px solid #b2b2b2;
-        @include 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);
-        width: 6em;
+        width: 13px;
+        height: 13px;
+        margin-right: 4px;
+        background: url(../images/small-grey-arrows.png) no-repeat;
+
+        &.expand {
+          margin-top: 5px;
+          background-position: 0 0;
+        }
+
+        &.collapse {
+          margin-top: 6px;
+          background-position: -13px 0;
+        }
       }
     }
   }
@@ -1275,6 +1301,8 @@ body.discussion {
   }
 
   .vote-btn {
+    position: relative;
+    z-index: 100;
     float: right;
     display: block;
     height: 27px;
@@ -1420,7 +1448,6 @@ body.discussion {
     padding: 0;
     @include clearfix;
 
-
     li {
       float: left;
       margin-right: 8px;
@@ -1541,38 +1568,90 @@ body.discussion {
 .discussion-module {
   @extend .discussion-body;
 
+  .discussion-show {
+    @include white-button;
+    display: inline-block;
+  } 
+
+  .new-post-btn {
+    display: inline-block;
+  }
+
   section.discussion {
-  /* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
+    margin-top: 20px;
+
+    /* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
     .discussion-thread {
-      padding: 0.5em;
+      padding: 0.5em 0;
 
       p {
         margin-bottom: 0em;
       }
+
       .discussion-article {
-        border: 1px solid;
+        border: 1px solid #b2b2b2;
         border-radius: 3px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
         min-height: 0;
-        padding: 1em;
+        padding: 10px 10px 40px;
+
         .discussion-post {
+          @include clearfix;
+
           header {
-            padding-bottom: 0.1em;
-            margin-bottom: 10px;
+            padding-bottom: 0;
+            margin-bottom: 15px;
 
+            h3 {
+              font-size: 22px;
+              font-weight: 700;
+              margin-bottom: 0px;
+            }
           }
+
           .post-body {
             font-size: 14px;
             clear: both;
           }
         }
 
+        .post-tools {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;          
+          border-radius: 0 0 3px 3px;
+          border-top: 1px solid #ddd;
+          @include linear-gradient(top, #f2f2f2, #e2e2e2);
+
+          a {
+            display: block;
+            width: 100%;
+            text-align: center;
+            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;
             }
@@ -1581,20 +1660,20 @@ body.discussion {
             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;
         }
-        .collapse-post{
-          display:none;
-        }
+
+        
       }
     }
   }
@@ -1612,11 +1691,13 @@ body.discussion {
     .new-post-form {
       width: 100%;
       margin-bottom: 20px;
+      padding: 30px;
       border-radius: 3px;
       background: rgba(0, 0, 0, .55);
       color: #fff;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .5);
+      box-shadow: none;
       @include clearfix;
+      @include box-sizing(border-box);
 
       .form-row {
         margin-bottom: 20px;
@@ -1681,6 +1762,22 @@ body.discussion {
         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;
@@ -1698,10 +1795,11 @@ body.discussion {
         @include white-button;
         float: left;
         margin: 10px 0 0 15px;
+        border-color: #444;
       }
 
       .options {
-        margin-top: 40px;
+        margin-top: 5px;
 
         label {
           display: inline;
@@ -1744,6 +1842,7 @@ body.discussion {
 
   .new-post-btn {
     @include blue-button;
+    display: inline-block;
     font-size: 13px;
     margin-right: 4px;
   }
@@ -1756,28 +1855,42 @@ body.discussion {
     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 {
-      ol{
-        li{
+      float: right;
+
+      ol {
+        li {
           list-style: none;
           display: inline-block;
           padding-right: 0.5em;
           a {
-            @include white-button
+            @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);
-          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
         }
       }
     }
   }
 }
+
+
+

lms/static/sass/course.scss

@@ -12,6 +12,7 @@
 // Course base / layout styles
 @import 'course/layout/courseware_header';
 @import 'course/layout/footer';
+@import 'course/base/mixins';
 @import 'course/base/base';
 @import 'course/base/extends';
 @import 'module/module-styles.scss';

lms/static/sass/course/base/_base.scss

@@ -39,11 +39,6 @@ a {
   }
 }
 
-
-
-
-
-
 form {
   label {
     display: block;
@@ -132,6 +127,9 @@ img {
   }
 }
 
+.test-class {
+  border: 1px solid #f00;
+}
 
 
 .toast-notification {
@@ -143,13 +141,16 @@ img {
   padding: 15px 20px 17px;
   border-radius: 3px;
   border: 1px solid #333;
-  @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
-  background-color: rgba(30, 30, 30, .92);
-  @include box-shadow(0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset);
+  background: -webkit-linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)) rgba(30, 30, 30, .92);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
   font-size: 13px;
   color: #fff;
   opacity: 0;
-  @include transition(all .2s);
+  -webkit-transition: all .2s;
+
+  p, span {
+    color: #fff;
+  }
 
   .error-icon {
     display: block;
@@ -191,5 +192,4 @@ img {
     margin-top: 10px;
     text-align: center;
   }
-}
-
+}
\ No newline at end of file

lms/static/sass/course/base/_mixins.scss

@@ -35,4 +35,23 @@
   &:hover {
     @include linear-gradient(top, #fff, #ddd);
   }
+}
+
+@mixin dark-grey-button {
+  display: block;
+  height: 35px;
+  padding: 0 15px;
+  border-radius: 3px;
+  border: 1px solid #222;
+  background: -webkit-linear-gradient(top, #777, #555);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 32px;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+
+  &:hover {
+    background: -webkit-linear-gradient(top, #888, #666);
+  }
 }
\ No newline at end of file

lms/templates/discussion/mustache/_inline_discussion.mustache

@@ -7,24 +7,22 @@
             <div class="new-post-form-errors">
             </div>
             <form class="new-post-form">
-                <div class="right-column">
-                    <div class="form-row">
-                        <input type="text" class="new-post-title" name="title" placeholder="Title">
-                    </div>
-                    <div class="form-row">
-                        <div class="new-post-body" name="body" placeholder="Enter your question or comment&hellip;"></div>
-                        <!---<div class="new-post-preview"><span class="new-post-preview-label">Preview</span></div>-->
-                    </div>
-                    <div class="form-row">
-                        <input type="text" class="new-post-tags" name="tags" placeholder="Tags">
-                    </div>
-                    <input type="submit" class="submit" value="Add post">
-                    <a href="#" class="new-post-cancel">Cancel</a>
-                    <div class="options">
-                        <input type="checkbox" name="follow" class="discussion-follow" class="discussion-follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
-                        <br>
-                        <input type="checkbox" name="anonymous" class="discussion-anonymous" id="new-post-anonymous"><label for="new-post-anonymous">post anonymously</label>
-                    </div>
+                <div class="form-row">
+                    <input type="text" class="new-post-title" name="title" placeholder="Title">
+                </div>
+                <div class="form-row">
+                    <div class="new-post-body" name="body" placeholder="Enter your question or comment&hellip;"></div>
+                    <!---<div class="new-post-preview"><span class="new-post-preview-label">Preview</span></div>-->
+                </div>
+                <div class="form-row">
+                    <input type="text" class="new-post-tags" name="tags" placeholder="Tags">
+                </div>
+                <input type="submit" class="submit" value="Add post">
+                <a href="#" class="new-post-cancel">Cancel</a>
+                <div class="options">
+                    <input type="checkbox" name="follow" class="discussion-follow" class="discussion-follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
+                    <br>
+                    <input type="checkbox" name="anonymous" class="discussion-anonymous" id="new-post-anonymous"><label for="new-post-anonymous">post anonymously</label>
                 </div>
             </form>
         </div>

lms/templates/discussion/mustache/_inline_thread.mustache

@@ -3,7 +3,7 @@
     <div class="discussion-post local">
         <header>
             <a href="#" class="vote-btn discussion-vote discussion-vote-up" data-role="discussion-vote"><span class="plus-icon">+</span> <span class='votes-count-number'>{{votes.up_count}}</span></a>
-            <h1>{{title}}</h1>
+            <h3>{{title}}</h3>
             <p class="posted-details">
                 <span class="timeago" title="{{created_at}}">{{created_at}}</span> by
                 <a href="{{user_url}}">{{username}}</a>
@@ -11,12 +11,9 @@
                     &bull; This thread is closed.
                 </span>
             </p>
-            <div class="local post-tools">
-                <a href="javascript:void(0)" class="expand-post">Expand<span class="ui-icon ui-icon-triangle-1-e" /></a>
-                <a href="javascript:void(0)" class="collapse-post">Collapse<span class="ui-icon ui-icon-triangle-1-s" /></a>
-            </div>
         </header>
         <div class="post-body">{{abbreviatedBody}}</div>
+        
         <ul class="moderator-actions post-extended-content">
             <li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li>
             <li style="display: none"><a class="action-delete" href="javascript:void(0)"><span class="delete-icon"></span> Delete</a></li>
@@ -35,4 +32,9 @@
         </div>
     </form>
 
+    <div class="local post-tools">
+        <a href="javascript:void(0)" class="expand-post">View discussion</a>
+        <a href="javascript:void(0)" class="collapse-post">Hide discussion</a>
+    </div>
+
 </article>