Build an AphrontMultiColumnView, use on workboards.

Summary: Abstract out the multi-column code from workboards and have it be available separately. I feel like there will be some benefit here especially for custom developers in how they present infromation (like releeph). It also scales back to tablet and mobile fairly well, so they get those things for free.

Test Plan: Tested mobile, tablet and chrome layouts.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -774,6 +774,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/aphront/list-filter-view.css',
   ),
+  'aphront-multi-column-view-css' =>
+  array(
+    'uri' => '/res/5abc8fff/rsrc/css/aphront/multi-column.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/aphront/multi-column.css',
+  ),
   'aphront-notes' =>
   array(
     'uri' => '/res/f8f3dcfa/rsrc/css/core/aphront-notes.css',
@@ -2842,7 +2851,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-core-css' =>
   array(
-    'uri' => '/res/9df0488c/rsrc/css/core/core.css',
+    'uri' => '/res/040d65c1/rsrc/css/core/core.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3438,7 +3447,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-workboard-view-css' =>
   array(
-    'uri' => '/res/b70667c6/rsrc/css/layout/phabricator-workboard-view.css',
+    'uri' => '/res/c9bfe320/rsrc/css/layout/phabricator-workboard-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3447,7 +3456,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-workpanel-view-css' =>
   array(
-    'uri' => '/res/d2eea288/rsrc/css/layout/phabricator-workpanel-view.css',
+    'uri' => '/res/4e25e23b/rsrc/css/layout/phabricator-workpanel-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3799,7 +3808,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'c4fbf0c2' =>
+    '490ec7ca' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3841,7 +3850,7 @@ celerity_register_resource_map(array(
         34 => 'phabricator-object-item-list-view-css',
         35 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/c4fbf0c2/core.pkg.css',
+      'uri' => '/res/pkg/490ec7ca/core.pkg.css',
       'type' => 'css',
     ),
     'd95b69e5' =>
@@ -4031,16 +4040,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => 'c4fbf0c2',
+    'aphront-dialog-view-css' => '490ec7ca',
-    'aphront-error-view-css' => 'c4fbf0c2',
+    'aphront-error-view-css' => '490ec7ca',
-    'aphront-form-view-css' => 'c4fbf0c2',
+    'aphront-form-view-css' => '490ec7ca',
-    'aphront-list-filter-view-css' => 'c4fbf0c2',
+    'aphront-list-filter-view-css' => '490ec7ca',
-    'aphront-pager-view-css' => 'c4fbf0c2',
+    'aphront-pager-view-css' => '490ec7ca',
-    'aphront-panel-view-css' => 'c4fbf0c2',
+    'aphront-panel-view-css' => '490ec7ca',
-    'aphront-table-view-css' => 'c4fbf0c2',
+    'aphront-table-view-css' => '490ec7ca',
-    'aphront-tokenizer-control-css' => 'c4fbf0c2',
+    'aphront-tokenizer-control-css' => '490ec7ca',
-    'aphront-tooltip-css' => 'c4fbf0c2',
+    'aphront-tooltip-css' => '490ec7ca',
-    'aphront-typeahead-control-css' => 'c4fbf0c2',
+    'aphront-typeahead-control-css' => '490ec7ca',
     'differential-changeset-view-css' => '8aaacd1b',
     'differential-core-view-css' => '8aaacd1b',
     'differential-inline-comment-editor' => 'e96b08f8',
@@ -4054,7 +4063,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' => 'c4fbf0c2',
+    'global-drag-and-drop-css' => '490ec7ca',
     'inline-comment-summary-css' => '8aaacd1b',
     'javelin-aphlict' => 'd95b69e5',
     'javelin-behavior' => 'fe22443b',
@@ -4126,47 +4135,47 @@ celerity_register_resource_map(array(
     'javelin-util' => 'fe22443b',
     'javelin-vector' => 'fe22443b',
     'javelin-workflow' => 'fe22443b',
-    'lightbox-attachment-css' => 'c4fbf0c2',
+    'lightbox-attachment-css' => '490ec7ca',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
     'phabricator-busy' => 'd95b69e5',
     'phabricator-content-source-view-css' => '8aaacd1b',
-    'phabricator-core-buttons-css' => 'c4fbf0c2',
+    'phabricator-core-buttons-css' => '490ec7ca',
-    'phabricator-core-css' => 'c4fbf0c2',
+    'phabricator-core-css' => '490ec7ca',
-    'phabricator-crumbs-view-css' => 'c4fbf0c2',
+    'phabricator-crumbs-view-css' => '490ec7ca',
-    'phabricator-directory-css' => 'c4fbf0c2',
+    'phabricator-directory-css' => '490ec7ca',
     'phabricator-drag-and-drop-file-upload' => 'e96b08f8',
     'phabricator-dropdown-menu' => 'd95b69e5',
     'phabricator-file-upload' => 'd95b69e5',
-    'phabricator-filetree-view-css' => 'c4fbf0c2',
+    'phabricator-filetree-view-css' => '490ec7ca',
-    'phabricator-flag-css' => 'c4fbf0c2',
+    'phabricator-flag-css' => '490ec7ca',
-    'phabricator-form-view-css' => 'c4fbf0c2',
+    'phabricator-form-view-css' => '490ec7ca',
-    'phabricator-header-view-css' => 'c4fbf0c2',
+    'phabricator-header-view-css' => '490ec7ca',
-    'phabricator-jump-nav' => 'c4fbf0c2',
+    'phabricator-jump-nav' => '490ec7ca',
     'phabricator-keyboard-shortcut' => 'd95b69e5',
     'phabricator-keyboard-shortcut-manager' => 'd95b69e5',
-    'phabricator-main-menu-view' => 'c4fbf0c2',
+    'phabricator-main-menu-view' => '490ec7ca',
     'phabricator-menu-item' => 'd95b69e5',
-    'phabricator-nav-view-css' => 'c4fbf0c2',
+    'phabricator-nav-view-css' => '490ec7ca',
     'phabricator-notification' => 'd95b69e5',
-    'phabricator-notification-css' => 'c4fbf0c2',
+    'phabricator-notification-css' => '490ec7ca',
-    'phabricator-notification-menu-css' => 'c4fbf0c2',
+    'phabricator-notification-menu-css' => '490ec7ca',
-    'phabricator-object-item-list-view-css' => 'c4fbf0c2',
+    'phabricator-object-item-list-view-css' => '490ec7ca',
     'phabricator-object-selector-css' => '8aaacd1b',
     'phabricator-prefab' => 'd95b69e5',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-remarkup-css' => 'c4fbf0c2',
+    'phabricator-remarkup-css' => '490ec7ca',
     'phabricator-shaped-request' => 'e96b08f8',
-    'phabricator-side-menu-view-css' => 'c4fbf0c2',
+    'phabricator-side-menu-view-css' => '490ec7ca',
-    'phabricator-standard-page-view' => 'c4fbf0c2',
+    'phabricator-standard-page-view' => '490ec7ca',
     'phabricator-textareautils' => 'd95b69e5',
     'phabricator-tooltip' => 'd95b69e5',
-    'phabricator-transaction-view-css' => 'c4fbf0c2',
+    'phabricator-transaction-view-css' => '490ec7ca',
-    'phabricator-zindex-css' => 'c4fbf0c2',
+    'phabricator-zindex-css' => '490ec7ca',
-    'sprite-apps-large-css' => 'c4fbf0c2',
+    'sprite-apps-large-css' => '490ec7ca',
-    'sprite-gradient-css' => 'c4fbf0c2',
+    'sprite-gradient-css' => '490ec7ca',
-    'sprite-icon-css' => 'c4fbf0c2',
+    'sprite-icon-css' => '490ec7ca',
-    'sprite-menu-css' => 'c4fbf0c2',
+    'sprite-menu-css' => '490ec7ca',
-    'syntax-highlighting-css' => 'c4fbf0c2',
+    'syntax-highlighting-css' => '490ec7ca',
   ),
 ));

src/__phutil_library_map__.php

@@ -66,6 +66,7 @@ phutil_register_library_map(array(
     'AphrontListFilterView' => 'view/layout/AphrontListFilterView.php',
     'AphrontMiniPanelView' => 'view/layout/AphrontMiniPanelView.php',
     'AphrontMoreView' => 'view/layout/AphrontMoreView.php',
+    'AphrontMultiColumnView' => 'view/layout/AphrontMultiColumnView.php',
     'AphrontMySQLDatabaseConnectionTestCase' => 'infrastructure/storage/__tests__/AphrontMySQLDatabaseConnectionTestCase.php',
     'AphrontNoteView' => 'view/widget/AphrontNoteView.php',
     'AphrontNullView' => 'view/AphrontNullView.php',
@@ -1091,6 +1092,7 @@ phutil_register_library_map(array(
     'PhabricatorMetaMTASendGridReceiveController' => 'applications/metamta/controller/PhabricatorMetaMTASendGridReceiveController.php',
     'PhabricatorMetaMTAViewController' => 'applications/metamta/controller/PhabricatorMetaMTAViewController.php',
     'PhabricatorMetaMTAWorker' => 'applications/metamta/PhabricatorMetaMTAWorker.php',
+    'PhabricatorMultiColumnExample' => 'applications/uiexample/examples/PhabricatorMultiColumnExample.php',
     'PhabricatorMustVerifyEmailController' => 'applications/auth/controller/PhabricatorMustVerifyEmailController.php',
     'PhabricatorMySQLConfigOptions' => 'applications/config/option/PhabricatorMySQLConfigOptions.php',
     'PhabricatorMySQLFileStorageEngine' => 'applications/files/engine/PhabricatorMySQLFileStorageEngine.php',
@@ -1790,6 +1792,7 @@ phutil_register_library_map(array(
     'AphrontListFilterView' => 'AphrontView',
     'AphrontMiniPanelView' => 'AphrontView',
     'AphrontMoreView' => 'AphrontView',
+    'AphrontMultiColumnView' => 'AphrontView',
     'AphrontMySQLDatabaseConnectionTestCase' => 'PhabricatorTestCase',
     'AphrontNoteView' => 'AphrontView',
     'AphrontNullView' => 'AphrontView',
@@ -2758,6 +2761,7 @@ phutil_register_library_map(array(
     'PhabricatorMetaMTASendGridReceiveController' => 'PhabricatorMetaMTAController',
     'PhabricatorMetaMTAViewController' => 'PhabricatorMetaMTAController',
     'PhabricatorMetaMTAWorker' => 'PhabricatorWorker',
+    'PhabricatorMultiColumnExample' => 'PhabricatorUIExample',
     'PhabricatorMustVerifyEmailController' => 'PhabricatorAuthController',
     'PhabricatorMySQLConfigOptions' => 'PhabricatorApplicationConfigOptions',
     'PhabricatorMySQLFileStorageEngine' => 'PhabricatorFileStorageEngine',

src/applications/uiexample/examples/PhabricatorMultiColumnExample.php

@@ -0,0 +1,108 @@
+<?php
+
+final class PhabricatorMultiColumnExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Multiple Column Layouts';
+  }
+
+  public function getDescription() {
+    return 'A container good for 1-6 equally spaced columns. '.
+      'Fixed and Fluid layouts.';
+  }
+
+  public function renderExample() {
+
+    $column1 = phutil_tag(
+      'div',
+        array(
+          'class' => 'pm',
+          'style' => 'border: 1px solid green;'
+        ),
+        'Bruce Campbell');
+
+    $column2 = phutil_tag(
+      'div',
+        array(
+          'class' => 'pm',
+          'style' => 'border: 1px solid blue;'
+        ),
+        'Army of Darkness');
+
+    $head1 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('2 Column Fixed'));
+    $layout1 = id(new AphrontMultiColumnView())
+      ->addColumn($column1)
+      ->addColumn($column2)
+      ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
+
+    $head2 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('2 Column Fluid'));
+    $layout2 = id(new AphrontMultiColumnView())
+      ->addColumn($column1)
+      ->addColumn($column2)
+      ->setFluidLayout(true)
+      ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
+
+    $head3 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('4 Column Fixed'));
+    $layout3 = id(new AphrontMultiColumnView())
+      ->addColumn($column1)
+      ->addColumn($column2)
+      ->addColumn($column1)
+      ->addColumn($column2)
+      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);
+
+    $head4 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('4 Column Fluid'));
+    $layout4 = id(new AphrontMultiColumnView())
+      ->addColumn($column1)
+      ->addColumn($column2)
+      ->addColumn($column1)
+      ->addColumn($column2)
+      ->setFluidLayout(true)
+      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);
+
+    $wrap1 = phutil_tag(
+      'div',
+        array(
+          'class' => 'ml'
+        ),
+        $layout1);
+
+    $wrap2 = phutil_tag(
+      'div',
+        array(
+          'class' => 'ml'
+        ),
+        $layout2);
+
+    $wrap3 = phutil_tag(
+      'div',
+        array(
+          'class' => 'ml'
+        ),
+        $layout3);
+
+    $wrap4 = phutil_tag(
+      'div',
+        array(
+          'class' => 'ml'
+        ),
+        $layout4);
+
+    return phutil_tag(
+      'div',
+        array(),
+        array(
+          $head1,
+          $wrap1,
+          $head2,
+          $wrap2,
+          $head3,
+          $wrap3,
+          $head4,
+          $wrap4
+        ));
+  }
+}

src/applications/uiexample/examples/PhabricatorWorkboardExample.php

@@ -123,7 +123,7 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
           ->addPanel($panel3);
 
     $board2 = id(new PhabricatorWorkboardView())
-          ->setFlexLayout(true)
+          ->setFluidLayout(true)
           ->addPanel($panel)
           ->addPanel($panel2)
           ->addPanel($panel2)
@@ -151,7 +151,7 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
       celerity_get_resource_uri('/rsrc/image/people/taft.png'));
 
     $board3 = id(new PhabricatorWorkboardView())
-          ->setFlexLayout(true)
+          ->setFluidLayout(true)
           ->addPanel($panel)
           ->addPanel($panel)
           ->addPanel($panel2)

src/view/layout/AphrontMultiColumnView.php

@@ -0,0 +1,97 @@
+<?php
+
+final class AphrontMultiColumnView extends AphrontView {
+
+  const GUTTER_SMALL = 'msr';
+  const GUTTER_MEDIUM = 'mmr';
+  const GUTTER_LARGE = 'mlr';
+
+  private $column = array();
+  private $fluidLayout = false;
+  private $gutter;
+
+  public function addColumn($column) {
+    $this->columns[] = $column;
+    return $this;
+  }
+
+  public function setFluidlayout($layout) {
+    $this->fluidLayout = $layout;
+    return $this;
+  }
+
+  public function setGutter($gutter) {
+    $this->gutter = $gutter;
+    return $this;
+  }
+
+  public function render() {
+    require_celerity_resource('aphront-multi-column-view-css');
+
+    $classes = array();
+    $classes[] = 'aphront-multi-column-inner';
+    $classes[] = 'grouped';
+
+    if (count($this->columns) > 6) {
+      throw new Exception("No more than 6 columns per view.");
+    }
+
+    $classes[] = 'aphront-multi-column-'.count($this->columns).'-up';
+
+    $columns = array();
+    $column_class = array();
+    $column_class[] = 'aphront-multi-column-column';
+    if ($this->gutter) {
+      $column_class[] = $this->gutter;
+    }
+    $i = 0;
+    foreach ($this->columns as $column) {
+      if (++$i === count($this->columns)) {
+        $column_class[] = 'aphront-multi-column-column-last';
+      }
+      $column_inner = phutil_tag(
+        'div',
+          array(
+          'class' => implode(' ', $column_class)
+          ),
+        $column);
+      $columns[] = phutil_tag(
+        'div',
+          array(
+          'class' => 'aphront-multi-column-column-outer'
+          ),
+        $column_inner);
+    }
+
+    $view = phutil_tag(
+      'div',
+      array(
+        'class' => implode(' ', $classes),
+      ),
+      array(
+        $columns,
+      ));
+
+    $classes = array();
+    $classes[] = 'aphront-multi-column-outer';
+    if ($this->fluidLayout) {
+      $classes[] = 'aphront-multi-column-fluid';
+    } else {
+      $classes[] = 'aphront-multi-column-fixed';
+    }
+
+    $board = phutil_tag(
+      'div',
+        array(
+          'class' => implode(' ', $classes)
+        ),
+        $view);
+
+    return phutil_tag(
+      'div',
+        array(
+          'class' => 'aphront-multi-column-view'
+        ),
+        $board);
+  }
+}

src/view/layout/PhabricatorWorkboardView.php

@@ -3,7 +3,7 @@
 final class PhabricatorWorkboardView extends AphrontView {
 
   private $panels = array();
-  private $flexLayout = false;
+  private $fluidLayout = false;
   private $actions = array();
 
   public function addPanel(PhabricatorWorkpanelView $panel) {
@@ -11,8 +11,8 @@ final class PhabricatorWorkboardView extends AphrontView {
     return $this;
   }
 
-  public function setFlexLayout($layout) {
+  public function setFluidLayout($layout) {
-    $this->flexLayout = $layout;
+    $this->fluidLayout = $layout;
     return $this;
   }
 
@@ -24,13 +24,6 @@ final class PhabricatorWorkboardView extends AphrontView {
   public function render() {
     require_celerity_resource('phabricator-workboard-view-css');
 
-    $classes = array();
-    $classes[] = 'phabricator-workboard-view-inner';
-
-    if (count($this->panels) > 6) {
-      throw new Exception("No more than 6 panels per workboard.");
-    }
-
     $action_list = null;
     if (!empty($this->actions)) {
       $items = array();
@@ -50,29 +43,17 @@ final class PhabricatorWorkboardView extends AphrontView {
           $items);
     }
 
-    $classes[] = 'workboard-'.count($this->panels).'-up';
+    $view = new AphrontMultiColumnView();
-
+    $view->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
-    $view = phutil_tag(
+    $view->setFluidLayout($this->fluidLayout);
-      'div',
+    foreach ($this->panels as $panel) {
-      array(
+      $view->addColumn($panel);
-        'class' => implode(' ', $classes),
-      ),
-      array(
-        $this->panels,
-      ));
-
-    $classes = array();
-    $classes[] = 'phabricator-workboard-view-outer';
-    if ($this->flexLayout) {
-      $classes[] = 'phabricator-workboard-flex';
-    } else {
-      $classes[] = 'phabricator-workboard-fixed';
     }
 
     $board = phutil_tag(
       'div',
         array(
-          'class' => implode(' ', $classes)
+          'class' => 'phabricator-workboard-view-shadow'
         ),
         $view);
 

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

@@ -0,0 +1,113 @@
+/**
+ * @provides aphront-multi-column-view-css
+ */
+
+.aphront-multi-column-view {
+  width: 100%;
+}
+
+.device-phone .aphront-multi-column-outer {
+  padding: 0;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.aphront-multi-column-column-outer {
+  float: left;
+}
+
+.aphront-multi-column-inner .aphront-multi-column-column-last,
+.device-phone .aphront-multi-column-column {
+  margin: 0;
+}
+
+.device-phone .aphront-multi-column-outer
+  div.aphront-multi-column-column-outer {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+/* math here is based on panel width and margins */
+.aphront-multi-column-fixed
+  .aphront-multi-column-inner.aphront-multi-column-1-up {
+  width: 310px;
+}
+
+.aphront-multi-column-fixed
+  .aphront-multi-column-inner.aphront-multi-column-2-up {
+  width: 620px;
+}
+
+.aphront-multi-column-fixed
+  .aphront-multi-column-inner.aphront-multi-column-3-up {
+  width: 930px;
+}
+
+.aphront-multi-column-fixed
+  .aphront-multi-column-inner.aphront-multi-column-4-up {
+  width: 1008px;
+}
+
+.aphront-multi-column-fixed
+  .aphront-multi-column-inner.aphront-multi-column-5-up {
+  width: 1250px;
+}
+
+.aphront-multi-column-fixed
+  .aphront-multi-column-inner.aphront-multi-column-6-up {
+  width: 1500px;
+}
+
+.device-phone .aphront-multi-column-fixed .aphront-multi-column-inner {
+   width: 100%;
+}
+
+/* Panels require a fixed width to overflow well. */
+.aphront-multi-column-fixed .aphront-multi-column-1-up
+  .aphront-multi-column-column-outer,
+.aphront-multi-column-fixed .aphront-multi-column-2-up
+  .aphront-multi-column-column-outer,
+.aphront-multi-column-fixed .aphront-multi-column-3-up
+  .aphront-multi-column-column-outer {
+  width: 300px;
+}
+
+.aphront-multi-column-fixed .aphront-multi-column-4-up
+  .aphront-multi-column-column-outer,
+.aphront-multi-column-fixed .aphront-multi-column-5-up
+  .aphront-multi-column-column-outer,
+.aphront-multi-column-fixed .aphront-multi-column-6-up
+  .aphront-multi-column-column-outer {
+  width: 240px;
+}
+
+/* fluid/flex styles */
+.aphront-multi-column-fluid .aphront-multi-column-1-up
+  .aphront-multi-column-column-outer {
+  width: 100%;
+}
+
+.aphront-multi-column-fluid .aphront-multi-column-2-up
+  .aphront-multi-column-column-outer {
+  width: 50%;
+}
+
+.aphront-multi-column-fluid .aphront-multi-column-3-up
+  .aphront-multi-column-column-outer {
+  width: 33.3333%;
+}
+
+.aphront-multi-column-fluid .aphront-multi-column-4-up
+  .aphront-multi-column-column-outer {
+  width: 25%;
+}
+
+.aphront-multi-column-fluid .aphront-multi-column-5-up
+  .aphront-multi-column-column-outer {
+  width: 20%;
+}
+
+.aphront-multi-column-fluid .aphront-multi-column-6-up
+  .aphront-multi-column-column-outer {
+  width: 16.6666%;
+}

webroot/rsrc/css/core/core.css

@@ -124,3 +124,9 @@ img {
   border: 1px solid #444444;
   border-radius: 8px;
 }
+
+.grouped:after {
+  content: "";
+  display: table;
+  clear: both;
+}

webroot/rsrc/css/layout/phabricator-workboard-view.css

@@ -6,7 +6,7 @@
   width: 100%;
 }
 
-.phabricator-workboard-view-outer {
+.phabricator-workboard-view-shadow {
   padding: 8px;
   min-height: 120px;
   overflow-x: scroll;
@@ -25,7 +25,7 @@
   background: rgba(150,150,150,.2);
 }
 
-.device-phone .phabricator-workboard-view-outer {
+.device-phone .phabricator-workboard-view-shadow {
   background: none;
   box-shadow: none;
   padding: 0;
@@ -48,48 +48,14 @@
   margin: 0px;
 }
 
-.device-phone .phabricator-workboard-action-item-link {
-  margin-right: 0;
-}
-
-/* math here is based on panel width and margins */
-.phabricator-workboard-fixed
-  .phabricator-workboard-view-inner.workboard-1-up {
-  width: 310px;
-}
-
-.phabricator-workboard-fixed
-  .phabricator-workboard-view-inner.workboard-2-up {
-  width: 620px;
-}
-
-.phabricator-workboard-fixed
-  .phabricator-workboard-view-inner.workboard-3-up {
-  width: 930px;
-}
-
-.phabricator-workboard-fixed
-  .phabricator-workboard-view-inner.workboard-4-up {
-  width: 1008px;
-}
-
-.phabricator-workboard-fixed
-  .phabricator-workboard-view-inner.workboard-5-up {
-  width: 1250px;
-}
-
-.phabricator-workboard-fixed
-  .phabricator-workboard-view-inner.workboard-6-up {
-  width: 1500px;
-}
-
-.device-phone .phabricator-workboard-fixed .phabricator-workboard-view-inner {
-   width: 100%;
-}
-
 .phabricator-workboard-action-item-link {
   display: block;
   width: 50px;
   height: 50px;
   margin: 5px 4px 5px 5px;
 }
+
+.device-phone .phabricator-workboard-action-item-link {
+  margin-right: 0;
+}
+

webroot/rsrc/css/layout/phabricator-workpanel-view.css

@@ -2,41 +2,6 @@
  * @provides phabricator-workpanel-view-css
  */
 
-.phabricator-workpanel-view {
-  float: left;
-}
-
-.phabricator-workpanel-view-inner {
-  margin: 0 10px 0 0;
-}
-
-.device-phone .phabricator-workpanel-view-inner {
-  margin: 0;
-}
-
-.phabricator-workboard-flex .phabricator-workpanel-view:last-child
-  .phabricator-workpanel-view-inner {
-  margin: 0;
-}
-
-/* Panels require a fixed width to overflow well. */
-.phabricator-workboard-fixed .workboard-1-up .phabricator-workpanel-view,
-.phabricator-workboard-fixed .workboard-2-up .phabricator-workpanel-view,
-.phabricator-workboard-fixed .workboard-3-up .phabricator-workpanel-view {
-  width: 300px;
-}
-
-.phabricator-workboard-fixed .workboard-4-up .phabricator-workpanel-view,
-.phabricator-workboard-fixed .workboard-5-up .phabricator-workpanel-view,
-.phabricator-workboard-fixed .workboard-6-up .phabricator-workpanel-view {
-  width: 240px;
-}
-
-.device-phone .phabricator-workboard-view-outer div.phabricator-workpanel-view {
-  width: 100%;
-  margin-bottom: 20px;
-}
-
 .phabricator-workpanel-view .phabricator-workpanel-header {
   font-size: 14px;
   font-weight: bold;
@@ -83,28 +48,3 @@
   padding-left: 5px;
   display: inline-block;
 }
-
-/* fluid/flex styles */
-.phabricator-workboard-flex .workboard-1-up .phabricator-workpanel-view {
-  width: 100%;
-}
-
-.phabricator-workboard-flex .workboard-2-up .phabricator-workpanel-view {
-  width: 50%;
-}
-
-.phabricator-workboard-flex .workboard-3-up .phabricator-workpanel-view {
-  width: 33.3333%;
-}
-
-.phabricator-workboard-flex .workboard-4-up .phabricator-workpanel-view {
-  width: 25%;
-}
-
-.phabricator-workboard-flex .workboard-5-up .phabricator-workpanel-view {
-  width: 20%;
-}
-
-.phabricator-workboard-flex .workboard-6-up .phabricator-workpanel-view {
-  width: 16.6666%;
-}