From 41875ce7b4872144613e3e8693a6d764ef4d0a92 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Sat, 14 Mar 2015 09:14:50 -0700
Subject: [PATCH] Collapse Dashboards to single column when durable present and
 narrow

Summary: Currently we punch down Dashboard columns on smaller displays. This adds another set of rules for if durable-column is present.

Test Plan: Test breakpoints at 1300 and 1000 pixel wide.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T7531

Differential Revision: https://secure.phabricator.com/D12056
---
 resources/celerity/map.php                |  6 ++--
 webroot/rsrc/css/aphront/multi-column.css | 38 ++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 7ed1383b4c..6f43ddc160 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'efdeeb14',
+    'core.pkg.css' => '77dae995',
     'core.pkg.js' => '31bc6546',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '1940be3f',
@@ -21,7 +21,7 @@ return array(
     'rsrc/css/aphront/dialog-view.css' => 'd2e76b88',
     'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
     'rsrc/css/aphront/list-filter-view.css' => '2ae43867',
-    'rsrc/css/aphront/multi-column.css' => '41a848c0',
+    'rsrc/css/aphront/multi-column.css' => 'fd18389d',
     'rsrc/css/aphront/notification.css' => '9c279160',
     'rsrc/css/aphront/pager-view.css' => '2e3539af',
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
@@ -501,7 +501,7 @@ return array(
     'aphront-dark-console-css' => '6378ef3d',
     'aphront-dialog-view-css' => 'd2e76b88',
     'aphront-list-filter-view-css' => '2ae43867',
-    'aphront-multi-column-view-css' => '41a848c0',
+    'aphront-multi-column-view-css' => 'fd18389d',
     'aphront-pager-view-css' => '2e3539af',
     'aphront-panel-view-css' => '8427b78d',
     'aphront-table-view-css' => 'b22b7216',
diff --git a/webroot/rsrc/css/aphront/multi-column.css b/webroot/rsrc/css/aphront/multi-column.css
index 08f17f2b21..badae756fe 100644
--- a/webroot/rsrc/css/aphront/multi-column.css
+++ b/webroot/rsrc/css/aphront/multi-column.css
@@ -153,7 +153,7 @@
   padding-bottom: 0;
 }
 
-/* Make Dashboards reasonably display on homepage with narrow widths */
+/* Make Dashboards reasonably display on homepage narrow widths */
 @media (max-width: 1000px) {
   .device-desktop .dashboard-view .aphront-multi-column-inner {
     display: block;
@@ -182,3 +182,39 @@
     margin: 0 0 16px;
   }
 }
+
+/* Make Dashboards with Durable reasonably display on homepage narrow widths */
+@media (max-width: 1300px) {
+  .device-desktop.with-durable-column .dashboard-view
+    .aphront-multi-column-inner {
+      display: block;
+      width: auto;
+  }
+  .device-desktop.with-durable-column .dashboard-view
+    .aphront-multi-column-column-outer {
+      display: block;
+      border: none;
+  }
+  .device-desktop.with-durable-column .dashboard-view
+    .aphront-multi-column-column.mlr {
+      margin: 0;
+  }
+  .device-desktop.with-durable-column .dashboard-view
+    .aphront-multi-column-fluid .aphront-multi-column-2-up
+    .aphront-multi-column-column-outer.half {
+      width: auto;
+      margin: 0 0 16px;
+  }
+  .device-desktop.with-durable-column .dashboard-view
+    .aphront-multi-column-fluid .aphront-multi-column-2-up
+    .aphront-multi-column-column-outer.thirds {
+      width: auto;
+      margin: 0 0 16px;
+  }
+  .device-desktop.with-durable-column .dashboard-view
+    .aphront-multi-column-fluid .aphront-multi-column-2-up
+    .aphront-multi-column-column-outer.third {
+      width: auto;
+      margin: 0 0 16px;
+  }
+}