mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-23 07:12:41 +01:00
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
This commit is contained in:
Chad Little
parent
b0e9371a9c
commit
fb38e1049d
5 changed files with 72 additions and 37 deletions
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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,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 {
|
||||
|
|
|
|||
|
|
@ -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,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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue