Make the on-hover detail panel in infoboxes more generic and reusable.
Review Request #9082 — Created July 16, 2017 and submitted
The user infobox includes a nifty on-hover panel for the timestamp,
showing the last logged in time and joined date. The implementation was
a bit specific to the user infobox (partly due to the way it was
positioned and the hover triggered), but this change makes it more
generic and usable for other infoboxes, allowing it to be placed
anywhere in the infobox.
The new implementation provides standard CSS rules and a structure for
the hover panel. There's now a containing element
.infobox-hover-item) with an anchor that triggers the display
.infobox-hover-item-anchor) and the panel contents that will be shown
.infobox-hover-item-contents). Unlike the previous implementation,
this one doesn't absolutely position the main container, meaning that it
can sit directly above and below other content without affecting the
flow of those elements.
There's also a
.infobox-itemclass for items that don't have a hover
rule. This enables us to have consistent spacing for all detail items.
With the new implementation, we can no longer depend on
the element used for it is now positioned relatively alongside the panel
instead of absolutely inside of it, and the panel is shown/hidden based
on the hover instead of its child elements). Instead, the hover
In theory, infoboxes could have multiple of these hover panels and
they'd all work.
Tested that the user infobox's hover panel worked, and continued to work
as I switched between users and re-rendered the infobox.
Tested these CSS rules with new infobox content for review requests
(coming in another change).
- Moved some CSS rules down a bit.
- Moved the
infobox-hover-item-contentrules out of
:hoverand into the main rule.
- Removed an empty CSS rule.
Revision 2 (+120 -67)
Checks run (2 succeeded)
- Fixed the hover anchor's border to not cover the icon. There's now a
.infobox-hover-item-anchorthat defines the text portion.
- Fixed up spacing around the items (the timestamp and e-mail address on the user infobox) by adding a new
.infobox-iteminstead of using
<p>. This means more consistency in the spacing.
- Added some spacing between items in the hover panels, to improve readability.
- Reduced some of the padding in the hover panel to compensate for the spacing changes above, to help ensure the panel fits nicely in the user infobox and others, and is more generally consistent.
Revision 3 (+132 -67)