Ansys Sphinx Theme - Design updates

[mia-guo-ux]

Sphinx design : https://sphinxdocs.ansys.com/version/dev/examples/sphinx-design.html#

The following components could be enhanced to create a more streamlined user experience.

• Cards (including card carousel)
• Buttons
• Links
• Side navigation
• Selector
• Dropdown
• Table
• etc.

Please feel free to let me know if you have any concerns or if anything needs to be specified. Cheers! FYI @Revathyvenugopal162 @jorgepiloto @RobPasMue

[mia-guo-ux]

Card

[mia-guo-ux]

Buttons

[mia-guo-ux]

Links

[mia-guo-ux]

Side nav

[mia-guo-ux]

Select One thing is, the dropdown select component in Sphinx looks like an accordion component.

Our proposed selector looks like this:

[mia-guo-ux]

Dropdown

[mia-guo-ux]

Table

[mia-guo-ux]

Scrollbar

[mia-guo-ux]

Breadcrumb

[mia-guo-ux]

Tabs

[mia-guo-ux]

Generic guidelines

[mia-guo-ux]

Example pages

[jorgepiloto]

Thanks for this great review, @mia-guo-ux.

The only thing I do not agree is the text-align of the code blocks content. In my opinion, this should be left-aligned. Otherwise, we are loosing a precious space. Some statements can be quite long, so it is better to use all the available space. I am fine though adding some padding. What do you think?

[RobPasMue]

Thanks for this great review, @mia-guo-ux.

The only thing I do not agree is the text-align of the code blocks content. In my opinion, this should be left-aligned. Otherwise, we are loosing a precious space. Some statements can be quite long, so it is better to use all the available space. I am fine though adding some padding. What do you think?

I agree with Jorge - code-snippets should be left aligned IMO

[mia-guo-ux]

Great catch! Here's an updated screen. Besides this, please feel free to let me know if any of the updates is technically feasible and if any adjustment is needed :)

[RobPasMue]

Have we addressed all the changes @Revathyvenugopal162 @jorgepiloto ?

[Revathyvenugopal162]

Have we addressed all the changes @Revathyvenugopal162 @jorgepiloto ?

We are addressing issues one by one. Thank you for notifying @RobPasMue, though it was mistakenly mentioned in the PR.

[PipKat]

Thanks for this great review, @mia-guo-ux. The only thing I do not agree is the text-align of the code blocks content. In my opinion, this should be left-aligned. Otherwise, we are loosing a precious space. Some statements can be quite long, so it is better to use all the available space. I am fine though adding some padding. What do you think?

I agree with Jorge - code-snippets should be left aligned IMO

Code blocks, captions, images, tables -- all should be left-aligned!

[mia-guo-ux]

The code snippet has been fixed. Please let me know if anything needs to be updated. :)

[Revathyvenugopal162]

Table

PR #408

Changes made:

• we haven't applied disabled and active states to the normal table.
• The font size change on hovering is not implemented as discussed in https://github.com/ansys/ansys-sphinx-theme/pull/408#pullrequestreview-2144460531.

[Revathyvenugopal162]

Generic guidelines

PR #409

changes made:

• transparent logos added

[Revathyvenugopal162]

Side nav

PR https://github.com/ansys/ansys-sphinx-theme/pull/411

[Revathyvenugopal162]

Side nav

@mia-guo-ux , the color you mentioned for the active and hover states in the sidebar is the same, but it appears different in the image. Could you please clarify?

[Revathyvenugopal162]

Links

@mia-guo-ux , For links, we have two additional states: visited links and visited hover links. Could you please check these and provide design suggestions for them as well?

[mia-guo-ux]

Side nav

@mia-guo-ux , the color you mentioned for the active and hover states in the sidebar is the same, but it appears different in the image. Could you please clarify?

Sorry for the confusion. The image has been updated. In Hover states, the bg fill is #ECECEC, but in Active states, it should be #D9D9D9

[mia-guo-ux]

Links

@mia-guo-ux , For links, we have two additional states: visited links and visited hover links. Could you please check these and provide design suggestions for them as well?

The design has been updated. Please see the image in the original post :)

• Visited state: Open sans regular, 14px, #9A33CB
• Visited hover state: Open sans regular, 14px, #7B29A2

[mia-guo-ux]

Hi @Revathyvenugopal162 I made a few updates to Tabs, Side nav, Links, and Global Nav. Please refer to the original post (the images have been re-uploaded). Thank you :)

In addition, here's the admonition component

[Revathyvenugopal162]

Links

PR #411

[Revathyvenugopal162]

Task list

• [ ] Cards
• [ ] Buttons
• [ ] Links - #411
• [ ] Sidebar - #411
• [ ] Dropdown
• [x] Table - #408
• [ ] Scrollbar
• [ ] Breadcrumbs
• [ ] Tabs
• [x] General layout - #409, #411
• [ ] Admonitions