fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] dw_styles2013-01-02 06:25 pm

Upcoming changes to contextual hover menu styling (beta)

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>

[personal profile] swaldman 2013-01-02 03:57 pm (UTC)(link)
Ooh, that new pop up box looks really nice :-)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (comfort glitch)

[personal profile] ninetydegrees 2013-01-02 08:15 pm (UTC)(link)
<3
musyc: Dreamwidth sheep in Slytherin green/silver colors (Slytherin: Dreamsheep)

[personal profile] musyc 2013-01-08 03:29 pm (UTC)(link)
Oh oh oh, I was going to ask if there could be a "cancel" button somewhere in the tracking popup, because I'm accidentally hitting it all the time on my iThingie, but now with the new design I can see the X-cancel and it's SO BEAUTIFUL. *sparkly eyes*

Dreamwidth, where they think of things I want before I know I want them.
marahmarie: my initials (MM) (Default)

I'm just...

[personal profile] marahmarie 2013-01-09 04:30 am (UTC)(link)
In Firefox the menu and text are both huge, the entire menu is tilted and the background is (incorrectly by the way I have it coded) showing up pure white; while in IE it's still displaying exactly the way I wanted it (small, with small font and a black background).

I mean, I'll look through my CSS, but I'm not even sure where to start if it's displaying my CSS overrides correctly in one browser but not in the other (because if I "fix" things for Fx then what happens in IE?).

Also, in Fx the hover menu is taking just forever; I have to wiggle the mouse over an icon five or six times to get it to show up at all.

Sorry to be the one to notice all this, but...

ETA: It was being in the Beta Testing. Turned it off and all the problems went away. Never mind, I guess? Or does something still need to be fixed for Beta users?
Edited (fixed it myself the strangest way, more info) 2013-01-09 04:33 (UTC)
tamerlane: (Default)

[personal profile] tamerlane 2013-03-02 04:56 pm (UTC)(link)
This is late, but I assume it's the best place for feedback on it. It's a little clunky and unattractive. I think removing the "Grant Access" and/or "Subscribe" would make it less... intrusive? The old one with slightly larger text would have been better.

Additionally, it seems to lag a little. I don't know if this is just me, but it stays around a little too long.

It would also be nice to have it so when I hover over a username it offers the name in the "About" section as opposed to my username. You know my username already, you can see it right beside the icon you're hovering over!