hugo-theme-learn
hugo-theme-learn copied to clipboard
Make the expand section more obvious
From the interface it's pretty non-obvious that the expand section can actually be... expanded.
I added the following changes:
- Add a mouse over to the title that's the same color as other links
- Make the icons bigger, use a double chevron
- Make the title bold
- Indent the content slightly after it's expanded
Before (gif)
After (gif)
Thank you, I think this is a positive improvement. I think before merging it would be nice to enhance it a little further...
- Text and button should be vertically centred. At the moment the text is lower as it aligns to the bottom of the div
- Expand and no-expand buttons should be same horizontal width. When toggled the horizontal width reduces so the text heading shifts left. Can these be made to be the same width?
THe alignment of the arrows and text is verry weird.
i think a grey box -> (with the possibillity to change the colour) and a little arrow on the bot right would be better.
- I am not a fan of double chevrons. In other places single chevrons are used (prev, next and in some installations the sidebar menu expander). So for a coherent look I'ld prefer single chevrons.
- I agree in changing the color to the same color that is used for links in general. This makes it obvious for the user, that this area is clickable.
- I don't understand why the font needs to be strong. I think color is enough. Maybe it's an option to underline the text on MouseOver as with other links.
- Also I have an idea why the icon is larger, I don't like it very much. It looks clumsy in its current form (this may be due to strange alignment with the text)
I actually agree with @McShelby with regards to the usage of the single chevron instead of double.
A simple and old example of something old but nice would be jQueryUI accordion element. Link here