revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-23 15:22:41 +01:00
Code Issues Releases Wiki Activity

Update Conpherence CSS

Browse source 
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 2013-03-25 07:38:27 -07:00
parent b0e9371a9c
commit fb38e1049d
5 changed files with 72 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/__celerity_resource_map__.php
View file

@ -797,7 +797,7 @@ celerity_register_resource_map(array(
), ),
'conpherence-header-pane-css' => 'conpherence-header-pane-css' =>
array( array(
'uri' => '/res/11c32adc/rsrc/css/application/conpherence/header-pane.css', 'uri' => '/res/70741f86/rsrc/css/application/conpherence/header-pane.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -806,7 +806,7 @@ celerity_register_resource_map(array(
), ),
'conpherence-menu-css' => 'conpherence-menu-css' =>
array( array(
'uri' => '/res/0dc6b412/rsrc/css/application/conpherence/menu.css', 'uri' => '/res/82862113/rsrc/css/application/conpherence/menu.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -815,7 +815,7 @@ celerity_register_resource_map(array(
), ),
'conpherence-message-pane-css' => 'conpherence-message-pane-css' =>
array( array(
'uri' => '/res/3aa15b9e/rsrc/css/application/conpherence/message-pane.css', 'uri' => '/res/64d6c294/rsrc/css/application/conpherence/message-pane.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -833,7 +833,7 @@ celerity_register_resource_map(array(
), ),
'conpherence-widget-pane-css' => 'conpherence-widget-pane-css' =>
array( array(
'uri' => '/res/1c43dda4/rsrc/css/application/conpherence/widget-pane.css', 'uri' => '/res/0e4a8ded/rsrc/css/application/conpherence/widget-pane.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(

10
webroot/rsrc/css/application/conpherence/header-pane.css
View file

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

8
webroot/rsrc/css/application/conpherence/menu.css
View file

@ -7,13 +7,13 @@
border-top: solid 1px #3B3D3E; border-top: solid 1px #3B3D3E;
padding: 20px 0; padding: 20px 0;
margin: 0px auto; margin: 0px auto;
width: 320px; width: 300px;
text-align: center; text-align: center;
} }
.conpherence-menu .phabricator-nav-column-background, .conpherence-menu .phabricator-nav-column-background,
.conpherence-menu .phabricator-nav-local { .conpherence-menu .phabricator-nav-local {
width: 320px; width: 300px;
} }
.conpherence-menu .phabricator-nav-local { .conpherence-menu .phabricator-nav-local {
top: 44px; top: 44px;
@ -21,11 +21,11 @@
} }
.conpherence-menu .phabricator-nav-drag { .conpherence-menu .phabricator-nav-drag {
left: 320px; left: 300px;
} }
.device-desktop .conpherence-menu .phabricator-nav-content { .device-desktop .conpherence-menu .phabricator-nav-content {
margin-left: 320px !important; margin-left: 300px !important;
} }
.conpherence-menu .phabricator-menu-view { .conpherence-menu .phabricator-menu-view {

44
webroot/rsrc/css/application/conpherence/message-pane.css
View file

@ -3,13 +3,19 @@
*/ */
.conpherence-message-pane { .conpherence-message-pane {
position: fixed; position: fixed;
left: 320px; left: 300px;
top: 94px; right: 281px;
min-width: 320px; top: 125px;
min-width: 300px;
width: auto; width: auto;
height: 100%; height: 100%;
margin: 0px 320px 0px 0px;
} }
/* js should control this */
.device-phone .conpherence-message-pane {
display: none;
}
.conpherence-show-older-messages { .conpherence-show-older-messages {
display: block; display: block;
background: #e0e3ec; background: #e0e3ec;
@ -21,12 +27,13 @@
.conpherence-message-pane .conpherence-messages { .conpherence-message-pane .conpherence-messages {
position: fixed; position: fixed;
left: 320px; left: 300px;
right: 321px; right: 281px;
top: 124px; top: 125px;
bottom: 142px; bottom: 142px;
overflow-y: auto; 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 { .conpherence-message-pane .phabricator-form-view {
@ -36,8 +43,8 @@
padding: 0; padding: 0;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 320px; left: 300px;
right: 321px; right: 281px;
} }
.device-tablet .device-tablet
@ -60,18 +67,22 @@
.conpherence-message-pane .phabricator-transaction-detail { .conpherence-message-pane .phabricator-transaction-detail {
border-width: 0; border-width: 0;
margin-left: 45px;
} }
.conpherence-message-pane .phabricator-transaction-header { .conpherence-message-pane .phabricator-transaction-info,
background: none; .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; background: none;
} }
.conpherence-message-pane .phabricator-transaction-content { .conpherence-message-pane .phabricator-transaction-content {
background: none; padding-top: 0;
} }
.conpherence-message-pane .conpherence-edited .phabricator-transaction-content { .conpherence-message-pane .conpherence-edited .phabricator-transaction-content {
@ -105,3 +116,8 @@
padding: 6px; padding: 6px;
height: 6em; height: 6em;
} }
.device .conpherence-message-pane .phabricator-form-view .aphront-form-control .aphront-form-input {
margin: 0;
width: 100%;
}

39
webroot/rsrc/css/application/conpherence/widget-pane.css
View file

@ -5,14 +5,20 @@
.conpherence-widget-pane { .conpherence-widget-pane {
position: fixed; position: fixed;
right: 0px; right: 0px;
top: 124px; top: 125px;
width: 320px; width: 280px;
height: 100%; height: 100%;
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
border-color: #CCC; border-color: #CCC;
border-style: solid; border-style: solid;
background: url('/rsrc/image/texture/dust_background.jpg'); background: url('/rsrc/image/texture/dust_background.jpg');
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.device-phone .conpherence-widget-pane {
top: 44px;
width: 100%;
} }
.conpherence-widget-pane .aphront-form-input { .conpherence-widget-pane .aphront-form-input {
@ -22,17 +28,18 @@
.conpherence-widget-pane .widgets-header { .conpherence-widget-pane .widgets-header {
background-color: #d8dce2; background-color: #d8dce2;
width: 320px;
box-shadow: 0px 2px 2px rgba(0,0,0,0.15); box-shadow: 0px 2px 2px rgba(0,0,0,0.15);
} }
.conpherence-widget-pane .widgets-header .widgets-header-icon-holder { .conpherence-widget-pane .widgets-header .widgets-header-icon-holder {
height: 40px; height: 40px;
width: 280px;
margin: 0 auto;
} }
.device-desktop .conpherence-widget-pane .widgets-header .device-desktop .conpherence-widget-pane .widgets-header
.widgets-header-icon-holder { .widgets-header-icon-holder {
width: 196px; width: 175px;
margin: 0px auto 0px auto; margin: 0px auto 0px auto;
} }
@ -40,7 +47,7 @@
display: block; display: block;
width: 29px; width: 29px;
height: 34px; height: 34px;
margin: 4px 0px 0px 20px; margin: 4px 0px 0px 14px;
float: left; float: left;
clear: none; clear: none;
} }
@ -66,14 +73,17 @@
overflow-y: auto; overflow-y: auto;
top: 165px; top: 165px;
bottom: 0px; bottom: 0px;
width: 320px; width: 100%;
}
.device-phone .conpherence-widget-pane .widgets-body {
top: 85px;
} }
/* files widget */ /* files widget */
.conpherence-widget-pane #widgets-files .file-entry { .conpherence-widget-pane #widgets-files .file-entry {
padding: 12px 0px 14px 0px; padding: 12px 0px 14px 0px;
width: 320px;
} }
.conpherence-widget-pane #widgets-files .file-icon { .conpherence-widget-pane #widgets-files .file-icon {
position: relative; position: relative;
@ -89,15 +99,15 @@
top: -4px; top: -4px;
left: 20px; left: 20px;
overflow-x: hidden; overflow-x: hidden;
width: 256px; width: 210px;
font-weight: bold; font-weight: bold;
} }
.conpherence-widget-pane #widgets-files .file-uploaded-by { .conpherence-widget-pane #widgets-files .file-uploaded-by {
color: #bfbfbf; color: #a1a5a9;
position: relative; position: relative;
top: 0px; top: 0px;
left: 20px; left: 20px;
width: 270px; width: 210px;
font-size: 11px; font-size: 11px;
} }
@ -106,17 +116,18 @@
height: 120px; height: 120px;
width: 160px; width: 160px;
margin: 8px 0px 8px 52px; 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 { .conpherence-widget-pane #widgets-files .divider {
float: left; float: left;
clear: both; clear: both;
width: 242px; width: 210px;
margin: 8px 0px 0px 52px; margin: 8px 0px 0px 50px;
border: 1px dashed #bfbfbf; border: 1px dashed #bfbfbf;
} }
/* calendar widget */ /* calendar widget */
.conpherence-widget-pane #widgets-calendar .user-status { .conpherence-widget-pane #widgets-calendar .user-status {