mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-28 00:10:57 +01:00
Add Fluid-ish view to AphrontMultiColumnView
Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
This commit is contained in:
Chad Little
parent
a119eb2303
commit
f691e35195
6 changed files with 70 additions and 83 deletions
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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())
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue