Skip to content

Commit 8bcdf42

Browse files
author
epriestley
committed
Simplify ".device-phone X, .device-tablet X { ... }" rules
Summary: Add a ".device" rule which means "phone or tablet". Simplify about 5000 rules which were written ".device-phone X, device-tablet X { ... }". Test Plan: Browsed the site a bit without incident. Reviewers: chad Reviewed By: chad CC: aran Maniphest Tasks: T1960 Differential Revision: https://secure.phabricator.com/D4103
1 parent 8cff6ea commit 8bcdf42

11 files changed

+51
-98
lines changed

‎src/view/page/PhabricatorStandardPageView.php

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -287,10 +287,10 @@ protected function getBody() {
287287
// Try to guess the device resolution based on UA strings to avoid a flash
288288
// of incorrectly-styled content.
289289
$device_guess = 'device-desktop';
290-
if (preg_match('/iPhone|iPod/', $agent)) {
291-
$device_guess = 'device-phone';
292-
} else if (preg_match('/iPad/', $agent)) {
293-
$device_guess = 'device-tablet';
290+
if (preg_match('@iPhone|iPod|(Android.*Chrome/[.0-9]* Mobile)@', $agent)) {
291+
$device_guess = 'device-phone device';
292+
} else if (preg_match('@iPad|(Android.*Chrome/)@', $agent)) {
293+
$device_guess = 'device-tablet device';
294294
}
295295

296296
$classes = array(

‎webroot/rsrc/css/aphront/phabricator-nav-view.css

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,7 @@
3232
background-image: url(/rsrc/image/menu_texture.png);
3333
}
3434

35-
.device-tablet .phabricator-nav-local,
36-
.device-phone .phabricator-nav-local {
35+
.device .phabricator-nav-local {
3736
display: none;
3837
}
3938

@@ -58,8 +57,7 @@
5857
background-repeat: no-repeat;
5958
}
6059

61-
.device-tablet .phabricator-nav-drag,
62-
.device-phone .phabricator-nav-drag {
60+
.device .phabricator-nav-drag {
6361
display: none;
6462
}
6563

@@ -83,30 +81,25 @@
8381
margin-left: 2.5em !important;
8482
}
8583

86-
.device-tablet .phabricator-nav-col,
87-
.device-phone .phabricator-nav-col {
84+
.device .phabricator-nav-col {
8885
position: absolute;
8986
top: 0px;
9087
}
9188

92-
.device-tablet .phabricator-nav-local,
93-
.device-phone .phabricator-nav-local {
89+
.device .phabricator-nav-local {
9490
left: -300px;
9591
}
9692

97-
.device-tablet .phabricator-nav,
98-
.device-phone .phabricator-nav {
93+
.device .phabricator-nav {
9994
overflow-x: hidden;
10095
position: relative;
10196
}
10297

103-
.device-tablet .phabricator-nav-content,
104-
.device-phone .phabricator-nav-content {
98+
.device .phabricator-nav-content {
10599
width: 100%;
106100
}
107101

108-
.device-tablet .phabricator-nav-content,
109-
.device-phone .phabricator-nav-content {
102+
.device .phabricator-nav-content {
110103
margin-left: 0;
111104
position: relative;
112105
}

‎webroot/rsrc/css/application/base/main-menu-view.css

Lines changed: 22 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@
4444
background: 6px 9px url(/rsrc/image/header_logo.png) no-repeat;
4545
}
4646

47+
.device .phabricator-main-menu-logo {
48+
display: none;
49+
}
50+
4751
/* - Expand/Collapse Button ----------------------------------------------------
4852
4953
On phones, the menu switches to a vertical layout and uses a button to expand
@@ -85,8 +89,7 @@
8589
display: none;
8690
}
8791

88-
.device-tablet .phabricator-main-menu-expand-button,
89-
.device-phone .phabricator-main-menu-expand-button {
92+
.device .phabricator-main-menu-expand-button {
9093
display: block;
9194
}
9295

@@ -124,8 +127,7 @@
124127
margin-left: -150px;
125128
}
126129

127-
.device-tablet .phabricator-main-menu-search-target,
128-
.device-phone .phabricator-main-menu-search-target {
130+
.device .phabricator-main-menu-search-target {
129131
width: 100%;
130132
margin-left: -25px;
131133

@@ -135,8 +137,7 @@
135137
margin: 0 8px 0 50px;
136138
}
137139

138-
.device-tablet .phabricator-main-menu-search-container,
139-
.device-phone .phabricator-main-menu-search-container {
140+
.device .phabricator-main-menu-search-container {
140141
margin: 0 18px 0 60px;
141142
}
142143

@@ -235,8 +236,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
235236
display: inline-block;
236237
}
237238

238-
.device-tablet .phabricator-main-menu-alerts,
239-
.device-phone .phabricator-main-menu-alerts {
239+
.device .phabricator-main-menu-alerts {
240240
position: absolute;
241241
left: 60px;
242242
right: 60px;
@@ -296,43 +296,35 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
296296
297297
*/
298298

299-
.device-phone .phabricator-dark-menu,
300-
.device-tablet .phabricator-dark-menu,
301-
.device-phone .phabricator-dark-menu a.phabricator-menu-item-type-link,
302-
.device-tablet .phabricator-dark-menu a.phabricator-menu-item-type-link {
299+
.device .phabricator-dark-menu,
300+
.device .phabricator-dark-menu a.phabricator-menu-item-type-link{
303301
color: #ffffff;
304302
}
305303

306-
.device-phone .phabricator-dark-menu .phabricator-menu-item-view,
307-
.device-tablet .phabricator-dark-menu .phabricator-menu-item-view {
304+
.device .phabricator-dark-menu .phabricator-menu-item-view {
308305
display: block;
309306
padding: 4px 0;
310307
}
311308

312-
.device-phone .phabricator-dark-menu .phabricator-menu-item-type-label,
313-
.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-label {
309+
.device .phabricator-dark-menu .phabricator-menu-item-type-label {
314310
text-transform: uppercase;
315311
font-size: 11px;
316312
background-color: #151719;
317313
padding: 0 0 0 12px;
318314
height: 24px;
319315
}
320316

321-
.device-phone .phabricator-dark-menu .phabricator-menu-item-type-spacer,
322-
.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-spacer {
317+
.device .phabricator-dark-menu .phabricator-menu-item-type-spacer {
323318
display: none;
324319
}
325320

326-
.device-phone .phabricator-dark-menu .phabricator-menu-item-type-label
327-
.phabricator-menu-item-name,
328-
.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-label
321+
.device .phabricator-dark-menu .phabricator-menu-item-type-label
329322
.phabricator-menu-item-name {
330323
display: block;
331324
padding: 6px 0 0;
332325
}
333326

334-
.device-phone .phabricator-dark-menu .phabricator-menu-item-type-link,
335-
.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-link {
327+
.device .phabricator-dark-menu .phabricator-menu-item-type-link {
336328
border-width: 1px 0;
337329
border-style: solid;
338330
border-color: #34373b transparent #282c2d;
@@ -357,25 +349,20 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
357349
background-size: 26px 26px;
358350
}
359351

360-
.device-phone .phabricator-core-menu,
361-
.device-tablet .phabricator-core-menu {
352+
.device .phabricator-core-menu {
362353
display: none;
363354
}
364355

365-
.device-phone .phabricator-core-menu-expanded .phabricator-core-menu,
366-
.device-tablet .phabricator-core-menu-expanded .phabricator-core-menu {
356+
.device .phabricator-core-menu-expanded .phabricator-core-menu {
367357
display: block;
368358
}
369359

370-
.device-phone .phabricator-core-menu .phabricator-menu-item-type-link,
371-
.device-tablet .phabricator-core-menu .phabricator-menu-item-type-link {
360+
.device .phabricator-core-menu .phabricator-menu-item-type-link {
372361
font-size: 15px;
373362
min-height: 30px;
374363
}
375364

376-
.device-phone .phabricator-core-menu
377-
.phabricator-menu-item-type-link .phabricator-menu-item-name,
378-
.device-tablet .phabricator-core-menu
365+
.device .phabricator-core-menu
379366
.phabricator-menu-item-type-link .phabricator-menu-item-name {
380367
margin-left: 40px;
381368
line-height: 28px;
@@ -409,8 +396,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
409396
left: 6px;
410397
}
411398

412-
.device-phone .phabricator-core-menu-icon,
413-
.device-tablet .phabricator-core-menu-icon {
399+
.device .phabricator-core-menu-icon {
414400
left: 6px;
415401
}
416402

@@ -428,10 +414,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
428414
429415
*/
430416

431-
.device-phone .phabricator-application-menu-expanded
432-
.phabricator-application-menu,
433-
.device-tablet .phabricator-application-menu-expanded
434-
.phabricator-application-menu {
417+
.device .phabricator-application-menu-expanded .phabricator-application-menu {
435418
display: block;
436419
padding-top: 44px;
437420
}
@@ -445,10 +428,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
445428
padding-left: 12px;
446429
}
447430

448-
.device-phone .phabricator-application-menu-expanded
449-
.phabricator-application-menu,
450-
.device-tablet .phabricator-application-menu-expanded
451-
.phabricator-application-menu {
431+
.device .phabricator-application-menu-expanded .phabricator-application-menu {
452432
display: block;
453433
padding-top: 44px;
454434
}

‎webroot/rsrc/css/application/base/notification-menu.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@
2020
border-top-width: 0;
2121
}
2222

23-
.device-tablet .phabricator-notification-menu,
24-
.device-phone .phabricator-notification-menu {
23+
.device .phabricator-notification-menu {
2524
border-bottom: 1px solid #222222;
2625
}
2726

‎webroot/rsrc/css/application/phame/phame.css

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,7 @@
2929
padding: 0px 8px 12px 8px;
3030
}
3131

32-
.device-tablet .blog-post-list,
33-
.device-phone .blog-post-list {
32+
.device .blog-post-list {
3433
float: none;
3534
width: 90%;
3635
margin: 16px auto;
@@ -43,8 +42,7 @@
4342
padding: 0px 16px 0px 16px;
4443
}
4544

46-
.device-tablet .blog-post-list-full,
47-
.device-phone .blog-post-list-full {
45+
.device .blog-post-list-full {
4846
float: none;
4947
margin: 16px auto;
5048
}
@@ -56,8 +54,7 @@
5654
margin: 16px 16px 16px 0px;
5755
}
5856

59-
.device-tablet .blog-detail,
60-
.device-phone .blog-detail {
57+
.device .blog-detail {
6158
float: none;
6259
margin: 16px auto;
6360
width: 90%;

‎webroot/rsrc/css/layout/phabricator-action-list-view.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@
2020
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10);
2121
}
2222

23-
.device-tablet .phabricator-action-list-view,
24-
.device-phone .phabricator-action-list-view {
23+
.device .phabricator-action-list-view {
2524
background: #f3f3f3;
2625
border-top: 1px solid #dcdcdc;
2726
padding: .5em 0;

‎webroot/rsrc/css/layout/phabricator-crumbs-view.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
* @provides phabricator-crumbs-view-css
33
*/
44

5-
.device-phone .phabricator-crumbs-view,
6-
.device-tablet .phabricator-crumbs-view {
5+
.device .phabricator-crumbs-view {
76
display: none;
87
}
98

‎webroot/rsrc/css/layout/phabricator-form-view.css

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,23 @@
1414
}
1515

1616

17-
.device-tablet .phabricator-form-view .aphront-form-control .aphront-form-label,
18-
.device-phone .phabricator-form-view .aphront-form-control .aphront-form-label {
17+
.device .phabricator-form-view .aphront-form-control .aphront-form-label {
1918
display: block;
2019
float: none;
2120
text-align: left;
2221
margin: 0;
2322
padding: 0;
2423
}
2524

26-
.device-tablet .phabricator-form-view .aphront-form-control
27-
.aphront-form-caption,
28-
.device-phone .phabricator-form-view .aphront-form-control
29-
.aphront-form-caption {
25+
.device .phabricator-form-view .aphront-form-control .aphront-form-caption {
3026
display: block;
3127
float: none;
3228
text-align: left;
3329
margin: 0;
3430
padding: 0;
3531
}
3632

37-
.device-tablet .phabricator-form-view .aphront-form-control
38-
.aphront-form-input,
39-
.device-phone .phabricator-form-view .aphront-form-control
40-
.aphront-form-input {
33+
.device .phabricator-form-view .aphront-form-control .aphront-form-input {
4134
float: none;
4235
display: block;
4336
text-align: left;
@@ -46,8 +39,7 @@
4639
padding: 0;
4740
}
4841

49-
.device-tablet .phabricator-form-view .aphront-form-control .aphront-form-error,
50-
.device-phone .phabricator-form-view .aphront-form-control .aphront-form-error {
42+
.device .phabricator-form-view .aphront-form-control .aphront-form-error {
5143
float: none;
5244
text-align: left;
5345
display: block;

‎webroot/rsrc/css/layout/phabricator-property-list-view.css

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@
1919
padding: 1em 0 0.5em;
2020
}
2121

22-
.device-tablet .phabricator-property-list-container,
23-
.device-phone .phabricator-property-list-container {
22+
.device .phabricator-property-list-container {
2423
padding: .5em 0;
2524
}
2625

@@ -40,8 +39,7 @@
4039
margin-bottom: .5em;
4140
}
4241

43-
.device-tablet .phabricator-property-list-key,
44-
.device-phone .phabricator-property-list-key {
42+
.device .phabricator-property-list-key {
4543
padding-left: .5em;
4644
}
4745

@@ -57,8 +55,7 @@
5755
margin-bottom: .5em;
5856
}
5957

60-
.device-tablet .phabricator-property-list-value,
61-
.device-phone .phabricator-property-list-value {
58+
.device .phabricator-property-list-value {
6259
padding-left: 1.5em;
6360
margin-bottom: .5em;
6461
}

0 commit comments

Comments
 (0)