Basic touchups to Phortune UI

Summary: This is just a quick pass to fix a few bugs and spacing issues, Phortune itself could probably use some more custom UI, but that'll require some thought and abstraction. This also adds a new taller table CSS, which I mayyyy make automatic on tables with few rows, we'll see.

Test Plan: Browsed my Phortune account, tested new spacing on `admin` for 'full effect'

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'eca3f2e7',
+    'core.pkg.css' => 'f4d1cd07',
     'core.pkg.js' => '75599122',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '5a0b221c',
@@ -26,7 +26,7 @@ return array(
     'rsrc/css/aphront/pager-view.css' => '2e3539af',
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => '7aeaf435',
-    'rsrc/css/aphront/table-view.css' => 'b22b7216',
+    'rsrc/css/aphront/table-view.css' => '3e77fefe',
     'rsrc/css/aphront/tokenizer.css' => '82ce2142',
     'rsrc/css/aphront/tooltip.css' => '4099b97e',
     'rsrc/css/aphront/transaction.css' => '042fc4bb',
@@ -504,7 +504,7 @@ return array(
     'aphront-multi-column-view-css' => 'fd18389d',
     'aphront-pager-view-css' => '2e3539af',
     'aphront-panel-view-css' => '8427b78d',
-    'aphront-table-view-css' => 'b22b7216',
+    'aphront-table-view-css' => '3e77fefe',
     'aphront-tokenizer-control-css' => '82ce2142',
     'aphront-tooltip-css' => '4099b97e',
     'aphront-two-column-view-css' => '16ab3ad2',

src/applications/phortune/controller/PhortuneAccountListController.php

@@ -27,6 +27,7 @@ final class PhortuneAccountListController extends PhortuneController {
     $crumbs->addTextCrumb(pht('Accounts'));
 
     $payment_list = id(new PHUIObjectItemListView())
+      ->setStackable(true)
       ->setUser($viewer)
       ->setNoDataString(
         pht(
@@ -34,10 +35,13 @@ final class PhortuneAccountListController extends PhortuneController {
           'accounts are used to make purchases.'));
 
     foreach ($accounts as $account) {
+      $this->loadHandles($account->getMemberPHIDs());
+      $members = $this->renderHandlesForPHIDs($account->getMemberPHIDs(), ',');
       $item = id(new PHUIObjectItemView())
         ->setObjectName(pht('Account %d', $account->getID()))
         ->setHeader($account->getName())
         ->setHref($this->getApplicationURI($account->getID().'/'))
+        ->addAttribute(pht('Members: %s', $members))
         ->setObject($account);
 
       $payment_list->addItem($item);
@@ -59,6 +63,7 @@ final class PhortuneAccountListController extends PhortuneController {
       ->appendChild($payment_list);
 
     $merchant_list = id(new PHUIObjectItemListView())
+      ->setStackable(true)
       ->setUser($viewer)
       ->setNoDataString(
         pht(

src/applications/phortune/controller/PhortuneMerchantViewController.php

@@ -210,6 +210,7 @@ final class PhortuneMerchantViewController
       PhabricatorPolicyCapability::CAN_EDIT);
 
     $provider_list = id(new PHUIObjectItemListView())
+      ->setFlush(true)
       ->setNoDataString(pht('This merchant has no payment providers.'));
 
     foreach ($providers as $provider_config) {

src/applications/phortune/view/PhortuneChargeTableView.php

@@ -55,6 +55,7 @@ final class PhortuneChargeTableView extends AphrontView {
     }
 
     $table = id(new AphrontTableView($rows))
+      ->setTallTable(true)
       ->setHeaders(
         array(
           pht('ID'),

src/applications/phortune/view/PhortuneOrderTableView.php

@@ -125,6 +125,7 @@ final class PhortuneOrderTableView extends AphrontView {
     }
 
     $table = id(new AphrontTableView($rows))
+      ->setTallTable(true)
       ->setNoDataString($this->getNoDataString())
       ->setRowClasses($rowc)
       ->setHeaders(

src/applications/phortune/view/PhortuneSubscriptionTableView.php

@@ -61,6 +61,7 @@ final class PhortuneSubscriptionTableView extends AphrontView {
     }
 
     $table = id(new AphrontTableView($rows))
+      ->setTallTable(true)
       ->setHeaders(
         array(
           pht('ID'),

src/view/control/AphrontTableView.php

@@ -11,6 +11,7 @@ final class AphrontTableView extends AphrontView {
   protected $zebraStripes = true;
   protected $noDataString;
   protected $className;
+  protected $tallTable;
   protected $columnVisibility = array();
   private $deviceVisibility = array();
 
@@ -75,6 +76,11 @@ final class AphrontTableView extends AphrontView {
     return $this;
   }
 
+  public function setTallTable($tall) {
+    $this->tallTable = $tall;
+    return $this;
+  }
+
   public function setShortHeaders(array $short_headers) {
     $this->shortHeaders = $short_headers;
     return $this;
@@ -284,15 +290,23 @@ final class AphrontTableView extends AphrontView {
           coalesce($this->noDataString, pht('No data available.'))));
     }
 
-    $table_class = 'aphront-table-view';
+    $classes = array();
+    $classes[] = 'aphront-table-view';
     if ($this->className !== null) {
-      $table_class .= ' '.$this->className;
+      $classes[] = $this->className;
+    }
+    if ($this->tallTable) {
+      $classes[] = 'aphront-tall-table-view';
     }
     if ($this->deviceReadyTable) {
-      $table_class .= ' aphront-table-view-device-ready';
+      $classes[] = 'aphront-table-view-device-ready';
     }
 
-    $html = phutil_tag('table', array('class' => $table_class), $table);
+    $html = phutil_tag(
+      'table',
+      array(
+        'class' => implode(' ', $classes),),
+      $table);
     return phutil_tag_div('aphront-table-wrap', $html);
   }
 

webroot/rsrc/css/aphront/table-view.css

@@ -99,11 +99,19 @@ th.aphront-table-view-sortable-selected {
   font-size: 13px;
 }
 
+.aphront-table-view.aphront-tall-table-view th {
+  padding: 10px 10px;
+}
+
 .aphront-table-view td {
   padding: 6px 10px;
   font-size: 12px;
 }
 
+.aphront-table-view.aphront-tall-table-view td {
+  padding: 8px 10px;
+}
+
 .device-tablet .aphront-table-view td,
 .device-phone .aphront-table-view td {
   padding: 6px;
@@ -152,6 +160,7 @@ th.aphront-table-view-sortable-selected {
   width: 100%;
 }
 
+.aphront-table-view th.right,
 .aphront-table-view td.right {
   text-align: right;
 }