From 4b6d6b794af68cccc1ebf93bfbcc1b594f6e1821 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Fri, 22 May 2015 17:52:51 -0700 Subject: [PATCH] [Redesign] Mobile/Phone design pass Summary: Ref T8099, Quick descent pass at making header, object lists, tables, filter view, mobile friendly. Test Plan: Test home, differential diff, maniphest task, new task, search, and a few other views. {F414034} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T8099 Differential Revision: https://secure.phabricator.com/D12984 --- resources/celerity/map.php | 36 +++++++++---------- .../view/ManiphestTaskResultListView.php | 4 ++- webroot/rsrc/css/aphront/list-filter-view.css | 6 ++-- .../application/maniphest/task-summary.css | 3 +- webroot/rsrc/css/phui/phui-form-view.css | 4 +++ webroot/rsrc/css/phui/phui-header-view.css | 10 +++--- webroot/rsrc/css/phui/phui-object-box.css | 15 +++++++- .../css/phui/phui-object-item-list-view.css | 5 +++ 8 files changed, 54 insertions(+), 29 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 62b85f645b..78a5ae92b2 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,20 +7,20 @@ */ return array( 'names' => array( - 'core.pkg.css' => '2ba05f62', + 'core.pkg.css' => '979f9a16', 'core.pkg.js' => '9db3e620', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => 'bb338e4b', 'differential.pkg.js' => '63a77807', 'diffusion.pkg.css' => '385e85b3', 'diffusion.pkg.js' => '0115b37c', - 'maniphest.pkg.css' => 'ddf93c68', + 'maniphest.pkg.css' => 'e87fdd66', 'maniphest.pkg.js' => '2f4f52c2', 'rsrc/css/aphront/aphront-bars.css' => '231ac33c', 'rsrc/css/aphront/dark-console.css' => '6378ef3d', - 'rsrc/css/aphront/dialog-view.css' => '725f2f23', + 'rsrc/css/aphront/dialog-view.css' => '8ea1b9cc', 'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d', - 'rsrc/css/aphront/list-filter-view.css' => '1fb5cab3', + 'rsrc/css/aphront/list-filter-view.css' => 'aa5ffcb9', 'rsrc/css/aphront/multi-column.css' => 'fd18389d', 'rsrc/css/aphront/notification.css' => '9c279160', 'rsrc/css/aphront/pager-view.css' => '2e3539af', @@ -46,7 +46,7 @@ return array( 'rsrc/css/application/config/config-welcome.css' => '6abd79be', 'rsrc/css/application/config/setup-issue.css' => '631c4e92', 'rsrc/css/application/config/unhandled-exception.css' => '4c96257a', - 'rsrc/css/application/conpherence/durable-column.css' => '0c23f069', + 'rsrc/css/application/conpherence/durable-column.css' => '4cb8c197', 'rsrc/css/application/conpherence/menu.css' => 'f9f1d143', 'rsrc/css/application/conpherence/message-pane.css' => '7cbf4cbb', 'rsrc/css/application/conpherence/notification.css' => '919974b6', @@ -78,7 +78,7 @@ return array( 'rsrc/css/application/maniphest/batch-editor.css' => '9a5ed9c1', 'rsrc/css/application/maniphest/report.css' => 'f6931fdf', 'rsrc/css/application/maniphest/task-edit.css' => '8e23031b', - 'rsrc/css/application/maniphest/task-summary.css' => '307c88e9', + 'rsrc/css/application/maniphest/task-summary.css' => '8795780d', 'rsrc/css/application/objectselector/object-selector.css' => '029a133d', 'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b', 'rsrc/css/application/paste/paste.css' => 'eb997ddd', @@ -132,16 +132,16 @@ return array( 'rsrc/css/phui/phui-document.css' => '8be7a5e3', 'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5', 'rsrc/css/phui/phui-fontkit.css' => 'b664ac96', - 'rsrc/css/phui/phui-form-view.css' => '526ee2ab', + 'rsrc/css/phui/phui-form-view.css' => '87263b05', 'rsrc/css/phui/phui-form.css' => 'f535f938', - 'rsrc/css/phui/phui-header-view.css' => '99066800', + 'rsrc/css/phui/phui-header-view.css' => '8ced06e4', 'rsrc/css/phui/phui-icon.css' => '88ba9081', 'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8', 'rsrc/css/phui/phui-info-panel.css' => '27ea50a1', 'rsrc/css/phui/phui-info-view.css' => '33595731', 'rsrc/css/phui/phui-list.css' => 'e448b6ba', - 'rsrc/css/phui/phui-object-box.css' => '70285ee9', - 'rsrc/css/phui/phui-object-item-list-view.css' => '4be0645f', + 'rsrc/css/phui/phui-object-box.css' => 'b9d566e3', + 'rsrc/css/phui/phui-object-item-list-view.css' => '2032bf8b', 'rsrc/css/phui/phui-pinboard-view.css' => '22891c15', 'rsrc/css/phui/phui-property-list-view.css' => 'd2d143ea', 'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b', @@ -479,8 +479,8 @@ return array( 'almanac-css' => 'dbb9b3af', 'aphront-bars' => '231ac33c', 'aphront-dark-console-css' => '6378ef3d', - 'aphront-dialog-view-css' => '725f2f23', - 'aphront-list-filter-view-css' => '1fb5cab3', + 'aphront-dialog-view-css' => '8ea1b9cc', + 'aphront-list-filter-view-css' => 'aa5ffcb9', 'aphront-multi-column-view-css' => 'fd18389d', 'aphront-pager-view-css' => '2e3539af', 'aphront-panel-view-css' => '8427b78d', @@ -495,7 +495,7 @@ return array( 'conduit-api-css' => '7bc725c4', 'config-options-css' => '7fedf08b', 'config-welcome-css' => '6abd79be', - 'conpherence-durable-column-view' => '0c23f069', + 'conpherence-durable-column-view' => '4cb8c197', 'conpherence-menu-css' => 'f9f1d143', 'conpherence-message-pane-css' => '7cbf4cbb', 'conpherence-notification-css' => '919974b6', @@ -689,7 +689,7 @@ return array( 'maniphest-batch-editor' => '9a5ed9c1', 'maniphest-report-css' => 'f6931fdf', 'maniphest-task-edit-css' => '8e23031b', - 'maniphest-task-summary-css' => '307c88e9', + 'maniphest-task-summary-css' => '8795780d', 'multirow-row-manager' => 'b5d57730', 'owners-path-editor' => 'aa1733d0', 'owners-path-editor-css' => '2f00933b', @@ -768,16 +768,16 @@ return array( 'phui-font-icon-base-css' => '3dad2ae3', 'phui-fontkit-css' => 'b664ac96', 'phui-form-css' => 'f535f938', - 'phui-form-view-css' => '526ee2ab', - 'phui-header-view-css' => '99066800', + 'phui-form-view-css' => '87263b05', + 'phui-header-view-css' => '8ced06e4', 'phui-icon-view-css' => '88ba9081', 'phui-image-mask-css' => '5a8b09c8', 'phui-info-panel-css' => '27ea50a1', 'phui-info-view-css' => '33595731', 'phui-inline-comment-view-css' => '2174771a', 'phui-list-view-css' => 'e448b6ba', - 'phui-object-box-css' => '70285ee9', - 'phui-object-item-list-view-css' => '4be0645f', + 'phui-object-box-css' => 'b9d566e3', + 'phui-object-item-list-view-css' => '2032bf8b', 'phui-pinboard-view-css' => '22891c15', 'phui-property-list-view-css' => 'd2d143ea', 'phui-remarkup-preview-css' => '19ad512b', diff --git a/src/applications/maniphest/view/ManiphestTaskResultListView.php b/src/applications/maniphest/view/ManiphestTaskResultListView.php index 5804951e25..19106c12d6 100644 --- a/src/applications/maniphest/view/ManiphestTaskResultListView.php +++ b/src/applications/maniphest/view/ManiphestTaskResultListView.php @@ -263,6 +263,8 @@ final class ManiphestTaskResultListView extends ManiphestView { ->setHeaderText(pht('Batch Task Editor')) ->appendChild($editor); - return $box; + $content = phutil_tag_div('maniphest-batch-editor', $box); + + return $content; } } diff --git a/webroot/rsrc/css/aphront/list-filter-view.css b/webroot/rsrc/css/aphront/list-filter-view.css index dae4bd44da..f41008cb34 100644 --- a/webroot/rsrc/css/aphront/list-filter-view.css +++ b/webroot/rsrc/css/aphront/list-filter-view.css @@ -14,12 +14,14 @@ } .device-phone .aphront-list-filter-view { - padding: 0 8px 8px; + padding: 0; } .device-phone .aphront-list-filter-wrap { margin: 0; border: none; + border-radius: 0; + border-top: 1px solid {$lightblueborder}; border-bottom: 1px solid {$lightblueborder}; } @@ -34,7 +36,7 @@ } .device-phone .aphront-list-filter-view-content .phui-form-view { - padding: 0; + padding: 0 0 4px 4px; } /* When a list filter view contains two consecuitive forms, lay them out diff --git a/webroot/rsrc/css/application/maniphest/task-summary.css b/webroot/rsrc/css/application/maniphest/task-summary.css index e959234177..c634979536 100644 --- a/webroot/rsrc/css/application/maniphest/task-summary.css +++ b/webroot/rsrc/css/application/maniphest/task-summary.css @@ -1,8 +1,7 @@ /** * @provides maniphest-task-summary-css */ - -.device-phone .maniphest-task-batch, +.device-phone .maniphest-batch-editor, .device-phone .maniphest-task-updated { display: none; } diff --git a/webroot/rsrc/css/phui/phui-form-view.css b/webroot/rsrc/css/phui/phui-form-view.css index a300109b83..5a115d9064 100644 --- a/webroot/rsrc/css/phui/phui-form-view.css +++ b/webroot/rsrc/css/phui/phui-form-view.css @@ -6,6 +6,10 @@ padding: 16px; } +.device-phone .phui-object-box .phui-form-view { + padding: 0; +} + .phui-form-view.phui-form-full-width { padding: 0; } diff --git a/webroot/rsrc/css/phui/phui-header-view.css b/webroot/rsrc/css/phui/phui-header-view.css index 21b52acccb..7666184223 100644 --- a/webroot/rsrc/css/phui/phui-header-view.css +++ b/webroot/rsrc/css/phui/phui-header-view.css @@ -48,7 +48,7 @@ body .phui-header-shell.phui-bleed-header { body .phui-header-shell.phui-bleed-header .phui-header-view { padding: 8px 24px 8px 0; - color: {$bluetext}; + color: {$darkbluetext}; } .phui-header-shell + .phabricator-form-view { @@ -66,6 +66,10 @@ body .phui-header-shell.phui-bleed-header position: relative; } +.device-phone .phui-header-view { + font-size: 14px; +} + .phui-object-box .phui-header-tall h1.phui-header-view, .phui-document-view .phui-header-tall h1.phui-header-view { font-size: 18px; @@ -101,10 +105,6 @@ body .phui-header-shell.phui-bleed-header color: {$lightbluetext}; } -body.device-phone .phui-header-view { - padding: 12px 8px; -} - .phui-header-tags { margin-left: 12px; font-size: 13px; diff --git a/webroot/rsrc/css/phui/phui-object-box.css b/webroot/rsrc/css/phui/phui-object-box.css index b5475334ae..b2542ae353 100644 --- a/webroot/rsrc/css/phui/phui-object-box.css +++ b/webroot/rsrc/css/phui/phui-object-box.css @@ -11,10 +11,18 @@ padding: 12px 0 0 0; } +.device-phone .phui-object-box.phui-object-box-collapsed { + padding: 8px 0 0 0; +} + .phui-object-box.phui-object-box-collapsed .phui-header-shell { padding: 0 8px 12px 16px; } +.device-phone .phui-object-box.phui-object-box-collapsed .phui-header-shell { + padding: 0 8px 8px; +} + div.phui-object-box.phui-object-box-flush { margin-top: 0; } @@ -32,7 +40,12 @@ div.phui-object-box.phui-object-box-flush { } .device-phone .phui-object-box { - margin: 8px 8px 0 8px; + margin: 8px; + padding: 8px 8px 4px 8px; +} + +.device-phone .phui-object-box .phui-header-shell { + padding-bottom: 8px; } /* - Object Box Colors ------------------------------------------------------ */ diff --git a/webroot/rsrc/css/phui/phui-object-item-list-view.css b/webroot/rsrc/css/phui/phui-object-item-list-view.css index 4f764e984f..121be765dc 100644 --- a/webroot/rsrc/css/phui/phui-object-item-list-view.css +++ b/webroot/rsrc/css/phui/phui-object-item-list-view.css @@ -152,6 +152,11 @@ ul.phui-object-item-list-view { vertical-align: middle; } +.device-phone .phui-object-item-col0 { + vertical-align: top; + padding-top: 8px; +} + .phui-object-item-col1 { display: table-cell; vertical-align: top;