mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-23 05:50:55 +01:00
fec00256be
Summary: Reduce users' need for scrolling on smaller screens with 920px or less viewport width by using HTML5's `<details>`/`<summary>` so clicking on a workboard column header hides the content of that column, in all CSS views (mobile, tablet, desktop). Keep expanding its content by default. On mobile and tablet devices, display an arrow in the column header box below the header text to potentially make those users aware of this functionality that benefit the most from it. Do not render these arrows on desktop devices (though the collapse/expand functionality still works there). See https://caniuse.com/details for browser (in)compatibility. Closes T15843 Test Plan: Go to a project workboard with several columns and tasks in them on a screen with 920px or less width. See a small arrow below the column header text. Click on a column header to collapse and expand the column content. Reviewers: O1 Blessed Committers, valerio.bozzolan, avivey Reviewed By: O1 Blessed Committers, valerio.bozzolan, avivey Subscribers: avivey, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno Maniphest Tasks: T15843 Differential Revision: https://we.phorge.it/D25672
351 lines
6.6 KiB
CSS
351 lines
6.6 KiB
CSS
/**
|
|
* @provides phui-header-view-css
|
|
*/
|
|
|
|
.phui-header-shell {
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
overflow: hidden;
|
|
padding: 0 4px 12px;
|
|
}
|
|
|
|
.phui-header-view {
|
|
display: table;
|
|
width: 100%
|
|
}
|
|
|
|
.phui-header-row {
|
|
display: table-row;
|
|
}
|
|
|
|
.phui-header-col1 {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
width: 62px;
|
|
}
|
|
|
|
.phui-header-col2 {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.phui-header-col3 {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
body .phui-header-shell.phui-header-no-background {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
body .phui-header-shell.phui-bleed-header {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
width: auto;
|
|
margin: 16px;
|
|
}
|
|
|
|
body .phui-header-shell.phui-bleed-header
|
|
.phui-header-view {
|
|
padding: 8px 24px 8px 0;
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.phui-header-shell + .phabricator-form-view {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
details > summary.phui-header-shell {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
details > summary.phui-header-shell::marker {
|
|
content: none;
|
|
}
|
|
|
|
.device-phone details > summary.phui-header-shell::after,
|
|
.device-tablet details > summary.phui-header-shell::after {
|
|
font-family: FontAwesome;
|
|
content: "\f061";
|
|
}
|
|
|
|
.device-phone details[open] > summary.phui-header-shell::after,
|
|
.device-tablet details[open] > summary.phui-header-shell::after {
|
|
font-family: FontAwesome;
|
|
content: "\f063";
|
|
}
|
|
|
|
.phui-property-list-view + .diviner-document-section {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.phui-header-view {
|
|
position: relative;
|
|
font-size: {$normalfontsize};
|
|
}
|
|
|
|
.phui-header-header {
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.phui-header-header .phui-header-icon {
|
|
margin-right: 8px;
|
|
color: {$lightbluetext};
|
|
|
|
/* This allows the header text to be triple-clicked to select it in Firefox,
|
|
see T10905 for discussion. */
|
|
display: inline;
|
|
}
|
|
|
|
.phui-object-box .phui-header-tall .phui-header-header,
|
|
.phui-document-view .phui-header-tall .phui-header-header {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.phui-header-view .phui-header-header a {
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.phui-box-blue-property .phui-header-view .phui-header-header a {
|
|
color: {$bluetext};
|
|
}
|
|
|
|
.device-desktop .phui-header-view .phui-header-header a:hover {
|
|
text-decoration: none;
|
|
color: {$blue};
|
|
}
|
|
|
|
.phui-header-view .phui-header-action-links {
|
|
float: right;
|
|
}
|
|
|
|
.phui-object-box .phui-header-view .phui-header-action-links {
|
|
margin-right: 4px;
|
|
font-size: {$normalfontsize};
|
|
}
|
|
|
|
.phui-header-action-link {
|
|
margin-bottom: 4px;
|
|
margin-top: 4px;
|
|
float: right;
|
|
}
|
|
|
|
.device-phone .phui-header-action-link .phui-button-text {
|
|
visibility: hidden;
|
|
width: 0;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.device-phone .phui-header-action-link.button .phui-icon-view {
|
|
width: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.phui-header-divider {
|
|
margin: 0 4px;
|
|
font-weight: normal;
|
|
color: {$lightbluetext};
|
|
}
|
|
|
|
.phui-header-tags {
|
|
margin-left: 12px;
|
|
font-size: {$normalfontsize};
|
|
}
|
|
|
|
.phui-header-tags .phui-tag-view {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.phui-header-image {
|
|
display: inline-block;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.phui-header-image-href {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.phui-header-image-edit {
|
|
display: none;
|
|
}
|
|
|
|
.device-desktop .phui-header-image-href:hover .phui-header-image-edit {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
background: rgba({$alphablack},0.4);
|
|
color: #fff;
|
|
font-weight: normal;
|
|
bottom: 4px;
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.device-desktop .phui-header-image-edit:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.phui-header-subheader {
|
|
font-weight: normal;
|
|
font-size: {$biggerfontsize};
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.phui-header-subheader .phui-icon-view {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.phui-header-subheader .phui-tag-view span.phui-icon-view,
|
|
.phui-header-subheader .policy-header-callout span.phui-icon-view {
|
|
display: inline-block;
|
|
margin: -2px 4px -2px 0;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.phui-header-subheader,
|
|
.phui-header-subheader .policy-link {
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.policy-header-callout,
|
|
.phui-header-subheader .phui-tag-core {
|
|
padding: 3px 9px;
|
|
border-radius: 3px;
|
|
background: rgba({$alphablue}, 0.1);
|
|
margin-right: 8px;
|
|
-webkit-font-smoothing: auto;
|
|
border-color: transparent;
|
|
line-height: 28px;
|
|
}
|
|
|
|
|
|
.phui-header-subheader .phui-tag-view,
|
|
.phui-header-subheader .phui-tag-type-shade .phui-tag-core {
|
|
border: none;
|
|
font-weight: normal;
|
|
-webkit-font-smoothing: auto;
|
|
}
|
|
|
|
.policy-header-callout.policy-adjusted-special {
|
|
background: {$sh-indigobackground};
|
|
}
|
|
|
|
.policy-header-callout.policy-adjusted-special .policy-link,
|
|
.policy-header-callout.policy-adjusted-special .phui-icon-view {
|
|
color: {$sh-indigotext};
|
|
}
|
|
|
|
.policy-header-callout.policy-adjusted-locked {
|
|
background: {$sh-pinkbackground};
|
|
}
|
|
|
|
.policy-header-callout.policy-adjusted-locked .policy-link,
|
|
.policy-header-callout.policy-adjusted-locked .phui-icon-view {
|
|
color: {$sh-pinktext};
|
|
}
|
|
|
|
|
|
.policy-header-callout .policy-space-container {
|
|
font-weight: bold;
|
|
color: {$sh-redtext};
|
|
}
|
|
|
|
.policy-header-callout .policy-tier-separator {
|
|
padding: 0 0 0 4px;
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phui-header-action-links .phui-mobile-menu {
|
|
display: none;
|
|
}
|
|
|
|
.device .phui-header-action-links .phui-mobile-menu {
|
|
display: inline-block;
|
|
}
|
|
|
|
.phui-header-action-list {
|
|
float: right;
|
|
}
|
|
|
|
.phui-header-action-list li {
|
|
margin: 0 0 0 8px;
|
|
float: right;
|
|
}
|
|
|
|
.phui-header-action-list .phui-header-action-item .phui-icon-view {
|
|
height: 18px;
|
|
width: 16px;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
display: block;
|
|
}
|
|
|
|
.spaces-name {
|
|
color: {$lightbluetext};
|
|
}
|
|
|
|
.phui-object-box .phui-header-tall .spaces-name {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.spaces-name .phui-handle,
|
|
.spaces-name a.phui-handle,
|
|
.phui-profile-header.phui-header-shell .spaces-name .phui-handle {
|
|
color: {$sh-redtext};
|
|
}
|
|
|
|
.device-desktop .spaces-name a.phui-handle:hover {
|
|
color: {$sh-redtext};
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
/*** Profile Header ***********************************************************/
|
|
|
|
.phui-profile-header {
|
|
padding: 24px 20px 20px 24px;
|
|
}
|
|
|
|
.device-phone .phui-profile-header {
|
|
padding: 12px;
|
|
}
|
|
|
|
.phui-profile-header.phui-header-shell {
|
|
margin: 0;
|
|
border: none;
|
|
}
|
|
|
|
.phui-profile-header .phui-header-image {
|
|
height: 80px;
|
|
width: 80px;
|
|
}
|
|
|
|
.phui-profile-header .phui-header-col1 {
|
|
width: 96px;
|
|
}
|
|
|
|
.phui-profile-header .phui-header-subheader {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.phui-profile-header.phui-header-shell .phui-header-header {
|
|
font-size: 24px;
|
|
color: {$blacktext};
|
|
}
|
|
|
|
.phui-profile-header.phui-header-shell .phui-header-header a {
|
|
color: {$blacktext};
|
|
}
|
|
|
|
.phui-header-view .phui-tag-indigo a {
|
|
color: {$sh-indigotext};
|
|
}
|