Add new super hero header for Phame Blog

Summary: Adds a new header layout for Phame Blog. Subtitles now also.

Test Plan:
With Image, With Subtitle, Without Image, Without Subtitle. Mobile, Tablet, Desktop.

{F1691506}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D16147

resources/celerity/map.php

···
     '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' => 'dfdaec0e',
+    'rsrc/css/application/phame/phame.css' => '4748d928',
     'rsrc/css/application/pholio/pholio-edit.css' => '07676f51',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49',
     'rsrc/css/application/pholio/pholio.css' => 'ca89d380',
···
     'phabricator-uiexample-reactor-sendclass' => '1def2711',
     'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee',
     'phabricator-zindex-css' => '5b6fcf3f',
-    'phame-css' => 'dfdaec0e',
+    'phame-css' => '4748d928',
     'pholio-css' => 'ca89d380',
     'pholio-edit-css' => '07676f51',
     'pholio-inline-comments-css' => '8e545e49',

resources/sql/autopatches/20160618.phame.blog.subtitle.sql

···
+ALTER TABLE {$NAMESPACE}_phame.phame_blog
+  ADD subtitle VARCHAR(64) NOT NULL COLLATE {$COLLATE_TEXT};

src/applications/phame/controller/blog/PhameBlogViewController.php

···
 
     $posts = $post_query->executeWithCursorPager($pager);
 
-    $hero = $this->buildHeaderImage($blog);
+    $hero = $this->buildPhameHeader($blog);
 
     $header = id(new PHUIHeaderView())
-      ->setHeader($blog->getName())
+      ->addClass('phame-header-bar')
       ->setUser($viewer);
 
     if (!$is_external) {
···
     return $actions;
   }
 
-  private function buildHeaderImage(
+  private function buildPhameHeader(
     PhameBlog $blog) {
 
+    $image = null;
     if ($blog->getHeaderImagePHID()) {
-      $view = phutil_tag(
+      $image = phutil_tag(
         'div',
         array(
           'class' => 'phame-header-hero',
···
             'src'     => $blog->getHeaderImageURI(),
             'class'   => 'phame-header-image',
           )));
-      return $view;
+    }
+
+    $title = phutil_tag_div('phame-header-title', $blog->getName());
+    $subtitle = null;
+    if ($blog->getSubtitle()) {
+      $subtitle = phutil_tag_div('phame-header-subtitle', $blog->getSubtitle());
     }
-    return null;
+
+    return phutil_tag_div(
+      'phame-mega-header', array($image, $title, $subtitle));
+
   }
 
 }

src/applications/phame/editor/PhameBlogEditEngine.php

···
         ->setConduitTypeDescription(pht('New blog title.'))
         ->setTransactionType(PhameBlogTransaction::TYPE_NAME)
         ->setValue($object->getName()),
+      id(new PhabricatorTextEditField())
+        ->setKey('subtitle')
+        ->setLabel(pht('Subtitle'))
+        ->setDescription(pht('Blog subtitle.'))
+        ->setConduitDescription(pht('Change the blog subtitle.'))
+        ->setConduitTypeDescription(pht('New blog subtitle.'))
+        ->setTransactionType(PhameBlogTransaction::TYPE_SUBTITLE)
+        ->setValue($object->getSubtitle()),
      id(new PhabricatorRemarkupEditField())
         ->setKey('description')
         ->setLabel(pht('Description'))

src/applications/phame/editor/PhameBlogEditor.php

···
     $types = parent::getTransactionTypes();
 
     $types[] = PhameBlogTransaction::TYPE_NAME;
+    $types[] = PhameBlogTransaction::TYPE_SUBTITLE;
     $types[] = PhameBlogTransaction::TYPE_DESCRIPTION;
     $types[] = PhameBlogTransaction::TYPE_DOMAIN;
     $types[] = PhameBlogTransaction::TYPE_STATUS;
