1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-02-16 16:58:38 +01:00

Add a wrapper div for mobile tables.

Summary: This wraps tables in a scrollable area when viewports are too narrow for the content.

Test Plan: Tested table layout in Chrome and iOS. Config was easiest table to test on mobile.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4586
This commit is contained in:
Chad Little 2013-01-22 14:46:40 -08:00
parent 5d8ddd888c
commit ff23424676
3 changed files with 50 additions and 44 deletions

View file

@ -674,7 +674,7 @@ celerity_register_resource_map(array(
), ),
'aphront-table-view-css' => 'aphront-table-view-css' =>
array( array(
'uri' => '/res/fa7af0ad/rsrc/css/aphront/table-view.css', 'uri' => '/res/fd33a0f0/rsrc/css/aphront/table-view.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3147,7 +3147,7 @@ celerity_register_resource_map(array(
), ),
'setup-issue-css' => 'setup-issue-css' =>
array( array(
'uri' => '/res/a7034810/rsrc/css/application/config/setup-issue.css', 'uri' => '/res/638ebcfb/rsrc/css/application/config/setup-issue.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3192,7 +3192,7 @@ celerity_register_resource_map(array(
), ),
'sprite-icon-css' => 'sprite-icon-css' =>
array( array(
'uri' => '/res/ff841245/rsrc/css/sprite-icon.css', 'uri' => '/res/e7d63fcf/rsrc/css/sprite-icon.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3238,7 +3238,7 @@ celerity_register_resource_map(array(
), array( ), array(
'packages' => 'packages' =>
array( array(
'af52829a' => '2b575971' =>
array( array(
'name' => 'core.pkg.css', 'name' => 'core.pkg.css',
'symbols' => 'symbols' =>
@ -3282,7 +3282,7 @@ celerity_register_resource_map(array(
36 => 'phabricator-object-item-list-view-css', 36 => 'phabricator-object-item-list-view-css',
37 => 'global-drag-and-drop-css', 37 => 'global-drag-and-drop-css',
), ),
'uri' => '/res/pkg/af52829a/core.pkg.css', 'uri' => '/res/pkg/2b575971/core.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'c90b892e' => 'c90b892e' =>
@ -3472,19 +3472,19 @@ celerity_register_resource_map(array(
'reverse' => 'reverse' =>
array( array(
'aphront-attached-file-view-css' => '83f07678', 'aphront-attached-file-view-css' => '83f07678',
'aphront-crumbs-view-css' => 'af52829a', 'aphront-crumbs-view-css' => '2b575971',
'aphront-dialog-view-css' => 'af52829a', 'aphront-dialog-view-css' => '2b575971',
'aphront-error-view-css' => 'af52829a', 'aphront-error-view-css' => '2b575971',
'aphront-form-view-css' => 'af52829a', 'aphront-form-view-css' => '2b575971',
'aphront-headsup-action-list-view-css' => 'ec01d039', 'aphront-headsup-action-list-view-css' => 'ec01d039',
'aphront-headsup-view-css' => 'af52829a', 'aphront-headsup-view-css' => '2b575971',
'aphront-list-filter-view-css' => 'af52829a', 'aphront-list-filter-view-css' => '2b575971',
'aphront-pager-view-css' => 'af52829a', 'aphront-pager-view-css' => '2b575971',
'aphront-panel-view-css' => 'af52829a', 'aphront-panel-view-css' => '2b575971',
'aphront-table-view-css' => 'af52829a', 'aphront-table-view-css' => '2b575971',
'aphront-tokenizer-control-css' => 'af52829a', 'aphront-tokenizer-control-css' => '2b575971',
'aphront-tooltip-css' => 'af52829a', 'aphront-tooltip-css' => '2b575971',
'aphront-typeahead-control-css' => 'af52829a', 'aphront-typeahead-control-css' => '2b575971',
'differential-changeset-view-css' => 'ec01d039', 'differential-changeset-view-css' => 'ec01d039',
'differential-core-view-css' => 'ec01d039', 'differential-core-view-css' => 'ec01d039',
'differential-inline-comment-editor' => 'ac53d36a', 'differential-inline-comment-editor' => 'ac53d36a',
@ -3498,7 +3498,7 @@ celerity_register_resource_map(array(
'differential-table-of-contents-css' => 'ec01d039', 'differential-table-of-contents-css' => 'ec01d039',
'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88',
'global-drag-and-drop-css' => 'af52829a', 'global-drag-and-drop-css' => '2b575971',
'inline-comment-summary-css' => 'ec01d039', 'inline-comment-summary-css' => 'ec01d039',
'javelin-aphlict' => 'c90b892e', 'javelin-aphlict' => 'c90b892e',
'javelin-behavior' => 'fbeded59', 'javelin-behavior' => 'fbeded59',
@ -3568,48 +3568,48 @@ celerity_register_resource_map(array(
'javelin-util' => 'fbeded59', 'javelin-util' => 'fbeded59',
'javelin-vector' => 'fbeded59', 'javelin-vector' => 'fbeded59',
'javelin-workflow' => 'fbeded59', 'javelin-workflow' => 'fbeded59',
'lightbox-attachment-css' => 'af52829a', 'lightbox-attachment-css' => '2b575971',
'maniphest-task-summary-css' => '83f07678', 'maniphest-task-summary-css' => '83f07678',
'maniphest-transaction-detail-css' => '83f07678', 'maniphest-transaction-detail-css' => '83f07678',
'phabricator-busy' => 'c90b892e', 'phabricator-busy' => 'c90b892e',
'phabricator-content-source-view-css' => 'ec01d039', 'phabricator-content-source-view-css' => 'ec01d039',
'phabricator-core-buttons-css' => 'af52829a', 'phabricator-core-buttons-css' => '2b575971',
'phabricator-core-css' => 'af52829a', 'phabricator-core-css' => '2b575971',
'phabricator-crumbs-view-css' => 'af52829a', 'phabricator-crumbs-view-css' => '2b575971',
'phabricator-directory-css' => 'af52829a', 'phabricator-directory-css' => '2b575971',
'phabricator-drag-and-drop-file-upload' => 'ac53d36a', 'phabricator-drag-and-drop-file-upload' => 'ac53d36a',
'phabricator-dropdown-menu' => 'c90b892e', 'phabricator-dropdown-menu' => 'c90b892e',
'phabricator-file-upload' => 'c90b892e', 'phabricator-file-upload' => 'c90b892e',
'phabricator-filetree-view-css' => 'af52829a', 'phabricator-filetree-view-css' => '2b575971',
'phabricator-flag-css' => 'af52829a', 'phabricator-flag-css' => '2b575971',
'phabricator-form-view-css' => 'af52829a', 'phabricator-form-view-css' => '2b575971',
'phabricator-header-view-css' => 'af52829a', 'phabricator-header-view-css' => '2b575971',
'phabricator-jump-nav' => 'af52829a', 'phabricator-jump-nav' => '2b575971',
'phabricator-keyboard-shortcut' => 'c90b892e', 'phabricator-keyboard-shortcut' => 'c90b892e',
'phabricator-keyboard-shortcut-manager' => 'c90b892e', 'phabricator-keyboard-shortcut-manager' => 'c90b892e',
'phabricator-main-menu-view' => 'af52829a', 'phabricator-main-menu-view' => '2b575971',
'phabricator-menu-item' => 'c90b892e', 'phabricator-menu-item' => 'c90b892e',
'phabricator-nav-view-css' => 'af52829a', 'phabricator-nav-view-css' => '2b575971',
'phabricator-notification' => 'c90b892e', 'phabricator-notification' => 'c90b892e',
'phabricator-notification-css' => 'af52829a', 'phabricator-notification-css' => '2b575971',
'phabricator-notification-menu-css' => 'af52829a', 'phabricator-notification-menu-css' => '2b575971',
'phabricator-object-item-list-view-css' => 'af52829a', 'phabricator-object-item-list-view-css' => '2b575971',
'phabricator-object-selector-css' => 'ec01d039', 'phabricator-object-selector-css' => 'ec01d039',
'phabricator-paste-file-upload' => 'c90b892e', 'phabricator-paste-file-upload' => 'c90b892e',
'phabricator-prefab' => 'c90b892e', 'phabricator-prefab' => 'c90b892e',
'phabricator-project-tag-css' => '83f07678', 'phabricator-project-tag-css' => '83f07678',
'phabricator-remarkup-css' => 'af52829a', 'phabricator-remarkup-css' => '2b575971',
'phabricator-shaped-request' => 'ac53d36a', 'phabricator-shaped-request' => 'ac53d36a',
'phabricator-side-menu-view-css' => 'af52829a', 'phabricator-side-menu-view-css' => '2b575971',
'phabricator-standard-page-view' => 'af52829a', 'phabricator-standard-page-view' => '2b575971',
'phabricator-textareautils' => 'c90b892e', 'phabricator-textareautils' => 'c90b892e',
'phabricator-tooltip' => 'c90b892e', 'phabricator-tooltip' => 'c90b892e',
'phabricator-transaction-view-css' => 'af52829a', 'phabricator-transaction-view-css' => '2b575971',
'phabricator-zindex-css' => 'af52829a', 'phabricator-zindex-css' => '2b575971',
'sprite-apps-large-css' => 'af52829a', 'sprite-apps-large-css' => '2b575971',
'sprite-gradient-css' => 'af52829a', 'sprite-gradient-css' => '2b575971',
'sprite-icon-css' => 'af52829a', 'sprite-icon-css' => '2b575971',
'sprite-menu-css' => 'af52829a', 'sprite-menu-css' => '2b575971',
'syntax-highlighting-css' => 'af52829a', 'syntax-highlighting-css' => '2b575971',
), ),
)); ));

View file

@ -289,7 +289,8 @@ final class AphrontTableView extends AphrontView {
'</td></tr>'; '</td></tr>';
} }
$table[] = '</table>'; $table[] = '</table>';
return implode('', $table); $html = implode('', $table);
return '<div class="aphront-table-wrap">'.$html.'</div>';
} }
public static function renderSingleDisplayLine($line) { public static function renderSingleDisplayLine($line) {

View file

@ -2,6 +2,11 @@
* @provides aphront-table-view-css * @provides aphront-table-view-css
*/ */
.device-phone .aphront-table-wrap,
.device-tablet .aphront-table-wrap {
overflow-x: auto;
}
.aphront-table-view { .aphront-table-view {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;