Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
/**
|
|
|
|
|
* @provides phui-document-view-pro-css
|
|
|
|
|
*/
|
|
|
|
|
|
2015-11-28 05:40:02 +01:00
|
|
|
.phui-document-view.phui-document-view-pro {
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
max-width: 800px;
|
2018-09-07 21:18:39 +02:00
|
|
|
padding: 16px 16px 32px 16px;
|
2015-11-28 05:40:02 +01:00
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
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 23:37:19 +02:00
|
|
|
.phui-document-view.phui-document-view-pro.has-curtain {
|
|
|
|
|
max-width: 1132px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.printable .phui-document-view.phui-document-view-pro.has-curtain {
|
|
|
|
|
max-width: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-desktop .phui-document-inner {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-desktop .has-curtain .phui-document-content-view {
|
2018-09-07 21:18:39 +02:00
|
|
|
display: table-cell;
|
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 23:37:19 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.printable .phui-document-content-view {
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2018-09-07 21:18:39 +02:00
|
|
|
.device-desktop .phui-document-content-outer {
|
|
|
|
|
display: table;
|
|
|
|
|
width: 100%;
|
|
|
|
|
layout: fixed;
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-01 20:06:00 +02:00
|
|
|
/* Force very wide content, like tables with many columns, to scroll inside
|
|
|
|
|
the frame. See T13202. */
|
|
|
|
|
.phui-document-content-view {
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
}
|
|
|
|
|
|
2018-09-07 21:18:39 +02:00
|
|
|
.device-desktop .phui-document-content-inner {
|
|
|
|
|
display: table-row;
|
|
|
|
|
}
|
|
|
|
|
|
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 23:37:19 +02:00
|
|
|
.device-desktop .phui-document-curtain {
|
2018-09-07 21:18:39 +02:00
|
|
|
display: table-cell;
|
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 23:37:19 +02:00
|
|
|
width: 300px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.printable .phui-document-curtain {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-11-28 05:40:02 +01:00
|
|
|
.phui-document-container {
|
2017-07-17 20:08:17 +02:00
|
|
|
background-color: {$page.content};
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
position: relative;
|
Fix "Actions" button on Phame standalone/live pages (bonus: JX.sprintf())
Summary:
See <https://discourse.phabricator-community.org/t/non-functional-actions-menu-on-live-phame-views/2593>. Several layers here:
The "Actions" button is broken because a menu behavior is failing, since we aren't rendering the menu.
When a behavior fails to initialize, catch and log the exception and continue. Previously, we stopped initializing behaviors if any failed, but behaviors are usually independent and continuing with an explicit exception seems reasonable.
Give "JX.log()" some "sprintf()" semantics to make logging the behavior failure easier. We can probably afford these extra 200 bytes now in 2019.
This fixes the button and gives us explicit errors in the log. So far, so good.
Then, when a page won't render chrome, don't try to render the main menu. This fixes the actual errors (we no longer try to initialize menu behaviors for nodes which don't exist).
Completely hide the "Actions" and "Comment" flows if the viewer isn't logged in. Although this isn't completely consistent with other applications, I think it's more appropriate for Phame. In applications like Maniphest, we show a full set of controls (but disable them) so that users who are not currently logged in have a clear path to interact with the content, under the assumption that this is a relatively common workflow. This is probably less common for Phame, where we expect most anonymous viewers not to log in or interact.
Finally, parametrize a one-off border color and add a border under the crumbs at the top of the page.
Test Plan:
- Viewed a "Live" Phame blog post page, clicked "Actions", got a dropdown.
Reviewers: amckinley
Reviewed By: amckinley
Differential Revision: https://secure.phabricator.com/D20378
2019-04-03 18:56:49 +02:00
|
|
|
border-bottom: 1px solid {$document.border};
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
}
|
|
|
|
|
|
2015-11-28 05:40:02 +01:00
|
|
|
.phui-document-view-pro-box,
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
.phui-document-properties {
|
2015-11-28 05:40:02 +01:00
|
|
|
max-width: 800px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
2016-09-09 03:46:19 +02:00
|
|
|
body.printable {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.printable .phui-document-view-pro-box {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.printable .phui-document-container {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.printable .phui-document-container .phui-header-view .phui-header-subheader {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.printable .phui-document-container .phui-header-view .phui-header-col3 {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2016-02-22 20:48:44 +01:00
|
|
|
.device .phui-document-view-pro-box {
|
|
|
|
|
margin: 0 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-property-list-section {
|
2015-11-05 21:13:35 +01:00
|
|
|
margin: 16px auto;
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
}
|
|
|
|
|
|
2016-02-22 20:48:44 +01:00
|
|
|
.device .phui-document-view-pro-box .phui-property-list-section {
|
2015-11-05 21:13:35 +01:00
|
|
|
margin: 0 8px 16px;
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
}
|
|
|
|
|
|
2016-02-22 20:48:44 +01:00
|
|
|
.device .phui-document-view-pro-box .phui-property-list-container {
|
|
|
|
|
padding: 24px 0 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
.device-phone .phui-document-view.phui-document-view-pro {
|
2016-08-01 21:06:35 +02:00
|
|
|
padding: 0 12px;
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-document-toc {
|
|
|
|
|
position: absolute;
|
2015-11-28 05:40:02 +01:00
|
|
|
top: 34px;
|
2017-06-04 17:52:36 +02:00
|
|
|
left: -44px;
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
}
|
|
|
|
|
|
2016-09-09 03:46:19 +02:00
|
|
|
.printable .phui-document-view-pro a.phui-document-toc {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
.phui-document-view-pro .phui-document-toc-list {
|
|
|
|
|
margin: 8px;
|
2017-01-17 21:04:28 +01:00
|
|
|
border: 1px solid {$lightgreyborder};
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
border-radius: 3px;
|
|
|
|
|
box-shadow: {$dropshadow};
|
2017-05-26 17:58:35 +02:00
|
|
|
width: 260px;
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
position: absolute;
|
|
|
|
|
z-index: 30;
|
2017-07-17 20:08:17 +02:00
|
|
|
background-color: {$page.content};
|
2015-11-28 05:40:02 +01:00
|
|
|
top: 52px;
|
2017-04-25 19:47:48 +02:00
|
|
|
left: -40px;
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device .phui-document-view-pro .phui-document-toc {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-toc-list {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-toc-open .phui-document-toc-list {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-toc-open .phui-document-toc {
|
2017-06-04 17:52:36 +02:00
|
|
|
border-color: {$blueborder};
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
}
|
|
|
|
|
|
2015-11-22 22:10:41 +01:00
|
|
|
.phui-document-view-pro .phui-document-toc-content {
|
2017-05-26 17:58:35 +02:00
|
|
|
margin: 8px 16px;
|
2015-11-22 22:10:41 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-document-toc-header {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: {$bluetext};
|
|
|
|
|
margin-bottom: 8px;
|
2017-05-26 17:58:35 +02:00
|
|
|
text-transform: uppercase;
|
|
|
|
|
font-size: {$smallerfontsize};
|
2015-11-22 22:10:41 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-document-toc-content li {
|
2017-05-26 17:58:35 +02:00
|
|
|
margin: 4px 8px 4px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-document-toc-content a {
|
|
|
|
|
padding: 2px 0;
|
|
|
|
|
display: block;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: {$darkbluetext};
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-document-toc-content a:hover {
|
|
|
|
|
color: {$anchor};
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-document-toc-content li + ul {
|
|
|
|
|
margin: 4px 0 4px 8px;
|
2015-11-22 22:10:41 +01:00
|
|
|
}
|
|
|
|
|
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
.phui-document-view-pro .phui-document-content .phabricator-remarkup {
|
|
|
|
|
padding: 16px 0;
|
|
|
|
|
line-height: 1.7em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-desktop .phui-document-view.phui-document-view-pro {
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view.phui-document-view-pro .phui-header-shell {
|
|
|
|
|
background: transparent;
|
|
|
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view.phui-document-view-pro .phui-header-shell {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 16px 0 32px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-phone .phui-document-view.phui-document-view-pro .phui-header-shell {
|
2016-06-17 21:02:56 +02:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 16px 0 20px;
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view.phui-document-view-pro .phui-header-tall
|
|
|
|
|
.phui-header-header {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
line-height: 30px;
|
2017-07-17 20:08:17 +02:00
|
|
|
color: {$blacktext};
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
}
|
|
|
|
|
|
2016-08-01 21:06:35 +02:00
|
|
|
.device-phone .phui-document-view.phui-document-view-pro .phui-header-tall
|
|
|
|
|
.phui-header-header {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
Redesign Diviner
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:
- White Background, no border on page
- Table of Contents is move to hidden menu (more space for documentation)
- Property List sits under the document
Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.
Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.
{F930518}
{F930519}
{F930520}
{F930521}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: tycho.tatitscheff, joshuaspence, Korvin
Differential Revision: https://secure.phabricator.com/D14374
2015-11-01 17:56:46 +01:00
|
|
|
.device-phone .phui-document-view-pro .phui-header-subheader {
|
|
|
|
|
display: block;
|
|
|
|
|
padding: 8px 0 0 0;
|
|
|
|
|
}
|
2015-11-03 22:41:20 +01:00
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-info-view {
|
2016-11-13 05:59:22 +01:00
|
|
|
margin: 16px 0;
|
2015-11-03 22:41:20 +01:00
|
|
|
}
|
2015-11-10 06:20:35 +01:00
|
|
|
|
2016-05-03 22:53:12 +02:00
|
|
|
.phui-document-view-pro .phabricator-remarkup-embed-image-wide {
|
|
|
|
|
margin-left: -200px;
|
|
|
|
|
margin-right: -200px;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phabricator-remarkup-embed-image-wide img {
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
}
|
2015-11-10 06:20:35 +01:00
|
|
|
|
2016-05-03 22:53:12 +02:00
|
|
|
@media (max-width: 1200px) {
|
|
|
|
|
.phui-document-view-pro .phabricator-remarkup-embed-image-wide {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
2015-11-10 06:20:35 +01:00
|
|
|
|
2016-05-03 22:53:12 +02:00
|
|
|
.phui-document-view-pro .phabricator-remarkup-embed-image-wide img {
|
|
|
|
|
max-width: inherit;
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-11-10 06:20:35 +01:00
|
|
|
|
2018-09-11 17:35:22 +02:00
|
|
|
.phui-document-view-pro-box {
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
2015-11-10 06:20:35 +01:00
|
|
|
.phui-document-view-pro-box .phui-timeline-view {
|
2015-11-28 05:40:02 +01:00
|
|
|
padding: 16px 0 0 0;
|
2015-11-10 06:20:35 +01:00
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-timeline-wedge {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-timeline-major-event .phui-timeline-group {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-timeline-major-event .phui-timeline-content {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-desktop .phui-document-view-pro-box
|
|
|
|
|
.phui-timeline-event-view.phui-timeline-minor-event {
|
|
|
|
|
margin-left: 62px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-timeline-title {
|
2015-11-28 05:40:02 +01:00
|
|
|
border-top-right-radius: 3px;
|
|
|
|
|
border-top-left-radius: 3px;
|
2017-07-17 20:08:17 +02:00
|
|
|
background-color: {$page.content};
|
2015-11-28 05:40:02 +01:00
|
|
|
border-bottom: 1px solid #F1F1F4;
|
2015-11-10 06:20:35 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-timeline-title-with-icon {
|
|
|
|
|
padding-left: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-timeline-icon-fill {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-object-box {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-object-box .remarkup-assist-textarea {
|
|
|
|
|
height: 9em;
|
|
|
|
|
}
|
2015-12-31 22:08:33 +01:00
|
|
|
|
|
|
|
|
.document-has-foot .phui-document-view-pro {
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-foot-content {
|
|
|
|
|
margin: 64px 0 32px;
|
|
|
|
|
}
|
Show table of contents by default on wide screens
Summary:
Show table of content in left whitespace area in wide screens (width >= 1792px)
Closes T15920
Test Plan:
1) Open Phriction wiki page in browser which contain a number of chapter titles
2) Open Responsive Design Mode in browser (Ctrl-Shift-M in Firefox) and test different width's of the page (e.g. 1024, 1280, 1440, 1600, 1920, ...)
3) Open Remarkup Reference at `/book/phorge/article/remarkup/` and repeat step 2
4) Open a Differential revision to confirm that the unrelated ToC panel has no changes
Reviewers: O1 Blessed Committers, aklapper
Reviewed By: O1 Blessed Committers, aklapper
Subscribers: aklapper, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Maniphest Tasks: T15920
Differential Revision: https://we.phorge.it/D25790
2024-08-17 15:13:53 +02:00
|
|
|
|
|
|
|
|
@media (min-width: 1792px) {
|
|
|
|
|
div.phui-document-view.phui-document-view-pro.has-curtain {
|
|
|
|
|
max-width: 1332px;
|
|
|
|
|
left: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-desktop div.phui-document-view.phui-document-view-pro.has-curtain
|
|
|
|
|
div.phui-document-content-outer {
|
|
|
|
|
width: 1332px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.phui-document-content {
|
|
|
|
|
margin-left: -200px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.phui-document-curtain {
|
|
|
|
|
top: 130px;
|
|
|
|
|
position: sticky;
|
|
|
|
|
right: 15%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.phui-document-content-outer,
|
|
|
|
|
div.phui-document-view.phui-document-view-pro
|
|
|
|
|
div.phui-header-shell.phui-header-tall {
|
|
|
|
|
margin-left: 300px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.phui-document-toc-container > a.phui-document-toc {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-desktop div.phui-document-inner {
|
|
|
|
|
overflow: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.phui-list-sidenav.phui-document-toc-list {
|
|
|
|
|
top: -16px;
|
|
|
|
|
margin-top: 23px;
|
|
|
|
|
box-shadow: 0px 0px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
max-height: calc(100vh - 120px);
|
|
|
|
|
border: solid 1px {$lightgreyborder};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.has-curtain div.phui-list-sidenav.phui-document-toc-list {
|
|
|
|
|
left: -185px;
|
|
|
|
|
margin-left: 175px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-desktop .has-curtain div.phui-document-content-view {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.phui-document-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.phui-document-toc-container {
|
|
|
|
|
position: sticky;
|
|
|
|
|
left: 0px;
|
|
|
|
|
top: 0;
|
|
|
|
|
margin-left: 32px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.phui-list-sidenav.phui-document-toc-list {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.phui-document-view-pro div.phui-document-toc-content li a {
|
|
|
|
|
white-space: break-spaces;
|
|
|
|
|
text-indent: -10px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
