@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
Have home dashboards go to single column on narrow desktops
Summary: Ref T6723. Because of the sidenav, some dashboard layouts may perform poorly on more narrow desktop displays. This provides an additional media query and CSS rules.
Test Plan:
Move viewport to 1001 px, see desktop, move to 999 pixels, see tablet-like display.
{F248158}
{F248159}
{F248160}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T6723
Differential Revision: https://secure.phabricator.com/D10956
+32
-2
+2
-2
resources/celerity/map.php
+2
-2
resources/celerity/map.php
···
23
23
'rsrc/css/aphront/error-view.css' => '3462dbee',
24
24
'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
25
25
'rsrc/css/aphront/list-filter-view.css' => '2ae43867',
26
-
'rsrc/css/aphront/multi-column.css' => '1b95ab2e',
26
+
'rsrc/css/aphront/multi-column.css' => '6d72e772',
27
27
'rsrc/css/aphront/notification.css' => '9c279160',
28
28
'rsrc/css/aphront/pager-view.css' => '2e3539af',
29
29
'rsrc/css/aphront/panel-view.css' => '5846dfa2',
···
503
503
'aphront-dialog-view-css' => '4dbbe3bb',
504
504
'aphront-error-view-css' => '3462dbee',
505
505
'aphront-list-filter-view-css' => '2ae43867',
506
-
'aphront-multi-column-view-css' => '1b95ab2e',
506
+
'aphront-multi-column-view-css' => '6d72e772',
507
507
'aphront-pager-view-css' => '2e3539af',
508
508
'aphront-panel-view-css' => '5846dfa2',
509
509
'aphront-table-view-css' => 'b22b7216',
+30
webroot/rsrc/css/aphront/multi-column.css
+30
webroot/rsrc/css/aphront/multi-column.css
···
152
152
border: none;
153
153
padding-bottom: 0;
154
154
}
155
+
156
+
/* Make Dashboards reasonably display on homepage with 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 .aphront-multi-column-column-outer {
163
+
display: block;
164
+
border: none;
165
+
}
166
+
.device-desktop .aphront-multi-column-column.mlr {
167
+
margin: 0;
168
+
}
169
+
.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
170
+
.aphront-multi-column-column-outer.half {
171
+
width: auto;
172
+
margin: 0 0 16px;
173
+
}
174
+
.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
175
+
.aphront-multi-column-column-outer.thirds {
176
+
width: auto;
177
+
margin: 0 0 16px;
178
+
}
179
+
.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
180
+
.aphront-multi-column-column-outer.third {
181
+
width: auto;
182
+
margin: 0 0 16px;
183
+
}
184
+
}