From 117589c160f61e31dfd8277f20e0fbccd1b50a58 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sat, 19 Jan 2013 14:30:26 -0800 Subject: [PATCH] Clean up Login, Responsive Forms Summary: Removes the panel-view on login and adds additonal responsive styles for mobile forms. Test Plan: View in mobile browser, resize page. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D4530 --- src/__celerity_resource_map__.php | 90 +++++++++---------- .../controller/PhabricatorLoginController.php | 4 +- .../controller/HeraldRuleController.php | 1 - .../ManiphestTaskEditController.php | 1 + webroot/rsrc/css/aphront/form-view.css | 26 ++++++ webroot/rsrc/css/aphront/list-filter-view.css | 6 ++ webroot/rsrc/css/aphront/panel-view.css | 8 +- .../rsrc/css/application/herald/herald.css | 10 ++- .../js/application/herald/HeraldRuleEditor.js | 1 - 9 files changed, 95 insertions(+), 52 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index bdd59e9585..84b3333a87 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -611,7 +611,7 @@ celerity_register_resource_map(array( ), 'aphront-form-view-css' => array( - 'uri' => '/res/bdc0b393/rsrc/css/aphront/form-view.css', + 'uri' => '/res/45162273/rsrc/css/aphront/form-view.css', 'type' => 'css', 'requires' => array( @@ -638,7 +638,7 @@ celerity_register_resource_map(array( ), 'aphront-list-filter-view-css' => array( - 'uri' => '/res/f6d419df/rsrc/css/aphront/list-filter-view.css', + 'uri' => '/res/e783d6e1/rsrc/css/aphront/list-filter-view.css', 'type' => 'css', 'requires' => array( @@ -656,7 +656,7 @@ celerity_register_resource_map(array( ), 'aphront-panel-view-css' => array( - 'uri' => '/res/2bafebac/rsrc/css/aphront/panel-view.css', + 'uri' => '/res/e4ad41d7/rsrc/css/aphront/panel-view.css', 'type' => 'css', 'requires' => array( @@ -861,7 +861,7 @@ celerity_register_resource_map(array( ), 'herald-css' => array( - 'uri' => '/res/5051f3ab/rsrc/css/application/herald/herald.css', + 'uri' => '/res/2150a55d/rsrc/css/application/herald/herald.css', 'type' => 'css', 'requires' => array( @@ -870,7 +870,7 @@ celerity_register_resource_map(array( ), 'herald-rule-editor' => array( - 'uri' => '/res/3a2979de/rsrc/js/application/herald/HeraldRuleEditor.js', + 'uri' => '/res/f35d7e23/rsrc/js/application/herald/HeraldRuleEditor.js', 'type' => 'js', 'requires' => array( @@ -3229,7 +3229,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - '7e7a7582' => + '6191f287' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -3273,7 +3273,7 @@ celerity_register_resource_map(array( 36 => 'phabricator-object-item-list-view-css', 37 => 'global-drag-and-drop-css', ), - 'uri' => '/res/pkg/7e7a7582/core.pkg.css', + 'uri' => '/res/pkg/6191f287/core.pkg.css', 'type' => 'css', ), 'c90b892e' => @@ -3463,19 +3463,19 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => '2a1ed97f', - 'aphront-crumbs-view-css' => '7e7a7582', - 'aphront-dialog-view-css' => '7e7a7582', - 'aphront-error-view-css' => '7e7a7582', - 'aphront-form-view-css' => '7e7a7582', + 'aphront-crumbs-view-css' => '6191f287', + 'aphront-dialog-view-css' => '6191f287', + 'aphront-error-view-css' => '6191f287', + 'aphront-form-view-css' => '6191f287', 'aphront-headsup-action-list-view-css' => 'ec01d039', - 'aphront-headsup-view-css' => '7e7a7582', - 'aphront-list-filter-view-css' => '7e7a7582', - 'aphront-pager-view-css' => '7e7a7582', - 'aphront-panel-view-css' => '7e7a7582', - 'aphront-table-view-css' => '7e7a7582', - 'aphront-tokenizer-control-css' => '7e7a7582', - 'aphront-tooltip-css' => '7e7a7582', - 'aphront-typeahead-control-css' => '7e7a7582', + 'aphront-headsup-view-css' => '6191f287', + 'aphront-list-filter-view-css' => '6191f287', + 'aphront-pager-view-css' => '6191f287', + 'aphront-panel-view-css' => '6191f287', + 'aphront-table-view-css' => '6191f287', + 'aphront-tokenizer-control-css' => '6191f287', + 'aphront-tooltip-css' => '6191f287', + 'aphront-typeahead-control-css' => '6191f287', 'differential-changeset-view-css' => 'ec01d039', 'differential-core-view-css' => 'ec01d039', 'differential-inline-comment-editor' => 'ac53d36a', @@ -3489,7 +3489,7 @@ celerity_register_resource_map(array( 'differential-table-of-contents-css' => 'ec01d039', 'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88', - 'global-drag-and-drop-css' => '7e7a7582', + 'global-drag-and-drop-css' => '6191f287', 'inline-comment-summary-css' => 'ec01d039', 'javelin-aphlict' => 'c90b892e', 'javelin-behavior' => 'fbeded59', @@ -3559,48 +3559,48 @@ celerity_register_resource_map(array( 'javelin-util' => 'fbeded59', 'javelin-vector' => 'fbeded59', 'javelin-workflow' => 'fbeded59', - 'lightbox-attachment-css' => '7e7a7582', + 'lightbox-attachment-css' => '6191f287', 'maniphest-task-summary-css' => '2a1ed97f', 'maniphest-transaction-detail-css' => '2a1ed97f', 'phabricator-busy' => 'c90b892e', 'phabricator-content-source-view-css' => 'ec01d039', - 'phabricator-core-buttons-css' => '7e7a7582', - 'phabricator-core-css' => '7e7a7582', - 'phabricator-crumbs-view-css' => '7e7a7582', - 'phabricator-directory-css' => '7e7a7582', + 'phabricator-core-buttons-css' => '6191f287', + 'phabricator-core-css' => '6191f287', + 'phabricator-crumbs-view-css' => '6191f287', + 'phabricator-directory-css' => '6191f287', 'phabricator-drag-and-drop-file-upload' => 'ac53d36a', 'phabricator-dropdown-menu' => 'c90b892e', 'phabricator-file-upload' => 'c90b892e', - 'phabricator-filetree-view-css' => '7e7a7582', - 'phabricator-flag-css' => '7e7a7582', - 'phabricator-form-view-css' => '7e7a7582', - 'phabricator-header-view-css' => '7e7a7582', - 'phabricator-jump-nav' => '7e7a7582', + 'phabricator-filetree-view-css' => '6191f287', + 'phabricator-flag-css' => '6191f287', + 'phabricator-form-view-css' => '6191f287', + 'phabricator-header-view-css' => '6191f287', + 'phabricator-jump-nav' => '6191f287', 'phabricator-keyboard-shortcut' => 'c90b892e', 'phabricator-keyboard-shortcut-manager' => 'c90b892e', - 'phabricator-main-menu-view' => '7e7a7582', + 'phabricator-main-menu-view' => '6191f287', 'phabricator-menu-item' => 'c90b892e', - 'phabricator-nav-view-css' => '7e7a7582', + 'phabricator-nav-view-css' => '6191f287', 'phabricator-notification' => 'c90b892e', - 'phabricator-notification-css' => '7e7a7582', - 'phabricator-notification-menu-css' => '7e7a7582', - 'phabricator-object-item-list-view-css' => '7e7a7582', + 'phabricator-notification-css' => '6191f287', + 'phabricator-notification-menu-css' => '6191f287', + 'phabricator-object-item-list-view-css' => '6191f287', 'phabricator-object-selector-css' => 'ec01d039', 'phabricator-paste-file-upload' => 'c90b892e', 'phabricator-prefab' => 'c90b892e', 'phabricator-project-tag-css' => '2a1ed97f', - 'phabricator-remarkup-css' => '7e7a7582', + 'phabricator-remarkup-css' => '6191f287', 'phabricator-shaped-request' => 'ac53d36a', - 'phabricator-side-menu-view-css' => '7e7a7582', - 'phabricator-standard-page-view' => '7e7a7582', + 'phabricator-side-menu-view-css' => '6191f287', + 'phabricator-standard-page-view' => '6191f287', 'phabricator-textareautils' => 'c90b892e', 'phabricator-tooltip' => 'c90b892e', - 'phabricator-transaction-view-css' => '7e7a7582', - 'phabricator-zindex-css' => '7e7a7582', - 'sprite-apps-large-css' => '7e7a7582', - 'sprite-gradient-css' => '7e7a7582', - 'sprite-icon-css' => '7e7a7582', - 'sprite-menu-css' => '7e7a7582', - 'syntax-highlighting-css' => '7e7a7582', + 'phabricator-transaction-view-css' => '6191f287', + 'phabricator-zindex-css' => '6191f287', + 'sprite-apps-large-css' => '6191f287', + 'sprite-gradient-css' => '6191f287', + 'sprite-icon-css' => '6191f287', + 'sprite-menu-css' => '6191f287', + 'syntax-highlighting-css' => '6191f287', ), )); diff --git a/src/applications/auth/controller/PhabricatorLoginController.php b/src/applications/auth/controller/PhabricatorLoginController.php index 9f4fa1f8ec..6bc87c5aab 100644 --- a/src/applications/auth/controller/PhabricatorLoginController.php +++ b/src/applications/auth/controller/PhabricatorLoginController.php @@ -282,6 +282,7 @@ final class PhabricatorLoginController $panel = new AphrontPanelView(); $panel->setWidth(AphrontPanelView::WIDTH_FORM); + $panel->setNoBackground(); foreach ($forms as $name => $form) { $panel->appendChild('

'.$name.'

'); $panel->appendChild($form); @@ -290,7 +291,7 @@ final class PhabricatorLoginController $login_message = PhabricatorEnv::getEnvConfig('auth.login-message'); - return $this->buildStandardPageResponse( + return $this->buildApplicationPage( array( $error_view, $login_message, @@ -298,6 +299,7 @@ final class PhabricatorLoginController ), array( 'title' => 'Login', + 'device' => true )); } diff --git a/src/applications/herald/controller/HeraldRuleController.php b/src/applications/herald/controller/HeraldRuleController.php index 81b0bad2f3..998e31cca7 100644 --- a/src/applications/herald/controller/HeraldRuleController.php +++ b/src/applications/herald/controller/HeraldRuleController.php @@ -175,7 +175,6 @@ final class HeraldRuleController extends HeraldController { $rule->getID() ? pht('Edit Herald Rule') : pht('Create Herald Rule')); - $panel->setWidth(AphrontPanelView::WIDTH_WIDE); $panel->appendChild($form); $panel->setNoBackground(); diff --git a/src/applications/maniphest/controller/ManiphestTaskEditController.php b/src/applications/maniphest/controller/ManiphestTaskEditController.php index f00f8a2e70..fbf96475cf 100644 --- a/src/applications/maniphest/controller/ManiphestTaskEditController.php +++ b/src/applications/maniphest/controller/ManiphestTaskEditController.php @@ -512,6 +512,7 @@ final class ManiphestTaskEditController extends ManiphestController { $panel->setWidth(AphrontPanelView::WIDTH_FULL); $panel->setHeader($header_name); $panel->appendChild($form); + $panel->setNoBackground(); $description_preview_panel = '
diff --git a/webroot/rsrc/css/aphront/form-view.css b/webroot/rsrc/css/aphront/form-view.css index 68726d8ebe..6566e36334 100644 --- a/webroot/rsrc/css/aphront/form-view.css +++ b/webroot/rsrc/css/aphront/form-view.css @@ -25,12 +25,25 @@ color: #666666; } +.device-phone .aphront-form-view label.aphront-form-label { + display: block; + float: none; + text-align: left; + width: 100%; +} + .aphront-form-input { margin-left: 20%; margin-right: 25%; width: 55%; } +.device-phone .aphront-form-input { + margin-left: 0%; + margin-right: 0%; + width: 100%; +} + .aphront-form-control-text .aphront-form-input input, .aphront-form-control-password .aphront-form-input input { font-size: 13px; @@ -51,6 +64,15 @@ padding-top: 4px; } +.device-phone .aphront-form-error { + float: none; + width: 100%; +} + +.device-phone .aphront-form-drag-and-drop-upload { + display: none; +} + .aphront-form-required { font-weight: normal; color: #888888; @@ -105,6 +127,10 @@ margin-left: 20%; } +.device-phone .aphront-form-view .aphront-form-caption { + margin-right: 0%; +} + /* override for when inside an aphront-panel-view */ .aphront-panel-view .aphront-form-view h1 { padding: 0em 0em .8em 0em; diff --git a/webroot/rsrc/css/aphront/list-filter-view.css b/webroot/rsrc/css/aphront/list-filter-view.css index c1dad81530..da6b24c987 100644 --- a/webroot/rsrc/css/aphront/list-filter-view.css +++ b/webroot/rsrc/css/aphront/list-filter-view.css @@ -27,3 +27,9 @@ margin-left: 13%; margin-right: 17%; } + +.device-phone .aphront-list-filter-view-controls .aphront-form-view .aphront-form-input { + width: 98%; + margin-left: 0%; + margin-right: 0%; +} diff --git a/webroot/rsrc/css/aphront/panel-view.css b/webroot/rsrc/css/aphront/panel-view.css index 8239365b06..11c5a760a0 100644 --- a/webroot/rsrc/css/aphront/panel-view.css +++ b/webroot/rsrc/css/aphront/panel-view.css @@ -11,6 +11,10 @@ margin: 20px 20px 40px 20px; } +.device-phone .aphront-panel-view { + margin: 20px 10px 40px 10px; +} + .aphront-unpadded-panel-view { padding: 0; } @@ -52,13 +56,13 @@ font-size: 13px; } -.aphront-panel-width-form { +.device-desktop .aphront-panel-width-form { width: 720px; margin-right: auto; margin-left: auto; } -.aphront-panel-width-wide { +.device-desktop .aphront-panel-width-wide { width: 1080px; margin-right: auto; margin-left: auto; diff --git a/webroot/rsrc/css/application/herald/herald.css b/webroot/rsrc/css/application/herald/herald.css index f8867e9934..2546a08284 100644 --- a/webroot/rsrc/css/application/herald/herald.css +++ b/webroot/rsrc/css/application/herald/herald.css @@ -8,7 +8,11 @@ } .herald-condition-table select { - width: 250px; + width: 160px; +} + +.device-phone .herald-condition-table select { + width: 90px; } .herald-action-table td, @@ -23,7 +27,9 @@ .herald-action-table td input, .herald-condition-table td input { - width: 460px; + width: 95%; + max-width: 460px; + padding: 2px 4px; } .herald-action-table td.target { diff --git a/webroot/rsrc/js/application/herald/HeraldRuleEditor.js b/webroot/rsrc/js/application/herald/HeraldRuleEditor.js index b226195d7c..1cf534e2f1 100644 --- a/webroot/rsrc/js/application/herald/HeraldRuleEditor.js +++ b/webroot/rsrc/js/application/herald/HeraldRuleEditor.js @@ -358,7 +358,6 @@ JX.install('HeraldRuleEditor', { }, _renderSelect : function(map, selected, sigil) { var attrs = { - style : {width: '250px', margin: '0 .5em 0 0'}, sigil : sigil }; return JX.Prefab.renderSelect(map, selected, attrs);