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;
|
2015-11-28 05:40:02 +01:00
|
|
|
padding: 16px 16px 64px 16px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-container {
|
|
|
|
|
background-color: #fff;
|
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;
|
2015-11-28 05:40:02 +01:00
|
|
|
border-bottom: 1px solid #dedee1;
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-property-list-section {
|
|
|
|
|
max-width: 800px;
|
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
|
|
|
}
|
|
|
|
|
|
2015-11-28 05:40:02 +01:00
|
|
|
.device .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
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-phone .phui-document-view.phui-document-view-pro {
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-document-toc {
|
|
|
|
|
position: absolute;
|
2015-11-28 05:40:02 +01:00
|
|
|
top: 34px;
|
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
|
|
|
left: -36px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.button.phui-document-toc {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
height: 16px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
padding: 3px 8px 4px 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-document-toc-list {
|
|
|
|
|
margin: 8px;
|
|
|
|
|
border: 1px solid {$blueborder};
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
box-shadow: {$dropshadow};
|
|
|
|
|
width: 200px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 30;
|
|
|
|
|
background-color: #fff;
|
2015-11-28 05:40:02 +01:00
|
|
|
top: 52px;
|
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
|
|
|
left: -44px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 {
|
|
|
|
|
background-color: {$blue};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-toc-open .phui-document-toc .phui-icon-view {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
2015-11-22 22:10:41 +01:00
|
|
|
.phui-document-view-pro .phui-document-toc-content {
|
|
|
|
|
margin: 4px 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-document-toc-header {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: {$bluetext};
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro .phui-document-toc-content li {
|
|
|
|
|
margin: 4px 8px;
|
|
|
|
|
}
|
|
|
|
|
|
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 {
|
|
|
|
|
margin: 8px 0 0 0;
|
2015-11-03 22:41:20 +01:00
|
|
|
padding: 8px 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;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 {
|
|
|
|
|
margin: 16px 0 0 0;
|
|
|
|
|
}
|
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;
|
2015-11-28 05:40:02 +01:00
|
|
|
border-top: 1px solid rgba(71, 87, 120, 0.20);
|
2015-11-10 06:20:35 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-timeline-image {
|
|
|
|
|
border-radius: 25px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
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-timeline-major-event .phui-timeline-content
|
|
|
|
|
.phui-timeline-core-content {
|
2015-11-28 05:40:02 +01:00
|
|
|
|
2015-11-10 06:20:35 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-object-box {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-object-box .phui-form-view {
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-document-view-pro-box .phui-object-box .remarkup-assist-textarea {
|
|
|
|
|
height: 9em;
|
|
|
|
|
}
|