From fb38e1049dba8d5120feb253a8b16a8bd652d65a Mon Sep 17 00:00:00 2001 From: Chad Little Date: Mon, 25 Mar 2013 07:38:27 -0700 Subject: [PATCH] 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 --- src/__celerity_resource_map__.php | 8 ++-- .../application/conpherence/header-pane.css | 10 ++++- .../rsrc/css/application/conpherence/menu.css | 8 ++-- .../application/conpherence/message-pane.css | 44 +++++++++++++------ .../application/conpherence/widget-pane.css | 39 ++++++++++------ 5 files changed, 72 insertions(+), 37 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index bda79a923d..8c3e98a23e 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -797,7 +797,7 @@ celerity_register_resource_map(array( ), '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 @@ celerity_register_resource_map(array( ), '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 @@ celerity_register_resource_map(array( ), '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 @@ celerity_register_resource_map(array( ), '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 index 27198a2879..9d42c4991a 100644 --- 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 index 0558de8204..eed6dc4973 100644 --- a/webroot/rsrc/css/application/conpherence/menu.css +++ b/webroot/rsrc/css/application/conpherence/menu.css @@ -7,13 +7,13 @@ 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; @@ -21,11 +21,11 @@ } .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 index 42fbe5f3f8..2807094136 100644 --- 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 index 87ec14a32f..6484157637 100644 --- 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,17 +28,18 @@ .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; } @@ -40,7 +47,7 @@ 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 {