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 {
|
2014-03-11 01:10:31 +01:00
|
|
|
float: left;
|
2013-04-02 18:15:33 +02:00
|
|
|
width: 400px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.device-phone .phabricator-hovercard-wrapper {
|
2014-03-11 01:10:31 +01:00
|
|
|
float: left;
|
2013-04-02 18:15:33 +02:00
|
|
|
width: 300px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phabricator-hovercard-container {
|
2014-03-11 01:10:31 +01:00
|
|
|
float: left;
|
|
|
|
width: 100%;
|
2015-04-14 18:48:59 +02:00
|
|
|
box-shadow: {$dropshadow};
|
2015-06-20 14:12:52 +02:00
|
|
|
border: 1px solid {$blueborder};
|
2014-06-02 20:45:30 +02:00
|
|
|
border-radius: 3px;
|
|
|
|
background-color: #fff;
|
2013-04-02 18:15:33 +02:00
|
|
|
}
|
|
|
|
|
2015-05-22 17:22:25 +02:00
|
|
|
.phabricator-hovercard-head .phui-header-shell {
|
2015-06-26 00:58:00 +02:00
|
|
|
padding: 6px 8px 6px 12px;
|
|
|
|
background-color: {$bluebackground};
|
2015-06-20 14:12:52 +02:00
|
|
|
border-top-left-radius: 3px;
|
|
|
|
border-top-right-radius: 3px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phabricator-hovercard-head .phui-header-header {
|
|
|
|
font-size: 14px;
|
2014-06-03 23:36:31 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.phabricator-hovercard-head .phui-tag-type-state {
|
2015-05-18 19:00:15 +02:00
|
|
|
color: {$darkbluetext};
|
2014-06-03 23:36:31 +02:00
|
|
|
text-shadow: none;
|
2015-05-18 19:00:15 +02:00
|
|
|
font-weight: normal;
|
2014-06-03 23:36:31 +02:00
|
|
|
}
|
|
|
|
|
2013-04-02 18:15:33 +02:00
|
|
|
.phabricator-hovercard-tags {
|
|
|
|
float: right;
|
|
|
|
white-space: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phabricator-hovercard-body {
|
2015-06-20 14:12:52 +02:00
|
|
|
padding: 12px;
|
2013-09-07 18:13:55 +02:00
|
|
|
color: {$darkgreytext};
|
2014-06-02 20:45:30 +02:00
|
|
|
border-bottom-right-radius: 3px;
|
|
|
|
border-bottom-left-radius: 3px;
|
2014-06-09 20:46:57 +02:00
|
|
|
position: relative;
|
2014-03-11 01:10:31 +01:00
|
|
|
}
|
|
|
|
|
2014-06-03 23:36:31 +02:00
|
|
|
.phabricator-hovercard-body-item {
|
2014-06-09 20:46:57 +02:00
|
|
|
margin: 2px 0 0 0px;
|
2014-06-03 23:36:31 +02:00
|
|
|
}
|
|
|
|
|
Hovercard tweaks
Summary: Tightens up spacing, remove some of the borders, add alpha channel, make them all blue (sorry, red green and yellow are for 'status'). If we want to do more colors just for hovercards, I have a brown and a black in the mock, but would like to try just blue for now.
Test Plan: UIExamples, Tasks, People, Diffs, and Pastes.
Reviewers: epriestley, AnhNhan, btrahan
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5609
2013-04-07 06:13:11 +02:00
|
|
|
.phabricator-hovercard-body-header {
|
2014-06-02 20:45:30 +02:00
|
|
|
font-size: 14px;
|
|
|
|
padding-bottom: 4px;
|
2013-09-07 18:13:55 +02:00
|
|
|
color: {$darkgreytext};
|
2014-06-03 23:36:31 +02:00
|
|
|
line-height: 18px;
|
2013-04-02 18:15:33 +02:00
|
|
|
}
|
|
|
|
|
2014-03-11 01:10:31 +01:00
|
|
|
.phabricator-hovercard-body .phabricator-hovercard-body-image {
|
|
|
|
width: 58px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phabricator-hovercard-body .phabricator-hovercard-body-details {
|
2014-06-09 20:46:57 +02:00
|
|
|
margin-left: 58px;
|
2014-03-11 01:10:31 +01:00
|
|
|
}
|
|
|
|
|
2013-04-02 18:15:33 +02:00
|
|
|
.phabricator-hovercard-body .profile-header-picture-frame {
|
|
|
|
float: left;
|
|
|
|
width: 50px;
|
|
|
|
height: 50px;
|
2013-04-06 20:26:43 +02:00
|
|
|
background-position: center;
|
|
|
|
background-repeat: no-repeat;
|
2015-05-14 20:15:04 +02:00
|
|
|
background-size: 100%;
|
2013-04-02 18:15:33 +02:00
|
|
|
}
|
|
|
|
.phabricator-hovercard-tail {
|
2014-03-11 01:10:31 +01:00
|
|
|
width: 396px;
|
|
|
|
float: left;
|
2014-06-03 23:36:31 +02:00
|
|
|
padding: 2px;
|
|
|
|
border-top: 1px solid {$thinblueborder};
|
|
|
|
border-bottom-left-radius: 3px;
|
|
|
|
border-bottom-right-radius: 3px;
|
2013-04-02 18:15:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.phabricator-hovercard-tail button,
|
|
|
|
.phabricator-hovercard-tail a.button {
|
|
|
|
margin: 3px;
|
|
|
|
}
|