Pinboard view updates and Pholio List

Summary: Adds hover states to pinboard-items, adds date created and author on pholio home mock.

Test Plan: Review Pholio and Macro home pages

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2645

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

src/__celerity_resource_map__.php

@@ -2869,7 +2869,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-pinboard-view-css' =>
   array(
-    'uri' => '/res/549998d0/rsrc/css/layout/phabricator-pinboard-view.css',
+    'uri' => '/res/e0f29265/rsrc/css/layout/phabricator-pinboard-view.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/pholio/controller/PholioMockListController.php

@@ -39,14 +39,33 @@ final class PholioMockListController extends PholioController {
 
     $mocks = $query->executeWithCursorPager($pager);
 
+    $author_phids = array();
+    foreach ($mocks as $mock) {
+      $author_phids[] = $mock->getAuthorPHID();
+    }
+    $this->loadHandles($author_phids);
+
+
     $board = new PhabricatorPinboardView();
     foreach ($mocks as $mock) {
-      $board->addItem(
-        id(new PhabricatorPinboardItemView())
-          ->setHeader('M'.$mock->getID().' '.$mock->getName())
+      $item = new PhabricatorPinboardItemView();
+      $item->setHeader('M'.$mock->getID().' '.$mock->getName())
            ->setURI('/M'.$mock->getID())
            ->setImageURI($mock->getCoverFile()->getThumb220x165URI())
-          ->setImageSize(220, 165));
+           ->setImageSize(220, 165);
+
+      if ($mock->getAuthorPHID()) {
+        $author_handle = $this->getHandle($mock->getAuthorPHID());
+        $item->appendChild(
+          pht('Created by %s', $author_handle->renderLink()));
+      }
+      $datetime = phabricator_date($mock->getDateCreated(), $user);
+      $item->appendChild(
+        phutil_tag(
+          'div',
+          array(),
+          pht('Created on %s', $datetime)));
+      $board->addItem($item);
     }
 
     $content = array(

webroot/rsrc/css/layout/phabricator-pinboard-view.css

@@ -10,16 +10,21 @@
 
 .phabricator-pinboard-item-view {
   margin: 0 20px 20px 0;
-  border: 1px solid #ccc;
+  border: 1px solid #d7d7d7;
   background: #ffffff;
   border-radius: 3px;
 
   display: block;
   float: left;
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
   text-align: left;
 }
 
+.phabricator-pinboard-item-view:hover {
+  cursor: pointer;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.30);
+  margin-top: -1px;
+}
 
 /* On phones, show a single column of items. */
 .device-phone .phabricator-pinboard-item-view {
@@ -33,12 +38,16 @@
 .phabricator-pinboard-item-header {
   padding: 5px 10px;
   display: block;
-  background: #f3f3f3;
+  background: #edf0f4;
   font-weight: bold;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
 }
 
+.phabricator-pinboard-item-header a {
+  color: #333;
+}
+
 .phabricator-pinboard-item-image-link {
   padding: 10px;
   display: block;