Merge pull request #9666 from edx/marco/UX-2586/discussions-profile-photos

Discussion post cleanup (in preparation for post author images support)

common/static/common/templates/discussion/discussion-home.underscore

-<div class="discussion-article blank-slate">
+<div class="discussion-article view-discussion-home">
   <section class="home-header">
     <span class="label"><%- gettext("DISCUSSION HOME:") %></span>
     <% if (window.courseName) { %>

common/static/common/templates/discussion/forum-action-answer.underscore

@@ -5,6 +5,6 @@
             <span class="label-unchecked"><%- gettext("Mark as Answer") %></span>
             <span class="label-checked"><%- gettext("Unmark as Answer") %></span>
         </span>
-        <span class="action-icon"><i class="icon fa fa-ok"></i></span>
+        <span class="action-icon"><i class="icon fa fa-check"></i></span>
     </a>
 </li>

common/static/common/templates/discussion/forum-action-endorse.underscore

@@ -5,6 +5,6 @@
             <span class="label-unchecked"><%- gettext("Endorse") %></span>
             <span class="label-checked"><%- gettext("Unendorse") %></span>
         </span>
-        <span class="action-icon"><i class="icon fa fa-ok"></i></span>
+        <span class="action-icon"><i class="icon fa fa-check"></i></span>
     </a>
 </li>

common/static/common/templates/discussion/response-comment-show.underscore

-<div id="comment_<%- id %>">
+<div class="discussion-comment" id="comment_<%- id %>">
   <div class="response-body"><%- body %></div>
   <%=
       _.template(

common/static/common/templates/discussion/thread-response-show.underscore

-<header>
+<header class="wrapper-response-header">
   <div class="response-header-content">
     <%= author_display %>
     <p class="posted-details">

common/static/common/templates/discussion/thread-show.underscore

 <div class="discussion-post">
-    <header>
-        <div class="group-visibility-label">
-            <% if (obj.group_name) { %>
-                <%-
-                interpolate(
-                    gettext('This post is visible only to %(group_name)s.'),
-                    {group_name: obj.group_name},
-                    true
-                )
-                %>
-            <% } else { %>
-                <%- gettext('This post is visible to everyone.') %>
-            <% } %>
-        </div>
-
+    <header class="wrapper-post-header">
         <div class="post-header-content">
-            <h1><%- title %></h1>
+            <h1 class="post-title"><%- title %></h1>
             <p class="posted-details">
             <%
             var timeAgoHtml = interpolate(
@@ -59,7 +45,7 @@
     </header>
 
     <div class="post-body"><%- body %></div>
-
+    <div class="post-context">
         <% if (mode == "tab" && obj.courseware_url) { %>
             <%
             var courseware_title_linked = interpolate(
@@ -68,7 +54,6 @@
                 true
             );
             %>
-        <div class="post-context">
             <%=
             interpolate(
                 _.escape(gettext('Related to: %(courseware_title_linked)s')),
@@ -76,6 +61,19 @@
                 true
             )
             %>
-        </div>
         <% } %>
+        <div class="group-visibility-label">
+            <% if (obj.group_name) { %>
+                <%-
+                interpolate(
+                    gettext('This post is visible only to %(group_name)s.'),
+                    {group_name: obj.group_name},
+                    true
+                )
+                %>
+            <% } else { %>
+                <%- gettext('This post is visible to everyone.') %>
+            <% } %>
+        </div>
+    </div>
 </div>

lms/static/sass/_build-lms.scss

@@ -55,14 +55,15 @@
 @import 'views/support';
 @import 'course/auto-cert';
 
-// applications
+// app - discussion
 @import "discussion/utilities/variables";
 @import "discussion/mixins";
-@import 'discussion/discussion'; // Process old file after definitions but before everything else
+@import 'discussion/discussion'; // Process old file after definitions but before everything else, partial is deprecated.
 @import "discussion/elements/actions";
 @import "discussion/elements/editor";
 @import "discussion/elements/labels";
 @import "discussion/elements/navigation";
+@import "discussion/views/home";
 @import "discussion/views/thread";
 @import "discussion/views/create-edit-post";
 @import "discussion/views/response";

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

+// lms - base courseware styling
+// ====================
+// NOTE: this file is deprecated, and we should not continue to add to this file. Use other partials as appropriate.
+
 html {
   height: 100%;
   max-height: 100%;

lms/static/sass/discussion/_mixins.scss

@@ -63,46 +63,46 @@
   border-radius: 3px 3px 0 0;
   padding: ($baseline/2);
   width: 100%;
-  height: 240px;
+  height: 125px;
   background: $white;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
   font-size: 13px;
-  font-family: 'Monaco', monospace;
+  font-family: $sans-serif;
   line-height: 1.6;
 }
 
 @mixin discussion-wmd-preview-container {
   @include box-sizing(border-box);
-  border: 1px solid #aaa;
+  @include border-radius(0, 0, 3px, 3px);
+  border: 1px solid $gray-l1;
   border-top: none;
-  border-radius: 0 0 3px 3px;
   width: 100%;
-  background: #eee;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
+  background: $gray-l4;
+  box-shadow: 0 1px 3px $shadow-l1 inset;
 }
 
 @mixin discussion-new-post-wmd-preview-container {
   @include discussion-wmd-preview-container;
-  border-color: #333;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
+  border-color: $gray-d3;
+  box-shadow: 0 1px 3px $shadow-d1 inset;
 }
 
 @mixin discussion-wmd-preview-label {
+  @include padding-left($baseline/4);
   padding-top: 3px;
-  @include padding-left(5px);
   width: 100%;
-  color: #bbb;
+  color: $gray-l2;
   text-transform: uppercase;
   font-size: 11px;
 }
 
 @mixin discussion-wmd-preview {
   padding: ($baseline/2) $baseline;
-  width: 100%;
-  color: #333;
+  width: auto;
+  color: $gray-d3;
 
   ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places
-    @include padding-left(40px);
+    @include padding-left($baseline*2);
     @include padding-right(0);
   }
 }

lms/static/sass/discussion/elements/_actions.scss

@@ -121,7 +121,7 @@
       @extend %t-copy-sub2;
       display: inline-block;
       vertical-align: middle;
-      padding: 0 8px;
+      padding: 2px 8px;
       color: $gray-l1;
       opacity: 0;
     }

lms/static/sass/discussion/utilities/_shame.scss

@@ -155,3 +155,18 @@ li[class*=forum-nav-thread-label-] {
     color: inherit;
   }
 }
