From ece651255c9e8974c97f9d36082e19f6f0e0af00 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@phacility.com>
Date: Tue, 6 Jun 2017 10:20:45 -0700
Subject: [PATCH] Optimize mobile layout of DiffusionHistoryView

Summary: Little nits and spacing changes to viewing diffusion commit history on phones.

Test Plan:
Review in Chrome, iOS Simulator.

{F4990749}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D18085
---
 resources/celerity/map.php                    |  4 +-
 .../controller/DiffusionHistoryController.php |  3 +-
 .../diffusion/diffusion-history.css           | 53 +++++++++++++++++++
 3 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 4482214fbe..35913087f9 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -71,7 +71,7 @@ return array(
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
     'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
     'rsrc/css/application/differential/table-of-contents.css' => 'ae4b7a55',
-    'rsrc/css/application/diffusion/diffusion-history.css' => 'cc283766',
+    'rsrc/css/application/diffusion/diffusion-history.css' => '6870e8c1',
     'rsrc/css/application/diffusion/diffusion-icons.css' => 'a6a1e2ba',
     'rsrc/css/application/diffusion/diffusion-readme.css' => '18bd3910',
     'rsrc/css/application/diffusion/diffusion-source.css' => '750add59',
@@ -569,7 +569,7 @@ return array(
     'differential-revision-history-css' => '0e8eb855',
     'differential-revision-list-css' => 'f3c47d33',
     'differential-table-of-contents-css' => 'ae4b7a55',
-    'diffusion-history-css' => 'cc283766',
+    'diffusion-history-css' => '6870e8c1',
     'diffusion-icons-css' => 'a6a1e2ba',
     'diffusion-readme-css' => '18bd3910',
     'diffusion-source-css' => '750add59',
diff --git a/src/applications/diffusion/controller/DiffusionHistoryController.php b/src/applications/diffusion/controller/DiffusionHistoryController.php
index 8ee6c848a7..b8a1877ddf 100644
--- a/src/applications/diffusion/controller/DiffusionHistoryController.php
+++ b/src/applications/diffusion/controller/DiffusionHistoryController.php
@@ -69,7 +69,8 @@ final class DiffusionHistoryController extends DiffusionController {
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->appendChild($view);
+      ->appendChild($view)
+      ->addClass('diffusion-history-view');
   }
 
   private function buildHeader(DiffusionRequest $drequest) {
diff --git a/webroot/rsrc/css/application/diffusion/diffusion-history.css b/webroot/rsrc/css/application/diffusion/diffusion-history.css
index b90977373f..2d0aea3b10 100644
--- a/webroot/rsrc/css/application/diffusion/diffusion-history.css
+++ b/webroot/rsrc/css/application/diffusion/diffusion-history.css
@@ -2,6 +2,8 @@
  * @provides diffusion-history-css
  */
 
+/* - List Styles  ------------------------------------------------------------*/
+
 .diffusion-history-list .phui-oi-link {
   color: #000;
   font-size: {$biggerfontsize};
@@ -27,3 +29,54 @@
 .diffusion-history-list .diffusion-differential-tag {
   margin-left: 4px;
 }
+
+
+/* - Phone Style  ------------------------------------------------------------*/
+
+.device-phone.diffusion-history-view  .phui-two-column-view
+  .phui-two-column-footer .phui-object-box {
+    border-color: {$thinblueborder};
+}
+
+.device-phone.diffusion-history-view .phui-two-column-view
+  .phui-two-column-footer .phui-header-view {
+    text-align: center;
+}
+
+.device-phone.diffusion-history-view .phui-two-column-content {
+  padding: 0;
+  margin: 0 -4px;
+}
+
+.device-phone.diffusion-history-view .phui-oi-attribute-spacer {
+  display: none;
+}
+
+.device-phone.diffusion-history-view .phui-oi-attribute {
+  display: block;
+  margin: 0 0 4px 0;
+}
+
+.device-phone.diffusion-history-view .phui-oi-image {
+  height: 36px;
+  width: 36px;
+  margin-top: 10px;
+}
+
+.device-phone.diffusion-history-view .phui-oi-with-image .phui-oi-content-box {
+  margin-left: 44px;
+}
+
+.device-phone.diffusion-history-view .phui-oi-col2.phui-oi-side-column {
+  padding-bottom: 10px;
+}
+
+.device-phone.diffusion-history-view .diffusion-history-list .button.has-icon
+  .phui-button-text {
+    margin: 0;
+}
+
+.device-phone.diffusion-history-view .diffusion-history-list .button.has-icon
+  .phui-icon-view {
+    display: none;
+}