Update Conpherence CSS

Summary: Updates Conpherence CSS for mostly responsive design. Notably: - Clipped nav 20px - Clipped widgets 40px - Tested tablet and phone layouts - Phone layout mostly done. - Bouncy webkit scroll areas. Still more work to do, but I think it should be easy now for Bob to lay in the rest of mobile. It probably doesn't need to render the menu and conversation in the widget area, as I think we can now credibly position: fix it in mobile. Not completely sold on tablet layout, but it's still better than current. Test Plan: Tested layouts on iPhone and iPad simulator. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Maniphest Tasks: T2421 Differential Revision: https://secure.phabricator.com/D5442
phacility · Mar 25, 2013 · fb38e10 · fb38e10
1 parent b0e9371
commit fb38e10
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 37 deletions.
diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
@@ -797,7 +797,7 @@
   ),
   'conpherence-header-pane-css' =>
   array(
-    'uri' => '/res/11c32adc/rsrc/css/application/conpherence/header-pane.css',
+    'uri' => '/res/70741f86/rsrc/css/application/conpherence/header-pane.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -806,7 +806,7 @@
   ),
   'conpherence-menu-css' =>
   array(
-    'uri' => '/res/0dc6b412/rsrc/css/application/conpherence/menu.css',
+    'uri' => '/res/82862113/rsrc/css/application/conpherence/menu.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -815,7 +815,7 @@
   ),
   'conpherence-message-pane-css' =>
   array(
-    'uri' => '/res/3aa15b9e/rsrc/css/application/conpherence/message-pane.css',
+    'uri' => '/res/64d6c294/rsrc/css/application/conpherence/message-pane.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -833,7 +833,7 @@
   ),
   'conpherence-widget-pane-css' =>
   array(
-    'uri' => '/res/1c43dda4/rsrc/css/application/conpherence/widget-pane.css',
+    'uri' => '/res/0e4a8ded/rsrc/css/application/conpherence/widget-pane.css',
     'type' => 'css',
     'requires' =>
     array(

diff --git a/webroot/rsrc/css/application/conpherence/header-pane.css b/webroot/rsrc/css/application/conpherence/header-pane.css
@@ -8,11 +8,19 @@
 
 .conpherence-header-pane {
   border-bottom: 1px solid #ccc;
-  background: #fff;
   height: 80px;
   width: 100%;
 }
 
+.device .conpherence-header-pane {
+  position: fixed;
+  top: 44px;
+}
+
+.device-phone .conpherence-header-pane {
+  display: none;
+}
+
 .conpherence-header-pane .edit {
   float: right;
   margin: 16px 16px 0px 0px;

diff --git a/webroot/rsrc/css/application/conpherence/menu.css b/webroot/rsrc/css/application/conpherence/menu.css
@@ -7,25 +7,25 @@
   border-top: solid 1px #3B3D3E;
   padding: 20px 0;
   margin: 0px auto;
-  width: 320px;
+  width: 300px;
   text-align: center;
 }
 
 .conpherence-menu .phabricator-nav-column-background,
 .conpherence-menu .phabricator-nav-local {
-  width: 320px;
+  width: 300px;
 }
 .conpherence-menu .phabricator-nav-local {
   top: 44px;
   bottom: 0px;
 }
 
 .conpherence-menu .phabricator-nav-drag {
-  left: 320px;
+  left: 300px;
 }
 
 .device-desktop .conpherence-menu .phabricator-nav-content {
-  margin-left: 320px !important;
+  margin-left: 300px !important;
 }
 
 .conpherence-menu .phabricator-menu-view {

diff --git a/webroot/rsrc/css/application/conpherence/message-pane.css b/webroot/rsrc/css/application/conpherence/message-pane.css
@@ -3,13 +3,19 @@
  */
 .conpherence-message-pane {
   position: fixed;
-  left: 320px;
-  top: 94px;
-  min-width: 320px;
+  left: 300px;
+  right: 281px;
+  top: 125px;
+  min-width: 300px;
   width: auto;
   height: 100%;
-  margin: 0px 320px 0px 0px;
 }
+
+/* js should control this */
+.device-phone .conpherence-message-pane {
+  display: none;
+}
+
 .conpherence-show-older-messages {
   display: block;
   background: #e0e3ec;
@@ -21,12 +27,13 @@
 
 .conpherence-message-pane .conpherence-messages {
   position: fixed;
-  left: 320px;
-  right: 321px;
-  top: 124px;
+  left: 300px;
+  right: 281px;
+  top: 125px;
   bottom: 142px;
   overflow-y: auto;
-  box-shadow: inset 1px 5px 5px rgba(0,0,0,0.1);
+  box-shadow: inset 1px 4px 5px rgba(0,0,0,0.1);
+  -webkit-overflow-scrolling: touch;
 }
 
 .conpherence-message-pane .phabricator-form-view {
@@ -36,8 +43,8 @@
   padding: 0;
   position: fixed;
   bottom: 0;
-  left: 320px;
-  right: 321px;
+  left: 300px;
+  right: 281px;
 }
 
 .device-tablet
@@ -60,18 +67,22 @@
 
 .conpherence-message-pane .phabricator-transaction-detail {
   border-width: 0;
+  margin-left: 45px;
 }
 
-.conpherence-message-pane .phabricator-transaction-header {
-  background: none;
+.conpherence-message-pane .phabricator-transaction-info,
+.conpherence-message-pane .phabricator-content-source-view {
+  color: #b7b7b7;
 }
 
-.conpherence-message-pane .phabricator-transaction-info {
+.conpherence-message-pane .phabricator-transaction-header,
+.conpherence-message-pane .phabricator-transaction-info,
+.conpherence-message-pane .phabricator-transaction-content {
   background: none;
 }
 
 .conpherence-message-pane .phabricator-transaction-content {
-  background: none;
+  padding-top: 0;
 }
 
 .conpherence-message-pane .conpherence-edited .phabricator-transaction-content {
@@ -105,3 +116,8 @@
   padding: 6px;
   height: 6em;
 }
+
+.device .conpherence-message-pane .phabricator-form-view .aphront-form-control .aphront-form-input {
+  margin: 0;
+  width: 100%;
+}
diff --git a/webroot/rsrc/css/application/conpherence/widget-pane.css b/webroot/rsrc/css/application/conpherence/widget-pane.css
@@ -5,14 +5,20 @@
 .conpherence-widget-pane {
   position: fixed;
   right: 0px;
-  top: 124px;
-  width: 320px;
+  top: 125px;
+  width: 280px;
   height: 100%;
   border-width: 0 0 0 1px;
   border-color: #CCC;
   border-style: solid;
   background: url('/rsrc/image/texture/dust_background.jpg');
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.device-phone .conpherence-widget-pane {
+  top: 44px;
+  width: 100%;
 }
 
 .conpherence-widget-pane .aphront-form-input {
@@ -22,25 +28,26 @@
 
 .conpherence-widget-pane .widgets-header {
   background-color: #d8dce2;
-  width: 320px;
   box-shadow: 0px 2px 2px rgba(0,0,0,0.15);
 }
 
 .conpherence-widget-pane .widgets-header .widgets-header-icon-holder {
   height: 40px;
+  width: 280px;
+  margin: 0 auto;
 }
 
 .device-desktop .conpherence-widget-pane .widgets-header
 .widgets-header-icon-holder {
-  width: 196px;
+  width: 175px;
   margin: 0px auto 0px auto;
 }
 
 .conpherence-widget-pane .widgets-header .sprite-conpherence {
   display: block;
   width: 29px;
   height: 34px;
-  margin: 4px 0px 0px 20px;
+  margin: 4px 0px 0px 14px;
   float: left;
   clear: none;
 }
@@ -66,14 +73,17 @@
   overflow-y: auto;
   top: 165px;
   bottom: 0px;
-  width: 320px;
+  width: 100%;
+}
+
+.device-phone .conpherence-widget-pane .widgets-body {
+  top: 85px;
 }
 
 /* files widget */
 
 .conpherence-widget-pane #widgets-files .file-entry {
   padding: 12px 0px 14px 0px;
-  width: 320px;
 }
 .conpherence-widget-pane #widgets-files .file-icon {
   position: relative;
@@ -89,15 +99,15 @@
   top: -4px;
   left: 20px;
   overflow-x: hidden;
-  width: 256px;
+  width: 210px;
   font-weight: bold;
 }
 .conpherence-widget-pane #widgets-files .file-uploaded-by {
-  color: #bfbfbf;
+  color: #a1a5a9;
   position: relative;
   top: 0px;
   left: 20px;
-  width: 270px;
+  width: 210px;
   font-size: 11px;
 }
 
@@ -106,17 +116,18 @@
   height: 120px;
   width: 160px;
   margin: 8px 0px 8px 52px;
-  border: 1px solid rgb(24, 85, 157);
+  border: 1px solid #7289b7;
+  box-shadow: 0 0px 5px rgba(0,0,0,.25);
+  background: #fff;
 }
 
 .conpherence-widget-pane #widgets-files .divider {
   float: left;
   clear: both;
-  width: 242px;
-  margin: 8px 0px 0px 52px;
+  width: 210px;
+  margin: 8px 0px 0px 50px;
   border: 1px dashed #bfbfbf;
 }
-
 /* calendar widget */
 
 .conpherence-widget-pane #widgets-calendar .user-status {