revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-28 16:30:59 +01:00
Code Issues Releases Wiki Activity

Add Fluid-ish view to AphrontMultiColumnView

Browse source 
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 2013-11-05 18:55:42 -08:00
parent a119eb2303
commit f691e35195
6 changed files with 70 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/__celerity_resource_map__.php
View file

@ -884,7 +884,7 @@ celerity_register_resource_map(array(
), ),
'aphront-multi-column-view-css' => 'aphront-multi-column-view-css' =>
array( array(
'uri' => '/res/23590410/rsrc/css/aphront/multi-column.css', 'uri' => '/res/9d2b2374/rsrc/css/aphront/multi-column.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3994,7 +3994,7 @@ celerity_register_resource_map(array(
), ),
'phui-workpanel-view-css' => 'phui-workpanel-view-css' =>
array( array(
'uri' => '/res/a64ca5c1/rsrc/css/phui/phui-workpanel-view.css', 'uri' => '/res/0b9a41d8/rsrc/css/phui/phui-workpanel-view.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(

3
src/applications/project/controller/PhabricatorProjectBoardController.php
View file

@ -68,7 +68,8 @@ final class PhabricatorProjectBoardController
} }
$board = id(new PHUIWorkboardView()) $board = id(new PHUIWorkboardView())
->setUser($viewer); ->setUser($viewer)
->setFluidishLayout(true);
foreach ($columns as $column) { foreach ($columns as $column) {
$panel = id(new PHUIWorkpanelView()) $panel = id(new PHUIWorkpanelView())

10
src/view/layout/AphrontMultiColumnView.php
View file

@ -8,6 +8,7 @@ final class AphrontMultiColumnView extends AphrontView {
private $columns = array(); private $columns = array();
private $fluidLayout = false; private $fluidLayout = false;
private $fluidishLayout = false;
private $gutter; private $gutter;
private $shadow; private $shadow;
@ -21,6 +22,12 @@ final class AphrontMultiColumnView extends AphrontView {
return $this; return $this;
} }
public function setFluidishLayout($layout) {
$this->fluidLayout = true;
$this->fluidishLayout = $layout;
return $this;
}
public function setGutter($gutter) { public function setGutter($gutter) {
$this->gutter = $gutter; $this->gutter = $gutter;
return $this; return $this;
@ -85,6 +92,9 @@ final class AphrontMultiColumnView extends AphrontView {
$classes[] = 'aphront-multi-column-outer'; $classes[] = 'aphront-multi-column-outer';
if ($this->fluidLayout) { if ($this->fluidLayout) {
$classes[] = 'aphront-multi-column-fluid'; $classes[] = 'aphront-multi-column-fluid';
if ($this->fluidishLayout) {
$classes[] = 'aphront-multi-column-fluidish';
}
} else { } else {
$classes[] = 'aphront-multi-column-fixed'; $classes[] = 'aphront-multi-column-fixed';
} }

13
src/view/phui/PHUIWorkboardView.php
View file

@ -4,6 +4,7 @@ final class PHUIWorkboardView extends AphrontView {
private $panels = array(); private $panels = array();
private $fluidLayout = false; private $fluidLayout = false;
private $fluidishLayout = false;
private $actions = array(); private $actions = array();
public function addPanel(PHUIWorkpanelView $panel) { public function addPanel(PHUIWorkpanelView $panel) {
@ -16,6 +17,11 @@ final class PHUIWorkboardView extends AphrontView {
return $this; return $this;
} }
public function setFluidishLayout($layout) {
$this->fluidishLayout = $layout;
return $this;
}
public function addAction(PHUIIconView $action) { public function addAction(PHUIIconView $action) {
$this->actions[] = $action; $this->actions[] = $action;
return $this; return $this;
@ -45,7 +51,12 @@ final class PHUIWorkboardView extends AphrontView {
$view = new AphrontMultiColumnView(); $view = new AphrontMultiColumnView();
$view->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM); $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) { foreach ($this->panels as $panel) {
$view->addColumn($panel); $view->addColumn($panel);
} }

103
webroot/rsrc/css/aphront/multi-column.css
View file

@ -6,85 +6,61 @@
width: 100%; width: 100%;
} }
.device-phone .aphront-multi-column-outer { .device .aphront-multi-column-outer {
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }
.aphront-multi-column-inner .aphront-multi-column-column-last, .aphront-multi-column-inner .aphront-multi-column-column-last,
.device-phone .aphront-multi-column-column { .device .aphront-multi-column-column {
margin: 0; margin: 0;
} }
.device-phone .aphront-multi-column-outer .device .aphront-multi-column-outer
div.aphront-multi-column-column-outer { div.aphront-multi-column-column-outer {
width: auto; width: auto;
margin-bottom: 16px; margin-bottom: 16px;
} }
/* math here is based on panel width and margins */ .device .aphront-multi-column-fixed .aphront-multi-column-inner {
.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 {
width: 100%; width: 100%;
} }
/* Panels require a fixed width to overflow well. */ .aphront-multi-column-fixed .aphront-multi-column-column-outer {
.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; width: 300px;
} }
.aphront-multi-column-fixed .aphront-multi-column-4-up /* flexible, but with a minimum */
.aphront-multi-column-column-outer, .device-desktop .aphront-multi-column-fluidish .aphront-multi-column-1-up {
.aphront-multi-column-fixed .aphront-multi-column-5-up min-width: 200px;
.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;
} }
/* 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-fluid .aphront-multi-column-1-up
.aphront-multi-column-column-outer { .aphront-multi-column-column-outer {
width: 100%; width: 100%;
@ -127,7 +103,12 @@
width: 100%; 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; display: block;
width: auto; width: auto;
} }
@ -148,17 +129,17 @@
border: none; border: none;
} }
.device-phone .aphront-multi-column-column-outer { .device .aphront-multi-column-column-outer {
display: block; display: block;
border: none; border: none;
} }
.device-phone .phui-box-shadow .aphront-multi-column-column-outer { .device .phui-box-shadow .aphront-multi-column-column-outer {
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 1px solid #e7e7e7; 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; border: none;
padding-bottom: 0; padding-bottom: 0;
} }

20
webroot/rsrc/css/phui/phui-workpanel-view.css
View file

@ -52,27 +52,11 @@
display: inline-block; display: inline-block;
} }
.aphront-multi-column-fixed .aphront-multi-column-1-up .aphront-multi-column-fixed .phui-workpanel-body {
.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 {
width: 300px; width: 300px;
} }
.aphront-multi-column-fixed .aphront-multi-column-4-up .device .aphront-multi-column-outer
.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
div.aphront-multi-column-column-outer .phui-workpanel-body { div.aphront-multi-column-column-outer .phui-workpanel-body {
width: auto; width: auto;
} }