New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "edit" and "view docs" buttons to subproject list #3572

Merged
merged 7 commits into from May 30, 2018

Conversation

Projects
None yet
6 participants
@stsewd
Member

stsewd commented Feb 2, 2018

Closes #3538

Before

screenshot-2018-2-1 subprojects read the docs 1

After

screenshot-2018-2-1 subprojects read the docs

@Blendify

Blendify approved these changes Feb 5, 2018 edited

Nice improvement although in some cases users might find helpful to easily see the URL. Maybe make it on a new line but not clickable? This would probably look best slightly greyed and without an underline. But this is just an idea and would like to hear what other people have to say before you change it.

@humitos

This comment has been minimized.

Member

humitos commented Feb 5, 2018

I like what @stsewd propose here since it's like the common UX all around RTD.

Regarding seeing the URL, I don't have strong thoughts on that. I'll probably just hover the "View Docs" link in that case and check the URL in the bottom of my Firefox. I didn't use too much subprojects but the importance on this (show/hide that URL) will depend on the use case.

I wouldn't use it, I think :)

@agjohnson

This comment has been minimized.

Contributor

agjohnson commented Feb 9, 2018

Parts of this UI are a move to standardize on our UX, so some notes:

  • A URL was added to show the hierarchy of how projects were added. Users weren't adding subprojects correctly and were confused by hierarchy. This makes that UX more clear
  • We're moving away from multiple buttons in table rows. They breaks in fantastic ways for other languages. Multiple buttons is also not clear UI, as there is no visual distinction between elements. Secondary actions or options should be a text link -- view docs in this case.
  • Multiple line tables cells will be the pattern in the future for all use cases like this, so i'd rather stick with that, not merge back down to one line.
  • Icon only buttons in tables is ideal

The project import page is an example of what other tables will become: multiple lines if necessary, one primary button that is an icon, subtle text hints for secondary information.

The subproject page was a first pass at this feature and no attempt was made to add styling then. Each row does need an edit button, but I think this is dropping some necessary pieces.

@stsewd

This comment has been minimized.

Member

stsewd commented Feb 10, 2018

@agjohnson I have improved the styles and the layout as suggested, please tell me what you think.

screenshot-2018-2-10 subprojects read the docs 1
screenshot-2018-2-10 subprojects read the docs
screenshot-2018-2-10 subprojects read the docs 2

@humitos

Wow! This looks great for me.

Although, I can't judge the CSS code since I think we are using LESS for ir and I don't have experience. I suppose that you shouldn't touch the core.css file since this one should be auto-generated by LESS from a core.less file maybe.

@Blendify

This comment has been minimized.

Contributor

Blendify commented Feb 15, 2018

No the edits to the css file are correct. It looks like they are not generated from a sass file. Maybe something we want to do in the future?

@stsewd

This comment has been minimized.

Member

stsewd commented Feb 15, 2018

@humitos as @Blendify mention, this isn't an auto generated file. A review for the css from @agjohnson would be awesome here, since I just based on some previous styles.

@humitos

This comment has been minimized.

Member

humitos commented Feb 15, 2018

Maybe something we want to do in the future?

I suppose that this is the path to follow, but I don't have the knowledge to have an opinion :)

@stsewd

This comment has been minimized.

Member

stsewd commented Feb 21, 2018

I have improve the layout and styles to reuse them on other lists. Hopefully, I didn't break other styles and looks the same!

screenshot-2018-2-21 subprojects read the docs 2
screenshot-2018-2-21 subprojects read the docs 1

@humitos

This looks very good from my point of view. Thanks!

@@ -12,7 +12,7 @@
{% block project_edit_content_header %}{% trans "Subprojects" %}{% endblock %}
{% block project_edit_content %}
<p>
<p class="help_text">

This comment has been minimized.

@stsewd

stsewd Mar 6, 2018

Member

This was missing here :)

@ericholscher

This comment has been minimized.

Member

ericholscher commented May 30, 2018

Tested this locally and it's 💯.

@ericholscher ericholscher merged commit bdf4844 into rtfd:master May 30, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@stsewd stsewd deleted the stsewd:better-ux-subprojects branch May 30, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment