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>

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!