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

@@ -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',

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.

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;
+  }
+
 }

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;
+}

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