Wrap versions' list to look more consistent

[stsewd]

I just noted that the Versions section looks different to the others.

Here is how it looks right now

And how it will look like after merging

[humitos]

Good catch!

I think when there is no active/inactive version we don't want to display it as a table (or unordered list).

So, I'd say that this should be something like:

Similar as it is now but without the borders (probably this means more than CSS --I mean, touching the html layout maybe). What do you think?

[stsewd]

@humitos I think the same, but that it is how the rest of the sections looks like, should we change the other sections too?

[humitos]

Oh, I haven't notice that. I'd say that it's "cleaner" to remove the dark gray when there is nothing to show. Looks nicer without that background IMHO.

[humitos]

@stsewd can you make the changes I mentioned you?

I think that's the only thing missing to wrap this PR in a mergeable state.

[stsewd]

@humitos should I change the empty state for all the lists then? I think we are moving to other style and layout as mention on #3572 (comment)

Also see https://github.com/rtfd/readthedocs.org/issues/3554

[humitos]

should I change the empty state for all the lists then?

Yes, I'd say so.

I think we are moving to other style and layout as mention on #3572 (comment)

This, and the other issue you linked are going to be bigger changes. I'd prefer to wrap this PR, merge it and achieve those other changes in different PR. I'm sure those will require some discussion to finally agree.

[stsewd]

@humitos this is how it looks now. I search some other lists, I didn't touch the subproject list, since that is done on #3572

[humitos]

I'm approving the PR since it's looks great.

The only thing to consider is my comment about not using list stylish when the list is empty and we are showing a simple message.

Maybe this is a matter of tastes, so another opinion could help here.

[humitos]

Why are we considering this as a list of 1 element if it's empty?

I mean, we are using a li and displaying it as a row when it's not a list. In another comment I suggested to use just the simple text:

"No active versions."

as a p without too much style.

[stsewd]

This is a common pattern across other lists (some times with a p and other just with a li)

https://github.com/rtfd/readthedocs.org/blob/499a74076f0debae09acc1d4c4eeeab03f8f557e/readthedocs/templates/core/project_list_featured.html#L32

https://github.com/rtfd/readthedocs.org/blob/2f6b36d0a5f38ea3cf5d8998520ac095798f9b1c/readthedocs/templates/projects/integration_list.html#L37

https://github.com/rtfd/readthedocs.org/blob/d7abdd6352773eee96f6d02fca4c1c9757539ac6/readthedocs/templates/core/filter_list.html#L12

[humitos]

Nice reply! Hehe!

Makes sense to leave as you did, then :)

[agjohnson]

👍 on using a single item list to display "No items". This is the pattern we're using on all other listings as they are reworked.

[agjohnson]

The changes here are great! For some reason the "Edit" buttons are misaligned now though. The text should align to the middle of the button, it's more towards the top currently. I'd take a look at some of the places we do use this same table layout and have a button inline in the rows for a clue.

[agjohnson]

Noting required change on edit button alignment.

[stsewd]

@agjohnson I see the same on master :/. Probably something about the font that rtd uses on production?

Local

Org site

Master on local

This branch on local

On the org site

[humitos]

I have the same problem than @stsewd with the fonts. They look different from .org than from local host.

Although, I think the problem is because the padding is not properly set. It's 4px in the bottom and 6px in the top even in production .org site:

I think it should be 5px in both :)

[stsewd]

I just rebased this PR, for recap the only thing missing here is the problem with the font: on local development looks different from the production site, so it looks like is not centered. And as @humitos mention #3445 (comment) is not really centered on the production site either.

https://github.com/rtfd/readthedocs.org/blob/7b7ecb3bfc6fa37f56dc7eace19f8ce09f8233f4/media/css/core.css#L392

The only difference I see from prod/local is that Typekit is loaded on dev, so, I think that takes precedence over fontawesome.

[davidfischer]

I created an issue with respect to fonts in development vs production #3939. Essentially, we are using proprietary fonts (loaded through TypeKit) which are loaded in production only.

[ericholscher]

This looks ready to merge. Should we hold off on this @agjohnson until we do more design tweaks, or should we get this in to make things a bit nicer for now?

[ericholscher]

Tested locally & it looks good.