Various discussion hidden fixes on document page

Summary:
- Fix document outline behavior
  - Prevent error in affix code
  - Affixes in proper locations now
  - Doesn't pop out of the container
- Gray border under title now present when discussion hidden

Resolves T303
Resolves T293
Resolves T294

Test Plan:
- Check outline behavior, per notes above
- Check style between discussion hidden / open

Reviewers: doshitan

Reviewed By: doshitan

Maniphest Tasks: T303, T294, T293

Differential Revision: https://phabricator.opengovfoundation.org/D192

Author: sethetter

resources/assets/js/document.js

@@ -211,9 +211,9 @@ window.buildDocumentOutline = function (outlineContainer, documentContent) {
   // Set the outline to be affixed
   $(outlineContainer).children('ul').affix({
     offset: {
-      top: $(outlineContainer).position().top - 5,
+      top: $(outlineContainer).offset().top - 15,
       bottom: function () {
-        return $(document).height() - $('#comments').position().top + 50;
+        return $(document).height() - ($('#page_content').offset().top + $('#page_content').height());
       }
     }
   });

resources/assets/sass/document.scss

@@ -18,6 +18,7 @@
 }
 
 .support-btns {
+  min-height: 10px; // Needed when discussion is hidden
   padding-bottom: 0;
   margin: 30px 0;
   position: relative;

resources/views/documents/partials/support-btns.blade.php

@@ -1,7 +1,7 @@
-@if ($document->discussion_state !== \App\Models\Doc::DISCUSSION_STATE_HIDDEN)
-    <div class="row">
-        <div class="col-xs-12 text-center">
-            <div class="support-btns">
+<div class="row">
+    <div class="col-xs-12 text-center">
+        <div class="support-btns">
+            @if ($document->discussion_state !== \App\Models\Doc::DISCUSSION_STATE_HIDDEN)
                 <div class="support-btn" role="group">
                     {{ Form::open(['route' => ['documents.support', $document], 'method' => 'put']) }}
                         <input type="hidden" name="support" value="1">
@@ -27,7 +27,7 @@
                         </button>
                     {{ Form::close() }}
                 </div>
-            </div>
+            @endif
         </div>
     </div>
-@endif
+</div>

resources/views/documents/show.blade.php

@@ -113,7 +113,6 @@
         <script src="{{ elixir('js/document.js') }}"></script>
         <script>
             window.documentId = {{ $document->id }};
-            window.buildDocumentOutline('#document-outline', '#page_content');
 
             @if ($document->discussion_state !== \App\Models\Doc::DISCUSSION_STATE_HIDDEN)
                 loadAnnotations(
@@ -133,6 +132,9 @@
                 if (window.getQueryParam('comment_page')) {
                     showComments();
                 }
+
+                // Build this last to prevent misplacement on the page during `showComments()`
+                window.buildDocumentOutline('#document-outline', '#page_content');
             @endif
         </script>
     @endpush