Phriction Redesign

Summary: This is mostly minor, but visually it makes the wiki feel more 'page like' and better separates the actual content from other data displayed.

Test Plan: Tested Chrome, iPhone, and iPad.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Maniphest Tasks: T2686

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

src/__celerity_resource_map__.php

@@ -870,7 +870,7 @@ celerity_register_resource_map(array(
   ),
   'aphront-two-column-view-css' =>
   array(
-    'uri' => '/res/7afa129f/rsrc/css/aphront/two-column.css',
+    'uri' => '/res/4263aa98/rsrc/css/aphront/two-column.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3248,7 +3248,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-remarkup-css' =>
   array(
-    'uri' => '/res/a53fa430/rsrc/css/core/remarkup.css',
+    'uri' => '/res/fb60dc21/rsrc/css/core/remarkup.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3587,7 +3587,7 @@ celerity_register_resource_map(array(
   ),
   'phriction-document-css' =>
   array(
-    'uri' => '/res/e71e4a67/rsrc/css/application/phriction/phriction-document-css.css',
+    'uri' => '/res/521172c8/rsrc/css/application/phriction/phriction-document-css.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3903,7 +3903,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'b3deb720' =>
+    '9cece986' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3945,7 +3945,7 @@ celerity_register_resource_map(array(
         34 => 'phabricator-object-item-list-view-css',
         35 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/b3deb720/core.pkg.css',
+      'uri' => '/res/pkg/9cece986/core.pkg.css',
       'type' => 'css',
     ),
     'bf16b308' =>
@@ -4135,16 +4135,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => 'b3deb720',
+    'aphront-dialog-view-css' => '9cece986',
-    'aphront-error-view-css' => 'b3deb720',
+    'aphront-error-view-css' => '9cece986',
-    'aphront-form-view-css' => 'b3deb720',
+    'aphront-form-view-css' => '9cece986',
-    'aphront-list-filter-view-css' => 'b3deb720',
+    'aphront-list-filter-view-css' => '9cece986',
-    'aphront-pager-view-css' => 'b3deb720',
+    'aphront-pager-view-css' => '9cece986',
-    'aphront-panel-view-css' => 'b3deb720',
+    'aphront-panel-view-css' => '9cece986',
-    'aphront-table-view-css' => 'b3deb720',
+    'aphront-table-view-css' => '9cece986',
-    'aphront-tokenizer-control-css' => 'b3deb720',
+    'aphront-tokenizer-control-css' => '9cece986',
-    'aphront-tooltip-css' => 'b3deb720',
+    'aphront-tooltip-css' => '9cece986',
-    'aphront-typeahead-control-css' => 'b3deb720',
+    'aphront-typeahead-control-css' => '9cece986',
     'differential-changeset-view-css' => '8aaacd1b',
     'differential-core-view-css' => '8aaacd1b',
     'differential-inline-comment-editor' => 'e96b08f8',
@@ -4158,7 +4158,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '8aaacd1b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'b3deb720',
+    'global-drag-and-drop-css' => '9cece986',
     'inline-comment-summary-css' => '8aaacd1b',
     'javelin-aphlict' => 'bf16b308',
     'javelin-behavior' => 'bea3de16',
@@ -4230,47 +4230,47 @@ celerity_register_resource_map(array(
     'javelin-util' => 'bea3de16',
     'javelin-vector' => 'bea3de16',
     'javelin-workflow' => 'bea3de16',
-    'lightbox-attachment-css' => 'b3deb720',
+    'lightbox-attachment-css' => '9cece986',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
     'phabricator-busy' => 'bf16b308',
     'phabricator-content-source-view-css' => '8aaacd1b',
-    'phabricator-core-buttons-css' => 'b3deb720',
+    'phabricator-core-buttons-css' => '9cece986',
-    'phabricator-core-css' => 'b3deb720',
+    'phabricator-core-css' => '9cece986',
-    'phabricator-crumbs-view-css' => 'b3deb720',
+    'phabricator-crumbs-view-css' => '9cece986',
-    'phabricator-directory-css' => 'b3deb720',
+    'phabricator-directory-css' => '9cece986',
     'phabricator-drag-and-drop-file-upload' => 'e96b08f8',
     'phabricator-dropdown-menu' => 'bf16b308',
     'phabricator-file-upload' => 'bf16b308',
-    'phabricator-filetree-view-css' => 'b3deb720',
+    'phabricator-filetree-view-css' => '9cece986',
-    'phabricator-flag-css' => 'b3deb720',
+    'phabricator-flag-css' => '9cece986',
-    'phabricator-form-view-css' => 'b3deb720',
+    'phabricator-form-view-css' => '9cece986',
-    'phabricator-header-view-css' => 'b3deb720',
+    'phabricator-header-view-css' => '9cece986',
-    'phabricator-jump-nav' => 'b3deb720',
+    'phabricator-jump-nav' => '9cece986',
     'phabricator-keyboard-shortcut' => 'bf16b308',
     'phabricator-keyboard-shortcut-manager' => 'bf16b308',
-    'phabricator-main-menu-view' => 'b3deb720',
+    'phabricator-main-menu-view' => '9cece986',
     'phabricator-menu-item' => 'bf16b308',
-    'phabricator-nav-view-css' => 'b3deb720',
+    'phabricator-nav-view-css' => '9cece986',
     'phabricator-notification' => 'bf16b308',
-    'phabricator-notification-css' => 'b3deb720',
+    'phabricator-notification-css' => '9cece986',
-    'phabricator-notification-menu-css' => 'b3deb720',
+    'phabricator-notification-menu-css' => '9cece986',
-    'phabricator-object-item-list-view-css' => 'b3deb720',
+    'phabricator-object-item-list-view-css' => '9cece986',
     'phabricator-object-selector-css' => '8aaacd1b',
     'phabricator-prefab' => 'bf16b308',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-remarkup-css' => 'b3deb720',
+    'phabricator-remarkup-css' => '9cece986',
     'phabricator-shaped-request' => 'e96b08f8',
-    'phabricator-side-menu-view-css' => 'b3deb720',
+    'phabricator-side-menu-view-css' => '9cece986',
-    'phabricator-standard-page-view' => 'b3deb720',
+    'phabricator-standard-page-view' => '9cece986',
     'phabricator-textareautils' => 'bf16b308',
     'phabricator-tooltip' => 'bf16b308',
-    'phabricator-transaction-view-css' => 'b3deb720',
+    'phabricator-transaction-view-css' => '9cece986',
-    'phabricator-zindex-css' => 'b3deb720',
+    'phabricator-zindex-css' => '9cece986',
-    'sprite-apps-large-css' => 'b3deb720',
+    'sprite-apps-large-css' => '9cece986',
-    'sprite-gradient-css' => 'b3deb720',
+    'sprite-gradient-css' => '9cece986',
-    'sprite-icon-css' => 'b3deb720',
+    'sprite-icon-css' => '9cece986',
-    'sprite-menu-css' => 'b3deb720',
+    'sprite-menu-css' => '9cece986',
-    'syntax-highlighting-css' => 'b3deb720',
+    'syntax-highlighting-css' => '9cece986',
   ),
 ));

src/applications/phriction/controller/PhrictionController.php

@@ -29,7 +29,7 @@ abstract class PhrictionController extends PhabricatorController {
 
     if ($for_app) {
       $nav->addFilter('', pht('Root Document'), '/w/');
-      $nav->addFilter('', pht('Create Document'), '/phriction/new');
+      $nav->addFilter('', pht('New Document'), '/phriction/new');
     }
 
     $nav->addLabel(pht('Filters'));
@@ -52,14 +52,14 @@ abstract class PhrictionController extends PhabricatorController {
     if (get_class($this) != 'PhrictionListController') {
       $crumbs->addAction(
         id(new PhabricatorMenuItemView())
-          ->setName(pht('Document Index'))
+          ->setName(pht('Index'))
           ->setHref('/phriction/')
           ->setIcon('transcript'));
     }
 
     $crumbs->addAction(
       id(new PhabricatorMenuItemView())
-        ->setName(pht('Create Document'))
+        ->setName(pht('New Document'))
         ->setHref('/phriction/new/?slug='.$this->getDocumentSlug())
         ->setWorkflow(true)
         ->setIcon('create'));

src/applications/phriction/controller/PhrictionDocumentController.php

@@ -30,6 +30,9 @@ final class PhrictionDocumentController
       $slug);
 
     $version_note = null;
+    $core_content = '';
+    $byline = '';
+    $move_notice = '';
 
     if (!$document) {
 
@@ -211,11 +214,6 @@ final class PhrictionDocumentController
           ->render();
       }
 
-      $page_content = hsprintf(
-        '<div class="phriction-content">%s%s%s</div>',
-        $byline,
-        $move_notice,
-        $core_content);
     }
 
     if ($version_note) {
@@ -236,18 +234,38 @@ final class PhrictionDocumentController
     $header = id(new PhabricatorHeaderView())
       ->setHeader($page_title);
 
+      $page_content = hsprintf(
+        '<div class="phriction-wrap">
+          <div class="phriction-content">
+            %s%s%s%s%s
+          </div>
+          <div class="phriction-fake-space"></div>
+        </div>',
+        $header,
+        $actions,
+        $byline,
+        $move_notice,
+        $core_content);
+
+    $core_page = phutil_tag(
+      'div',
+        array(
+          'class' => 'phriction-offset'
+        ),
+        array(
+          $page_content,
+          $children,
+        ));
+
     return $this->buildApplicationPage(
       array(
         $crumbs->render(),
-        $header->render(),
+        $core_page,
-        $actions->render(),
-        $version_note,
-        $page_content,
-        $children,
       ),
       array(
         'title'   => $page_title,
         'device'  => true,
+        'dust'    => true,
       ));
 
   }
@@ -411,10 +429,12 @@ final class PhrictionDocumentController
     }
 
     return hsprintf(
-      '<div class="phriction-children">'.
+      '<div class="phriction-wrap">
-        '<div class="phriction-children-header">%s</div>'.
+        <div class="phriction-children">
-        '%s'.
+        <div class="phriction-children-header">%s</div>
-      '</div>',
+        %s
+        </div>
+      </div>',
       pht('Document Hierarchy'),
       phutil_tag('ul', array(), $list));
   }

src/applications/phriction/controller/PhrictionEditController.php

@@ -232,11 +232,13 @@ final class PhrictionEditController
       ->appendChild($form);
 
     $preview_panel = hsprintf(
-      '<div class="aphront-panel-preview aphront-panel-preview-wide">
+      '<div class="phriction-wrap">
-        <div class="phriction-document-preview-header">%s</div>
+        <div class="phriction-content">
+        <div class="phriction-document-preview-header plt pll">%s</div>
         <div id="document-preview">
           <div class="aphront-panel-preview-loading-text">%s</div>
         </div>
+        </div>
       </div>',
       pht('Document Preview'),
       pht('Loading preview...'));
@@ -257,8 +259,9 @@ final class PhrictionEditController
         $preview_panel,
       ),
       array(
-        'title' => pht('Edit Document'),
+        'title'   => pht('Edit Document'),
-        'device' => true,
+        'device'  => true,
+        'dust'    => true,
       ));
   }
 

