Upcoming changes to contextual hover menu styling (beta)

[fu]

For those of you on beta, expect some changes to the contextual hover menu styling. The changes are not live yet; this is just so you don't suddenly wake up to find your journals have changed with no explanation.

If you haven't turned on the JS on Journal beta, you won't notice any changes.

If you are on the beta, then you'll notice that the contextual hover menu will look like this:

The changes to appearance are relatively minor: we've spaced things out a bit more and given each link more room to breath; unshrunk the text; made the border less abrupt; increased the icon size.

The bigger change is in behavior, to trigger the menu only when you've hovered over a userhead / icon deliberately, rather than just passed your mouse over, and to get rid of some annoying bugs where the menu would show up when you might not want it / not show up when you did want it. Which isn't precisely relevant to this community, but just so you know!

What is more relevant: if you're interested in styling it further for your own styles, the soon-to-be new markup is under the cut.

The biggest change is that we no longer have an .Inner, and that some of the elements have been reordered.

Old markup:

<div class="ippu ContextualPopup">
    <div>
        <div class="Inner">
            <div class="Userpic">
                <a href=""><img src="" width="" height=""></a>
            </div>
            <div class="Content">
                <div class="Relation RelationshipStatus">
                    You have granted access to username
                    <br>
                    You have subscribed to username
                </div>
                <span>
                    <a href="">Send message</a>
                </span>
                <br>
                <span>
                    <span class="RemoveTrust">
                        <a href="">Remove access</a>
                    </span>
                </span>
                <br>
                <span>
                    <span class="RemoveWatch">
                        <a href="h">Remove subscription</a>
                    </span>
                </span>
                <br>
                <span>
                    <span class="SetBan">
                        <a href="">Ban user</a>
                    </span>
                </span>
                <br>
                <span>
                    View:
                </span>
                <a href="">Journal</a>
                <span>
                    &nbsp;|
                </span>
                <a href="">Profile</a>
                <div class="ljclear">
                    &nbsp;
                </div>
            </div>
        </div>
    </div>
</div>

New markup:

<div class="ui-tooltip ui-widget ... ContextualPopup">
    <div class="ui-tooltip-content">
            <div class="Userpic">
                <a href=""><img src="" alt=""></a>
            </div>
            <div class="Content">
                <div class="Relation">Current relationship status</div>
                <div class="Actions">
                    <div><a href="">Subscribe to username</a></div>
                    <div><a href="">Grant access to username</a></div>
                    <div><a href="">Ban username</a></div>
                </div>
            </div>
    </div>
</div>

Comments

Re: I'm just...

[fu]

I think the difference between the two is that you'd have been logged into Firefox on an account with the beta turned on,and either logged off on IE, or else on a different account!

You'll probably need to slightly adjust your CSS to account for the new HTML structure -- we have someone looking into making things work for official layouts; it might be useful to wait for thoes and base your changes upon them!

Re: hover menu it's actually a deliberate thing. If you hold your mouse over the icon rather than moving it away at once, then it'll show up. (This is to account for someone scrolling down the page where their mouse goes over an icon, where they don't really mean to get the icon, they're just trying to go through their read page)

Re: I'm just...

[marahmarie]

OK, well, point being, the behavior with Beta turned on was bizarre. Like deliberately pointing at the icon five or six times without moving the mouse away for several seconds each time in order to get the hover menu to show up just once is 1) not the expected, normal behavior even to this day and 2) really annoying and weird (perhaps I didn't describe this behavior adequately in my first reply, either, and if not I really do apologize for that). But I read the post you made recently saying you want us to report any new icon/hover/JS problems happening for those of us in Beta so when I get some more time I'm going to turn it back on and if that behavior persists (and I'm pretty sure it will, at least in Firefox) I'll report it again here and/or to Support (or just tell me where you think is best to let y'all know).

And yeah, definitely concur IE was behaving correctly because I was logged out in IE/Beta is not enabled while logged out (good point! *slaps head*).

ETA: Just turned Beta back on again and viewed in Firefox (but turning it off again until I have time to re-style the hover menu to match its non-Beta appearance) and here's how it went (I should make a video for you, it's that bizarre):

1) Pass One with mouse: hovermenu showed up immediately.
2) Pass Two, Three, Four, Five and Six: no hovermenu, just hovertext (in my case, that's where it says "Sheep go to heaven").
3) Pass Seven: hovermenu showed up, but only when I hit the top-middle of the icon or higher with mouse, which went for Passes Eight, Nine and Ten as well.
4) Passes Ten-Twenty: No hovermenu. Just hovertext.

I'll be glad to turn Beta back on again before I have time to re-style the hovermenu if you want me to for debugging purposes, but otherwise I'd rather just keep it off until I get time to play with it again.