+
+// -------
+// Inline Discussion Module Overrides
+// -------
+.discussion-module {
+  
+  .wrapper-post-header .post-title {
+    margin-bottom: 0 !important; // overrides "#seq_content h1" styling
+  }
+
+  .posted-details {
+    font-size: 12px !important;
+    color: #919191 !important;
+  }
+}

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

+// discussion - utilities - variables
+// ====================
+
+// color variables
 $forum-color-active-thread: tint($blue, 85%);
 $forum-color-pinned: $pink;
 $forum-color-reported: $pink;
@@ -6,3 +10,8 @@ $forum-color-following: $blue;
 $forum-color-staff: $blue;
 $forum-color-community-ta: $green-d1;
 $forum-color-marked-answer: $green-d1;
+
+// post images
+$post-image-dimension: ($baseline*3);  // image size  + margin
+$response-image-dimension: ($baseline*2.5); // image size  + margin
+$comment-image-dimension: ($baseline*2); // image size  + margin

lms/static/sass/discussion/views/_create-edit-post.scss

@@ -8,10 +8,8 @@
   box-sizing: border-box;
   margin: 0;
   border-radius: 3px;
-  padding: ($baseline*2);
-  min-width: 760px;
+  padding: ($baseline);
   max-width: 1180px;
-  background: $gray-l5;
 
   .post-field {
     margin-bottom: $baseline;

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

+// discussion - views - home layout
+// ====================
+
+// home - layout
+.container .view-discussion-home {
+  padding: ($baseline*2) ($baseline*2) ($baseline/2);
+
+  section {
+    border-bottom: 1px solid $gray-l3;
+  }
+
+  .label {
+    @extend %t-copy-sub2;
+    display: block;
+  }
+
+  .label-settings {
+    padding-top: $baseline;
+    padding-bottom: ($baseline/2);
+    text-transform: uppercase;
+  }
+
+  .home-header {
+    margin: 0;
+  }
+
+  .home-title {
+    @extend %t-title5;
+    color: $black;
+    margin-bottom: ($baseline/4);
+  }
+  .home-description {
+    @extend %t-copy-sub2;
+    margin-bottom: ($baseline/2);
+  }
+  .home-stats {
+    padding: $baseline 0;
+
+    .label-area {
+      display: inline-block;
+      min-width: ($baseline*5);
+      width: 25%;
+      vertical-align: middle;
+
+      .profile-link {
+        font-weight: 700;
+      }
+    }
+
+    .stats-grouping {
+      @include padding-left($baseline);
+      display: inline-block;
+      width: 70%;
+
+      .profile-stat {
+        @extend %t-copy-sub2;
+        display: inline-block;
+        width: 32.5%;
+        vertical-align: middle;
+
+        .count {
+          @extend %t-title4;
+          display: inline-block;
+          padding: 0 ($baseline/2);
+          vertical-align: middle;
+        }
+
+        .profile-stat-label{
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  .home-helpgrid {
+    border-bottom: none;
+    border-radius: 3px;
+    border: 1px solid $gray-l2;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
+  }
+
+  .helpgrid-row {
+    border-bottom: 1px solid $gray-l2;
+
+    .row-title {
+      padding: ($baseline*1.5) $baseline;
+      background-color: #dedede;
+      font-size: 12px;
+    }
+
+    .row-item-full, .row-item {
+      font-size: 12px;
+      padding: 0px $baseline/2;
+      width: 26%;
+      vertical-align: middle;
+
+      .icon {
+        padding: 0 ($baseline/2);
+        font-size: 24px;
+        vertical-align: middle;
+        display: table-cell;
+      }
+
+      .fa-stack .icon {
+        padding: 0 ($baseline/2);
+      }
+
+      .row-description {
+        vertical-align: middle;
+        display: table-cell;
+      }
+    }
+
+    .row-item-full {
+
+      .notification-checkbox {
+        display: inline-block;
+        @include padding($baseline/4, 0, $baseline/2, 0);
+        @include margin-right($baseline/2);
+        border-radius: 5px;
+        border: 1px solid gray;
+
+        .email-setting {
+          display: inline-block;
+          text-align: center;
+          vertical-align: middle;
+          @include margin-left($baseline/2);
+        }
+
+        .icon {
+          display: inline-block;
+        }
+
+        .email-setting:checked ~ .icon {
+          color: $green;
+        }
+      }
+
+      .row-description {
+        display: inline-block;
+        width:80%;
+      }
+    }
+  }
+
+  .helpgrid-row-navigation {
+    .fa-bars {color: $light-gray;}
+    .fa-search {color: $light-gray;}
+    .fa-sort {color: $light-gray;}
+  }
+
+  .helpgrid-row-participation {
+    .fa-plus {color: $green;}
+    .fa-flag {color: $pink;}
+    .fa-star {color: $blue;}
+  }
+
+  .helpgrid-row-notification {
+    .fa-square {color: $green;}
+    .fa-envelope {color: $light-gray;}
+  }
+}
\ No newline at end of file

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

+// discussion - responses
+// ====================
+
+// Table of Contents
+// * +wrapper - response list
+// * +base - single response element
+// * +element - add response area
+// * +response - labels and banners
+// * +CASE: answered question - collapsed comments in answers
+// * +response - labels and banners
+// * +comments styling
+
+// +wrapper - response list
+.container .discussion-body .responses {
+  list-style: none;
+  margin-top: $baseline;
+  padding: 0 ($baseline*1.5);
+
+  &:empty {
+    display: none;
+  }
+
+  // wrapper - response plus comment area
+  .forum-response {
+    @include animation(fadeIn .3s);
+    position: relative;
+    margin: $baseline 0;
+    border: 1px solid $gray-l2;
+    border-radius: 3px;
+    box-shadow: 0 0 1px $shadow;
+  }
+
+  // wrapper - main response area
+  .discussion-response {
+    @include box-sizing(border-box);
+    @include border-radius(3px, 3px, 0, 0);
+    padding: $baseline;
+    background-color: $white;
+  }
+  
+  .posted-by {
+    @extend %t-ultrastrong;
+  }
+}
+
+// +base - single response element
+.container .discussion-response {
+
+  .response-header-content {
+
+    // CASE: larger username for responses 
+    .username {
+      @include font-size(14);
+      @extend %t-weight5;
+    }
+  }
+
+  // rtl resets for response list elements
+  .response-body ol, .response-body ul { // Fix up the RTL-only _reset.scss, but only in specific places
+    @include padding-left($baseline*2);
+    @include padding-right(0);
+  }
+}
+
+// +element - add response area
+.container .discussion-body .add-response {
+  margin-top: $baseline;
+  padding: 0 ($baseline*1.5);
+
+  .add-response-btn {
+    @include white-button;
+    @include linear-gradient(top, $white 35%, $gray-l4);
+    position: relative;
+    border: 1px solid $gray-l2;
+    padding: 0 18px;
+    width: 100%;
+    box-shadow: 0 1px 1px $shadow-l1;
+    @include text-align(left);
+    font-size: 13px;
+
+    .fa-reply:before { // flip the icon for RTL
+      @include ltr {
+        content: "\f112"; // FA icon arrow to the left
+      }
+
+      @include rtl {
+        content: "\f064"; // FA icon arrow to the right
+      }
+    }
+
+    span.add-response-btn-text {
+      @include padding-left($baseline/5);
+    }
+  }
+}
+
+// +CASE: answered question - collapsed comments in answers
 .forum-response .action-show-comments {
   @include box-sizing(border-box);
   @include font-size(13);
@@ -7,3 +104,108 @@
   background: $gray-l6;
   box-shadow: 0 1px 3px -1px $shadow inset;
 }
+
+// +response - labels and banners
+// NOTE - these styles seem to no longer be in use. They have been isolated here, but should be ideally removed or fixed. 
+.container .discussion-body .responses .forum-response {
+
+  // CASE: label - staff response
+  &.staff {
+    padding-top: 38px;
+    border-color: #009fe2;
+  }
+
+  // CASE: label - community TA response
+  &.community-ta{
+    padding-top: 38px;
+    border-color: $forum-color-community-ta;
+  }
+
+  // CASE: banner - staff response
+  .staff-banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 14px;
+    padding: 1px ($baseline/4);
+    @include box-sizing(border-box);
+    border-radius: 2px 2px 0 0;
+    background: #009fe2;
+    font-size: 9px;
+    font-weight: 700;
+    color: $white;
+    text-transform: uppercase;
+  }
+
+  // CASE: banner - community TA response
+  .community-ta-banner{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 14px;
+    padding: 1px ($baseline/4);
+    @include box-sizing(border-box);
+    border-radius: 2px 2px 0 0;
+    background: $forum-color-community-ta;
+    font-size: 9px;
+    font-weight: 700;
+    color: $white;
+    text-transform: uppercase;
+  }
+
+  // STATE: loading - response list
+  &.loading {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    border: none;
+    box-shadow: none;
+  }
+}
+
+// +comments styling
+.container .discussion-body .comments {
+  @extend %ui-no-list;
+  border-radius: 0 0 3px 3px;
+  background: $gray-l6;
+  box-shadow: 0 1px 3px -1px $shadow inset;
+
+  > li {
+    border-top: 1px solid $gray-l4;
+    padding: ($baseline/2) $baseline;
+  }
+
+
+  blockquote {
+    background: $gray-l4;
+    border-radius: 3px;
+    padding: ($baseline/4) ($baseline/2);
+    font-size: 14px;
+  }
+
+  .comment-form {
+    @include clearfix();
+
+    .comment-form-input {
+      padding: ($baseline/4) ($baseline/2);
+      background-color: $white;
+      font-size: 14px;
+    }
+
+    .discussion-submit-comment {
+      @include blue-button;
+      float: left;
+      margin-top: 8px;
+    }
+
+    .wmd-input {
+      height: 40px;
+    }
+
+    .discussion-errors {
+      margin: 0;
+    }
+  }
+}

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

 // discussion - thread layout
 // ====================
+// NOTE: thread = (post + (responses and comments))
 
-// general thread layout
+// Table of Contents 
+// * +general thread layout
+// * +thread - wrapper styling
+// * +thread - elements - shared styles
+// * +post - individual element styling
+// * +post - answered question - collapsed comment area
+
+// +general thread layout
 body.discussion, .discussion-module {
 
   // post layout
   .discussion-post {
-    padding: ($baseline*2) ($baseline*2) $baseline ($baseline*2);
-    border-radius: 3px 3px 0 0;
+    @include padding(($baseline*1.5), ($baseline*1.5), $baseline, ($baseline*1.5));
+    @include border-radius(3px, 3px, 0, 0);
     background-color: $white;
 
+    .wrapper-post-header {
+      padding-bottom: 0;
+      margin-bottom: ($baseline*0.75);
+    }
+
     .post-header-content {
       display: inline-block;
       width: flex-grid(9,12); 
     }
 
     .post-header-actions {
-      display: inline-block;
       @include float(right);
-      vertical-align: middle;
       width: flex-grid(3,12);
     }
   }
 
   // response layout
   .discussion-response {
-    min-height: ($baseline*7.5);
-
-    .username {
-      @include font-size(14);
-      @extend %t-weight5;
-    }
-
-    .posted-details .username {
-      font-size: inherit;
-    }
+    min-height: ($baseline*5);
 
     .response-header-content {
       display: inline-block;
@@ -43,87 +45,150 @@ body.discussion, .discussion-module {
     }
 
     .response-header-actions {
-      position: absolute;
+      @include float(right);
       @include right($baseline);
+      position: absolute;
       top: ($baseline);
-      @include float(right);
     }
   }
 
   // comments layout
-  .comments {
-    @extend %ui-no-list;
-    border-radius: 0 0 3px 3px;
-    background: $gray-l6;
-    box-shadow: 0 1px 3px -1px $shadow inset;
+  .discussion-comment {
 
-    > li {
-      border-top: 1px solid $gray-l4;
-      padding: ($baseline/2) $baseline;
+    .response-body {
+      @extend %t-copy-sub2;
+      display: inline-block;
+      margin-bottom: ($baseline/2);
+      width: flex-grid(10,12);
+
+      p + p {
+        margin-top: 12px;
+      }
     }
 
+    .comment-actions-list {
+      @include float(right);
+    }
 
-    blockquote {
-      background: $gray-l4;
-      border-radius: 3px;
-      padding: ($baseline/4) ($baseline/2);
-      font-size: 14px;
+    .posted-details {
+      margin-top: 0;
     }
+  }
+}
 
-    .comment-form {
+// +thread - wrapper styling
+.forum-thread-main-wrapper {
+  @include border-radius(3px, 3px, 0, 0);
+  border-bottom: 1px solid $white; // Prevent collapsing margins
+  background-color: $white;
+}
+
+// +thread - elements - shared styles
+body.discussion {
+
+  .discussion-post, .discussion-response, .discussion-comment {
     @include clearfix();
     
-      .comment-form-input {
-        padding: ($baseline/4) ($baseline/2);
-        background-color: $white;
-        font-size: 14px;
+    // thread - images
+    .author-image {
+      @include margin-right($baseline/2);
+      display: inline-block;
+      vertical-align: top; 
+
+      // STATE: No profile image 
+      &:empty {
+        display: none;
       }
 
-      .discussion-submit-comment {
-        @include blue-button;
-        float: left;
-        margin-top: 8px;
+      // CASE: post image
+      &.level-post {
+        height: $post-image-dimension;
+        width: $post-image-dimension;
       }
 
-      .wmd-input {
-        height: 40px;
+      // CASE: response image
+      &.level-response {
+        height: $response-image-dimension;
+        width: $response-image-dimension;
       }
 
-      .discussion-errors {
-        margin: 0;
+      // CASE: comment image
+      &.level-comment {
+        height: $comment-image-dimension;
+        width: $comment-image-dimension;
+      }
+
+      img {
+        border-radius: 3px;
       }
     }
 
-    .response-body {
-      display: inline-block;
-      margin-bottom: ($baseline/2);
-      width: flex-grid(10,12);
-      font-size: 13px;
+    // thread - header content details
+    .posted-details {
+      @extend %t-copy-sub2;
+      margin-top: ($baseline/5);
+      color: $gray-l1;
 
-      p + p {
-        margin-top: 12px;
+      .username {
+        @extend %t-strong;
+        display: inline;
+      }
+
+      .timeago, .top-post-status {
+        color: inherit;
+      }
     }
   }
 
-    .comment-actions-list {
-      display: inline-block;
-      width: flex-grid(2,12);
-      vertical-align: top;
+  .discussion-post .post-body, .discussion-response .response-body {
+    @include padding-right($baseline); //ensures content doesn't overlap on post or response actions.
   }
+}
 
-    //TO-DO : clean up posted-details styling, currently reused by responses and comments
-    .posted-details {
-      margin-top: 0;
+// +post - individual element styling
+body.discussion .discussion-post, body.discussion .discussion-article {
+  // NOTE: discussion-article is used for inline discussion modules.
+  @include clearfix();
+
+  .post-header-content {
+
+    // post title
+    .post-title {
+      @extend %t-title4;
+      @extend %t-ultrastrong;
+      margin-bottom: ($baseline/4);
+      letter-spacing: 0;
     }
   }
-}
 
-.forum-thread-main-wrapper {
-  border-bottom: 1px solid $white; // Prevent collapsing margins
-  border-radius: 3px 3px 0 0;
-  background-color: $white;
+  // post body
+  .post-body {
+    @extend %t-copy-sub1;
+    // clear: both; //TO-DO: confirm that removing this is ok for all cases of discussion posts.
+  }
+
+  // post context
+  .post-context {
+    @extend %t-copy-sub2;
+    margin-top: $baseline;
+    color: $gray-d1;
+    padding: ($baseline*0.75);
+    background-color: $gray-l6;
+    border-radius: 3px;
+
+    // CASE: no courseware context or cohort visiblity rules
+    &:empty {
+      display: none;
+    }
+
+    // post visibility - cohorts
+    .group-visibility-label {
+      margin-top: ($baseline/4);
+    }
+  }
 }
 
+// +post - answered question - collapsed comment area
 body.discussion, .discussion-thread.expanded {
   .forum-thread-main-wrapper {
     box-shadow: 0 1px 3px $shadow;