Mobile layouts for Diffusion

Summary: Implements a new mobile view thats more fullscreen, not boxed, so more space. Fixes issues with mobile tables when scrolling overflowed content.

Test Plan: Test home, branch, tags, code, file browse, graph, compare, history, readme, open revisions, owners.

Reviewers: epriestley

Reviewed By: epriestley

Spies: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '0437a674',
+    'core.pkg.css' => '4ac857bf',
     'core.pkg.js' => '6c085267',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '45951e9e',
@@ -32,7 +32,7 @@ return array(
     'rsrc/css/aphront/notification.css' => '457861ec',
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => 'faf6a6fc',
-    'rsrc/css/aphront/table-view.css' => 'a3aa6910',
+    'rsrc/css/aphront/table-view.css' => '8c9bbafe',
     'rsrc/css/aphront/tokenizer.css' => '15d5ff71',
     'rsrc/css/aphront/tooltip.css' => '173b9431',
     'rsrc/css/aphront/typeahead-browse.css' => 'f2818435',
@@ -74,8 +74,8 @@ return array(
     'rsrc/css/application/diffusion/diffusion-icons.css' => '0c15255e',
     'rsrc/css/application/diffusion/diffusion-readme.css' => '419dd5b6',
     'rsrc/css/application/diffusion/diffusion-repository.css' => 'ee6f20ec',
-    'rsrc/css/application/diffusion/diffusion-source.css' => '47db8a7c',
+    'rsrc/css/application/diffusion/diffusion-source.css' => '69ac9399',
-    'rsrc/css/application/diffusion/diffusion.css' => 'ceacf994',
+    'rsrc/css/application/diffusion/diffusion.css' => '9d5bb76d',
     'rsrc/css/application/feed/feed.css' => 'ecd4ec57',
     'rsrc/css/application/files/global-drag-and-drop.css' => 'b556a948',
     'rsrc/css/application/flag/flag.css' => 'bba8f811',
@@ -110,7 +110,7 @@ return array(
     'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
     'rsrc/css/application/releeph/releeph-request-differential-create-dialog.css' => '8d8b92cd',
     'rsrc/css/application/releeph/releeph-request-typeahead.css' => '667a48ae',
-    'rsrc/css/application/search/application-search-view.css' => '66ee5d46',
+    'rsrc/css/application/search/application-search-view.css' => '787f5b76',
     'rsrc/css/application/search/search-results.css' => '505dd8cf',
     'rsrc/css/application/slowvote/slowvote.css' => 'a94b7230',
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
@@ -543,11 +543,11 @@ return array(
     'aphront-list-filter-view-css' => '5d6f0526',
     'aphront-multi-column-view-css' => '84cc6640',
     'aphront-panel-view-css' => '8427b78d',
-    'aphront-table-view-css' => 'a3aa6910',
+    'aphront-table-view-css' => '8c9bbafe',
     'aphront-tokenizer-control-css' => '15d5ff71',
     'aphront-tooltip-css' => '173b9431',
     'aphront-typeahead-control-css' => 'a4a21016',
-    'application-search-view-css' => '66ee5d46',
+    'application-search-view-css' => '787f5b76',
     'auth-css' => '0877ed6e',
     'bulk-job-css' => 'df9c1d4a',
     'conduit-api-css' => '7bc725c4',
@@ -570,11 +570,11 @@ return array(
     'differential-revision-history-css' => '0e8eb855',
     'differential-revision-list-css' => 'f3c47d33',
     'differential-table-of-contents-css' => 'ae4b7a55',
-    'diffusion-css' => 'ceacf994',
+    'diffusion-css' => '9d5bb76d',
     'diffusion-icons-css' => '0c15255e',
     'diffusion-readme-css' => '419dd5b6',
     'diffusion-repository-css' => 'ee6f20ec',
-    'diffusion-source-css' => '47db8a7c',
+    'diffusion-source-css' => '69ac9399',
     'diviner-shared-css' => '896f1d43',
     'font-fontawesome' => 'e838e088',
     'font-lato' => 'c7ccd872',

src/applications/diffusion/controller/DiffusionBranchTableController.php

@@ -57,6 +57,7 @@ final class DiffusionBranchTableController extends DiffusionController {
       $content = id(new PHUIObjectBoxView())
         ->setHeaderText($repository->getName())
         ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+        ->addClass('diffusion-mobile-view')
         ->setTable($list)
         ->setPager($pager);
     }

src/applications/diffusion/controller/DiffusionBrowseController.php

@@ -371,6 +371,7 @@ final class DiffusionBrowseController extends DiffusionController {
         ->setHeader($browse_header)
         ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
         ->setTable($browse_table)
+        ->addClass('diffusion-mobile-view')
         ->setPager($pager);
 
       $path = $drequest->getPath();
@@ -595,6 +596,8 @@ final class DiffusionBrowseController extends DiffusionController {
       ),
       $rows);
 
+    $corpus_table = phutil_tag_div('diffusion-source-wrap', $corpus_table);
+
     if ($this->getRequest()->isAjax()) {
       return $corpus_table;
     }
@@ -654,6 +657,7 @@ final class DiffusionBrowseController extends DiffusionController {
       ->setHeader($header)
       ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->appendChild($corpus)
+      ->addClass('diffusion-mobile-view')
       ->setCollapsed(true);
 
     $messages = array();
@@ -860,6 +864,7 @@ final class DiffusionBrowseController extends DiffusionController {
       $view = id(new PHUIObjectBoxView())
         ->setHeaderText(pht('Owner Packages'))
         ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+        ->addClass('diffusion-mobile-view')
         ->setObjectList($ownership);
     }
 
@@ -1341,6 +1346,7 @@ final class DiffusionBrowseController extends DiffusionController {
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
       ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view')
       ->addPropertyList($properties);
   }
 
@@ -1361,6 +1367,7 @@ final class DiffusionBrowseController extends DiffusionController {
     $box = id(new PHUIObjectBoxView())
       ->setHeader($header)
       ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view')
       ->appendChild($text);
 
     return $box;
@@ -1693,15 +1700,20 @@ final class DiffusionBrowseController extends DiffusionController {
     $header = id(new PHUIHeaderView())
       ->setHeader(pht('Recently Open Revisions'));
 
-    $view = id(new DifferentialRevisionListView())
+    $list = id(new DifferentialRevisionListView())
+      ->setRevisions($revisions)
+      ->setUser($viewer)
+      ->setNoBox(true);
+
+    $phids = $list->getRequiredHandlePHIDs();
+    $handles = $this->loadViewerHandles($phids);
+    $list->setHandles($handles);
+
+    $view = id(new PHUIObjectBoxView())
       ->setHeader($header)
       ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
-      ->setRevisions($revisions)
+      ->addClass('diffusion-mobile-view')
-      ->setUser($viewer);
+      ->appendChild($list);
-
-    $phids = $view->getRequiredHandlePHIDs();
-    $handles = $this->loadViewerHandles($phids);
-    $view->setHandles($handles);
 
     return $view;
   }
@@ -1838,6 +1850,7 @@ final class DiffusionBrowseController extends DiffusionController {
     $corpus = id(new PHUIObjectBoxView())
       ->setHeader($header)
       ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view')
       ->setCollapsed(true);
 
     if ($messages) {
@@ -1922,6 +1935,7 @@ final class DiffusionBrowseController extends DiffusionController {
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
       ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view')
       ->setTable($history_table);
   }
 

src/applications/diffusion/controller/DiffusionCompareController.php

@@ -15,6 +15,7 @@ final class DiffusionCompareController extends DiffusionController {
     $viewer = $this->getViewer();
     $drequest = $this->getDiffusionRequest();
     $repository = $drequest->getRepository();
+    require_celerity_resource('diffusion-css');
 
     if (!$repository->supportsBranchComparison()) {
       return $this->newDialog()
@@ -315,6 +316,7 @@ final class DiffusionCompareController extends DiffusionController {
       ->setHeader($header)
       ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($history_table)
+      ->addClass('diffusion-mobile-view')
       ->setPager($pager);
 
   }

src/applications/diffusion/controller/DiffusionGraphController.php

@@ -67,6 +67,7 @@ final class DiffusionGraphController extends DiffusionController {
       ->setHeaderText(pht('History Graph'))
       ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($graph)
+      ->addClass('diffusion-mobile-view')
       ->setPager($pager);
 
     $tabs = $this->buildTabsView('graph');

src/applications/diffusion/controller/DiffusionRepositoryController.php

@@ -420,7 +420,8 @@ final class DiffusionRepositoryController extends DiffusionController {
     $history_table->setIsHead(true);
 
     $panel = id(new PHUIObjectBoxView())
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY);
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view');
     $header = id(new PHUIHeaderView())
       ->setHeader(pht('Recent Commits'));
     $panel->setHeader($header);
@@ -583,6 +584,7 @@ final class DiffusionRepositoryController extends DiffusionController {
       ->setHeaderText($header)
       ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($browse_table)
+      ->addClass('diffusion-mobile-view')
       ->setPager($pager);
   }
 

src/applications/diffusion/view/DiffusionBrowseTableView.php

@@ -134,7 +134,7 @@ final class DiffusionBrowseTableView extends DiffusionView {
       array(
         true,
         false,
-        true,
+        false,
         false,
         false,
       ));

src/applications/diffusion/view/DiffusionHistoryListView.php

@@ -40,6 +40,7 @@ final class DiffusionHistoryListView extends DiffusionHistoryView {
         $view[] = id(new PHUIObjectBoxView())
           ->setHeader($header)
           ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+          ->addClass('diffusion-mobile-view')
           ->setObjectList($list);
       }
 

src/applications/diffusion/view/DiffusionReadmeView.php

@@ -105,6 +105,7 @@ final class DiffusionReadmeView extends DiffusionView {
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
       ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view')
       ->appendChild($document)
       ->addClass('diffusion-readme-view');
   }

webroot/rsrc/css/aphront/table-view.css

@@ -4,6 +4,7 @@
 
 .aphront-table-wrap {
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .aphront-table-view {
@@ -128,14 +129,8 @@ th.aphront-table-view-sortable-selected {
   padding: 8px 10px;
 }
 
-.device-tablet .aphront-table-view td,
-.device-phone .aphront-table-view td {
-  padding: 6px;
-}
-
 .device-tablet .aphront-table-view th,
 .device-phone .aphront-table-view th {
-  padding: 6px;
   overflow: hidden;
 }
 

webroot/rsrc/css/application/diffusion/diffusion-source.css

@@ -5,6 +5,12 @@
 .diffusion-source {
   width: 100%;
   background: {$page.content};
+  overflow: hidden;
+}
+
+.device-phone .diffusion-source-wrap {
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
 }
 
 .diffusion-source tr.phabricator-source-highlight th,
@@ -27,6 +33,11 @@
   word-break: break-all;
 }
 
+.device .diffusion-source td {
+  word-break: normal;
+  white-space: nowrap;
+}
+
 .diffusion-browse-type-form {
   float: right;
 }

webroot/rsrc/css/application/diffusion/diffusion.css

@@ -207,16 +207,6 @@
     border-color: {$thinblueborder};
 }
 
-.device-phone.diffusion-history-view .phui-two-column-view
-  .phui-two-column-footer .phui-header-view {
-    text-align: center;
-}
-
-.device-phone.diffusion-history-view .phui-two-column-content {
-  padding: 0;
-  margin: 0 -4px;
-}
-
 .device-phone.diffusion-history-view .phui-oi-attribute-spacer {
   display: none;
 }
@@ -245,7 +235,10 @@
     margin: 0;
 }
 
-.device-phone.diffusion-history-view .diffusion-history-list .button.has-icon
+.device-phone .phui-two-column-view .phui-two-column-content
-  .phui-icon-view {
+  .phui-object-box.diffusion-mobile-view {
-    display: none;
+    margin: 0 -12px 20px;
+    border-left: none;
+    border-right: none;
+    border-color: {$thinblueborder};
 }

webroot/rsrc/css/application/search/application-search-view.css

@@ -40,7 +40,7 @@
     padding: 12px 0;
 }
 
-.device-phone .application-search-results
+.device-phone.application-search-view .application-search-results
   .phui-profile-header.phui-header-shell {
   padding: 12px 0 12px 4px;
 }