ideas for better rendering for docs of results

[erantapaa]

I've been experimenting with different ways of presenting the doc section for returned matches.
Here are some ideas -- feedback is very welcome.

Demo 1 - Adding a More/Less link

In this demo a More/Less link is added to those documentation sections which are too long or multi-line.

• delete
• max

Note that in on the max page not all results have a More/Less link - it's only added when needed.

I'm still experimenting with alternative ways of implementing the More/Less control. Perhaps use an icon (like ►) in the left margin of the doc section.

Demo 2 - Trim lines using CSS

This demo just uses CSS to trim the first line of the doc section to the page width. Subsequent paragraphs and pre blocks are hidden. I haven't implemented a toggle control, but I'm sure one could be added.

• delete
• max

There are some entries (on the max page) which have more docs to display, e.g. glGetBooleanv) but there is no visual indication that there is more.

[erantapaa]

Well - I've figured out some more CSS and JS. Here is another demo which adds a collapser/expander icon next to doc sections which have more than one line:

Demo 3 - Change More/Less to an Icon

• delete
• max

[alexbiehl]

Hello Erik, nice to have you around here and thanks for your suggestions.
It makes we wonder what don't you like about the current "... more" part of too long descriptions (besides it doesn't seem to work...)?

But besides, I like Demo 3 the most. Having the more/less expander at a fixed location might give a nicer workflow nevertheless.

@noobymatze @UweSchmidt what do you think?

[noobymatze]

Thanks for the suggestions, Erik!

Generally I like Demo 3 the best. The main gripe I have with it though, is that it is much harder to hit the expander. Especially on mobile that is. But I think, we could mitigate this by using a touch/click handler on the 'preview-div' itself, which would expand the remaining content.

WDYT?

[erantapaa]

I also like Demo 3 the best, but even on a laptop the toggle control can be hard to hit. I'm not a UI designer, and I'm still learning a lot about CSS and JS. Basically Demo 1 -- Demo 3 demonstrates how my knowledge of CSS/JS has evolved.

Here are some of my thoughts:

• It would be nice to have the toggle control stay in the same place
• The docs can contain links (e.g. in the delete example), so it would be nice to keep those links clickable. (Or maybe we punt on them being clickable.)

I'm open to whatever works and you guys decide on. Perhaps a special layout for mobile? I'm sure this kind of problem has already been solved, so maybe there are ideas we can steal from other sites.

The other problem I'm trying to solve is figuring out why the docs sometimes render as HTML source instead of HTML. I'm currently performing an analysis of all of the doc sections in the hoogle index files to validate my assumptions about their structure.

[noobymatze]

The links contained in the docs should definitely remain clickable.
We could also try to make the more icon a little bigger. That should take care of most of the problems we're facing.

I'll take a look over the course of next week and play around with it a little for myself.

[erantapaa]

Here's another idea:

http://erantapaa.github.io/hayoo-demo5/page.html