hugo-theme-learn icon indicating copy to clipboard operation
hugo-theme-learn copied to clipboard

Make the expand section more obvious

Open nnja opened this issue 4 years ago • 4 comments

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)

before

After (gif)

after

nnja avatar Aug 09 '20 23:08 nnja

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?

matalo33 avatar Sep 10 '20 14:09 matalo33

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.

NicTanghe avatar Sep 11 '20 08:09 NicTanghe

  • 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)

McShelby avatar Sep 12 '20 10:09 McShelby

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

JianLoong avatar Oct 05 '20 16:10 JianLoong