Merge pull request #14173 from edx/alisan/discussion-styles-fix-TNL-6187

new inline discussion style fixes

lms/static/js/Markdown.Editor.js

@@ -26,7 +26,7 @@
 
     // The text that appears on the dialog box when entering links.
     var linkDialogText = gettext('Insert Hyperlink'),
-        linkUrlHelpText = gettext("e.g. 'http://google.com/'"),
+        linkUrlHelpText = gettext("e.g. 'http://google.com'"),
         linkDestinationLabel = gettext('Link Description'),
         linkDestinationHelpText = gettext("e.g. 'google'"),
         linkDestinationError = gettext('Please provide a description of the link destination.'),
@@ -1108,6 +1108,7 @@
                     imageIsDecorativeLabel: imageIsDecorativeLabel,
                     imageUploadHandler: imageUploadHandler
                 });
+            dialog.setAttribute('dir', doc.head.getAttribute('dir'));
             dialog.setAttribute('role', 'dialog');
             dialog.setAttribute('tabindex', '-1');
             dialog.setAttribute('aria-labelledby', 'editorDialogTitle');

lms/static/sass/discussion/_discussion.scss

@@ -19,7 +19,8 @@
   .discussion-article {
     position: relative;
 
-    a {
+    a,
+    p {
       word-wrap: break-word;
     }
   }

lms/static/sass/discussion/_mixins.scss

@@ -98,4 +98,5 @@
   background: $color;
   font-style: normal;
   color: white;
+  white-space: nowrap;
 }

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

@@ -58,7 +58,7 @@
     position: absolute;
     top: 100%;
     pointer-events: none;
-    min-width: ($baseline*6.5);
+    min-width: $actions-dropdown-width;
 
     &.is-expanded {
       display: block;

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

@@ -139,6 +139,44 @@
   > form > input[type="file"] {
     margin-bottom: 18px;
   }
+
+  .field-group .field .field-hint {
+    @include margin-left(0);
+    width: 100%;
+  }
+
+  .field-input-label {
+    font-size: $forum-base-font-size;
+  }
+
+  .input-text {
+    width: calc(100% - 175px); // minus choose file button width
+    height: 40px; // align with choose file button
+
+    &.has-error {
+      border-color: $forum-color-error;
+    }
+  }
+
+  .field-message.has-error {
+    width: calc(100% - 175px); // align with input-text
+    background-color: $forum-color-error;
+    color: $white;
+    padding: $baseline / 2;
+    box-sizing: border-box;
+  }
+
+  .field-label {
+    cursor: pointer;
+  }
+
+  .input-checkbox {
+    @include margin-right($baseline / 5);
+  }
+
+  #new-url-input {
+    direction: ltr; // http url is always English
+  }
 }
 
 .wmd-button-row {

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

@@ -35,6 +35,10 @@ $post-image-dimension: ($baseline*3) !default;  // image size  + margin
 $response-image-dimension: ($baseline*2.5) !default; // image size  + margin
 $comment-image-dimension: ($baseline*2) !default; // image size  + margin
 
+// action-dropdown
+$actions-dropdown-width: 145px; // best estimate in RU
+$actions-dropdown-offset: 100px; // actions dropdown expanded more menu
+
 // font sizes
 $forum-base-font-size: 14px;
 $forum-x-large-font-size: 21px;

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

@@ -35,6 +35,10 @@ $post-image-dimension: ($baseline*3) !default;  // image size  + margin
 $response-image-dimension: ($baseline*2.5) !default; // image size  + margin
 $comment-image-dimension: ($baseline*2) !default; // image size  + margin
 
+// action-dropdown
+$actions-dropdown-width: 145px; // best estimate in RU
+$actions-dropdown-offset: 100px; // actions dropdown expanded more menu
+
 // font sizes
 $forum-base-font-size: font-size(small);
 $forum-x-large-font-size: font-size(x-large);

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

@@ -12,15 +12,15 @@
         border-radius: $forum-border-radius;
 
         .forum-nav-bar {
+            padding: ($baseline / 2) ($baseline / 4);
             color: $forum-color-navigation-bar;
-            padding: ($baseline / 2) $baseline;
             position: relative;
 
             .all-posts-btn {
                 color: $forum-color-primary;
 
                 .icon {
-                    @include margin-left(-15px);
+                    @include margin-left($baseline / 2);
                 }
             }
         }

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

@@ -141,7 +141,7 @@
 }
 
 .discussion-response .response-body {
-    @include padding(($baseline/2), $baseline, 0, 0); //ensures content doesn't overlap on post or response actions.
+    @include padding(($baseline / 2), ($baseline * 1.5), 0, 0); //ensures content doesn't overlap on post or response actions.
     margin-bottom: 0.2em;
     font-size: $forum-base-font-size;
 }
@@ -151,7 +151,7 @@
     @include clearfix();
 
     .post-header-content {
-        max-width: calc(100% - 100px);
+        max-width: calc(100% - #{$actions-dropdown-offset});
 
         // post title
         .post-title {
@@ -164,6 +164,7 @@
     .post-body {
         @extend %t-copy-sub1;
         padding: ($baseline/2) 0;
+        max-width: calc(100% - #{$actions-dropdown-offset});
     }
 
     // post context