Merge pull request #2836 from nanaya/forum_fixes

Forum fixes
ppy · Mar 29, 2018 · a30844b · a30844b
2 parents 124e151 + ec342a7
commit a30844b
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 128 deletions.
diff --git a/resources/assets/coffee/_classes/forum-topic-reply.coffee b/resources/assets/coffee/_classes/forum-topic-reply.coffee
@@ -20,6 +20,7 @@ class @ForumTopicReply
   constructor: (@forum, @stickyFooter) ->
     @container = document.getElementsByClassName('js-forum-topic-reply--container')
     @box = document.getElementsByClassName('js-forum-topic-reply')
+    @block = document.getElementsByClassName('js-forum-topic-reply--block')
     @input = document.getElementsByClassName('js-forum-topic-reply--input')
     @stickButtons = document.getElementsByClassName('js-forum-topic-reply--stick')
     @fixedBar = document.getElementsByClassName('js-sticky-footer--fixed-bar')
@@ -49,7 +50,7 @@ class @ForumTopicReply
     @activate() if @getState('active') == '1'
 
 
-  available: => @box.length
+  available: => @block.length
 
 
   deleteState: (key) =>

diff --git a/resources/assets/less/bem/forum-category-header.less b/resources/assets/less/bem/forum-category-header.less
@@ -221,15 +221,16 @@
   // also used by input form
   &__title {
     .reset-input();
+    .default-text-shadow();
     margin: 0;
     padding: 10px 0 10px 20px;
     width: 100%;
     font-weight: 500;
     font-size: 36px;
     font-style: italic;
-    .default-text-shadow;
     color: #fff;
     display: block;
+    min-width: 0;
 
     &--forum {
       font-size: 45px;

diff --git a/resources/assets/less/bem/forum-post.less b/resources/assets/less/bem/forum-post.less
@@ -17,7 +17,7 @@
  */
 
 .forum-post {
-  @_reply-xs-top-margin: 4px;
+  @_top: forum-post;
 
   .default-box-shadow();
   background-color: #fff;
@@ -33,11 +33,9 @@
   }
 
   &--reply {
-    backface-visibility: hidden;
-    transition: opacity 120ms;
+    height: 100%;
+    background-color: transparent;
     box-shadow: none;
-    width: 100%;
-    margin-bottom: 0;
   }
 
   .js-forum-post--hidden & {
@@ -71,18 +69,12 @@
     right: 30px;
     bottom: 20px;
     .desktop-position();
-
-    &--reply {
-      top: (-@_reply-xs-top-margin);
-      height: 0;
-      .desktop-position();
-    }
   }
 
   &__body {
     flex: none;
     @media @desktop {
-      flex: 1 1 auto;
+      flex: 1;
     }
 
     display: flex;
@@ -92,8 +84,10 @@
     // reference: https://bugzilla.mozilla.org/show_bug.cgi?id=1108514#c2
     min-width: 0;
 
-    &--reply-form {
-      flex: 1 1 auto;
+    .@{_top}--reply & {
+      @media @desktop {
+        flex: none;
+      }
     }
   }
 
@@ -106,7 +100,7 @@
     &--edit-bar {
       background-color: @gray-lighter;
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-end;
       padding-top: 10px;
       padding-bottom: 10px;
     }
@@ -263,29 +257,16 @@
   &__reply-body {
     .default-box-shadow();
     background-color: #fff;
-    flex: 1;
+    flex: none;
     display: flex;
     flex-direction: column;
     min-width: 0;
-  }
-
-  &__reply-container {
-    background-color: fade(#333, 90%);
-    width: 100%;
-    height: 100%;
-    padding-bottom: 20px;
-    padding-top: @_reply-xs-top-margin;
 
     @media @desktop {
-      padding-top: 10px;
+      flex: 1;
     }
   }
 
-  &__reply-content {
-    display: flex;
-    height: 100%;
-  }
-
   &__reply-stick {
     flex: 1 0 auto;
     display: flex;

diff --git a/resources/assets/less/bem/forum-topic-headernav.less b/resources/assets/less/bem/forum-topic-headernav.less
@@ -34,9 +34,11 @@
     color: #fff;
     flex: none;
     margin: 3px 0;
+    line-height: 1.2; // prevent cut off from u-ellipsis-overflow
   }
 
   &__content {
+    flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;

diff --git a/resources/assets/less/bem/forum-topic-reply.less b/resources/assets/less/bem/forum-topic-reply.less
@@ -20,4 +20,14 @@
   display: flex;
   align-items: flex-end;
   flex: 1 0 auto;
+
+  &__form {
+    .own-layer();
+    transition: opacity 120ms;
+
+    background-color: fade(#333, 90%);
+    width: 100%;
+    padding-bottom: 20px;
+    padding-top: 10px;
+  }
 }
diff --git a/resources/assets/less/bem/forum-topic-title.less b/resources/assets/less/bem/forum-topic-title.less
@@ -17,22 +17,30 @@
  */
 
 .forum-topic-title {
+  @_line-height: 1.4;
+  @_buttons-margin-left: 20px;
+  @_button-edit-width: 35px;
   // actual font takes more than the 1.1 default line height.
-  line-height: 1.4;
+  line-height: @_line-height;
 
   /* force line-breaking and hide overflow */
-  word-break: break-all;
-  max-height: 4.2em;
+  word-wrap: break-word;
+  max-height: unit(@_line-height * 3, em);
   overflow: hidden;
 
   &__button {
-    margin-left: 5px;
+    flex: none;
     display: flex;
+    padding-left: 5px;
     pointer-events: auto;
+
+    &--edit {
+      width: @_button-edit-width;
+    }
   }
 
   &__buttons {
-    padding-left: 20px;
+    flex: none;
     display: flex;
   }
 
@@ -47,6 +55,8 @@
     pointer-events: none;
     opacity: 0;
     overflow: hidden;
+    white-space: pre;
+    margin-right: @_buttons-margin-left;
   }
 
   &__group {
@@ -59,12 +69,17 @@
     flex: 1;
     // Overrides browser default. Actual width handled by flex.
     width: 0;
+    // ensure correct height in ie
+    height: unit(@_line-height, em);
   }
 
   &__title {
     .link-white();
     .link-plain();
-    margin-right: 10px;
+    flex: none;
+    padding-right: @_buttons-margin-left;
+    min-width: 0;
+    max-width: calc(100% ~'-' @_button-edit-width);
 
     /* magic line-clamping on webkit browsers (safari, chrome, etc) */
     /* (other browsers won't show ellipses) */

diff --git a/resources/assets/less/bem/post-editor.less b/resources/assets/less/bem/post-editor.less
@@ -30,20 +30,21 @@
 
   &__actions {
     display: flex;
-    justify-content: flex-end;
-    flex: 1 0 auto;
+    flex: none;
+    justify-content: center;
+    width: 100%; // force container to wrap.
 
-    @media @mobile {
-      justify-content: center;
-      width: 100%; // force container to wrap.
+    @media @desktop {
+      margin-left: 5px;
+      width: auto;
     }
   }
 
   &__footer {
     display: flex;
     flex: 1 0 auto;
     flex-wrap: wrap;
-    justify-content: space-between;
+    justify-content: flex-end;
 
     padding: @padding--small;
 
@@ -83,7 +84,7 @@
 
   &__toolbar {
     display: flex;
-    flex: 1 0 auto;
+    flex: 1;
     justify-content: flex-start;
     margin-bottom: @padding--small;
 

diff --git a/resources/views/forum/topics/_header_title.blade.php b/resources/views/forum/topics/_header_title.blade.php
@@ -22,7 +22,7 @@
         </a>
 
         @if (priv_check('ForumTopicEdit', $topic)->can())
-            <div class="forum-topic-title__button">
+            <div class="forum-topic-title__button forum-topic-title__button--edit">
                 <button
                     type="button"
                     class="js-forum-topic-title--edit-start btn-circle"

diff --git a/resources/views/forum/topics/_post_box_footer.blade.php b/resources/views/forum/topics/_post_box_footer.blade.php
@@ -18,7 +18,7 @@
 <?php
     if (!isset($editing)) { $editing = false; }
 ?>
-<div class="post-box__toolbar hidden-xs">
+<div class="post-editor__toolbar hidden-xs">
     @include("forum._post_toolbar")
 </div>