1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-14 10:52:41 +01:00
phorge-phorge/webroot/rsrc/css/aphront/phabricator-nav-view.css
epriestley 022ac73d60 Fix iphone scrolling behavior on homepage
Summary: I see a flash of white on my iPhone emulator and on the actual device when I scroll down. Make the texture bigger to prevent it.

Test Plan: Scrolled on emulator, no more white flash.

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5416
2013-03-22 12:09:10 -07:00

104 lines
2.5 KiB
CSS

/**
* @provides phabricator-nav-view-css
*/
.jx-drag-col {
cursor: col-resize;
}
.phabricator-nav {
/* Force top margins in page content not to collapse with the top margin of
the navigation container by giving it padding. Then put it in the right
position by undoing the padding with a margin. */
padding-top: 1px;
margin-top: -1px;
}
.phabricator-nav-column-background {
position: fixed;
top: 0;
left: 0;
/* On the iPhone, scrolling down causes the revealed area to fill with white,
then draw with the texture after the action completes. Just make the
element extend off the bottom of the screen to prevent this. */
bottom: -480px;
width: 205px;
background: #33383b;
box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.05);
background-image: url(/rsrc/image/menu_texture.png);
}
.phabricator-nav-column-background,
.phabricator-nav-local,
.phabricator-nav-drag {
display: none;
}
.device-desktop .has-local-nav .phabricator-nav-column-background,
.device-desktop .has-local-nav .phabricator-nav-local,
.device-desktop .has-local-nav .phabricator-nav-drag {
display: block;
}
.device .phabricator-side-menu-home .phabricator-nav-column-background,
.device .phabricator-side-menu-home .phabricator-nav-local {
display: block;
}
.phabricator-nav-local {
width: 205px;
position: absolute;
left: 0;
white-space: nowrap;
overflow-x: hidden;
overflow-y: auto;
}
.phabricator-nav-drag {
position: fixed;
top: 0;
bottom: 0;
left: 205px;
width: 7px;
cursor: col-resize;
background: #f5f5f5;
border-style: solid;
border-width: 0 1px 0 1px;
border-color: #fff #999c9e #fff #999c9e;
box-shadow: inset -1px 0px 1px rgba(0, 0, 0, 0.15);
background-image: url(/rsrc/image/divot.png);
background-position: center;
background-repeat: no-repeat;
}
.device-desktop .phabricator-standard-page-body .has-drag-nav .phabricator-nav-content {
margin-left: 212px;
}
.device-desktop .has-local-nav .phabricator-nav-content {
margin-left: 205px;
}
.phabricator-side-menu-home .phabricator-nav-column-background,
.phabricator-side-menu-home .phabricator-nav-local {
width: 240px;
}
.device-desktop .phabricator-side-menu-home .phabricator-nav-content,
.device-tablet .phabricator-side-menu-home .phabricator-nav-content {
margin-left: 240px;
}
.device-phone .phabricator-side-menu-home .phabricator-nav-content {
display: none;
}
.device-phone .phabricator-side-menu-home .phabricator-nav-column-background,
.device-phone .phabricator-side-menu-home .phabricator-nav-local {
width: 100%;
}