Made comments section more subtle

Also removed spacing from within details above active restrictions

resources/assets/sass/_components.scss

@@ -586,6 +586,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 
 .comment-box {
+  clear: left;
   border: 1px solid #DDD;
   margin-bottom: $-s;
   border-radius: 3px;

resources/assets/sass/_lists.scss

@@ -446,12 +446,3 @@ ul.pagination {
     margin: 0;
   }
 }
-
-.card.entity-details {
-  .active-restriction {
-    margin-top: $-xs;
-  }
-  .active-restriction + .active-restriction {
-    margin-top: 0;
-  }
-}

resources/assets/sass/_pages.scss

@@ -35,6 +35,7 @@
 }
 
 .page-content {
+  width: 100%;
   max-width: 840px;
   margin: 0 auto;
   margin-top: $-xxl;
@@ -315,6 +316,18 @@
   }
 }
 
+.comments-container {
+  width: 100%;
+  border-top: 1px solid #DDD;
+  margin-top: $-xl;
+  margin-bottom: $-m;
+  h5 {
+    color: #888;
+    font-weight: normal;
+    margin-top: 0.5em;
+  }
+}
+
 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
   min-height: 175px;
 }

resources/views/comments/comments.blade.php

@@ -1,5 +1,5 @@
 <div page-comments page-id="{{ $page->id }}" ng-non-bindable class="comments-list">
-  <h3 comments-title>{{ trans_choice('entities.comment_count', count($page->comments), ['count' => count($page->comments)]) }}</h3>
+  <h5 comments-title class="float left">{{ trans_choice('entities.comment_count', count($page->comments), ['count' => count($page->comments)]) }}</h5>
 
     <div class="comment-container" comment-container>
         @foreach($page->comments as $comment)
@@ -7,7 +7,6 @@
         @endforeach
     </div>
 
-
     @if(userCan('comment-create-all'))
 
         <div class="comment-box" comment-box style="display:none;">
@@ -33,7 +32,7 @@
         </div>
 
         <div class="form-group" comment-add-button>
-            <button type="button" action="addComment" class="button outline">{{ trans('entities.comment_add') }}</button>
+            <button type="button" action="addComment" class="button outline float right">{{ trans('entities.comment_add') }}</button>
         </div>
     @endif
 

resources/views/pages/show.blade.php

@@ -117,8 +117,11 @@
 
 @stop
 
+@section('body-wrap-classes', 'flex-fill columns')
+
 @section('body')
-    <div class="page-content" page-display="{{ $page->id }}">
+
+    <div class="page-content flex" page-display="{{ $page->id }}">
 
         <div class="pointer-container" id="pointer">
             <div class="pointer anim" >
@@ -129,10 +132,10 @@
         </div>
 
         @include('pages/page-display')
-
     </div>
+
     @if ($commentsEnabled)
-      <div class="container small nopad">
+      <div class="container small nopad comments-container">
           @include('comments/comments', ['page' => $page])
       </div>
     @endif

resources/views/sidebar-layout.blade.php

@@ -25,7 +25,7 @@
             </div>
         </div>
 
-        <div class="content flex">
+        <div class="content flex @yield('body-wrap-classes')">
             @yield('body')
         </div>
     </div>