1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-27 16:00:59 +01:00

Allow standard page body panel to scroll on overflow-x

Summary:
This seems like the least-bad solution to the issues mentioned in T684: when we
need to x-scroll the main page area, scroll that div rather than the surrounding
page chrome.

I played around with a bunch of other possible solutions but they all seem bad
in some way or another. The tricky part here is that I want the real background
to be grey so that the footer color is grey even if the page is very short and
the browser window is very tall.

The only downside here is that the scrollbar appears in a somewhat unusual
place, but I think that's OK?

Actually, it's kind of terrible if people really use the scrollbar to scroll
horizontally rather than two-finger swipe or shift+mousewheel or the arrow keys.
So maybe this isn't good.

If this is no good, I think we need to make design sacrifices (not necessarily a
big deal; I'm not married to how the footer behaves) or someone much better than
I am at CSS needs to tell me how to fix this (@mroch / @tomo)?.

Test Plan:
  - In Settings -> Preferences, set font to "72px Impact".
  - Observed overflow scroll behavior in Safari / Firefox / Chrome.

Reviewers: Makinde, btrahan, jungejason

Reviewed By: Makinde

CC: mroch, tomo, aran, Makinde

Maniphest Tasks: T684

Differential Revision: 1224
This commit is contained in:
epriestley 2011-12-16 14:16:27 -08:00
parent 21ba07d5bd
commit 7618a4e056
2 changed files with 75 additions and 72 deletions

View file

@ -1457,7 +1457,7 @@ celerity_register_resource_map(array(
), ),
'phabricator-standard-page-view' => 'phabricator-standard-page-view' =>
array( array(
'uri' => '/res/7f5b185e/rsrc/css/application/base/standard-page-view.css', 'uri' => '/res/70d968ee/rsrc/css/application/base/standard-page-view.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -1673,29 +1673,29 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/4e7acf1a/core.pkg.js', 'uri' => '/res/pkg/4e7acf1a/core.pkg.js',
'type' => 'js', 'type' => 'js',
), ),
'aa531d70' => '8710f5ac' =>
array( array(
'name' => 'core.pkg.css', 'name' => 'differential.pkg.js',
'symbols' => 'symbols' =>
array( array(
0 => 'phabricator-core-css', 0 => 'phabricator-drag-and-drop-file-upload',
1 => 'phabricator-core-buttons-css', 1 => 'phabricator-shaped-request',
2 => 'phabricator-standard-page-view', 2 => 'javelin-behavior-differential-feedback-preview',
3 => 'aphront-dialog-view-css', 3 => 'javelin-behavior-differential-edit-inline-comments',
4 => 'aphront-form-view-css', 4 => 'javelin-behavior-differential-populate',
5 => 'aphront-panel-view-css', 5 => 'javelin-behavior-differential-show-more',
6 => 'aphront-side-nav-view-css', 6 => 'javelin-behavior-differential-diff-radios',
7 => 'aphront-table-view-css', 7 => 'javelin-behavior-differential-accept-with-errors',
8 => 'aphront-crumbs-view-css', 8 => 'javelin-behavior-differential-comment-jump',
9 => 'aphront-tokenizer-control-css', 9 => 'javelin-behavior-differential-add-reviewers-and-ccs',
10 => 'aphront-typeahead-control-css', 10 => 'javelin-behavior-differential-keyboard-navigation',
11 => 'aphront-list-filter-view-css', 11 => 'javelin-behavior-aphront-drag-and-drop',
12 => 'phabricator-directory-css', 12 => 'javelin-behavior-aphront-drag-and-drop-textarea',
13 => 'phabricator-remarkup-css', 13 => 'javelin-behavior-phabricator-object-selector',
14 => 'syntax-highlighting-css', 14 => 'differential-inline-comment-editor',
), ),
'uri' => '/res/pkg/aa531d70/core.pkg.css', 'uri' => '/res/pkg/8710f5ac/differential.pkg.js',
'type' => 'css', 'type' => 'js',
), ),
'b164acea' => 'b164acea' =>
array( array(
@ -1732,6 +1732,30 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/bbe7e6f7/typeahead.pkg.js', 'uri' => '/res/pkg/bbe7e6f7/typeahead.pkg.js',
'type' => 'js', 'type' => 'js',
), ),
'e1e8a800' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
array(
0 => 'phabricator-core-css',
1 => 'phabricator-core-buttons-css',
2 => 'phabricator-standard-page-view',
3 => 'aphront-dialog-view-css',
4 => 'aphront-form-view-css',
5 => 'aphront-panel-view-css',
6 => 'aphront-side-nav-view-css',
7 => 'aphront-table-view-css',
8 => 'aphront-crumbs-view-css',
9 => 'aphront-tokenizer-control-css',
10 => 'aphront-typeahead-control-css',
11 => 'aphront-list-filter-view-css',
12 => 'phabricator-directory-css',
13 => 'phabricator-remarkup-css',
14 => 'syntax-highlighting-css',
),
'uri' => '/res/pkg/e1e8a800/core.pkg.css',
'type' => 'css',
),
'e4f8b52c' => 'e4f8b52c' =>
array( array(
'name' => 'differential.pkg.css', 'name' => 'differential.pkg.css',
@ -1753,45 +1777,22 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/e4f8b52c/differential.pkg.css', 'uri' => '/res/pkg/e4f8b52c/differential.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'ffc38d9a' =>
array(
'name' => 'differential.pkg.js',
'symbols' =>
array(
0 => 'phabricator-drag-and-drop-file-upload',
1 => 'phabricator-shaped-request',
2 => 'javelin-behavior-differential-feedback-preview',
3 => 'javelin-behavior-differential-edit-inline-comments',
4 => 'javelin-behavior-differential-populate',
5 => 'javelin-behavior-differential-show-more',
6 => 'javelin-behavior-differential-diff-radios',
7 => 'javelin-behavior-differential-accept-with-errors',
8 => 'javelin-behavior-differential-comment-jump',
9 => 'javelin-behavior-differential-add-reviewers-and-ccs',
10 => 'javelin-behavior-differential-keyboard-navigation',
11 => 'javelin-behavior-aphront-drag-and-drop-textarea',
12 => 'javelin-behavior-phabricator-object-selector',
13 => 'differential-inline-comment-editor',
),
'uri' => '/res/pkg/ffc38d9a/differential.pkg.js',
'type' => 'js',
),
), ),
'reverse' => 'reverse' =>
array( array(
'aphront-crumbs-view-css' => 'aa531d70', 'aphront-crumbs-view-css' => 'e1e8a800',
'aphront-dialog-view-css' => 'aa531d70', 'aphront-dialog-view-css' => 'e1e8a800',
'aphront-form-view-css' => 'aa531d70', 'aphront-form-view-css' => 'e1e8a800',
'aphront-headsup-action-list-view-css' => 'e4f8b52c', 'aphront-headsup-action-list-view-css' => 'e4f8b52c',
'aphront-list-filter-view-css' => 'aa531d70', 'aphront-list-filter-view-css' => 'e1e8a800',
'aphront-panel-view-css' => 'aa531d70', 'aphront-panel-view-css' => 'e1e8a800',
'aphront-side-nav-view-css' => 'aa531d70', 'aphront-side-nav-view-css' => 'e1e8a800',
'aphront-table-view-css' => 'aa531d70', 'aphront-table-view-css' => 'e1e8a800',
'aphront-tokenizer-control-css' => 'aa531d70', 'aphront-tokenizer-control-css' => 'e1e8a800',
'aphront-typeahead-control-css' => 'aa531d70', 'aphront-typeahead-control-css' => 'e1e8a800',
'differential-changeset-view-css' => 'e4f8b52c', 'differential-changeset-view-css' => 'e4f8b52c',
'differential-core-view-css' => 'e4f8b52c', 'differential-core-view-css' => 'e4f8b52c',
'differential-inline-comment-editor' => 'ffc38d9a', 'differential-inline-comment-editor' => '8710f5ac',
'differential-local-commits-view-css' => 'e4f8b52c', 'differential-local-commits-view-css' => 'e4f8b52c',
'differential-revision-add-comment-css' => 'e4f8b52c', 'differential-revision-add-comment-css' => 'e4f8b52c',
'differential-revision-comment-css' => 'e4f8b52c', 'differential-revision-comment-css' => 'e4f8b52c',
@ -1802,19 +1803,20 @@ celerity_register_resource_map(array(
'diffusion-commit-view-css' => '03ef179e', 'diffusion-commit-view-css' => '03ef179e',
'javelin-behavior' => 'b164acea', 'javelin-behavior' => 'b164acea',
'javelin-behavior-aphront-basic-tokenizer' => 'bbe7e6f7', 'javelin-behavior-aphront-basic-tokenizer' => 'bbe7e6f7',
'javelin-behavior-aphront-drag-and-drop-textarea' => 'ffc38d9a', 'javelin-behavior-aphront-drag-and-drop' => '8710f5ac',
'javelin-behavior-aphront-drag-and-drop-textarea' => '8710f5ac',
'javelin-behavior-aphront-form-disable-on-submit' => '4e7acf1a', 'javelin-behavior-aphront-form-disable-on-submit' => '4e7acf1a',
'javelin-behavior-differential-accept-with-errors' => 'ffc38d9a', 'javelin-behavior-differential-accept-with-errors' => '8710f5ac',
'javelin-behavior-differential-add-reviewers-and-ccs' => 'ffc38d9a', 'javelin-behavior-differential-add-reviewers-and-ccs' => '8710f5ac',
'javelin-behavior-differential-comment-jump' => 'ffc38d9a', 'javelin-behavior-differential-comment-jump' => '8710f5ac',
'javelin-behavior-differential-diff-radios' => 'ffc38d9a', 'javelin-behavior-differential-diff-radios' => '8710f5ac',
'javelin-behavior-differential-edit-inline-comments' => 'ffc38d9a', 'javelin-behavior-differential-edit-inline-comments' => '8710f5ac',
'javelin-behavior-differential-feedback-preview' => 'ffc38d9a', 'javelin-behavior-differential-feedback-preview' => '8710f5ac',
'javelin-behavior-differential-keyboard-navigation' => 'ffc38d9a', 'javelin-behavior-differential-keyboard-navigation' => '8710f5ac',
'javelin-behavior-differential-populate' => 'ffc38d9a', 'javelin-behavior-differential-populate' => '8710f5ac',
'javelin-behavior-differential-show-more' => 'ffc38d9a', 'javelin-behavior-differential-show-more' => '8710f5ac',
'javelin-behavior-phabricator-keyboard-shortcuts' => '4e7acf1a', 'javelin-behavior-phabricator-keyboard-shortcuts' => '4e7acf1a',
'javelin-behavior-phabricator-object-selector' => 'ffc38d9a', 'javelin-behavior-phabricator-object-selector' => '8710f5ac',
'javelin-behavior-phabricator-watch-anchor' => '4e7acf1a', 'javelin-behavior-phabricator-watch-anchor' => '4e7acf1a',
'javelin-behavior-refresh-csrf' => '4e7acf1a', 'javelin-behavior-refresh-csrf' => '4e7acf1a',
'javelin-behavior-workflow' => '4e7acf1a', 'javelin-behavior-workflow' => '4e7acf1a',
@ -1836,16 +1838,16 @@ celerity_register_resource_map(array(
'javelin-vector' => 'b164acea', 'javelin-vector' => 'b164acea',
'javelin-workflow' => '4e7acf1a', 'javelin-workflow' => '4e7acf1a',
'phabricator-content-source-view-css' => 'e4f8b52c', 'phabricator-content-source-view-css' => 'e4f8b52c',
'phabricator-core-buttons-css' => 'aa531d70', 'phabricator-core-buttons-css' => 'e1e8a800',
'phabricator-core-css' => 'aa531d70', 'phabricator-core-css' => 'e1e8a800',
'phabricator-directory-css' => 'aa531d70', 'phabricator-directory-css' => 'e1e8a800',
'phabricator-drag-and-drop-file-upload' => 'ffc38d9a', 'phabricator-drag-and-drop-file-upload' => '8710f5ac',
'phabricator-keyboard-shortcut' => '4e7acf1a', 'phabricator-keyboard-shortcut' => '4e7acf1a',
'phabricator-keyboard-shortcut-manager' => '4e7acf1a', 'phabricator-keyboard-shortcut-manager' => '4e7acf1a',
'phabricator-object-selector-css' => 'e4f8b52c', 'phabricator-object-selector-css' => 'e4f8b52c',
'phabricator-remarkup-css' => 'aa531d70', 'phabricator-remarkup-css' => 'e1e8a800',
'phabricator-shaped-request' => 'ffc38d9a', 'phabricator-shaped-request' => '8710f5ac',
'phabricator-standard-page-view' => 'aa531d70', 'phabricator-standard-page-view' => 'e1e8a800',
'syntax-highlighting-css' => 'aa531d70', 'syntax-highlighting-css' => 'e1e8a800',
), ),
)); ));

View file

@ -6,6 +6,7 @@
.phabricator-standard-page { .phabricator-standard-page {
background: #ffffff; background: #ffffff;
border-bottom: 1px solid #888888; border-bottom: 1px solid #888888;
overflow-x: auto;
-webkit-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000;
-mox-box-shadow: 0 0 6px #000; -mox-box-shadow: 0 0 6px #000;