Permalink
Browse files

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
  • Loading branch information...
1 parent b0e9371 commit fb38e1049dba8d5120feb253a8b16a8bd652d65a @chadlittle chadlittle committed Mar 25, 2013
@@ -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(
@@ -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;
@@ -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 {
@@ -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%;
+}
@@ -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 {

0 comments on commit fb38e10

Please sign in to comment.