mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-22 14:52:41 +01:00
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
This commit is contained in:
parent
8cff6ea9cb
commit
8bcdf42762
11 changed files with 51 additions and 98 deletions
|
@ -287,10 +287,10 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
|
|||
// Try to guess the device resolution based on UA strings to avoid a flash
|
||||
// of incorrectly-styled content.
|
||||
$device_guess = 'device-desktop';
|
||||
if (preg_match('/iPhone|iPod/', $agent)) {
|
||||
$device_guess = 'device-phone';
|
||||
} else if (preg_match('/iPad/', $agent)) {
|
||||
$device_guess = 'device-tablet';
|
||||
if (preg_match('@iPhone|iPod|(Android.*Chrome/[.0-9]* Mobile)@', $agent)) {
|
||||
$device_guess = 'device-phone device';
|
||||
} else if (preg_match('@iPad|(Android.*Chrome/)@', $agent)) {
|
||||
$device_guess = 'device-tablet device';
|
||||
}
|
||||
|
||||
$classes = array(
|
||||
|
|
|
@ -32,8 +32,7 @@
|
|||
background-image: url(/rsrc/image/menu_texture.png);
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-nav-local,
|
||||
.device-phone .phabricator-nav-local {
|
||||
.device .phabricator-nav-local {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -58,8 +57,7 @@
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-nav-drag,
|
||||
.device-phone .phabricator-nav-drag {
|
||||
.device .phabricator-nav-drag {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -83,30 +81,25 @@
|
|||
margin-left: 2.5em !important;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-nav-col,
|
||||
.device-phone .phabricator-nav-col {
|
||||
.device .phabricator-nav-col {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-nav-local,
|
||||
.device-phone .phabricator-nav-local {
|
||||
.device .phabricator-nav-local {
|
||||
left: -300px;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-nav,
|
||||
.device-phone .phabricator-nav {
|
||||
.device .phabricator-nav {
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-nav-content,
|
||||
.device-phone .phabricator-nav-content {
|
||||
.device .phabricator-nav-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-nav-content,
|
||||
.device-phone .phabricator-nav-content {
|
||||
.device .phabricator-nav-content {
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
@ -44,6 +44,10 @@
|
|||
background: 6px 9px url(/rsrc/image/header_logo.png) no-repeat;
|
||||
}
|
||||
|
||||
.device .phabricator-main-menu-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* - Expand/Collapse Button ----------------------------------------------------
|
||||
|
||||
On phones, the menu switches to a vertical layout and uses a button to expand
|
||||
|
@ -85,8 +89,7 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-main-menu-expand-button,
|
||||
.device-phone .phabricator-main-menu-expand-button {
|
||||
.device .phabricator-main-menu-expand-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
@ -124,8 +127,7 @@
|
|||
margin-left: -150px;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-main-menu-search-target,
|
||||
.device-phone .phabricator-main-menu-search-target {
|
||||
.device .phabricator-main-menu-search-target {
|
||||
width: 100%;
|
||||
margin-left: -25px;
|
||||
|
||||
|
@ -135,8 +137,7 @@
|
|||
margin: 0 8px 0 50px;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-main-menu-search-container,
|
||||
.device-phone .phabricator-main-menu-search-container {
|
||||
.device .phabricator-main-menu-search-container {
|
||||
margin: 0 18px 0 60px;
|
||||
}
|
||||
|
||||
|
@ -235,8 +236,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-main-menu-alerts,
|
||||
.device-phone .phabricator-main-menu-alerts {
|
||||
.device .phabricator-main-menu-alerts {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
right: 60px;
|
||||
|
@ -296,21 +296,17 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
|
|||
|
||||
*/
|
||||
|
||||
.device-phone .phabricator-dark-menu,
|
||||
.device-tablet .phabricator-dark-menu,
|
||||
.device-phone .phabricator-dark-menu a.phabricator-menu-item-type-link,
|
||||
.device-tablet .phabricator-dark-menu a.phabricator-menu-item-type-link {
|
||||
.device .phabricator-dark-menu,
|
||||
.device .phabricator-dark-menu a.phabricator-menu-item-type-link{
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-dark-menu .phabricator-menu-item-view,
|
||||
.device-tablet .phabricator-dark-menu .phabricator-menu-item-view {
|
||||
.device .phabricator-dark-menu .phabricator-menu-item-view {
|
||||
display: block;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-dark-menu .phabricator-menu-item-type-label,
|
||||
.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-label {
|
||||
.device .phabricator-dark-menu .phabricator-menu-item-type-label {
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
background-color: #151719;
|
||||
|
@ -318,21 +314,17 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
|
|||
height: 24px;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-dark-menu .phabricator-menu-item-type-spacer,
|
||||
.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-spacer {
|
||||
.device .phabricator-dark-menu .phabricator-menu-item-type-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-dark-menu .phabricator-menu-item-type-label
|
||||
.phabricator-menu-item-name,
|
||||
.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-label
|
||||
.device .phabricator-dark-menu .phabricator-menu-item-type-label
|
||||
.phabricator-menu-item-name {
|
||||
display: block;
|
||||
padding: 6px 0 0;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-dark-menu .phabricator-menu-item-type-link,
|
||||
.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-link {
|
||||
.device .phabricator-dark-menu .phabricator-menu-item-type-link {
|
||||
border-width: 1px 0;
|
||||
border-style: solid;
|
||||
border-color: #34373b transparent #282c2d;
|
||||
|
@ -357,25 +349,20 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
|
|||
background-size: 26px 26px;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu,
|
||||
.device-tablet .phabricator-core-menu {
|
||||
.device .phabricator-core-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu-expanded .phabricator-core-menu,
|
||||
.device-tablet .phabricator-core-menu-expanded .phabricator-core-menu {
|
||||
.device .phabricator-core-menu-expanded .phabricator-core-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu .phabricator-menu-item-type-link,
|
||||
.device-tablet .phabricator-core-menu .phabricator-menu-item-type-link {
|
||||
.device .phabricator-core-menu .phabricator-menu-item-type-link {
|
||||
font-size: 15px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu
|
||||
.phabricator-menu-item-type-link .phabricator-menu-item-name,
|
||||
.device-tablet .phabricator-core-menu
|
||||
.device .phabricator-core-menu
|
||||
.phabricator-menu-item-type-link .phabricator-menu-item-name {
|
||||
margin-left: 40px;
|
||||
line-height: 28px;
|
||||
|
@ -409,8 +396,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
|
|||
left: 6px;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu-icon,
|
||||
.device-tablet .phabricator-core-menu-icon {
|
||||
.device .phabricator-core-menu-icon {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
|
@ -428,10 +414,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
|
|||
|
||||
*/
|
||||
|
||||
.device-phone .phabricator-application-menu-expanded
|
||||
.phabricator-application-menu,
|
||||
.device-tablet .phabricator-application-menu-expanded
|
||||
.phabricator-application-menu {
|
||||
.device .phabricator-application-menu-expanded .phabricator-application-menu {
|
||||
display: block;
|
||||
padding-top: 44px;
|
||||
}
|
||||
|
@ -445,10 +428,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
|
|||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-application-menu-expanded
|
||||
.phabricator-application-menu,
|
||||
.device-tablet .phabricator-application-menu-expanded
|
||||
.phabricator-application-menu {
|
||||
.device .phabricator-application-menu-expanded .phabricator-application-menu {
|
||||
display: block;
|
||||
padding-top: 44px;
|
||||
}
|
||||
|
|
|
@ -20,8 +20,7 @@
|
|||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-notification-menu,
|
||||
.device-phone .phabricator-notification-menu {
|
||||
.device .phabricator-notification-menu {
|
||||
border-bottom: 1px solid #222222;
|
||||
}
|
||||
|
||||
|
|
|
@ -29,8 +29,7 @@
|
|||
padding: 0px 8px 12px 8px;
|
||||
}
|
||||
|
||||
.device-tablet .blog-post-list,
|
||||
.device-phone .blog-post-list {
|
||||
.device .blog-post-list {
|
||||
float: none;
|
||||
width: 90%;
|
||||
margin: 16px auto;
|
||||
|
@ -43,8 +42,7 @@
|
|||
padding: 0px 16px 0px 16px;
|
||||
}
|
||||
|
||||
.device-tablet .blog-post-list-full,
|
||||
.device-phone .blog-post-list-full {
|
||||
.device .blog-post-list-full {
|
||||
float: none;
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
@ -56,8 +54,7 @@
|
|||
margin: 16px 16px 16px 0px;
|
||||
}
|
||||
|
||||
.device-tablet .blog-detail,
|
||||
.device-phone .blog-detail {
|
||||
.device .blog-detail {
|
||||
float: none;
|
||||
margin: 16px auto;
|
||||
width: 90%;
|
||||
|
|
|
@ -20,8 +20,7 @@
|
|||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-action-list-view,
|
||||
.device-phone .phabricator-action-list-view {
|
||||
.device .phabricator-action-list-view {
|
||||
background: #f3f3f3;
|
||||
border-top: 1px solid #dcdcdc;
|
||||
padding: .5em 0;
|
||||
|
|
|
@ -2,8 +2,7 @@
|
|||
* @provides phabricator-crumbs-view-css
|
||||
*/
|
||||
|
||||
.device-phone .phabricator-crumbs-view,
|
||||
.device-tablet .phabricator-crumbs-view {
|
||||
.device .phabricator-crumbs-view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -14,8 +14,7 @@
|
|||
}
|
||||
|
||||
|
||||
.device-tablet .phabricator-form-view .aphront-form-control .aphront-form-label,
|
||||
.device-phone .phabricator-form-view .aphront-form-control .aphront-form-label {
|
||||
.device .phabricator-form-view .aphront-form-control .aphront-form-label {
|
||||
display: block;
|
||||
float: none;
|
||||
text-align: left;
|
||||
|
@ -23,10 +22,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-form-view .aphront-form-control
|
||||
.aphront-form-caption,
|
||||
.device-phone .phabricator-form-view .aphront-form-control
|
||||
.aphront-form-caption {
|
||||
.device .phabricator-form-view .aphront-form-control .aphront-form-caption {
|
||||
display: block;
|
||||
float: none;
|
||||
text-align: left;
|
||||
|
@ -34,10 +30,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-form-view .aphront-form-control
|
||||
.aphront-form-input,
|
||||
.device-phone .phabricator-form-view .aphront-form-control
|
||||
.aphront-form-input {
|
||||
.device .phabricator-form-view .aphront-form-control .aphront-form-input {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
|
@ -46,8 +39,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-form-view .aphront-form-control .aphront-form-error,
|
||||
.device-phone .phabricator-form-view .aphront-form-control .aphront-form-error {
|
||||
.device .phabricator-form-view .aphront-form-control .aphront-form-error {
|
||||
float: none;
|
||||
text-align: left;
|
||||
display: block;
|
||||
|
|
|
@ -19,8 +19,7 @@
|
|||
padding: 1em 0 0.5em;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-property-list-container,
|
||||
.device-phone .phabricator-property-list-container {
|
||||
.device .phabricator-property-list-container {
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
|
@ -40,8 +39,7 @@
|
|||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-property-list-key,
|
||||
.device-phone .phabricator-property-list-key {
|
||||
.device .phabricator-property-list-key {
|
||||
padding-left: .5em;
|
||||
}
|
||||
|
||||
|
@ -57,8 +55,7 @@
|
|||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-property-list-value,
|
||||
.device-phone .phabricator-property-list-value {
|
||||
.device .phabricator-property-list-value {
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
|
|
@ -105,8 +105,7 @@
|
|||
border-color: #009966;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-timeline-event-view,
|
||||
.device-phone .phabricator-timeline-event-view {
|
||||
.device .phabricator-timeline-event-view {
|
||||
min-height: 25px;
|
||||
position: relative;
|
||||
margin-left: 3px;
|
||||
|
@ -116,21 +115,18 @@
|
|||
border-right-style: solid;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-timeline-image,
|
||||
.device-phone .phabricator-timeline-image {
|
||||
.device .phabricator-timeline-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-timeline-title,
|
||||
.device-phone .phabricator-timeline-title {
|
||||
.device .phabricator-timeline-title {
|
||||
line-height: 25px;
|
||||
min-height: 25px;
|
||||
background: #f7f7f7;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-timeline-spacer,
|
||||
.device-phone .phabricator-timeline-spacer {
|
||||
.device .phabricator-timeline-spacer {
|
||||
min-height: 8px;
|
||||
border-width: 0;
|
||||
}
|
||||
|
|
|
@ -39,6 +39,7 @@ JX.behavior('device', function(config) {
|
|||
JX.DOM.alterClass(e, 'device-phone', (device == 'phone'));
|
||||
JX.DOM.alterClass(e, 'device-tablet', (device == 'tablet'));
|
||||
JX.DOM.alterClass(e, 'device-desktop', (device == 'desktop'));
|
||||
JX.DOM.alterClass(e, 'device', (device != 'desktop'));
|
||||
|
||||
JX.Stratcom.invoke('phabricator-device-change', null, device);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue