From 786c7b0df6da5bd99f878cddf78f0ed229d42fd9 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Wed, 10 Dec 2014 08:51:09 -0800
Subject: [PATCH] Have home dashboards go to single column on narrow desktops

Summary: Ref T6723. Because of the sidenav, some dashboard layouts may perform poorly on more narrow desktop displays. This provides an additional media query and CSS rules.

Test Plan:
Move viewport to 1001 px, see desktop, move to 999 pixels, see tablet-like display.

{F248158}

{F248159}

{F248160}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T6723

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

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index f2aeb6f62c..0d2e062e88 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -23,7 +23,7 @@ return array(
     'rsrc/css/aphront/error-view.css' => '3462dbee',
     'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
     'rsrc/css/aphront/list-filter-view.css' => '2ae43867',
-    'rsrc/css/aphront/multi-column.css' => '1b95ab2e',
+    'rsrc/css/aphront/multi-column.css' => '6d72e772',
     'rsrc/css/aphront/notification.css' => '9c279160',
     'rsrc/css/aphront/pager-view.css' => '2e3539af',
     'rsrc/css/aphront/panel-view.css' => '5846dfa2',
@@ -503,7 +503,7 @@ return array(
     'aphront-dialog-view-css' => '4dbbe3bb',
     'aphront-error-view-css' => '3462dbee',
     'aphront-list-filter-view-css' => '2ae43867',
-    'aphront-multi-column-view-css' => '1b95ab2e',
+    'aphront-multi-column-view-css' => '6d72e772',
     'aphront-pager-view-css' => '2e3539af',
     'aphront-panel-view-css' => '5846dfa2',
     'aphront-table-view-css' => 'b22b7216',
diff --git a/webroot/rsrc/css/aphront/multi-column.css b/webroot/rsrc/css/aphront/multi-column.css
index 51cbd0c855..3d1ed79805 100644
--- a/webroot/rsrc/css/aphront/multi-column.css
+++ b/webroot/rsrc/css/aphront/multi-column.css
@@ -152,3 +152,33 @@
   border: none;
   padding-bottom: 0;
 }
+
+/* Make Dashboards reasonably display on homepage with narrow widths */
+@media (max-width: 1000px) {
+  .device-desktop .dashboard-view .aphront-multi-column-inner {
+    display: block;
+    width: auto;
+  }
+  .device-desktop .aphront-multi-column-column-outer {
+    display: block;
+    border: none;
+  }
+  .device-desktop .aphront-multi-column-column.mlr {
+    margin: 0;
+  }
+  .device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
+    .aphront-multi-column-column-outer.half {
+     width: auto;
+     margin: 0 0 16px;
+  }
+  .device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
+   .aphront-multi-column-column-outer.thirds {
+     width: auto;
+     margin: 0 0 16px;
+  }
+  .device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
+    .aphront-multi-column-column-outer.third {
+    width: auto;
+    margin: 0 0 16px;
+  }
+}