From e384e945d0cf48062af2b57ae7054ff343e9e07f Mon Sep 17 00:00:00 2001 From: Chad Little Date: Fri, 17 Jun 2016 12:02:56 -0700 Subject: [PATCH] Add basic support for Phame blog headers Summary: Fixes T10901. Allows blogs to have headers. I've built this in a basic way, any file, max-height is 240. Should bleed into top crumbs, so any spacing you want you should add to the file itself. Might have to see how users break this. Test Plan: Set a blog header, see blog header, remove blog header, see no blog header. Check mobile, tablet, desktop break points. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10901 Differential Revision: https://secure.phabricator.com/D16141 --- resources/celerity/map.php | 8 +++---- .../phame/controller/PhameLiveController.php | 1 + .../blog/PhameBlogViewController.php | 23 +++++++++++++++++++ webroot/rsrc/css/application/phame/phame.css | 10 ++++++++ webroot/rsrc/css/phui/phui-document-pro.css | 4 ++-- 5 files changed, 40 insertions(+), 6 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 9d1421bf90..4778c1647b 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -81,7 +81,7 @@ return array( 'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b', 'rsrc/css/application/paste/paste.css' => '1898e534', 'rsrc/css/application/people/people-profile.css' => '2473d929', - 'rsrc/css/application/phame/phame.css' => 'b78f5f1e', + 'rsrc/css/application/phame/phame.css' => '19ba0afc', 'rsrc/css/application/pholio/pholio-edit.css' => '07676f51', 'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49', 'rsrc/css/application/pholio/pholio.css' => 'ca89d380', @@ -128,7 +128,7 @@ return array( 'rsrc/css/phui/phui-chart.css' => '6bf6f78e', 'rsrc/css/phui/phui-crumbs-view.css' => '6b813619', 'rsrc/css/phui/phui-curtain-view.css' => '7148ae25', - 'rsrc/css/phui/phui-document-pro.css' => '8419560b', + 'rsrc/css/phui/phui-document-pro.css' => 'a3730b94', 'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf', 'rsrc/css/phui/phui-document.css' => '715aedfb', 'rsrc/css/phui/phui-feed-story.css' => 'aa49845d', @@ -808,7 +808,7 @@ return array( 'phabricator-uiexample-reactor-sendclass' => '1def2711', 'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee', 'phabricator-zindex-css' => '5b6fcf3f', - 'phame-css' => 'b78f5f1e', + 'phame-css' => '19ba0afc', 'pholio-css' => 'ca89d380', 'pholio-edit-css' => '07676f51', 'pholio-inline-comments-css' => '8e545e49', @@ -831,7 +831,7 @@ return array( 'phui-curtain-view-css' => '7148ae25', 'phui-document-summary-view-css' => '9ca48bdf', 'phui-document-view-css' => '715aedfb', - 'phui-document-view-pro-css' => '8419560b', + 'phui-document-view-pro-css' => 'a3730b94', 'phui-feed-story-css' => 'aa49845d', 'phui-font-icon-base-css' => '6449bce8', 'phui-fontkit-css' => '9cda225e', diff --git a/src/applications/phame/controller/PhameLiveController.php b/src/applications/phame/controller/PhameLiveController.php index e2f1789a6c..7317409a28 100644 --- a/src/applications/phame/controller/PhameLiveController.php +++ b/src/applications/phame/controller/PhameLiveController.php @@ -58,6 +58,7 @@ abstract class PhameLiveController extends PhameController { $blog_query = id(new PhameBlogQuery()) ->setViewer($viewer) ->needProfileImage(true) + ->needHeaderImage(true) ->withIDs(array($blog_id)); // If this is a live view, only show active blogs. diff --git a/src/applications/phame/controller/blog/PhameBlogViewController.php b/src/applications/phame/controller/blog/PhameBlogViewController.php index 0230b0703e..37e90d1522 100644 --- a/src/applications/phame/controller/blog/PhameBlogViewController.php +++ b/src/applications/phame/controller/blog/PhameBlogViewController.php @@ -32,6 +32,8 @@ final class PhameBlogViewController extends PhameLiveController { $posts = $post_query->executeWithCursorPager($pager); + $hero = $this->buildHeaderImage($blog); + $header = id(new PHUIHeaderView()) ->setHeader($blog->getName()) ->setUser($viewer); @@ -109,6 +111,7 @@ final class PhameBlogViewController extends PhameLiveController { ->setCrumbs($crumbs) ->appendChild( array( + $hero, $page, $about, )); @@ -152,4 +155,24 @@ final class PhameBlogViewController extends PhameLiveController { return $actions; } + private function buildHeaderImage( + PhameBlog $blog) { + + if ($blog->getHeaderImagePHID()) { + $view = phutil_tag( + 'div', + array( + 'class' => 'phame-header-hero', + ), + phutil_tag( + 'img', + array( + 'src' => $blog->getHeaderImageURI(), + 'class' => 'phame-header-image', + ))); + return $view; + } + return null; + } + } diff --git a/webroot/rsrc/css/application/phame/phame.css b/webroot/rsrc/css/application/phame/phame.css index 22d0317054..2b99fdfba3 100644 --- a/webroot/rsrc/css/application/phame/phame.css +++ b/webroot/rsrc/css/application/phame/phame.css @@ -250,3 +250,13 @@ color: {$darkgreytext}; background: {$greybackground}; } + +/* Hero Image */ +.phame-header-hero { + background-color: #fff; +} + +.phame-header-image { + max-height: 240px; + margin: 0 auto; +} diff --git a/webroot/rsrc/css/phui/phui-document-pro.css b/webroot/rsrc/css/phui/phui-document-pro.css index 0df18815d9..1cedd133f9 100644 --- a/webroot/rsrc/css/phui/phui-document-pro.css +++ b/webroot/rsrc/css/phui/phui-document-pro.css @@ -121,8 +121,8 @@ a.button.phui-document-toc { } .device-phone .phui-document-view.phui-document-view-pro .phui-header-shell { - margin: 8px 0 0 0; - padding: 8px 0 20px; + margin: 0; + padding: 16px 0 20px; } .phui-document-view.phui-document-view-pro .phui-header-tall