@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
1/**
2 * @provides aphront-multi-column-view-css
3 */
4
5.aphront-multi-column-view {
6 width: 100%;
7}
8
9.device .aphront-multi-column-outer {
10 padding: 0;
11 margin: 0 auto;
12 width: 100%;
13}
14
15.aphront-multi-column-inner .aphront-multi-column-column-last,
16.device .aphront-multi-column-column {
17 margin: 0;
18}
19
20.device-desktop .phui-workboard-view-shadow .aphront-multi-column-inner
21 .aphront-multi-column-column-last {
22 margin-right: 8px;
23}
24
25.device .aphront-multi-column-outer
26 div.aphront-multi-column-column-outer {
27 width: auto;
28 margin-bottom: 16px;
29}
30
31.device .aphront-multi-column-fixed .aphront-multi-column-inner {
32 width: 100%;
33}
34
35.aphront-multi-column-fixed .aphront-multi-column-column-outer {
36 width: 300px;
37}
38
39/* flexible, but with a minimum */
40.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-1-up {
41 min-width: 200px;
42}
43
44.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-2-up {
45 min-width: 400px;
46}
47
48.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-3-up {
49 min-width: 600px;
50}
51
52.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-4-up {
53 min-width: 800px;
54}
55
56.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-5-up {
57 min-width: 1000px;
58}
59
60.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-6-up {
61 min-width: 1200px;
62}
63
64.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-7-up {
65 min-width: 1400px;
66}
67
68/* table division */
69.aphront-multi-column-fluid .aphront-multi-column-1-up
70 .aphront-multi-column-column-outer {
71 width: 100%;
72}
73
74.aphront-multi-column-fluid .aphront-multi-column-2-up
75 .aphront-multi-column-column-outer {
76 width: 50%;
77}
78
79.aphront-multi-column-fluid .aphront-multi-column-3-up
80 .aphront-multi-column-column-outer {
81 width: 33.3333%;
82}
83
84.aphront-multi-column-fluid .aphront-multi-column-4-up
85 .aphront-multi-column-column-outer {
86 width: 25%;
87}
88
89.aphront-multi-column-fluid .aphront-multi-column-5-up
90 .aphront-multi-column-column-outer {
91 width: 20%;
92}
93
94.aphront-multi-column-fluid .aphront-multi-column-6-up
95 .aphront-multi-column-column-outer {
96 width: 16.6666%;
97}
98
99.aphront-multi-column-fluid .aphront-multi-column-7-up
100 .aphront-multi-column-column-outer {
101 width: 14.2857%;
102}
103
104/* Shadow Panels */
105
106.aphront-multi-column-inner {
107 display: table;
108 width: 100%;
109}
110
111.device-desktop .aphront-multi-column-fixed .aphront-multi-column-inner {
112 margin: 0 0 12px 12px;
113}
114
115/* magic sauce */
116.aphront-multi-column-fluid .aphront-multi-column-inner {
117 table-layout: fixed;
118}
119
120.device .aphront-multi-column-inner {
121 display: block;
122 width: auto;
123}
124
125.aphront-multi-column-column-outer {
126 display: table-cell;
127 height: 100%;
128 vertical-align: top;
129}
130
131.phui-box-border .aphront-multi-column-column-outer {
132 border-right: 1px solid {$lightblueborder};
133 padding-left: 8px;
134 padding-right: 8px;
135}
136
137.phui-box-border .aphront-multi-colum-column-outer-last {
138 border: none;
139}
140
141.device .aphront-multi-column-column-outer {
142 display: block;
143 border: none;
144}
145
146.device .phui-box-border .aphront-multi-column-column-outer {
147 padding-bottom: 16px;
148 border-bottom: 1px solid #e7e7e7;
149}
150
151.device .phui-box-border .aphront-multi-colum-column-outer-last {
152 border: none;
153 padding-bottom: 0;
154}
155
156/* Make Dashboards reasonably display on homepage narrow widths */
157@media (max-width: 1000px) {
158 .device-desktop .dashboard-view .aphront-multi-column-inner {
159 display: block;
160 width: auto;
161 }
162 .device-desktop .dashboard-view .aphront-multi-column-column-outer {
163 display: block;
164 border: none;
165 }
166 .device-desktop .dashboard-view .aphront-multi-column-column.mlr {
167 margin: 0;
168 }
169 .device-desktop .dashboard-view .aphront-multi-column-fluid
170 .aphront-multi-column-2-up .aphront-multi-column-column-outer.half {
171 width: auto;
172 margin: 0 0 16px;
173 }
174 .device-desktop .dashboard-view .aphront-multi-column-fluid
175 .aphront-multi-column-2-up .aphront-multi-column-column-outer.thirds {
176 width: auto;
177 margin: 0 0 16px;
178 }
179 .device-desktop .dashboard-view .aphront-multi-column-fluid
180 .aphront-multi-column-2-up .aphront-multi-column-column-outer.third {
181 width: auto;
182 margin: 0 0 16px;
183 }
184}