···
     switch ($xaction->getTransactionType()) {
       case PhameBlogTransaction::TYPE_NAME:
         return $object->getName();
+      case PhameBlogTransaction::TYPE_SUBTITLE:
+        return $object->getSubtitle();
       case PhameBlogTransaction::TYPE_DESCRIPTION:
         return $object->getDescription();
       case PhameBlogTransaction::TYPE_DOMAIN:
···
 
     switch ($xaction->getTransactionType()) {
       case PhameBlogTransaction::TYPE_NAME:
+      case PhameBlogTransaction::TYPE_SUBTITLE:
       case PhameBlogTransaction::TYPE_DESCRIPTION:
       case PhameBlogTransaction::TYPE_STATUS:
         return $xaction->getNewValue();
···
     switch ($xaction->getTransactionType()) {
       case PhameBlogTransaction::TYPE_NAME:
         return $object->setName($xaction->getNewValue());
+      case PhameBlogTransaction::TYPE_SUBTITLE:
+        return $object->setSubtitle($xaction->getNewValue());
       case PhameBlogTransaction::TYPE_DESCRIPTION:
         return $object->setDescription($xaction->getNewValue());
       case PhameBlogTransaction::TYPE_DOMAIN:
···
 
     switch ($xaction->getTransactionType()) {
       case PhameBlogTransaction::TYPE_NAME:
+      case PhameBlogTransaction::TYPE_SUBTITLE:
       case PhameBlogTransaction::TYPE_DESCRIPTION:
       case PhameBlogTransaction::TYPE_DOMAIN:
       case PhameBlogTransaction::TYPE_STATUS:

src/applications/phame/storage/PhameBlog.php

···
   const MARKUP_FIELD_DESCRIPTION = 'markup:description';
 
   protected $name;
+  protected $subtitle;
   protected $description;
   protected $domain;
   protected $configData;
···
       ),
       self::CONFIG_COLUMN_SCHEMA => array(
         'name' => 'text64',
+        'subtitle' => 'text64',
         'description' => 'text',
         'domain' => 'text128?',
         'status' => 'text32',

src/applications/phame/storage/PhameBlogTransaction.php

···
   extends PhabricatorApplicationTransaction {
 
   const TYPE_NAME        = 'phame.blog.name';
+  const TYPE_SUBTITLE    = 'phame.blog.subtitle';
   const TYPE_DESCRIPTION = 'phame.blog.description';
   const TYPE_DOMAIN      = 'phame.blog.domain';
   const TYPE_STATUS      = 'phame.blog.status';
···
         $tags[] = self::MAILTAG_SUBSCRIBERS;
         break;
       case self::TYPE_NAME:
+      case self::TYPE_SUBTITLE:
       case self::TYPE_DESCRIPTION:
       case self::TYPE_DOMAIN:
         $tags[] = self::MAILTAG_DETAILS;
···
             $new);
         }
         break;
+      case self::TYPE_SUBTITLE:
+        if ($old === null) {
+          return pht(
+            '%s set this blog\'s subtitle to "%s".',
+            $this->renderHandleLink($author_phid),
+            $new);
+        } else {
+          return pht(
+            '%s updated the blog\'s subtitle to "%s".',
+            $this->renderHandleLink($author_phid),
+            $new);
+        }
+        break;
       case self::TYPE_DESCRIPTION:
         return pht(
           '%s updated the blog\'s description.',
···
         } else {
           return pht(
             '%s updated the name for %s.',
+            $this->renderHandleLink($author_phid),
+            $this->renderHandleLink($object_phid));
+        }
+        break;
+      case self::TYPE_SUBTITLE:
+        if ($old === null) {
+          return pht(
+            '%s set the subtitle for %s.',
+            $this->renderHandleLink($author_phid),
+            $this->renderHandleLink($object_phid));
+        } else {
+          return pht(
+            '%s updated the subtitle for %s.',
             $this->renderHandleLink($author_phid),
             $this->renderHandleLink($object_phid));
         }

webroot/rsrc/css/application/phame/phame.css

···
   max-width: 100%;
   margin: 0 auto;
 }
+
+.phui-document-view.phui-document-view-pro .phui-header-shell.phame-header-bar {
+  border-top: 1px solid {$thinblueborder};
+  border-bottom: none;
+  padding: 4px 0;
+}
+
+.phame-header-bar .phui-header-subheader {
+  margin: 0;
+}
+
+.phame-mega-header {
+  margin: 0 auto;
+  text-align: center;
+  background: #fff;
+  padding: 16px 0 24px;
+}
+
+.device-phone .phame-mega-header {
+  padding: 24px 0;
+}
+
+.phame-mega-header .phame-header-title {
+  color: #000;
+  font-size: 28px;
+  font-weight: bold;
+  font-family: 'Aleo', {$fontfamily};
+  padding-top: 24px;
+}
+
+.device-phone .phame-mega-header .phame-header-title {
+  padding-top: 0;
+}
+
+.phame-mega-header .phame-header-subtitle {
+  color: {$greytext};
+  font-size: 20px;
+  font-family: 'Aleo', {$fontfamily};
+  padding-top: 8px;
+}