Merge pull request #13513 from edx/alisan/inline-discussion-TNL-4756

New inline discussion home view TNL-4756

lms/static/sass/base/_headings.scss

@@ -125,7 +125,11 @@ $headings-base-color:                       $gray-d2;
             margin-bottom: 0;
             font-size: 1.5em;
         }
+
+        &.discussion-module-title {
+            margin-bottom: 0;
+            display: inline-block;
+        }
     }
 }
 
-

lms/static/sass/course/courseware/_courseware.scss

@@ -121,6 +121,7 @@ html.video-fullscreen {
 
     h1 {
       margin: 0 0 lh();
+      letter-spacing: 0;
     }
     div.timed-exam {
       h3 {

lms/static/sass/discussion/_discussion-v1.scss

@@ -18,8 +18,11 @@
     box-shadow: none;
     height: 40px;
     text-shadow: none;
+    font-family: $f-sans-serif; // without this, it would fallback to lms button tag style
     font-size: 14px;
     font-weight: 600;
+    word-wrap: break-word;
+    white-space: nowrap;
 
     // Display: block, one button per line, full width
     &.block {

lms/static/sass/discussion/_discussion.scss

@@ -299,7 +299,7 @@ body.discussion {
   position: relative;
   margin: $baseline 0;
   padding: $baseline;
-  background: #f6f6f6 !important;
+  border: 1px solid $forum-color-border !important;
   border-radius: $forum-border-radius;
 
   header {
@@ -308,9 +308,30 @@ body.discussion {
     }
   }
 
-  .new-post-btn {
-    @include float(right);
-    @include margin-right(4px);
+  .inline-discussion-topic {
+    width: flex-grid(12);
+    font-size: $forum-small-font-size;
+
+    .inline-discussion-topic-title {
+      font-weight: bold;
+    }
+  }
+
+  .discussion-module-header {
+    @include float(left);
+    width: flex-grid(7);
+  }
+
+  .add_post_btn_container {
+    @include text-align(right);
+    position: relative;
+    top: -45px;
+  }
+
+  .discussion {
+    &.inline-discussion {
+      padding-top: $baseline * 3;
+    }
   }
 
   div.add-response.post-extended-content {
@@ -324,27 +345,17 @@ body.discussion {
 }
 
 .discussion-show {
+  @include float(right);
   position: relative;
   top: 3px;
   font-size: $forum-base-font-size;
   text-align: center;
 
   &.shown {
-    .show-hide-discussion-icon {
-      background-position: 0 0;
-    }
+    background-color: $btn-default-background-color;
+    color: $uxpl-primary-blue;
   }
 
-  .show-hide-discussion-icon {
-    display: inline-block;
-    position: relative;
-    top: 5px;
-    @include margin-right(6px);
-    width: 21px;
-    height: 19px;
-    background: url('#{$static-path}/images/show-hide-discussion-icon.png') no-repeat;
-    background-position: -21px 0;
-  }
 }
 
 section.discussion {

lms/static/sass/discussion/utilities/_variables-v1.scss

@@ -35,3 +35,7 @@ $forum-small-font-size: 12px;
 
 // borders
 $forum-border-radius: 3px;
+
+// btn colors
+$uxpl-primary-blue: $blue !default;
+$btn-default-background-color: $white;

lms/static/sass/discussion/utilities/_variables-v2.scss

@@ -35,3 +35,8 @@ $forum-small-font-size: font-size(x-small);
 
 // borders
 $forum-border-radius: $component-border-radius;
+
+
+// btn colors
+$uxpl-primary-blue: palette(primary, base) !default;
+$btn-default-background-color: $lms-container-background-color;

lms/static/sass/discussion/views/_response.scss

@@ -145,6 +145,7 @@
   > li {
     border-top: 1px solid $forum-color-border;
     padding: ($baseline/2) $baseline;
+    position: relative;
   }
 
   blockquote {

lms/static/sass/discussion/views/_thread.scss

@@ -80,6 +80,9 @@
 
     .comment-actions-list {
         @include float(right);
+        @include right($baseline / 2);
+        position: absolute;
+        top: $baseline / 2;
     }
 }
 

lms/static/sass/elements/_controls.scss

@@ -461,6 +461,7 @@
     background-image: none;
     box-shadow: none;
     text-shadow: none;
+    white-space: nowrap;
 
     @extend %t-action3;
     @extend %t-strong;