From 90b45b3a0a74b5c6f3bc4b2d7bc3a327d0a256a6 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Thu, 6 Jun 2013 12:47:40 -0700
Subject: [PATCH] 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             |  4 ++--
 .../controller/DivinerAtomController.php      |  2 +-
 src/view/phui/PHUIDocumentView.php            | 19 ++++++++++++++-----
 webroot/rsrc/css/phui/phui-document.css       | 11 +++++++++++
 webroot/rsrc/css/phui/phui-list.css           |  1 +
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
index 8705c75e0e..e8adb2f3dd 100644
--- a/src/__celerity_resource_map__.php
+++ b/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(
diff --git a/src/applications/diviner/controller/DivinerAtomController.php b/src/applications/diviner/controller/DivinerAtomController.php
index 02de0a92d0..f5cc12b6ac 100644
--- a/src/applications/diviner/controller/DivinerAtomController.php
+++ b/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(
diff --git a/src/view/phui/PHUIDocumentView.php b/src/view/phui/PHUIDocumentView.php
index cae4cf5b5a..6a70082c44 100644
--- a/src/view/phui/PHUIDocumentView.php
+++ b/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',
diff --git a/webroot/rsrc/css/phui/phui-document.css b/webroot/rsrc/css/phui/phui-document.css
index ca058abd46..038922bf60 100644
--- a/webroot/rsrc/css/phui/phui-document.css
+++ b/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;
diff --git a/webroot/rsrc/css/phui/phui-list.css b/webroot/rsrc/css/phui/phui-list.css
index 50dce689e7..d49c63e3fa 100644
--- a/webroot/rsrc/css/phui/phui-list.css
+++ b/webroot/rsrc/css/phui/phui-list.css
@@ -126,4 +126,5 @@
 
 .device-phone .phui-list-view.phui-list-navbar > li {
   float: none;
+  border: none;
 }