Provide "diff-1up" and "diff-2up" classes and tweak some styles

Summary: Ref T2009. Remove forced min-width of 780px in 1-up mode, and tweak a few other things to look better.

Test Plan: Looks better on mobile.

Reviewers: btrahan, chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T2009

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

resources/celerity/map.php

@@ -10,7 +10,7 @@ return array(
     'core.pkg.css' => '1a530a25',
     'core.pkg.js' => 'a77025a1',
     'darkconsole.pkg.js' => '8ab24e01',
-    'differential.pkg.css' => '4c3242f8',
+    'differential.pkg.css' => 'd8866ed8',
     'differential.pkg.js' => '7b5a4aa4',
     'diffusion.pkg.css' => '591664fa',
     'diffusion.pkg.js' => 'bfc0737b',
@@ -55,7 +55,7 @@ return array(
     'rsrc/css/application/dashboard/dashboard.css' => '17937d22',
     'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
     'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
-    'rsrc/css/application/differential/changeset-view.css' => 'a7781046',
+    'rsrc/css/application/differential/changeset-view.css' => 'b600950c',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
     'rsrc/css/application/differential/results-table.css' => '181aa9d9',
     'rsrc/css/application/differential/revision-comment.css' => '48186045',
@@ -519,7 +519,7 @@ return array(
     'conpherence-notification-css' => '04a6e10a',
     'conpherence-update-css' => '1099a660',
     'conpherence-widget-pane-css' => '3d575438',
-    'differential-changeset-view-css' => 'a7781046',
+    'differential-changeset-view-css' => 'b600950c',
     'differential-core-view-css' => '7ac3cabc',
     'differential-inline-comment-editor' => 'f2441746',
     'differential-results-table-css' => '181aa9d9',

src/applications/differential/render/DifferentialChangesetHTMLRenderer.php

@@ -3,6 +3,8 @@
 abstract class DifferentialChangesetHTMLRenderer
   extends DifferentialChangesetRenderer {
 
+  abstract protected function getRendererTableClass();
+
   protected function renderChangeTypeHeader($force) {
     $changeset = $this->getChangeset();
 
@@ -392,10 +394,16 @@ abstract class DifferentialChangesetHTMLRenderer
       return null;
     }
 
+    $classes = array();
+    $classes[] = 'differential-diff';
+    $classes[] = 'remarkup-code';
+    $classes[] = 'PhabricatorMonospaced';
+    $classes[] = $this->getRendererTableClass();
+
     return javelin_tag(
       'table',
       array(
-        'class' => 'differential-diff remarkup-code PhabricatorMonospaced',
+        'class' => implode(' ', $classes),
         'sigil' => 'differential-diff',
       ),
       array(

src/applications/differential/render/DifferentialChangesetOneUpRenderer.php

@@ -7,6 +7,10 @@ final class DifferentialChangesetOneUpRenderer
     return true;
   }
 
+  protected function getRendererTableClass() {
+    return 'diff-1up';
+  }
+
   protected function renderColgroup() {
     return phutil_tag('colgroup', array(), array(
       phutil_tag('col', array('class' => 'num')),

src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php

@@ -7,6 +7,10 @@ final class DifferentialChangesetTwoUpRenderer
     return false;
   }
 
+  protected function getRendererTableClass() {
+    return 'diff-2up';
+  }
+
   protected function renderColgroup() {
     return phutil_tag('colgroup', array(), array(
       phutil_tag('col', array('class' => 'num')),

webroot/rsrc/css/application/differential/changeset-view.css

@@ -17,18 +17,25 @@
 .differential-diff {
   background: #fff;
   width: 100%;
-  min-width: 780px;
   border-top: 1px solid {$lightblueborder};
   border-bottom: 1px solid {$lightblueborder};
   table-layout: fixed;
 }
 
+.differential-diff.diff-2up {
+  min-width: 780px;
+}
+
 .differential-diff col.num {
   width: 45px;
 }
 
-.differential-diff col.left,
-.differential-diff col.right {
+.device .differential-diff.diff-1up col.num {
+  width: 32px;
+}
+
+.differential-diff.diff-2up col.left,
+.differential-diff.diff-2up col.right {
   width: 49.25%;
 }
 
@@ -48,6 +55,10 @@
   line-height:        16px;
 }
 
+.device .differential-diff td {
+  padding: 0 4px 1px;
+}
+
 .differential-diff td .zwsp {
   position: absolute;
   width: 0;
@@ -163,8 +174,6 @@ td.cov-I {
   background: #f3f6ff;
 }
 
-
-
 .differential-diff td.show-more,
 .differential-diff th.show-context-line,
 .differential-diff td.show-context,
@@ -175,6 +184,13 @@ td.cov-I {
   border-bottom: 1px solid {$thinblueborder};
 }
 
+.device .differential-diff td.show-more,
+.device .differential-diff th.show-context-line,
+.device .differential-diff td.show-context,
+.device .differential-diff td.differential-shield {
+  padding: 6px 0;
+}
+
 .differential-diff td.show-more,
 .differential-diff td.differential-shield {
   font: {$basefont};