mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-26 08:42:41 +01:00
Improve PhabricatorObjectItemListView handling of wide content
Summary: Wide content is currently allowed to push too far to the right, overlapping icons. Prevent it from doing so.
Test Plan:
Before:
{F27906}
After:
{F27907}
After, Mobile:
{F27908}
Reviewers: chad, codeblock, btrahan
Reviewed By: chad
CC: aran
Differential Revision: https://secure.phabricator.com/D4212
This commit is contained in:
epriestley
parent
4952891cd1
commit
d2cf71c5b1
3 changed files with 71 additions and 48 deletions
|
|
@ -2656,7 +2656,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-object-item-list-view-css' =>
|
||||
array(
|
||||
'uri' => '/res/22e57cff/rsrc/css/layout/phabricator-object-item-list-view.css',
|
||||
'uri' => '/res/8ae43833/rsrc/css/layout/phabricator-object-item-list-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -3201,7 +3201,7 @@ celerity_register_resource_map(array(
|
|||
), array(
|
||||
'packages' =>
|
||||
array(
|
||||
'a5058778' =>
|
||||
'97e38b14' =>
|
||||
array(
|
||||
'name' => 'core.pkg.css',
|
||||
'symbols' =>
|
||||
|
|
@ -3246,7 +3246,7 @@ celerity_register_resource_map(array(
|
|||
37 => 'phabricator-object-item-list-view-css',
|
||||
38 => 'global-drag-and-drop-css',
|
||||
),
|
||||
'uri' => '/res/pkg/a5058778/core.pkg.css',
|
||||
'uri' => '/res/pkg/97e38b14/core.pkg.css',
|
||||
'type' => 'css',
|
||||
),
|
||||
'70c8162b' =>
|
||||
|
|
@ -3435,20 +3435,20 @@ celerity_register_resource_map(array(
|
|||
'reverse' =>
|
||||
array(
|
||||
'aphront-attached-file-view-css' => '7839ae2d',
|
||||
'aphront-crumbs-view-css' => 'a5058778',
|
||||
'aphront-dialog-view-css' => 'a5058778',
|
||||
'aphront-error-view-css' => 'a5058778',
|
||||
'aphront-form-view-css' => 'a5058778',
|
||||
'aphront-crumbs-view-css' => '97e38b14',
|
||||
'aphront-dialog-view-css' => '97e38b14',
|
||||
'aphront-error-view-css' => '97e38b14',
|
||||
'aphront-form-view-css' => '97e38b14',
|
||||
'aphront-headsup-action-list-view-css' => '380df740',
|
||||
'aphront-headsup-view-css' => 'a5058778',
|
||||
'aphront-list-filter-view-css' => 'a5058778',
|
||||
'aphront-pager-view-css' => 'a5058778',
|
||||
'aphront-panel-view-css' => 'a5058778',
|
||||
'aphront-side-nav-view-css' => 'a5058778',
|
||||
'aphront-table-view-css' => 'a5058778',
|
||||
'aphront-tokenizer-control-css' => 'a5058778',
|
||||
'aphront-tooltip-css' => 'a5058778',
|
||||
'aphront-typeahead-control-css' => 'a5058778',
|
||||
'aphront-headsup-view-css' => '97e38b14',
|
||||
'aphront-list-filter-view-css' => '97e38b14',
|
||||
'aphront-pager-view-css' => '97e38b14',
|
||||
'aphront-panel-view-css' => '97e38b14',
|
||||
'aphront-side-nav-view-css' => '97e38b14',
|
||||
'aphront-table-view-css' => '97e38b14',
|
||||
'aphront-tokenizer-control-css' => '97e38b14',
|
||||
'aphront-tooltip-css' => '97e38b14',
|
||||
'aphront-typeahead-control-css' => '97e38b14',
|
||||
'differential-changeset-view-css' => '380df740',
|
||||
'differential-core-view-css' => '380df740',
|
||||
'differential-inline-comment-editor' => 'a8e8f2b7',
|
||||
|
|
@ -3462,7 +3462,7 @@ celerity_register_resource_map(array(
|
|||
'differential-table-of-contents-css' => '380df740',
|
||||
'diffusion-commit-view-css' => 'c8ce2d88',
|
||||
'diffusion-icons-css' => 'c8ce2d88',
|
||||
'global-drag-and-drop-css' => 'a5058778',
|
||||
'global-drag-and-drop-css' => '97e38b14',
|
||||
'inline-comment-summary-css' => '380df740',
|
||||
'javelin-aphlict' => '70c8162b',
|
||||
'javelin-behavior' => 'db6d724d',
|
||||
|
|
@ -3531,48 +3531,48 @@ celerity_register_resource_map(array(
|
|||
'javelin-util' => 'db6d724d',
|
||||
'javelin-vector' => 'db6d724d',
|
||||
'javelin-workflow' => 'db6d724d',
|
||||
'lightbox-attachment-css' => 'a5058778',
|
||||
'lightbox-attachment-css' => '97e38b14',
|
||||
'maniphest-task-summary-css' => '7839ae2d',
|
||||
'maniphest-transaction-detail-css' => '7839ae2d',
|
||||
'phabricator-app-buttons-css' => 'a5058778',
|
||||
'phabricator-app-buttons-css' => '97e38b14',
|
||||
'phabricator-busy' => '70c8162b',
|
||||
'phabricator-content-source-view-css' => '380df740',
|
||||
'phabricator-core-buttons-css' => 'a5058778',
|
||||
'phabricator-core-css' => 'a5058778',
|
||||
'phabricator-crumbs-view-css' => 'a5058778',
|
||||
'phabricator-directory-css' => 'a5058778',
|
||||
'phabricator-core-buttons-css' => '97e38b14',
|
||||
'phabricator-core-css' => '97e38b14',
|
||||
'phabricator-crumbs-view-css' => '97e38b14',
|
||||
'phabricator-directory-css' => '97e38b14',
|
||||
'phabricator-drag-and-drop-file-upload' => 'a8e8f2b7',
|
||||
'phabricator-dropdown-menu' => '70c8162b',
|
||||
'phabricator-file-upload' => '70c8162b',
|
||||
'phabricator-filetree-view-css' => 'a5058778',
|
||||
'phabricator-flag-css' => 'a5058778',
|
||||
'phabricator-form-view-css' => 'a5058778',
|
||||
'phabricator-header-view-css' => 'a5058778',
|
||||
'phabricator-jump-nav' => 'a5058778',
|
||||
'phabricator-filetree-view-css' => '97e38b14',
|
||||
'phabricator-flag-css' => '97e38b14',
|
||||
'phabricator-form-view-css' => '97e38b14',
|
||||
'phabricator-header-view-css' => '97e38b14',
|
||||
'phabricator-jump-nav' => '97e38b14',
|
||||
'phabricator-keyboard-shortcut' => '70c8162b',
|
||||
'phabricator-keyboard-shortcut-manager' => '70c8162b',
|
||||
'phabricator-main-menu-view' => 'a5058778',
|
||||
'phabricator-main-menu-view' => '97e38b14',
|
||||
'phabricator-menu-item' => '70c8162b',
|
||||
'phabricator-nav-view-css' => 'a5058778',
|
||||
'phabricator-nav-view-css' => '97e38b14',
|
||||
'phabricator-notification' => '70c8162b',
|
||||
'phabricator-notification-css' => 'a5058778',
|
||||
'phabricator-notification-menu-css' => 'a5058778',
|
||||
'phabricator-object-item-list-view-css' => 'a5058778',
|
||||
'phabricator-notification-css' => '97e38b14',
|
||||
'phabricator-notification-menu-css' => '97e38b14',
|
||||
'phabricator-object-item-list-view-css' => '97e38b14',
|
||||
'phabricator-object-selector-css' => '380df740',
|
||||
'phabricator-paste-file-upload' => '70c8162b',
|
||||
'phabricator-prefab' => '70c8162b',
|
||||
'phabricator-project-tag-css' => '7839ae2d',
|
||||
'phabricator-remarkup-css' => 'a5058778',
|
||||
'phabricator-remarkup-css' => '97e38b14',
|
||||
'phabricator-shaped-request' => 'a8e8f2b7',
|
||||
'phabricator-side-menu-view-css' => 'a5058778',
|
||||
'phabricator-standard-page-view' => 'a5058778',
|
||||
'phabricator-side-menu-view-css' => '97e38b14',
|
||||
'phabricator-standard-page-view' => '97e38b14',
|
||||
'phabricator-textareautils' => '70c8162b',
|
||||
'phabricator-tooltip' => '70c8162b',
|
||||
'phabricator-transaction-view-css' => 'a5058778',
|
||||
'sprite-apps-large-css' => 'a5058778',
|
||||
'sprite-gradient-css' => 'a5058778',
|
||||
'sprite-icon-css' => 'a5058778',
|
||||
'sprite-menu-css' => 'a5058778',
|
||||
'syntax-highlighting-css' => 'a5058778',
|
||||
'phabricator-transaction-view-css' => '97e38b14',
|
||||
'sprite-apps-large-css' => '97e38b14',
|
||||
'sprite-gradient-css' => '97e38b14',
|
||||
'sprite-icon-css' => '97e38b14',
|
||||
'sprite-menu-css' => '97e38b14',
|
||||
'syntax-highlighting-css' => '97e38b14',
|
||||
),
|
||||
));
|
||||
|
|
|
|||
|
|
@ -158,12 +158,19 @@ final class PhabricatorObjectItemView extends AphrontView {
|
|||
throw new Exception("Invalid effect!");
|
||||
}
|
||||
|
||||
$content = phutil_render_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'phabricator-object-item-content',
|
||||
),
|
||||
$header.$attrs.$this->renderChildren());
|
||||
|
||||
return phutil_render_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => implode(' ', $classes),
|
||||
),
|
||||
$icons.$header.$attrs.$this->renderChildren());
|
||||
$icons.$content);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,17 +21,19 @@
|
|||
.phabricator-object-item-name {
|
||||
display: block;
|
||||
padding: 4px 8px 4px;
|
||||
margin-right: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* - Attribute List ------------------------------
|
||||
.phabricator-object-item-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* - Attribute List ------------------------------------------------------------
|
||||
|
||||
Object attributes, commonly used to render created date, etc.
|
||||
|
||||
*/
|
||||
|
||||
|
||||
.phabricator-object-item-attributes {
|
||||
padding: 0px 8px 4px;
|
||||
}
|
||||
|
|
@ -47,9 +49,10 @@
|
|||
}
|
||||
|
||||
|
||||
/* - Attribute List ------------------------------
|
||||
/* - Icons ---------------------------------------------------------------------
|
||||
|
||||
Object attributes, commonly used to render created date, etc.
|
||||
Icons, which show object state. On mobile, they are rendered without labels
|
||||
to save space.
|
||||
|
||||
*/
|
||||
|
||||
|
|
@ -58,14 +61,27 @@
|
|||
padding: 2px 4px 0;
|
||||
}
|
||||
|
||||
/* NOTE: The main content is an "overflow: hidden" div which we give a right
|
||||
margin so it doesn't overlap the icons. The margin is slightly larger than
|
||||
the width + padding of the icon div, so the icons have some space even if
|
||||
the content is wider than available space. */
|
||||
|
||||
.device-desktop .phabricator-object-item-icons {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-object-item-content {
|
||||
margin-right: 132px;
|
||||
}
|
||||
|
||||
.device .phabricator-object-item-icons {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.device .phabricator-object-item-content {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.device .phabricator-object-item-icon-label {
|
||||
display: none;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
Loading…
Reference in a new issue