From c45ba304168239f0600d780476dc705b54b6f492 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sun, 1 Nov 2015 08:56:46 -0800 Subject: [PATCH] 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 --- resources/celerity/map.php | 24 ++-- src/__phutil_library_map__.php | 2 + .../base/controller/PhabricatorController.php | 4 + .../controller/DivinerAtomController.php | 25 +--- .../controller/DivinerBookController.php | 3 +- .../controller/DivinerMainController.php | 9 +- .../diviner/view/DivinerSectionView.php | 6 +- src/view/page/PhabricatorStandardPageView.php | 10 +- src/view/phui/PHUIDocumentViewPro.php | 136 ++++++++++++++++++ webroot/rsrc/css/core/core.css | 4 + webroot/rsrc/css/core/remarkup.css | 29 +--- webroot/rsrc/css/diviner/diviner-shared.css | 58 +++++--- webroot/rsrc/css/phui/phui-document-pro.css | 108 ++++++++++++++ webroot/rsrc/css/phui/phui-document.css | 5 +- webroot/rsrc/css/phui/phui-fontkit.css | 3 +- 15 files changed, 338 insertions(+), 88 deletions(-) create mode 100644 src/view/phui/PHUIDocumentViewPro.php create mode 100644 webroot/rsrc/css/phui/phui-document-pro.css diff --git a/resources/celerity/map.php b/resources/celerity/map.php index fe97bdc236..5ee2e8ddf1 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => '15e557bc', + 'core.pkg.css' => 'a56d7104', 'core.pkg.js' => '47dc9ebb', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '2de124c9', @@ -103,11 +103,11 @@ return array( 'rsrc/css/application/slowvote/slowvote.css' => '475b4bd2', 'rsrc/css/application/tokens/tokens.css' => '3d0f239e', 'rsrc/css/application/uiexample/example.css' => '528b19de', - 'rsrc/css/core/core.css' => 'a76cefc9', - 'rsrc/css/core/remarkup.css' => '8d341238', + 'rsrc/css/core/core.css' => '78e8d7ea', + 'rsrc/css/core/remarkup.css' => 'f18999d1', 'rsrc/css/core/syntax.css' => '9fd11da8', 'rsrc/css/core/z-index.css' => '57ddcaa2', - 'rsrc/css/diviner/diviner-shared.css' => '5a337049', + 'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa', 'rsrc/css/font/font-awesome.css' => 'd2fc4e8d', 'rsrc/css/font/font-lato.css' => '5ab1a46a', 'rsrc/css/font/font-roboto-slab.css' => 'f24a53cb', @@ -126,9 +126,10 @@ return array( 'rsrc/css/phui/phui-box.css' => 'a5bb366d', 'rsrc/css/phui/phui-button.css' => '16020a60', 'rsrc/css/phui/phui-crumbs-view.css' => 'd842f867', - 'rsrc/css/phui/phui-document.css' => '0267054b', + 'rsrc/css/phui/phui-document-pro.css' => '3657eb4b', + 'rsrc/css/phui/phui-document.css' => '78521ba3', 'rsrc/css/phui/phui-feed-story.css' => 'b7b26d23', - 'rsrc/css/phui/phui-fontkit.css' => 'cb8ae7ad', + 'rsrc/css/phui/phui-fontkit.css' => '7837a28c', 'rsrc/css/phui/phui-form-view.css' => '621b21c5', 'rsrc/css/phui/phui-form.css' => 'afdb2c6e', 'rsrc/css/phui/phui-header-view.css' => '55bb32dd', @@ -523,7 +524,7 @@ return array( 'diffusion-icons-css' => '2941baf1', 'diffusion-readme-css' => '2106ea08', 'diffusion-source-css' => '075ba788', - 'diviner-shared-css' => '5a337049', + 'diviner-shared-css' => 'aa3656aa', 'font-fontawesome' => 'd2fc4e8d', 'font-lato' => '5ab1a46a', 'font-roboto-slab' => 'f24a53cb', @@ -713,7 +714,7 @@ return array( 'phabricator-busy' => '59a7976a', 'phabricator-chatlog-css' => 'd295b020', 'phabricator-content-source-view-css' => '4b8b05d4', - 'phabricator-core-css' => 'a76cefc9', + 'phabricator-core-css' => '78e8d7ea', 'phabricator-countdown-css' => 'e7544472', 'phabricator-dashboard-css' => 'eb458607', 'phabricator-drag-and-drop-file-upload' => 'ad10aeac', @@ -735,7 +736,7 @@ return array( 'phabricator-object-selector-css' => '85ee8ce6', 'phabricator-phtize' => 'd254d646', 'phabricator-prefab' => '6920d200', - 'phabricator-remarkup-css' => '8d341238', + 'phabricator-remarkup-css' => 'f18999d1', 'phabricator-search-results-css' => '7dea472c', 'phabricator-shaped-request' => '7cbe244b', 'phabricator-side-menu-view-css' => 'bec2458e', @@ -775,10 +776,11 @@ return array( 'phui-calendar-list-css' => 'c1c7f338', 'phui-calendar-month-css' => '476be7e0', 'phui-crumbs-view-css' => 'd842f867', - 'phui-document-view-css' => '0267054b', + 'phui-document-view-css' => '78521ba3', + 'phui-document-view-pro-css' => '3657eb4b', 'phui-feed-story-css' => 'b7b26d23', 'phui-font-icon-base-css' => 'ecbbb4c2', - 'phui-fontkit-css' => 'cb8ae7ad', + 'phui-fontkit-css' => '7837a28c', 'phui-form-css' => 'afdb2c6e', 'phui-form-view-css' => '621b21c5', 'phui-header-view-css' => '55bb32dd', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 398d212913..a1361b26d7 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -1433,6 +1433,7 @@ phutil_register_library_map(array( 'PHUIDiffTwoUpInlineCommentRowScaffold' => 'infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php', 'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php', 'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php', + 'PHUIDocumentViewPro' => 'view/phui/PHUIDocumentViewPro.php', 'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php', 'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php', 'PHUIFormDividerControl' => 'view/form/control/PHUIFormDividerControl.php', @@ -5338,6 +5339,7 @@ phutil_register_library_map(array( 'PHUIDiffTwoUpInlineCommentRowScaffold' => 'PHUIDiffInlineCommentRowScaffold', 'PHUIDocumentExample' => 'PhabricatorUIExample', 'PHUIDocumentView' => 'AphrontTagView', + 'PHUIDocumentViewPro' => 'AphrontTagView', 'PHUIFeedStoryExample' => 'PhabricatorUIExample', 'PHUIFeedStoryView' => 'AphrontView', 'PHUIFormDividerControl' => 'AphrontFormControl', diff --git a/src/applications/base/controller/PhabricatorController.php b/src/applications/base/controller/PhabricatorController.php index 9dcfa62fa2..adfacaebd8 100644 --- a/src/applications/base/controller/PhabricatorController.php +++ b/src/applications/base/controller/PhabricatorController.php @@ -334,6 +334,10 @@ abstract class PhabricatorController extends AphrontController { } } + if (idx($options, 'class')) { + $page->addClass($options['class']); + } + if (!($view instanceof AphrontSideNavFilterView)) { $nav = new AphrontSideNavFilterView(); $nav->appendChild($view); diff --git a/src/applications/diviner/controller/DivinerAtomController.php b/src/applications/diviner/controller/DivinerAtomController.php index ecde1218f3..05bb80c16a 100644 --- a/src/applications/diviner/controller/DivinerAtomController.php +++ b/src/applications/diviner/controller/DivinerAtomController.php @@ -58,13 +58,7 @@ final class DivinerAtomController extends DivinerController { $crumbs->addTextCrumb($atom_short_title); $header = id(new PHUIHeaderView()) - ->setHeader($this->renderFullSignature($symbol)) - ->addTag( - id(new PHUITagView()) - ->setType(PHUITagView::TYPE_STATE) - ->setBackgroundColor(PHUITagView::COLOR_BLUE) - ->setName(DivinerAtom::getAtomTypeNameString( - $atom ? $atom->getType() : $symbol->getType()))); + ->setHeader($this->renderFullSignature($symbol)); $properties = new PHUIPropertyListView(); @@ -78,11 +72,11 @@ final class DivinerAtomController extends DivinerController { $prop_list = new PHUIPropertyGroupView(); $prop_list->addPropertyList($properties); - $document = id(new PHUIDocumentView()) + $document = id(new PHUIDocumentViewPro()) ->setBook($book->getTitle(), $group_name) ->setHeader($header) ->addClass('diviner-view') - ->appendChild($prop_list); + ->setPropertyList($prop_list); if ($atom) { $this->buildDefined($properties, $symbol); @@ -163,10 +157,6 @@ final class DivinerAtomController extends DivinerController { ->setHeader($spec['title'])); $task_methods = idx($methods_by_task, $spec['name'], array()); - $inner_box = id(new PHUIBoxView()) - ->addPadding(PHUI::PADDING_LARGE_LEFT) - ->addPadding(PHUI::PADDING_LARGE_RIGHT) - ->addPadding(PHUI::PADDING_LARGE_BOTTOM); $box_content = array(); if ($task_methods) { @@ -198,7 +188,7 @@ final class DivinerAtomController extends DivinerController { $box_content = phutil_tag('em', array(), $no_methods); } - $inner_box->appendChild($box_content); + $inner_box = phutil_tag_div('diviner-task-items', $box_content); $section->addContent($inner_box); } $document->appendChild($section); @@ -246,7 +236,7 @@ final class DivinerAtomController extends DivinerController { ->setHref('#'.$key)); } - $document->setSideNav($side, PHUIDocumentView::NAV_TOP); + $document->setToc($side); } return $this->buildApplicationPage( @@ -256,6 +246,7 @@ final class DivinerAtomController extends DivinerController { ), array( 'title' => $symbol->getTitle(), + 'class' => 'pro-white-background', )); } @@ -629,7 +620,7 @@ final class DivinerAtomController extends DivinerController { $content = phutil_tag( 'div', array( - 'class' => 'phabricator-remarkup', + 'class' => 'phabricator-remarkup diviner-remarkup-section', ), $content); } else { @@ -668,8 +659,6 @@ final class DivinerAtomController extends DivinerController { if (($impl !== $parent) || $out) { $where = id(new PHUIBoxView()) - ->addPadding(PHUI::PADDING_MEDIUM_LEFT) - ->addPadding(PHUI::PADDING_MEDIUM_RIGHT) ->addClass('diviner-method-implementation-header') ->appendChild($impl->getName()); $doc = array($where, $doc); diff --git a/src/applications/diviner/controller/DivinerBookController.php b/src/applications/diviner/controller/DivinerBookController.php index ae4b81aa01..2731823588 100644 --- a/src/applications/diviner/controller/DivinerBookController.php +++ b/src/applications/diviner/controller/DivinerBookController.php @@ -53,7 +53,7 @@ final class DivinerBookController extends DivinerController { ->setName($book->getRepository()->getMonogram())); } - $document = new PHUIDocumentView(); + $document = new PHUIDocumentViewPro(); $document->setHeader($header); $document->addClass('diviner-view'); @@ -111,6 +111,7 @@ final class DivinerBookController extends DivinerController { ), array( 'title' => $book->getTitle(), + 'class' => 'pro-white-background', )); } diff --git a/src/applications/diviner/controller/DivinerMainController.php b/src/applications/diviner/controller/DivinerMainController.php index b2233463c0..a68d900d8a 100644 --- a/src/applications/diviner/controller/DivinerMainController.php +++ b/src/applications/diviner/controller/DivinerMainController.php @@ -30,7 +30,7 @@ final class DivinerMainController extends DivinerController { ->setHeader(pht('Documentation Books')) ->addActionLink($query_button); - $document = new PHUIDocumentView(); + $document = new PHUIDocumentViewPro(); $document->setHeader($header); $document->addClass('diviner-view'); @@ -45,10 +45,7 @@ final class DivinerMainController extends DivinerController { $list[] = $item; } $list = id(new PHUIBoxView()) - ->addPadding(PHUI::PADDING_LARGE_LEFT) - ->addPadding(PHUI::PADDING_LARGE_RIGHT) - ->addPadding(PHUI::PADDING_SMALL_TOP) - ->addPadding(PHUI::PADDING_SMALL_BOTTOM) + ->addPadding(PHUI::PADDING_MEDIUM_TOP) ->appendChild($list); $document->appendChild($list); @@ -82,7 +79,7 @@ final class DivinerMainController extends DivinerController { ), array( 'title' => pht('Documentation Books'), - 'fonts' => true, + 'class' => 'pro-white-background', )); } } diff --git a/src/applications/diviner/view/DivinerSectionView.php b/src/applications/diviner/view/DivinerSectionView.php index f12fb01fab..cc02d9d8b8 100644 --- a/src/applications/diviner/view/DivinerSectionView.php +++ b/src/applications/diviner/view/DivinerSectionView.php @@ -30,12 +30,10 @@ final class DivinerSectionView extends AphrontTagView { $header = id(new PHUIHeaderView()) ->setBleedHeader(true) + ->addClass('diviner-section-header') ->setHeader($this->header); - $content = id(new PHUIBoxView()) - ->addPadding(PHUI::PADDING_LARGE_LEFT) - ->addPadding(PHUI::PADDING_LARGE_RIGHT) - ->appendChild($this->content); + $content = phutil_tag_div('diviner-section-content', $this->content); return array($header, $content); } diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php index 90325bd54e..7e9733e1d4 100644 --- a/src/view/page/PhabricatorStandardPageView.php +++ b/src/view/page/PhabricatorStandardPageView.php @@ -11,6 +11,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { private $glyph; private $menuContent; private $showChrome = true; + private $classes = array(); private $disableConsole; private $pageObjects = array(); private $applicationMenu; @@ -67,6 +68,11 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { return $this->showChrome; } + public function addClass($class) { + $this->classes[] = $class; + return $this; + } + public function appendPageObjects(array $objs) { foreach ($objs as $obj) { $this->pageObjects[] = $obj; @@ -511,7 +517,9 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { } $classes[] = 'phui-theme-'.PhabricatorEnv::getEnvConfig('ui.header-color'); - + foreach ($this->classes as $class) { + $classes[] = $class; + } return implode(' ', $classes); } diff --git a/src/view/phui/PHUIDocumentViewPro.php b/src/view/phui/PHUIDocumentViewPro.php new file mode 100644 index 0000000000..1fbdd11cfc --- /dev/null +++ b/src/view/phui/PHUIDocumentViewPro.php @@ -0,0 +1,136 @@ +setTall(true); + $this->header = $header; + return $this; + } + + public function setBook($name, $description) { + $this->bookname = $name; + $this->bookdescription = $description; + return $this; + } + + public function setFluid($fluid) { + $this->fluid = $fluid; + return $this; + } + + public function setPropertyList($view) { + $this->propertyList = $view; + return $this; + } + + public function setToc(PHUIListView $toc) { + $this->toc = $toc; + return $this; + } + + protected function getTagAttributes() { + $classes = array(); + + if ($this->fluid) { + $classes[] = 'phui-document-fluid'; + } + + return array( + 'class' => $classes, + ); + } + + protected function getTagContent() { + require_celerity_resource('phui-document-view-css'); + require_celerity_resource('phui-document-view-pro-css'); + Javelin::initBehavior('phabricator-reveal-content'); + + $classes = array(); + $classes[] = 'phui-document-view'; + $classes[] = 'phui-document-view-pro'; + + $book = null; + if ($this->bookname) { + $book = pht('%s (%s)', $this->bookname, $this->bookdescription); + } + + $main_content = $this->renderChildren(); + + if ($book) { + $this->header->setSubheader($book); + } + + $table_of_contents = null; + if ($this->toc) { + $toc = array(); + $toc_id = celerity_generate_unique_node_id(); + $toc[] = id(new PHUIButtonView()) + ->setTag('a') + ->setIconFont('fa-align-left') + ->setColor(PHUIButtonView::SIMPLE) + ->addClass('phui-document-toc') + ->addSigil('jx-toggle-class') + ->setMetaData(array( + 'map' => array( + $toc_id => 'phui-document-toc-open', + ), + )); + + $toc[] = phutil_tag( + 'div', + array( + 'class' => 'phui-list-sidenav phui-document-toc-list', + ), + $this->toc); + + $table_of_contents = phutil_tag( + 'div', + array( + 'class' => 'phui-document-toc-container', + 'id' => $toc_id, + ), + $toc); + } + + $content_inner = phutil_tag( + 'div', + array( + 'class' => 'phui-document-inner', + ), + array( + $table_of_contents, + $this->header, + $main_content, + )); + + $content = phutil_tag( + 'div', + array( + 'class' => 'phui-document-content', + ), + $content_inner); + + $view = phutil_tag( + 'div', + array( + 'class' => implode(' ', $classes), + ), + $content); + + $list = null; + if ($this->propertyList) { + $list = phutil_tag_div('phui-document-properties', $this->propertyList); + } + + return array($view, $list); + } + +} diff --git a/webroot/rsrc/css/core/core.css b/webroot/rsrc/css/core/core.css index 87e6a98cce..c7229a54ae 100644 --- a/webroot/rsrc/css/core/core.css +++ b/webroot/rsrc/css/core/core.css @@ -173,3 +173,7 @@ hr { height: 2px; background: {$sky}; } + +html body.pro-white-background { + background-color: white; +} diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css index 3f4516f135..078e75af81 100644 --- a/webroot/rsrc/css/core/remarkup.css +++ b/webroot/rsrc/css/core/remarkup.css @@ -363,35 +363,12 @@ body div.phabricator-remarkup.remarkup-has-toc padding-top: 0; } -body .phabricator-remarkup p:first-child, -body .phabricator-remarkup ul.remarkup-list:first-child, -body .phabricator-remarkup ol.remarkup-list:first-child, -body .phabricator-remarkup .remarkup-code-block:first-child, -body .phabricator-remarkup h1.remarkup-header:first-child, -body .phabricator-remarkup h2.remarkup-header:first-child, -body .phabricator-remarkup h3.remarkup-header:first-child, -body .phabricator-remarkup h4.remarkup-header:first-child, -body .phabricator-remarkup h5.remarkup-header:first-child, -body .phabricator-remarkup h6.remarkup-header:first-child, -body .phabricator-remarkup blockquote:first-child, -body .phabricator-remarkup table.remarkup-table:first-child, -body .phabricator-remarkup .remarkup-note:first-child { +body .phabricator-remarkup *:first-child, +body .phabricator-remarkup .remarkup-header + * { margin-top: 0; } -body .phabricator-remarkup p:last-child, -body .phabricator-remarkup ul.remarkup-list:last-child, -body .phabricator-remarkup ol.remarkup-list:last-child, -body .phabricator-remarkup .remarkup-code-block:last-child, -body .phabricator-remarkup h1.remarkup-header:last-child, -body .phabricator-remarkup h2.remarkup-header:last-child, -body .phabricator-remarkup h3.remarkup-header:last-child, -body .phabricator-remarkup h4.remarkup-header:last-child, -body .phabricator-remarkup h5.remarkup-header:last-child, -body .phabricator-remarkup h6.remarkup-header:last-child, -body .phabricator-remarkup blockquote:last-child, -body .phabricator-remarkup table.remarkup-table:last-child, -body .phabricator-remarkup .remarkup-note:last-child { +body .phabricator-remarkup *:last-child { margin-bottom: 0; } diff --git a/webroot/rsrc/css/diviner/diviner-shared.css b/webroot/rsrc/css/diviner/diviner-shared.css index c43479f9d0..67a09616f7 100644 --- a/webroot/rsrc/css/diviner/diviner-shared.css +++ b/webroot/rsrc/css/diviner/diviner-shared.css @@ -8,7 +8,7 @@ } .diviner-table-view { - margin: 0 16px 24px; + margin: 0 0 24px; } .device-phone .diviner-table-view { @@ -65,38 +65,64 @@ padding: 0 8px 16px 0; } -body .diviner-document-section .phui-header-header { - width: 100%; +.phui-header-shell.diviner-section-header .phui-header-header { + color: #000; font-size: 20px; - font-weight: bold; - margin: 0; - padding: 0; +} + +body .diviner-view .diviner-document-section + .phui-header-shell.diviner-section-header { + padding: 0 24px 8px 0; + border-bottom: 1px solid {$thinblueborder}; + margin: 32px 0 16px; } body .diviner-document-section .phui-header-shell.phui-bleed-header { - padding: 0; + padding: 16px 0 0 0; + border-bottom: none; } -.phui-property-list-view + .diviner-document-section { - margin-top: -1px; +body .diviner-view .diviner-section-content .phui-header-shell { + margin: 24px 0 8px; + padding: 0; + border: none; } .diviner-message-not-documented { color: {$lightgreytext}; font-style: italic; - margin: 16px; + margin: 12px 0 32px; + font-size: {$biggerfontsize}; } -.diviner-atom-signature { - font-weight: normal; +.diviner-document-section .diviner-message-not-documented { + margin-left: 0; + margin-right: 0; +} + +.phui-document-content .phabricator-remarkup.diviner-remarkup-section { + padding: 16px 0 32px 0; } .diviner-atom-signature-name { font-weight: bold; + color: {$violet}; } -.diviner-list .diviner-atom-signature { +.diviner-atom-signature { + font-weight: normal; + color: #000; +} + +.phui-header-view .phui-header-header a.diviner-atom-signature-name { color: {$violet}; +} + +.phui-header-view .phui-header-header a.diviner-atom-signature-name:hover { + text-decoration: underline !important; +} + +.diviner-list .diviner-atom-signature { margin-left: -16px; } @@ -126,7 +152,7 @@ body .diviner-document-section .phui-header-shell.phui-bleed-header { } .diviner-list { - padding-left: 12px; + padding-left: 17px; } .diviner-list li { @@ -150,8 +176,8 @@ body .diviner-document-section .phui-header-shell.phui-bleed-header { text-decoration: none; } -.device-desktop .diviner-book-item:hover { - background-color: #F5EEFF; +.device-desktop .diviner-book-item:hover .diviner-book-item-title { + color: {$violet}; } .diviner-book-item-title { diff --git a/webroot/rsrc/css/phui/phui-document-pro.css b/webroot/rsrc/css/phui/phui-document-pro.css new file mode 100644 index 0000000000..f8365e4321 --- /dev/null +++ b/webroot/rsrc/css/phui/phui-document-pro.css @@ -0,0 +1,108 @@ +/** + * @provides phui-document-view-pro-css + */ + +.phui-document-view.phui-document-view-pro { + max-width: 800px; + padding: 0 16px; + position: relative; + margin: 16px auto; +} + +.phui-document-properties { + max-width: 800px; + padding: 0 16px; + background-color: {$lightgreybackground}; + margin: 0 auto; + border-radius: 3px; +} + +.device-phone .phui-document-properties { + margin: 0 8px; +} + +.device-phone .phui-document-view.phui-document-view-pro { + padding: 0 8px; + margin: 0 auto; +} + +.phui-document-view-pro .phui-document-toc { + position: absolute; + top: 18px; + 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; + top: 38px; + 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; +} + +.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; +} + +.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; +} diff --git a/webroot/rsrc/css/phui/phui-document.css b/webroot/rsrc/css/phui/phui-document.css index d054850cf8..56746bf6e5 100644 --- a/webroot/rsrc/css/phui/phui-document.css +++ b/webroot/rsrc/css/phui/phui-document.css @@ -86,7 +86,6 @@ .phui-header-shell.phui-header-no-backgound .phui-header-view { padding: 8px 0 4px; - font-size: {$biggestfontsize}; } .phui-document-content .phui-property-list-container { @@ -181,11 +180,11 @@ body .phui-document-view .phui-header-shell.phui-bleed-header { .phui-document-view .PhabricatorMonospaced, .phui-document-view .phabricator-remarkup .remarkup-code-block .remarkup-code { - font: 11px/14px "Menlo", "Consolas", "Monaco", monospace; + font: 11px/16px "Menlo", "Consolas", "Monaco", monospace; } .platform-windows .phui-document-view .PhabricatorMonospaced, .platform-windows .phui-document-view .phabricator-remarkup .remarkup-code-block .remarkup-code { - font: 12px/14px "Menlo", "Consolas", "Monaco", monospace; + font: 12px/16px "Menlo", "Consolas", "Monaco", monospace; } diff --git a/webroot/rsrc/css/phui/phui-fontkit.css b/webroot/rsrc/css/phui/phui-fontkit.css index 4021bf6f47..f198f0c2c8 100644 --- a/webroot/rsrc/css/phui/phui-fontkit.css +++ b/webroot/rsrc/css/phui/phui-fontkit.css @@ -10,7 +10,6 @@ .diviner-document-section .phui-header-header { font-family: 'Roboto Slab', {$fontfamily}; - font-size: 20px; color: #000; } @@ -30,5 +29,5 @@ .phui-document-view .phabricator-remarkup h2.remarkup-header { padding: 0 24px 8px 0; border-bottom: 1px solid {$thinblueborder}; - margin: 24px 0 16px; + margin: 32px 0 16px; } -- 2.51.2