PHUIDocument view for mobile devices.

Summary: Adds collapsing of the sidebar, also allows you to say where it goes on mobile (above or below content). ToC for example, above. General Navbar, below. Up to you.

Test Plan: Review UIExamples and Diviner.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -3682,7 +3682,7 @@ celerity_register_resource_map(array(
   ),
   'phui-document-view-css' =>
   array(
-    'uri' => '/res/994a3474/rsrc/css/phui/phui-document.css',
+    'uri' => '/res/fe374dee/rsrc/css/phui/phui-document.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3718,7 +3718,7 @@ celerity_register_resource_map(array(
   ),
   'phui-list-view-css' =>
   array(
-    'uri' => '/res/bdc66aff/rsrc/css/phui/phui-list.css',
+    'uri' => '/res/09f24365/rsrc/css/phui/phui-list.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/diviner/controller/DivinerAtomController.php

@@ -126,7 +126,7 @@ final class DivinerAtomController extends DivinerController {
             ->setHref('#'.$key));
       }
 
-      $document->setSideNav($side);
+      $document->setSideNav($side, PHUIDocumentView::NAV_TOP);
     }
 
     return $this->buildApplicationPage(

src/view/phui/PHUIDocumentView.php

@@ -2,6 +2,10 @@
 
 final class PHUIDocumentView extends AphrontTagView {
 
+  /* For mobile displays, where do you want the sidebar */
+  const NAV_BOTTOM = 'nav_bottom';
+  const NAV_TOP = 'nav_top';
+
   private $offset;
   private $header;
   private $sidenav;
@@ -9,6 +13,7 @@ final class PHUIDocumentView extends AphrontTagView {
   private $crumbs;
   private $bookname;
   private $bookdescription;
+  private $mobileview;
 
   public function setOffset($offset) {
     $this->offset = $offset;
@@ -20,9 +25,10 @@ final class PHUIDocumentView extends AphrontTagView {
     return $this;
   }
 
-  public function setSideNav(PHUIListView $list) {
+  public function setSideNav(PHUIListView $list, $display = self::NAV_BOTTOM) {
     $list->setType(PHUIListView::SIDENAV_LIST);
     $this->sidenav = $list;
+    $this->mobileview = $display;
     return $this;
   }
 
@@ -128,15 +134,18 @@ final class PHUIDocumentView extends AphrontTagView {
           $crumbs
         ));
 
+    if ($this->mobileview == self::NAV_BOTTOM) {
+      $order = array($content_inner, $sidenav);
+    } else {
+      $order = array($sidenav, $content_inner);
+    }
+
     $content = phutil_tag(
         'div',
         array(
           'class' => 'phui-document-content',
         ),
-        array(
-          $sidenav,
-          $content_inner
-        ));
+        $order);
 
     $view = phutil_tag(
       'div',

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

@@ -27,6 +27,17 @@
   right: 0;
 }
 
+.device-phone .phui-document-sidenav {
+  position: static;
+  width: auto;
+  border-top: 1px solid #d7d7d7;
+  border-bottom: 1px solid #d7d7d7;
+}
+
+.device-phone .phui-sidenav-view .phui-document-inner {
+ margin: 0;
+}
+
 .phui-sidenav-view .phui-document-inner {
   margin-right: 200px;
   border-right: 1px solid #e7e7e7;

webroot/rsrc/css/phui/phui-list.css

@@ -126,4 +126,5 @@
 
 .device-phone .phui-list-view.phui-list-navbar > li {
   float: none;
+  border: none;
 }