Page MenuHomePhabricator
Files F79538

D7509.diff
All Users
Actions

D7509.diff
View Options

diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@@ -884,7 +884,7 @@
),
'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 @@
),
'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
--- a/src/applications/project/controller/PhabricatorProjectBoardController.php
+++ b/src/applications/project/controller/PhabricatorProjectBoardController.php
@@ -68,7 +68,8 @@
}
$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
--- a/src/view/layout/AphrontMultiColumnView.php
+++ b/src/view/layout/AphrontMultiColumnView.php
@@ -8,6 +8,7 @@
private $columns = array();
private $fluidLayout = false;
+ private $fluidishLayout = false;
private $gutter;
private $shadow;
@@ -21,6 +22,12 @@
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 @@
$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
--- a/src/view/phui/PHUIWorkboardView.php
+++ b/src/view/phui/PHUIWorkboardView.php
@@ -4,6 +4,7 @@
private $panels = array();
private $fluidLayout = false;
+ private $fluidishLayout = false;
private $actions = array();
public function addPanel(PHUIWorkpanelView $panel) {
@@ -16,6 +17,11 @@
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 @@
$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
--- 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;
+.device .aphront-multi-column-fixed .aphront-multi-column-inner {
+ width: 100%;
}
-.aphront-multi-column-fixed
- .aphront-multi-column-inner.aphront-multi-column-3-up {
- width: 930px;
+.aphront-multi-column-fixed .aphront-multi-column-column-outer {
+ width: 300px;
}
-.aphront-multi-column-fixed
- .aphront-multi-column-inner.aphront-multi-column-4-up {
- width: 1008px;
+/* flexible, but with a minimum */
+.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-1-up {
+ min-width: 200px;
}
-.aphront-multi-column-fixed
- .aphront-multi-column-inner.aphront-multi-column-5-up {
- width: 1250px;
+.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-2-up {
+ min-width: 400px;
}
-.aphront-multi-column-fixed
- .aphront-multi-column-inner.aphront-multi-column-6-up {
- width: 1500px;
+.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-3-up {
+ min-width: 600px;
}
-.aphront-multi-column-fixed
- .aphront-multi-column-inner.aphront-multi-column-7-up {
- width: 1750px;
+.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-4-up {
+ min-width: 800px;
}
-.device-phone .aphront-multi-column-fixed .aphront-multi-column-inner {
- width: 100%;
+.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-5-up {
+ min-width: 1000px;
}
-/* 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;
+.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-6-up {
+ min-width: 1200px;
}
-.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;
+.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-7-up {
+ min-width: 1400px;
}
-/* fluid/flex styles */
+/* 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
--- 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;
}

File Metadata

Mime Type
text/x-diff
Storage Engine
amazon-s3
Storage Format
Raw Data
Storage Handle
phabricator/zm/sv/66bm3fqpwoodoeur
Default Alt Text
D7509.diff (8 KB)

Event Timeline

Phabricator · Built by Phacility