2013-04-02 18:15:33 +02:00
|
|
|
/**
|
|
|
|
|
* @provides phabricator-hovercard-view-css
|
|
|
|
|
*/
|
|
|
|
|
|
Hovercard front-end code & stuff
Summary:
Refs T1048; Depends on D5557, D5558
They hover right above your eyes. Try it out at home :D (in that case, don't forget to checkout D5557 and D5558)
Worth a lot of improvement. But it's great for now after a little bit of styling.
Scrape load (search current document for all hovercards and pre-load them) and lazy load (e.g. previewing comments which is not covered by scrape load) implemented.
Added some seemingly useful graceful situations. Too much to the left, too much to the top.
Test Plan:
Tested on Ubuntu, Chrome and FF. No Windows yet, since I have it live at no place. Works pretty fine, at least it will appear.
Could test left graceful fallback. Don't know what happens if you place it too far to the top. I expect either good results or placement about the center of the screen in case of glitches.
For now, they'll disappear right away once the mouse leaves the object tag. Intended is when leaving both tag and hovercard.
Reviewers: epriestley, chad, btrahan
CC: aran, Korvin
Maniphest Tasks: T1048
Differential Revision: https://secure.phabricator.com/D5563
Conflicts:
src/__celerity_resource_map__.php
2013-04-05 17:31:35 +02:00
|
|
|
.jx-hovercard-container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
2013-04-02 18:15:33 +02:00
|
|
|
.phabricator-hovercard-wrapper {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
width: 400px;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
background-color: #cccccc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-phone .phabricator-hovercard-wrapper {
|
|
|
|
|
width: 300px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-hovercard-container {
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
border: 1px solid #666666;
|
|
|
|
|
}
|
|
|
|
|
|
2013-04-05 17:21:01 +02:00
|
|
|
.phabricator-hovercard-head .phabricator-action-header {
|
2013-04-02 18:15:33 +02:00
|
|
|
border-top-left-radius: 2px;
|
|
|
|
|
border-top-right-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-hovercard-tags {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
float: right;
|
|
|
|
|
white-space: normal;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-hovercard-body {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
border-bottom-left-radius: 2px;
|
|
|
|
|
border-bottom-right-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-hovercard-body .profile-header-picture-frame {
|
|
|
|
|
float: left;
|
|
|
|
|
margin: 0;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
2013-04-06 20:26:43 +02:00
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
2013-04-02 18:15:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-hovercard-tail {
|
|
|
|
|
padding: 3px 2px;
|
|
|
|
|
background-color: #eeeeee;
|
|
|
|
|
border-bottom-left-radius: 2px;
|
|
|
|
|
border-bottom-right-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-hovercard-tail button,
|
|
|
|
|
.phabricator-hovercard-tail a.button {
|
|
|
|
|
margin: 3px;
|
|
|
|
|
}
|