src/applications/phriction/controller/PhrictionListController.php

@@ -32,9 +32,6 @@ final class PhrictionListController
 
     $nav = $this->buildSideNavView($this->view);
 
-    $header = id(new PhabricatorHeaderView())
-      ->setHeader($views[$this->view]);
-
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addCrumb(id(new PhabricatorCrumbView())
       ->setName($views[$this->view])
@@ -43,7 +40,6 @@ final class PhrictionListController
     $nav->appendChild(
       array(
         $crumbs,
-        $header,
       ));
 
     $pager = id(new AphrontCursorPagerView())

src/view/layout/AphrontTwoColumnView.php

@@ -4,6 +4,7 @@ final class AphrontTwoColumnView extends AphrontView {
 
   private $mainColumn;
   private $sideColumn;
+  private $centered = false;
   private $padding = true;
 
   public function setMainColumn($main) {
@@ -16,6 +17,11 @@ final class AphrontTwoColumnView extends AphrontView {
     return $this;
   }
 
+  public function setCentered($centered) {
+    $this->centered = $centered;
+    return $this;
+  }
+
   public function setNoPadding($padding) {
     $this->padding = $padding;
     return $this;
@@ -39,6 +45,10 @@ final class AphrontTwoColumnView extends AphrontView {
       $this->sideColumn);
 
     $classes = array('aphront-two-column');
+    if ($this->centered) {
+      $classes = array('aphront-two-column-centered');
+    }
+
     if ($this->padding) {
       $classes[] = 'aphront-two-column-padded';
     }

webroot/rsrc/css/aphront/two-column.css

@@ -10,17 +10,32 @@
   margin: 20px;
 }
 
-.device-desktop .aphront-main-column {
+.device-desktop .aphront-two-column .aphront-main-column {
   margin-right: 300px;
 }
 
-.device-desktop .aphront-side-column {
+.device-desktop .aphront-two-column .aphront-side-column {
   width: 300px;
   position: absolute;
   top: 0;
   right: 0;
 }
 
+.device-desktop .aphront-two-column-centered {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.device-desktop .aphront-two-column-centered .aphront-main-column {
+  float: left;
+  width: 820px;
+}
+
+.device-desktop .aphront-two-column-centered .aphront-side-column {
+  width: 160px;
+  float: right;
+}
+
 .device-phone .aphront-two-column.aphront-two-column-padded {
   margin: 10px;
 }

webroot/rsrc/css/application/phriction/phriction-document-css.css

@@ -17,14 +17,64 @@
   margin: .25em 0;
 }
 
+.device-desktop .phriction-offset {
+  padding-right: 160px;
+}
+
+.phriction-wrap {
+  margin-bottom: 20px;
+}
+
+.device-desktop .phriction-wrap {
+  position: relative;
+  border-left: 1px solid #e7e7e7;
+  border-right: 1px solid #e7e7e7;
+  border-bottom: 1px solid #c0c5d1;
+  max-width: 800px;
+  margin: 20px auto;
+}
+
 .phriction-content {
-  max-width: 960px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  margin: 1em;
+  min-height: 240px;
+  background: #fff;
+}
+
+.device-desktop .phriction-wrap {
+}
+
+.device-desktop .phriction-content .phabricator-action-list-view {
+  margin: 10px 10px 0 0;
+  background: #f7f7f7;
+}
+
+.device-phone .phriction-content .phabricator-action-list-view {
+  margin: 0;
+  border-bottom: 1px solid #c0c5d1;
+  background: #f7f7f7;
+}
+
+.phriction-content .phabricator-header-shell {
+  border-top: none;
+}
+
+.phriction-content .phabricator-remarkup {
+  padding: 20px;
 }
 
 .phriction-byline {
-  padding: .25em 0 1em;
+  padding: 10px 20px;
-  color: #444444;
+  color: #777;
+  font-size: 11px;
+  background: #f7f7f7;
+}
+
+.device-phone .phriction-byline {
+  padding: 10px;
+}
+
+.device-phone .phriction-content .phabricator-remarkup {
+  padding: 10px;
 }
 
 .phriction-content .phriction-link {
@@ -41,21 +91,38 @@
 }
 
 .phriction-children {
-  padding: 1em 2em;
+  max-width: 800px;
-  background: #eeeeee;
+  background: #fff;
-  border-top: 1px solid #dddddd;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
 }
 
 .phriction-children ul {
-  margin-left: 2.5em;
+  margin-left: 30px;
+  padding-bottom: 10px;
   list-style: circle;
   color: #999999;
 }
 
 .phriction-children-header {
-  padding: 0 0 .5em 0;
+  background: #f7f7f7;
-  margin: 0;
+  padding: 10px 0 10px 20px;
   font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.device-desktop .phriction-content .phabricator-action-list-view {
+  position: absolute;
+  top: 50px;
+  right: -172px;
+  float: none;
+  background: #fff;
+  border-radius: 0;
+  box-shadow: none;
+  border: none;
+  border-top: 1px solid #e7e7e7;
+  border-bottom: 1px solid #e7e7e7;
+  border-right: 1px solid #e7e7e7;
+  width: 160px;
 }
 
 .phriction-document-preview-header {
@@ -90,3 +157,7 @@
 .phriction-history-nav-table td.nav-next {
   text-align: right;
 }
+
+.device-phone .phriction-content .phabricator-remarkup-toc {
+  width: 120px;
+}

webroot/rsrc/css/core/remarkup.css

@@ -168,16 +168,17 @@
 
 .phabricator-remarkup-toc {
   float: right;
-  border: 1px solid #999999;
+  border: 1px solid #d7d7d7;
-  background: #f9f9f9;
+  background: #f7f7f7;
   padding: 4px 12px;
-  width: 220px;
+  width: 180px;
+  margin: 0 0 5px 10px;
 }
 
 .phabricator-remarkup-toc-header {
   font-size: 11px;
-  color: #444444;
+  color: #777;
-  border-bottom: 1px solid #bbbbbb;
+  border-bottom: 1px solid #d7d7d7;
   margin-bottom: 4px;
 }
 
@@ -186,16 +187,16 @@
   margin: 0;
   list-style: none;
   overflow: hidden;
-  padding-left: 0.25em;
 }
 
 .phabricator-remarkup-toc ul ul {
-  margin-left: 1.25em;
+  margin-left: 0;
 }
 
 .phabricator-remarkup-toc ul li {
   padding: 0;
   margin: 0;
+  font-size: 11px;
 }
 
 .phabricator-remarkup-embed-layout-right {