1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 17:02:41 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-document.css
epriestley 4afb6446d9 Allow DocumentView to render with a curtain, and make Phriction use a curtain
Summary:
Depends on D19616. Ref T13077. Fixes T8172. In the last round of design updates, a lot of actions got stuffed into "Actions" menus.

I never really got used to these and think they're a net usability loss, and broadly agree with the feedback in T8172. I'd generally like to move back toward a state where actions are available on the page, not hidden in a menu.

For now, just put a curtain view on these pages. This could be refined later (e.g., stick this menu to the right hand side of the screen) depending on where other Phriction changes go.

(Broadly, I'm also not satisfied with where we ended up on the fixed-width pages like Diffusion > Manage, Config, and Instances. In contrast, I //do// like where we ended up with Phortune in terms of overall design. I anticipate revisiting some of this stuff eventually.)

Test Plan:
  - Looked at Phriction pages on desktop/tablet/mobile/printable -- actions are now available on the page.
  - Looked at other DocumentView pages (like Phame blogs) -- no changes for now.

Reviewers: amckinley

Maniphest Tasks: T13077, T8172

Differential Revision: https://secure.phabricator.com/D19617
2018-08-28 14:58:05 -07:00

102 lines
2.2 KiB
CSS

/**
* @provides phui-document-view-css
*/
.phui-document-view {
margin-bottom: 16px;
border-radius: 3px;
position: relative;
}
.device-desktop .phui-document-view {
border: 1px solid {$lightblueborder};
max-width: 960px;
margin: 16px auto;
}
.device-desktop .phui-document-box {
max-width: 996px;
margin: 24px auto;
}
.device-desktop .phui-document-fluid .phui-document-view {
max-width: none;
margin: 16px;
}
/* Fix so that Phriction Document preview is the same width as the document */
.device-desktop .phui-remarkup-preview .phui-document-view {
width: 800px;
}
.phui-document-content .phui-header-shell {
border-top: none;
border-bottom: 1px solid {$lightblueborder};
}
.phui-document-content
.phui-header-shell.phui-header-no-background {
border-bottom: 1px solid {$thinblueborder};
margin: 0 0 16px 0;
}
.phui-document-content
.phui-header-shell.phui-header-no-background
.phui-header-view {
padding: 8px 0 4px;
}
.legalpad .phui-document-content .phui-property-list-view {
border: none;
box-shadow: none;
border-radius: 3px;
margin: 16px 0 0 0;
background-color: {$bluebackground};
}
.phui-document-content {
background: {$page.content};
}
.phui-document-content .phabricator-remarkup {
padding: 16px;
font-size: 14px;
}
.phui-document-view.has-no-curtain
.phui-header-action-links .phui-mobile-menu {
display: block;
}
.device-phone .phui-document-content .phabricator-remarkup {
padding: 8px;
}
.phui-document-content .phabricator-remarkup .remarkup-code-block {
clear: both;
margin: 16px 0;
}
.phui-document-view .phui-info-severity-nodata {
background-color: {$lightgreybackground};
}
.phui-document-view .phui-property-list-section-header {
padding: 20px 24px 0px;
border-top: none;
}
.phui-document-view .phui-property-list-text-content {
padding: 0 24px 4px;
}
.phui-document-view .PhabricatorMonospaced,
.phui-document-view .phabricator-remarkup .remarkup-code-block .remarkup-code {
font: 12px/18px "Menlo", "Consolas", "Monaco", monospace;
}
.platform-windows .phui-document-view .PhabricatorMonospaced,
.platform-windows .phui-document-view .phabricator-remarkup .remarkup-code-block
.remarkup-code {
font: 13px/18px "Menlo", "Consolas", "Monaco", monospace;
}