@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+60
-73
+2
-2
src/__celerity_resource_map__.php
+2
-2
src/__celerity_resource_map__.php
···
884
884
),
885
885
'aphront-multi-column-view-css' =>
886
886
array(
887
-
'uri' => '/res/23590410/rsrc/css/aphront/multi-column.css',
887
+
'uri' => '/res/9d2b2374/rsrc/css/aphront/multi-column.css',
888
888
'type' => 'css',
889
889
'requires' =>
890
890
array(
···
3994
3994
),
3995
3995
'phui-workpanel-view-css' =>
3996
3996
array(
3997
-
'uri' => '/res/a64ca5c1/rsrc/css/phui/phui-workpanel-view.css',
3997
+
'uri' => '/res/0b9a41d8/rsrc/css/phui/phui-workpanel-view.css',
3998
3998
'type' => 'css',
3999
3999
'requires' =>
4000
4000
array(
+2
-1
src/applications/project/controller/PhabricatorProjectBoardController.php
+2
-1
src/applications/project/controller/PhabricatorProjectBoardController.php
+10
src/view/layout/AphrontMultiColumnView.php
+10
src/view/layout/AphrontMultiColumnView.php
···
8
8
9
9
private $columns = array();
10
10
private $fluidLayout = false;
11
+
private $fluidishLayout = false;
11
12
private $gutter;
12
13
private $shadow;
13
14
···
18
19
19
20
public function setFluidlayout($layout) {
20
21
$this->fluidLayout = $layout;
22
+
return $this;
23
+
}
24
+
25
+
public function setFluidishLayout($layout) {
26
+
$this->fluidLayout = true;
27
+
$this->fluidishLayout = $layout;
21
28
return $this;
22
29
}
23
30
···
85
92
$classes[] = 'aphront-multi-column-outer';
86
93
if ($this->fluidLayout) {
87
94
$classes[] = 'aphront-multi-column-fluid';
95
+
if ($this->fluidishLayout) {
96
+
$classes[] = 'aphront-multi-column-fluidish';
97
+
}
88
98
} else {
89
99
$classes[] = 'aphront-multi-column-fixed';
90
100
}
+12
-1
src/view/phui/PHUIWorkboardView.php
+12
-1
src/view/phui/PHUIWorkboardView.php
···
4
4
5
5
private $panels = array();
6
6
private $fluidLayout = false;
7
+
private $fluidishLayout = false;
7
8
private $actions = array();
8
9
9
10
public function addPanel(PHUIWorkpanelView $panel) {
···
13
14
14
15
public function setFluidLayout($layout) {
15
16
$this->fluidLayout = $layout;
17
+
return $this;
18
+
}
19
+
20
+
public function setFluidishLayout($layout) {
21
+
$this->fluidishLayout = $layout;
16
22
return $this;
17
23
}
18
24
···
45
51
46
52
$view = new AphrontMultiColumnView();
47
53
$view->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
48
-
$view->setFluidLayout($this->fluidLayout);
54
+
if ($this->fluidLayout) {
55
+
$view->setFluidLayout($this->fluidLayout);
56
+
}
57
+
if ($this->fluidishLayout) {
58
+
$view->setFluidishLayout($this->fluidishLayout);
59
+
}
49
60
foreach ($this->panels as $panel) {
50
61
$view->addColumn($panel);
51
62
}
+32
-51
webroot/rsrc/css/aphront/multi-column.css
+32
-51
webroot/rsrc/css/aphront/multi-column.css
···
6
6
width: 100%;
7
7
}
8
8
9
-
.device-phone .aphront-multi-column-outer {
9
+
.device .aphront-multi-column-outer {
10
10
padding: 0;
11
11
margin: 0 auto;
12
12
width: 100%;
13
13
}
14
14
15
15
.aphront-multi-column-inner .aphront-multi-column-column-last,
16
-
.device-phone .aphront-multi-column-column {
16
+
.device .aphront-multi-column-column {
17
17
margin: 0;
18
18
}
19
19
20
-
.device-phone .aphront-multi-column-outer
20
+
.device .aphront-multi-column-outer
21
21
div.aphront-multi-column-column-outer {
22
22
width: auto;
23
23
margin-bottom: 16px;
24
24
}
25
25
26
-
/* math here is based on panel width and margins */
27
-
.aphront-multi-column-fixed
28
-
.aphront-multi-column-inner.aphront-multi-column-1-up {
29
-
width: 310px;
26
+
.device .aphront-multi-column-fixed .aphront-multi-column-inner {
27
+
width: 100%;
30
28
}
31
29
32
-
.aphront-multi-column-fixed
33
-
.aphront-multi-column-inner.aphront-multi-column-2-up {
34
-
width: 620px;
30
+
.aphront-multi-column-fixed .aphront-multi-column-column-outer {
31
+
width: 300px;
35
32
}
36
33
37
-
.aphront-multi-column-fixed
38
-
.aphront-multi-column-inner.aphront-multi-column-3-up {
39
-
width: 930px;
34
+
/* flexible, but with a minimum */
35
+
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-1-up {
36
+
min-width: 200px;
40
37
}
41
38
42
-
.aphront-multi-column-fixed
43
-
.aphront-multi-column-inner.aphront-multi-column-4-up {
44
-
width: 1008px;
39
+
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-2-up {
40
+
min-width: 400px;
45
41
}
46
42
47
-
.aphront-multi-column-fixed
48
-
.aphront-multi-column-inner.aphront-multi-column-5-up {
49
-
width: 1250px;
43
+
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-3-up {
44
+
min-width: 600px;
50
45
}
51
46
52
-
.aphront-multi-column-fixed
53
-
.aphront-multi-column-inner.aphront-multi-column-6-up {
54
-
width: 1500px;
47
+
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-4-up {
48
+
min-width: 800px;
55
49
}
56
50
57
-
.aphront-multi-column-fixed
58
-
.aphront-multi-column-inner.aphront-multi-column-7-up {
59
-
width: 1750px;
51
+
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-5-up {
52
+
min-width: 1000px;
60
53
}
61
54
62
-
.device-phone .aphront-multi-column-fixed .aphront-multi-column-inner {
63
-
width: 100%;
55
+
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-6-up {
56
+
min-width: 1200px;
64
57
}
65
58
66
-
/* Panels require a fixed width to overflow well. */
67
-
.aphront-multi-column-fixed .aphront-multi-column-1-up
68
-
.aphront-multi-column-column-outer,
69
-
.aphront-multi-column-fixed .aphront-multi-column-2-up
70
-
.aphront-multi-column-column-outer,
71
-
.aphront-multi-column-fixed .aphront-multi-column-3-up
72
-
.aphront-multi-column-column-outer {
73
-
width: 300px;
59
+
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-7-up {
60
+
min-width: 1400px;
74
61
}
75
62
76
-
.aphront-multi-column-fixed .aphront-multi-column-4-up
77
-
.aphront-multi-column-column-outer,
78
-
.aphront-multi-column-fixed .aphront-multi-column-5-up
79
-
.aphront-multi-column-column-outer,
80
-
.aphront-multi-column-fixed .aphront-multi-column-6-up
81
-
.aphront-multi-column-column-outer,
82
-
.aphront-multi-column-fixed .aphront-multi-column-7-up
83
-
.aphront-multi-column-column-outer {
84
-
width: 240px;
85
-
}
86
-
87
-
/* fluid/flex styles */
63
+
/* table division */
88
64
.aphront-multi-column-fluid .aphront-multi-column-1-up
89
65
.aphront-multi-column-column-outer {
90
66
width: 100%;
···
127
103
width: 100%;
128
104
}
129
105
130
-
.device-phone .aphront-multi-column-inner {
106
+
/* magic sauce */
107
+
.aphront-multi-column-fluid .aphront-multi-column-inner {
108
+
table-layout: fixed;
109
+
}
110
+
111
+
.device .aphront-multi-column-inner {
131
112
display: block;
132
113
width: auto;
133
114
}
···
148
129
border: none;
149
130
}
150
131
151
-
.device-phone .aphront-multi-column-column-outer {
132
+
.device .aphront-multi-column-column-outer {
152
133
display: block;
153
134
border: none;
154
135
}
155
136
156
-
.device-phone .phui-box-shadow .aphront-multi-column-column-outer {
137
+
.device .phui-box-shadow .aphront-multi-column-column-outer {
157
138
padding-bottom: 20px;
158
139
border-bottom: 1px solid #e7e7e7;
159
140
}
160
141
161
-
.device-phone .phui-box-shadow .aphront-multi-colum-column-outer-last {
142
+
.device .phui-box-shadow .aphront-multi-colum-column-outer-last {
162
143
border: none;
163
144
padding-bottom: 0;
164
145
}
+2
-18
webroot/rsrc/css/phui/phui-workpanel-view.css
+2
-18
webroot/rsrc/css/phui/phui-workpanel-view.css
···
52
52
display: inline-block;
53
53
}
54
54
55
-
.aphront-multi-column-fixed .aphront-multi-column-1-up
56
-
.aphront-multi-column-column-outer .phui-workpanel-body,
57
-
.aphront-multi-column-fixed .aphront-multi-column-2-up
58
-
.aphront-multi-column-column-outer .phui-workpanel-body,
59
-
.aphront-multi-column-fixed .aphront-multi-column-3-up
60
-
.aphront-multi-column-column-outer .phui-workpanel-body {
55
+
.aphront-multi-column-fixed .phui-workpanel-body {
61
56
width: 300px;
62
57
}
63
58
64
-
.aphront-multi-column-fixed .aphront-multi-column-4-up
65
-
.aphront-multi-column-column-outer .phui-workpanel-body,
66
-
.aphront-multi-column-fixed .aphront-multi-column-5-up
67
-
.aphront-multi-column-column-outer .phui-workpanel-body,
68
-
.aphront-multi-column-fixed .aphront-multi-column-6-up
69
-
.aphront-multi-column-column-outer .phui-workpanel-body,
70
-
.aphront-multi-column-fixed .aphront-multi-column-7-up
71
-
.aphront-multi-column-column-outer .phui-workpanel-body {
72
-
width: 240px;
73
-
}
74
-
75
-
.device-phone .aphront-multi-column-outer
59
+
.device .aphront-multi-column-outer
76
60
div.aphront-multi-column-column-outer .phui-workpanel-body {
77
61
width: auto;
78
62
}