mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-27 17:22:42 +01:00
42c1e39ae6
Summary: makes conpherence switch to a liquid layout once we go from desktop -> less than that. When we make the switch conpherence updates to show a few more "Widgets" -- the list of conpherences and the current conversation -- and the switcher starts working. As you transition from device to device you are automagically forced to have the "conversation" widget toggled on initial change to smaller than desktop and then file widget once you get back to desktop. Generally looks good when I make my browser small. Does not look as good on iOS simulator - in particular there seems to be a weird visual artifact on the "add people" widget that is present in all tokenizers, and the pontificate UI on mobile could use some work. ref T2399. Test Plan: played in Safari, FF, Chrome and iOS Simulator. The first 3 were all pretty spiffy, and otherwise iOS add people widget was a bit ugly. Reviewers: epriestley, chad Reviewed By: epriestley CC: aran, Korvin, AnhNhan Maniphest Tasks: T2399 Differential Revision: https://secure.phabricator.com/D5674
158 lines
3.1 KiB
CSS
158 lines
3.1 KiB
CSS
/**
|
|
* @provides conpherence-message-pane-css
|
|
*/
|
|
|
|
.conpherence-message-pane {
|
|
position: fixed;
|
|
left: 300px;
|
|
right: 281px;
|
|
top: 125px;
|
|
min-width: 300px;
|
|
width: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.device .conpherence-message-pane {
|
|
left: 0;
|
|
right: 0;
|
|
top: 85px;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.conpherence-show-older-messages {
|
|
display: block;
|
|
background: #e0e3ec;
|
|
margin: 10px;
|
|
text-align: center;
|
|
padding: 10px;
|
|
color: #18559D;
|
|
}
|
|
|
|
.conpherence-message-pane .conpherence-messages {
|
|
position: fixed;
|
|
left: 300px;
|
|
right: 281px;
|
|
top: 125px;
|
|
bottom: 142px;
|
|
overflow-y: auto;
|
|
box-shadow: inset 1px 4px 5px rgba(0,0,0,0.1);
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.device .conpherence-message-pane .conpherence-messages {
|
|
left: 0;
|
|
right: 0;
|
|
top: 85px;
|
|
bottom: 3em;
|
|
width: 100%;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.conpherence-message-pane .phabricator-form-view {
|
|
border-width: 0;
|
|
background: none;
|
|
height: 143px;
|
|
padding: 0;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 300px;
|
|
right: 281px;
|
|
}
|
|
|
|
.device .conpherence-message-pane .remarkup-assist-bar {
|
|
height: 0px;
|
|
}
|
|
|
|
.device .conpherence-message-pane .phabricator-form-view {
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #d8dce2;
|
|
height: 3em;
|
|
width: 100%;
|
|
}
|
|
|
|
.conpherence-layout .conpherence-message-pane .phabricator-form-view
|
|
div.aphront-form-input {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.conpherence-message-pane .phabricator-transaction-view {
|
|
margin: 10px 0 10px 15px;
|
|
}
|
|
|
|
.conpherence-message-pane .phabricator-transaction-detail {
|
|
border-width: 0;
|
|
margin-left: 45px;
|
|
}
|
|
|
|
.conpherence-message-pane .phabricator-transaction-info,
|
|
.conpherence-message-pane .phabricator-content-source-view {
|
|
color: #b7b7b7;
|
|
}
|
|
|
|
.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 {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.conpherence-message-pane .conpherence-edited .phabricator-transaction-content {
|
|
padding: 0 1em 0 1em;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.conpherence-message-pane .aphront-form-control {
|
|
padding: 0;
|
|
}
|
|
|
|
.conpherence-message-pane .aphront-form-control-submit {
|
|
margin-right: 8px;
|
|
}
|
|
.conpherence-message-pane .remarkup-assist-bar {
|
|
border-width: 1px 0 0;
|
|
border-color: #CCC;
|
|
border-bottom: transparent;
|
|
}
|
|
|
|
.conpherence-message-pane .remarkup-assist-textarea {
|
|
height: 6em;
|
|
padding: 6px;
|
|
border-width: 0 0 1px 0;
|
|
border-color: #e7e7e7;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
.device .conpherence-message-pane .remarkup-assist-textarea {
|
|
margin: 0.5em 0em 0em 2%;
|
|
padding: 6px 1%;
|
|
width: 98%;
|
|
height: 2em;
|
|
resize: none;
|
|
}
|
|
|
|
.conpherence-message-pane .remarkup-assist-textarea:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.device .conpherence-message-pane .aphront-form-control-textarea {
|
|
float: left;
|
|
height: 2em;
|
|
}
|
|
.device-tablet .conpherence-message-pane .aphront-form-control-textarea {
|
|
width: 76%;
|
|
}
|
|
.device-phone .conpherence-message-pane .aphront-form-control-textarea {
|
|
width: 63%;
|
|
}
|
|
|
|
.device .conpherence-message-pane .aphront-form-control-submit button {
|
|
margin: 0.6em 0 0 2%;
|
|
}
|