1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-27 17:22:42 +01:00
phorge-phorge/webroot/rsrc/css/application/conpherence/menu.css
Bob Trahan 42c1e39ae6 Conpherence - mobilized
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
2013-04-15 16:27:41 -07:00

153 lines
3 KiB
CSS

/**
* @provides conpherence-menu-css
*/
.conpherence-layout {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 44px;
}
.conpherence-layout .conpherence-no-threads {
height 80%;
width: 80%;
padding: 10%;
text-align: center;
}
.conpherence-layout .conpherence-no-threads .text {
margin: 0px 0px 16px 0px;
}
.conpherence-menu-pane {
width: 300px;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
top: 0;
bottom: 0;
}
.device-phone .conpherence-menu-pane {
-webkit-overflow-scrolling: touch;
}
.conpherence-content-pane {
margin-left: 300px;
position: relative;
}
.conpherence-layout .phabricator-nav-column-background {
display: block;
width: 300px;
}
.device .conpherence-menu-pane {
top: 41px;
}
.device .phabricator-nav-column-background {
top: 86px;
}
.device .conpherence-menu-pane,
.device .phabricator-nav-column-background {
display: none;
width: 100%;
}
.device .conpherence-content-pane {
margin-left: 0;
}
.conpherence-menu .conpherence-menu-item-view {
display: block;
height: 55px;
width: 100%;
overflow: hidden;
position: relative;
text-decoration: none;
border-top: solid 1px #3B3D3E;
border-bottom: solid 1px #1C1F21;
border-right: 0;
border-left: 2px solid transparent;
}
.conpherence-menu .conpherence-selected {
background: rgba(0, 0, 0, .6);
border-left: 2px solid #66CCFF;
}
.device-desktop .conpherence-menu .conpherence-menu-item-view:hover {
background-image: url('/rsrc/image/texture/dark-menu-hover.png');
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-image {
top: 6px;
left: 6px;
display: block;
position: absolute;
width: 35px;
height: 35px;
background-size: 35px;
border: 4px solid rgb(29, 32, 34);
border-radius: 3px;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-title {
display: block;
margin-top: 12px;
margin-left: 58px;
text-align: left;
font-weight: bold;
font-size: 13px;
color: #ffffff;
text-shadow: 0px 1px 1px #000000;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-subtitle {
display: block;
color: #a1a5a9;
font-size: 11px;
margin-top: 2px;
margin-left: 58px;
font-style: italic;
}
.conpherence-menu .conpherence-menu-item-view
.conpherence-menu-item-unread-count {
position: absolute;
left: 35px;
top: 3px;
background: #f00;
border-radius: 10px;
color: white;
font-weight: bold;
padding: 1px 6px 2px;
border: 1px solid #a00;
font-size: 12px;
}
.conpherence-menu .hide-unread-count .conpherence-menu-item-unread-count,
.conpherence-menu .conpherence-selected .conpherence-menu-item-unread-count {
display: none;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-date {
position: absolute;
top: 15px;
right: 16px;
color: #a1a5a9;
font-size: 11px;
}
.no-conpherences-menu-item {
color: #a1a5a9;
border-top: solid 1px #3B3D3E;
padding: 20px 0;
margin: 0px auto;
width: 300px;
text-align: center;
}