Design for the aspect dropdown in the publisher

[ghost]

Before :

after :

[Raven24]

not bad, but I'm not sure the button should be the same width as the contents. I somewhat like the "minimal" width.

[Flaburgan]

Yeah this can probably break the design is someone has anaspectwithaverylongnamelikethat.

[jhass]

Yeah, me too. What I would consider changing is aligning the left side with the button instead of the right side though.

[ghost]

Yeah, I wanted to ask you advice on this one. Problem is : BS dropdown requires the following structure :

<div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Dropdown button
    </button>
    <ul class="dropdown-menu">
        <!-- dropdown menu links -->
    </ul>
</div>

I don't know how to set the width property of the <div> element to be equal to the width property of the <ul> element which has it's own width.

I could, as @jhass says, changing the aligning of the list and let the width unfixed. Problem is the following :

Which makes it elegant if the user has a very long aspect name but inelegant if not :

Here is what I think : given that, anyway, the number of chars available for an aspect name is 20, let's adapt the width to that maximum width ?

[jhass]

Huh? I literally mean just changing the alignment, still keeping the round borders at the top.

[ghost]

I personnally don't like the BS' default space between the button and the dropdown. I find it visually illogic.

[ghost]

Here is my other proposition :

With a fixed width set to the maximum with (for a 20 chars aspect name).

[jhass]

It still looks too big to me tbh, to much empty space in the button.

[ghost]

It still looks too big to me tbh, to much empty space in the button.

This is how it will look if someone has a very long aspect name anyway.

[jhass]

With that long aspect name it won't have as much empty space though.

Can we maybe achieve something like this? (Rough mockup, but you get the idea):

[ghost]

I find this really ugly :/

[jhass]

I didn't mean to do a pixel perfect version of how it should look like, just demonstrating the idea, use your imagination!

[ghost]

My imagination tells me it's not a good way. It looks really weird to me to have a button that is not the width of the dropdown.

Otherwise, the only solution I see is a bit of JS to dynamically adapt the button to the width of dropdown:

var width = $('.dropdown-menu').show().css('width');
$('.dropdown-menu').hide()
$('.btn-group').css('width', width);

[Flaburgan]

It looks really weird to me to have a button that is not the width of the dropdown.

This is how the blueprint dropdown was though.

[ghost]

Ok, here is my last proposition, dynamic width computed with a bit of JS code :

And with very long aspect name :

I have nothing more to propose :(

[goobertron]

I also don't like the over-long button, I'm afraid. Buttons should be only as long as necessary for the text contained within them, unless there's a very good reason to make a button longer. Having the drop-down longer than the button is no problem to me.

[jhass]

Yeah, still no improvement to me either I'm afraid.

[ghost]

Hmm... It seems like we are in a dead end :/
I revert the changes and leave only the pull-right change. Sounds good ?

[ghost]

Can this be merged ?

[Flaburgan]

@AugierLe42e the aspect dropdown is also used in hovercards and on the profile page. So this PR brings inconsistency.

If the box expands to the left and not to the right like you suggest, it's because the button is placed on the right of the profile page. So, someone with big aspect name would see the dropdown cut by the end of the screen if it was shown at the right instead of left like it is now.

[ghost]

Ok, closing it so.