Move ToC in Phriction to it's own column

Summary: Adds additional CSS to make the Table of Contents into it's own column (if one exists).

Test Plan:
Tested a page with and without a table of contents. Tested tablet, mobile, and desktop breakpoints. Tested Conpherence, scrolling seemed fine still on trackpad and mouse.

{F370973}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D12417

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'b13bb594',
+    'core.pkg.css' => '5efa6280',
     'core.pkg.js' => '6a4f677f',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '3500921f',
@@ -107,7 +107,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '76e8ee93',
-    'rsrc/css/core/remarkup.css' => 'bc65f3cc',
+    'rsrc/css/core/remarkup.css' => 'e10512ff',
     'rsrc/css/core/syntax.css' => '56c1ba38',
     'rsrc/css/core/z-index.css' => 'd1a30710',
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
@@ -128,7 +128,7 @@ return array(
     'rsrc/css/phui/phui-box.css' => '7b3a2eed',
     'rsrc/css/phui/phui-button.css' => 'f780e520',
     'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
-    'rsrc/css/phui/phui-document.css' => 'ffaf9eb9',
+    'rsrc/css/phui/phui-document.css' => '94d5dcd8',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
     'rsrc/css/phui/phui-fontkit.css' => '1fa79503',
     'rsrc/css/phui/phui-form-view.css' => 'b147d2ed',
@@ -741,7 +741,7 @@ return array(
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '72da38cc',
     'phabricator-profile-css' => '1a20dcbf',
-    'phabricator-remarkup-css' => 'bc65f3cc',
+    'phabricator-remarkup-css' => 'e10512ff',
     'phabricator-search-results-css' => '15c71110',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => '7e8c6341',
@@ -781,7 +781,7 @@ return array(
     'phui-calendar-list-css' => 'c1d0ca59',
     'phui-calendar-month-css' => 'a92e47d2',
     'phui-crumbs-view-css' => '594d719e',
-    'phui-document-view-css' => 'ffaf9eb9',
+    'phui-document-view-css' => '94d5dcd8',
     'phui-feed-story-css' => 'c9f3a0b5',
     'phui-font-icon-base-css' => '3dad2ae3',
     'phui-fontkit-css' => '1fa79503',

src/applications/phriction/storage/PhrictionContent.php

@@ -98,10 +98,13 @@ final class PhrictionContent extends PhrictionDAO
     $output,
     PhutilMarkupEngine $engine) {
 
+    $classes = array();
+    $classes[] = 'phabricator-remarkup';
     $toc = PhutilRemarkupHeaderBlockRule::renderTableOfContents(
       $engine);
 
     if ($toc) {
+      $classes[] = 'remarkup-has-toc';
       $toc = phutil_tag_div('phabricator-remarkup-toc', array(
         phutil_tag_div(
           'phabricator-remarkup-toc-header',
@@ -110,7 +113,12 @@ final class PhrictionContent extends PhrictionDAO
       ));
     }
 
-    return phutil_tag_div('phabricator-remarkup', array($toc, $output));
+    return phutil_tag(
+      'div',
+      array(
+        'class' => implode(' ', $classes),
+      ),
+      array($toc, $output));
   }
 
 

webroot/rsrc/css/core/remarkup.css

@@ -235,8 +235,8 @@
 }
 
 .phabricator-remarkup-toc-header {
-  font-size: 13px;
-  line-height: 12px;
+  font-size: 14px;
+  line-height: 13px;
   color: {$darkbluetext};
   font-weight: bold;
   margin-bottom: 4px;

webroot/rsrc/css/phui/phui-document.css

@@ -147,3 +147,26 @@
 .phui-document-view .phui-info-severity-nodata {
   background-color: {$lightgreybackground};
 }
+
+.phui-document-view .phabricator-remarkup.remarkup-has-toc {
+  position: relative;
+  margin-right: 192px;
+}
+
+.phui-document-view .remarkup-has-toc .phabricator-remarkup-toc {
+  position: absolute;
+  top: 0;
+  right: -186px;
+  bottom: 0;
+  border-left: 1px solid {$thinblueborder};
+  padding: 16px 12px;
+  margin: 0;
+}
+
+.device-phone .phui-document-view .phabricator-remarkup.remarkup-has-toc {
+  margin-right: 0;
+}
+
+.device-phone .phui-document-view .remarkup-has-toc .phabricator-remarkup-toc {
+  display: none;
+}