mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-22 14:52:41 +01:00
26c0db8dd7
Summary: See PHI624. Some of the mobile navigation and breadcrumbs in support pacts aren't as good as they could be. In particular, we generally collapse crumbs on mobile to just the first and last crumbs. The first crumb is the application; the last is the current page. On `/PHIxxx` pages, the first crumb isn't very useful since the Support landing page is two levels up: you usually want to go back to the pact, not all the way back to the Support landing page. We also don't need the space since the last crumb (`PHIxxx`) is always small. Allow Support and other similar applications to tailor the crumb behavior more narrowly if they end up in situations like this. Test Plan: - With an additional change to instances (see next diff), viewed a support issue page (`/PHI123`) on mobile and desktop. - Saw a link directly back to the pact on both mobile and desktop. Reviewers: amckinley Reviewed By: amckinley Differential Revision: https://secure.phabricator.com/D19438
138 lines
2.7 KiB
CSS
138 lines
2.7 KiB
CSS
/**
|
|
* @provides phui-crumbs-view-css
|
|
*/
|
|
|
|
.phui-crumbs-view {
|
|
overflow: hidden;
|
|
vertical-align: top;
|
|
padding: 0 12px 0 20px;
|
|
/* TODO: Position this over the slider for Differential's file tree view.
|
|
Remove this once that gets sorted out. */
|
|
position: relative;
|
|
-webkit-font-smoothing: antialiased;
|
|
background-color: {$page.background};
|
|
}
|
|
|
|
.printable .phui-crumbs-view {
|
|
display: none;
|
|
}
|
|
|
|
.phui-crumbs-view,
|
|
.phui-crumbs-view a.phui-crumb-view,
|
|
.phui-crumbs-view a.phui-crumbs-action {
|
|
color: {$darkbluetext};
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.device-tablet .phui-crumbs-view,
|
|
.device-phone .phui-crumbs-view,
|
|
.project-board-nav .phui-crumbs-view {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.phui-crumbs-view a.phui-crumbs-action-disabled,
|
|
.phui-crumbs-view a.phui-crumbs-action-disabled .phui-icon-view {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phui-crumbs-view + .phui-header-shell {
|
|
border-top: none;
|
|
}
|
|
|
|
.device-desktop .phui-crumbs-view a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.phui-crumb-view {
|
|
float: left;
|
|
padding: 8px 0;
|
|
max-width: 240px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.device-phone .phui-crumb-view.phabricator-last-crumb .phui-crumb-name,
|
|
.device-phone .phui-crumb-view.phui-crumb-always-visible .phui-crumb-name,
|
|
.device-phone .phui-crumb-view.phui-crumb-always-visible + .phui-crumb-divider,
|
|
.device-phone .phui-crumb-view.phui-crumb-has-icon,
|
|
.device-phone .phui-crumb-has-icon + .phui-crumb-divider {
|
|
display: inline-block;
|
|
}
|
|
|
|
.device-phone .phui-crumb-name,
|
|
.device-phone .phui-crumb-divider {
|
|
display: none;
|
|
}
|
|
|
|
.phui-crumb-has-icon .phui-icon-view {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.device-phone .phui-crumb-icon {
|
|
margin-left: 7px;
|
|
}
|
|
|
|
.phui-crumbs-actions {
|
|
float: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.phui-crumbs-action {
|
|
display: inline-block;
|
|
height: 17px;
|
|
padding: 8px 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.device-phone a.phui-crumbs-action {
|
|
padding: 8px 6px;
|
|
}
|
|
|
|
.device-desktop .phui-crumbs-view a:hover,
|
|
.device-desktop .phui-crumbs-view a:hover .phui-icon-view {
|
|
color: {$blue};
|
|
text-decoration: none;
|
|
}
|
|
|
|
.device-phone .phui-crumbs-action-name {
|
|
display: none;
|
|
}
|
|
|
|
a.phui-crumbs-action .phui-icon-view {
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
a.phui-crumbs-action .phui-crumbs-action-name {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.device-phone a.phui-crumbs-action .phui-icon-view {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.phui-crumb-divider {
|
|
margin: 2px 8px;
|
|
}
|
|
|
|
.phui-crumbs-view.phui-crumbs-border {
|
|
border-bottom: 1px solid rgba({$alphagrey},.1);
|
|
}
|
|
|
|
body .phui-crumbs-view + .phui-object-box {
|
|
margin-top: 0;
|
|
}
|
|
|
|
body .phui-crumbs-view + .phui-oi-list-view {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.phui-crumb-action-divider {
|
|
border-left: 1px solid {$lightgreyborder};
|
|
}
|
|
|
|
.phui-crumbs-action-icon + .phui-crumbs-action-icon {
|
|
padding-left: 4px;
|
|
}
|