Ansys Sphinx Theme - Design updates
Closed this issue · 37 comments
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
Card
Buttons
Links
Side nav
Select
One thing is, the dropdown select component in Sphinx looks like an accordion component.
Our proposed selector looks like this:
Dropdown
Table
Scrollbar
Breadcrumb
Tabs
Generic guidelines
Example pages
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?
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
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 :)
Have we addressed all the changes @Revathyvenugopal162 @jorgepiloto ?
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.
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!
The code snippet has been fixed. Please let me know if anything needs to be updated. :)
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 #408 (review).
Side nav
PR #411
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?
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?
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
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
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
Links
PR #411
Hi @mia-guo-ux, could you also propose some style for our search bar? When pressing "Ctrl + k", an interactive search opens up. As soon as users type anything, it suggests different results. Right now, its style is out of sync with the rest of the theme.
@jorgepiloto Sure. Please see below. I was also wondering can we remove the popup
and allow search behaviors in the input box only?
The pop-up is a desired feature requested by many customers and developers. We are using MeiliSearch to provide fast and solid search results. Thus, the need for styling it too.
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
@mia-guo-ux , there was a question regarding the yellow color and why we are not using the Ansys Gold. Do you have any particular reason for not selecting that border? If so, could you please share it here or revert the color to Ansys Gold? I'm also looping in the docs team since this question arose from the docs team meeting. Pinging @ansys/pyansys-core @ansys/documentation
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@mia-guo-ux , there was a question regarding the yellow color and why we are not using the Ansys Gold. Do you have any particular reason for not selecting that border? If so, could you please share it here or revert the color to Ansys Gold? I'm also looping in the docs team since this question arose from the docs team meeting. Pinging @ansys/pyansys-core @ansys/documentation
@Revathyvenugopal162 Were you referring to the border color of the warning alert? Typically, we apply Ansys Gold exclusively to brand-relevant elements such as logos. In the design language, we have yellow as the dedicated color for warning states.
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@mia-guo-ux , there was a question regarding the yellow color and why we are not using the Ansys Gold. Do you have any particular reason for not selecting that border? If so, could you please share it here or revert the color to Ansys Gold? I'm also looping in the docs team since this question arose from the docs team meeting. Pinging @ansys/pyansys-core @ansys/documentation
@Revathyvenugopal162 Were you referring to the border color of the warning alert? Typically, we apply Ansys Gold exclusively to brand-relevant elements such as logos. In the design language, we have yellow as the dedicated color for warning states.
Thank you for explanation. It was to check why we using a dedicated yellow.
We finally released version v1.0. Mind you performing one last review, @mia-guo-ux so we can close this?
We finally released version v1.0. Mind you performing one last review, @mia-guo-ux so we can close this?