diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index d42fb088a1..6fbf4c9726 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -884,7 +884,7 @@ celerity_register_resource_map(array( ), 'aphront-multi-column-view-css' => array( - 'uri' => '/res/23590410/rsrc/css/aphront/multi-column.css', + 'uri' => '/res/9d2b2374/rsrc/css/aphront/multi-column.css', 'type' => 'css', 'requires' => array( @@ -3994,7 +3994,7 @@ celerity_register_resource_map(array( ), 'phui-workpanel-view-css' => array( - 'uri' => '/res/a64ca5c1/rsrc/css/phui/phui-workpanel-view.css', + 'uri' => '/res/0b9a41d8/rsrc/css/phui/phui-workpanel-view.css', 'type' => 'css', 'requires' => array( diff --git a/src/applications/project/controller/PhabricatorProjectBoardController.php b/src/applications/project/controller/PhabricatorProjectBoardController.php index ebdf937ea9..937d23cf2b 100644 --- a/src/applications/project/controller/PhabricatorProjectBoardController.php +++ b/src/applications/project/controller/PhabricatorProjectBoardController.php @@ -68,7 +68,8 @@ final class PhabricatorProjectBoardController } $board = id(new PHUIWorkboardView()) - ->setUser($viewer); + ->setUser($viewer) + ->setFluidishLayout(true); foreach ($columns as $column) { $panel = id(new PHUIWorkpanelView()) diff --git a/src/view/layout/AphrontMultiColumnView.php b/src/view/layout/AphrontMultiColumnView.php index a9358c95eb..56622c43dd 100644 --- a/src/view/layout/AphrontMultiColumnView.php +++ b/src/view/layout/AphrontMultiColumnView.php @@ -8,6 +8,7 @@ final class AphrontMultiColumnView extends AphrontView { private $columns = array(); private $fluidLayout = false; + private $fluidishLayout = false; private $gutter; private $shadow; @@ -21,6 +22,12 @@ final class AphrontMultiColumnView extends AphrontView { return $this; } + public function setFluidishLayout($layout) { + $this->fluidLayout = true; + $this->fluidishLayout = $layout; + return $this; + } + public function setGutter($gutter) { $this->gutter = $gutter; return $this; @@ -85,6 +92,9 @@ final class AphrontMultiColumnView extends AphrontView { $classes[] = 'aphront-multi-column-outer'; if ($this->fluidLayout) { $classes[] = 'aphront-multi-column-fluid'; + if ($this->fluidishLayout) { + $classes[] = 'aphront-multi-column-fluidish'; + } } else { $classes[] = 'aphront-multi-column-fixed'; } diff --git a/src/view/phui/PHUIWorkboardView.php b/src/view/phui/PHUIWorkboardView.php index 36de16db4d..80a059f348 100644 --- a/src/view/phui/PHUIWorkboardView.php +++ b/src/view/phui/PHUIWorkboardView.php @@ -4,6 +4,7 @@ final class PHUIWorkboardView extends AphrontView { private $panels = array(); private $fluidLayout = false; + private $fluidishLayout = false; private $actions = array(); public function addPanel(PHUIWorkpanelView $panel) { @@ -16,6 +17,11 @@ final class PHUIWorkboardView extends AphrontView { return $this; } + public function setFluidishLayout($layout) { + $this->fluidishLayout = $layout; + return $this; + } + public function addAction(PHUIIconView $action) { $this->actions[] = $action; return $this; @@ -45,7 +51,12 @@ final class PHUIWorkboardView extends AphrontView { $view = new AphrontMultiColumnView(); $view->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM); - $view->setFluidLayout($this->fluidLayout); + if ($this->fluidLayout) { + $view->setFluidLayout($this->fluidLayout); + } + if ($this->fluidishLayout) { + $view->setFluidishLayout($this->fluidishLayout); + } foreach ($this->panels as $panel) { $view->addColumn($panel); } diff --git a/webroot/rsrc/css/aphront/multi-column.css b/webroot/rsrc/css/aphront/multi-column.css index bcba45ed6d..5f644464c2 100644 --- a/webroot/rsrc/css/aphront/multi-column.css +++ b/webroot/rsrc/css/aphront/multi-column.css @@ -6,85 +6,61 @@ width: 100%; } -.device-phone .aphront-multi-column-outer { +.device .aphront-multi-column-outer { padding: 0; margin: 0 auto; width: 100%; } .aphront-multi-column-inner .aphront-multi-column-column-last, -.device-phone .aphront-multi-column-column { +.device .aphront-multi-column-column { margin: 0; } -.device-phone .aphront-multi-column-outer +.device .aphront-multi-column-outer div.aphront-multi-column-column-outer { width: auto; margin-bottom: 16px; } -/* 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; -} - -.aphront-multi-column-fixed - .aphront-multi-column-inner.aphront-multi-column-7-up { - width: 1750px; -} - -.device-phone .aphront-multi-column-fixed .aphront-multi-column-inner { +.device .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 { +.aphront-multi-column-fixed .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, -.aphront-multi-column-fixed .aphront-multi-column-7-up - .aphront-multi-column-column-outer { - width: 240px; +/* flexible, but with a minimum */ +.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-1-up { + min-width: 200px; } -/* fluid/flex styles */ +.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-2-up { + min-width: 400px; +} + +.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-3-up { + min-width: 600px; +} + +.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-4-up { + min-width: 800px; +} + +.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-5-up { + min-width: 1000px; +} + +.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-6-up { + min-width: 1200px; +} + +.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-7-up { + min-width: 1400px; +} + +/* table division */ .aphront-multi-column-fluid .aphront-multi-column-1-up .aphront-multi-column-column-outer { width: 100%; @@ -127,7 +103,12 @@ width: 100%; } -.device-phone .aphront-multi-column-inner { +/* magic sauce */ +.aphront-multi-column-fluid .aphront-multi-column-inner { + table-layout: fixed; +} + +.device .aphront-multi-column-inner { display: block; width: auto; } @@ -148,17 +129,17 @@ border: none; } -.device-phone .aphront-multi-column-column-outer { +.device .aphront-multi-column-column-outer { display: block; border: none; } -.device-phone .phui-box-shadow .aphront-multi-column-column-outer { +.device .phui-box-shadow .aphront-multi-column-column-outer { padding-bottom: 20px; border-bottom: 1px solid #e7e7e7; } -.device-phone .phui-box-shadow .aphront-multi-colum-column-outer-last { +.device .phui-box-shadow .aphront-multi-colum-column-outer-last { border: none; padding-bottom: 0; } diff --git a/webroot/rsrc/css/phui/phui-workpanel-view.css b/webroot/rsrc/css/phui/phui-workpanel-view.css index 8ce8e426dd..89e41ce1f0 100644 --- a/webroot/rsrc/css/phui/phui-workpanel-view.css +++ b/webroot/rsrc/css/phui/phui-workpanel-view.css @@ -52,27 +52,11 @@ display: inline-block; } -.aphront-multi-column-fixed .aphront-multi-column-1-up - .aphront-multi-column-column-outer .phui-workpanel-body, -.aphront-multi-column-fixed .aphront-multi-column-2-up - .aphront-multi-column-column-outer .phui-workpanel-body, -.aphront-multi-column-fixed .aphront-multi-column-3-up - .aphront-multi-column-column-outer .phui-workpanel-body { +.aphront-multi-column-fixed .phui-workpanel-body { width: 300px; } -.aphront-multi-column-fixed .aphront-multi-column-4-up - .aphront-multi-column-column-outer .phui-workpanel-body, -.aphront-multi-column-fixed .aphront-multi-column-5-up - .aphront-multi-column-column-outer .phui-workpanel-body, -.aphront-multi-column-fixed .aphront-multi-column-6-up - .aphront-multi-column-column-outer .phui-workpanel-body, -.aphront-multi-column-fixed .aphront-multi-column-7-up - .aphront-multi-column-column-outer .phui-workpanel-body { - width: 240px; -} - -.device-phone .aphront-multi-column-outer +.device .aphront-multi-column-outer div.aphront-multi-column-column-outer .phui-workpanel-body { width: auto; }