GUI improvement for documentation
- s4muel
- Member | 92
not bad! i would welcome a change like this.
but on pages like this: https://latte.nette.org/en/tags
(no-wrappable table on left side and pretty high TOC on right side) the main
content will get pretty narrow.
maybe if one of the side panels would collapse onclick/mouseover? or making the
nette main column a bit more wide?
- ujovlado
- Member | 12
s4muel wrote:
not bad! i would welcome a change like this.
but on pages like this: https://latte.nette.org/en/tags (no-wrappable table on left side and pretty high TOC on right side) the main content will get pretty narrow.
maybe if one of the side panels would collapse onclick/mouseover? or making the nette main column a bit more wide?
Yes, I see, that big table at the beginning can be a problem. Showing “Contents” on right side on mouseover could be a solution. Thx.
- Filip Procházka
- Moderator | 4668
It could show title of category the article is in, and related articles. There would be less noise.
- in quickstart there would be chapters of quickstart
- programmers guide articles would show the rest of them
- …
- David Grudl
- Nette Core | 8227
Links to complete documentation on each page are needed, it is without a doubt. I was thinking about this concept http://www.mff.cuni.cz/fakulta/ (top menu). Something similar is here http://ellislab.com/…/user-guide/.
There is a problem with wider layout: layout should be the same size for all pages, otherwise it looks weird. That's why there isn't currently menu.
(OT: It would be great to do something like http://www.symfony2cheatsheet.com)
- Vojtěch Dobeš
- Gold Partner | 1316
To be honest, I am not big fan of that top menu – maybe it is just because of these specific examples, but there is so much noise that it becomes difficult for me to actually read the topics. Maximum for me is that Symfony 2 cheatsheet, that is quite readable :). List of topics in sidebar is also easy to swallow – btw I always liked names of sections in Nette docs, because they were simple enough to get me interested in reading, during my first months with Nette I spent lot of time just reading through the docs and becoming amazed by the nice features it was describing.
Last edited by vojtech.dobes (2014-01-20 22:26)
- David Grudl
- Nette Core | 8227
We all don't like top menus, I know. So suggest solution with left panel, TOC and content with current layout.
- hrach
- Member | 1838
So suggest solution with left panel, TOC and content with current layout.
Sorry, I don't understand the meaning …
There is a problem with wider layout: layout should be the same size for all pages, otherwise it looks weird. That's why there isn't currently menu.
That's not exactly right. This is mainly caused by right alignment of the menu. However, I don't see any problem in suggested width for the whole website.
- Filip Procházka
- Moderator | 4668
Hey, it's documentation, it's not supposed to look good, it's supposed to be readable and usable. I would try the wider layout
- David Grudl
- Nette Core | 8227
It must look good! :-)
Current width is ideal for all pages including forum, addons, homepage and documentation too. It can be little bit wider, but not much. And header must have always the same width. For documentation we can use wider #main (but not header).
- David Grudl
- Nette Core | 8227
I redesigned header and expanded layout to 990px. I think it is maximum.
- ujovlado
- Member | 12
Ok, it's here: tmp.ujovlado.sk/nette-doc-proposal
I accepted those 990px and made small changes.
TOC is moved to content and its full content will show on mouseover.
So, what do you think?
To fill space in #left-navigation (that new left sidebar), there can be some element which will follow me, while scrolling down.
Last edited by ujovlado (2014-01-23 08:00)
- hrach
- Member | 1838
PR to PR:
- preview: http://awesomescreenshot.com/03e28rwb6f
- PR to PR src:
#left-navigation h2 {
font-size: 1.7em;
padding: 0 0 0 0.6em;
margin: 0 0 .5em 0;
}
#left-navigation h2 img {
width: 28px;
margin: 4px 8px 0 0;
}
#left-navigation ul {
margin: 0 0 3em 1em;
}
- David Grudl
- Nette Core | 8227
Vlado it looks really good!
But… :-) I've got idea. Wouldn't it be more useful (and usable) if the Content will be static? I don't know how to solve it. This is not ideal: http://postimg.org/…e/m3h6oqppd/
- David Grudl
- Nette Core | 8227
Example of side menu: https://doc.nette.org/en/forms (currently without TOC)
Example of static TOC: https://componette.org/search/?q=
- ujovlado
- Member | 12
David Grudl wrote:
Vlado it looks really good!
But… :-) I've got idea. Wouldn't it be more useful (and usable) if the Content will be static? I don't know how to solve it. This is not ideal: http://postimg.org/…e/m3h6oqppd/
Check this (TOC is static and visible after scrolling down)
tmp.ujovlado.sk/nette-doc-proposal-2
But, you need resolution about 1440px or greater …
- Pavel Macháň
- Member | 282
My solution:
Activation by click on Menu icon+text
Last edited by EIFEL (2014-01-23 10:59)
- buffus
- Member | 101
Excellent work, thanks.
A few ideas:
- In the Programmer's Guide highlight the active link.
- Eliminate differences between Link / Page title in Programmer's Guide, e.g.:
Forms / Forms – it is the same. I like this,
but these Link / Page title are different:
Templates / Templating
Helpers / Default Helper
Late Macros / Macros Default Latte
Configuration / Configuring
Extensions DI / DI Container Extensions
Controls and Components / Components
Routing / URL Routing
Authentication & Authorization / User Authorization and Privileges
AJAX / AJAX & Snippets
Table / Database \ Table
Selection / Database: Selection
ActiveRow / Database: ActiveRow
Mailing / Sending E-mails
Auto-loading / Class Auto-loading
Browsing files on disk / File Search: Finder
Validation / Nette \ Utils \ validators
Utilities for
- Strings / String Processing - Nette \ Utils \ Strings
- Arrays / Array Processing - Nette \ Utils \ Arrays
- URLs / Working with URLs - Nette \ Http \ Url
The differences between the link and page title can be confusing…
Last edited by buffus (2014-01-23 11:42)
- ujovlado
- Member | 12
David Grudl wrote:
Another attempt: popup menu
Nice, but I don't see any symbol/element saying “Hey, here are all links to documentation”. :)
Last edited by ujovlado (2014-01-23 18:19)
- Majkl578
- Moderator | 1364
David Grudl: That is really bad for bigger contents. It requires a huge vertical space to display whole content. In the case of page you linked, its over 820 pixels, which is more than average laptops have (not considering ~-100–200px taken by browser header, windows bar etc.). And it would look weird with scrollbar.
- David Grudl
- Nette Core | 8227
Three columns in popup window ;-)
ad bad on netbooks: fixed
ad highlighting in TOC: je to tam
- Pavel Macháň
- Member | 282
Show Popup on :hover action in main menu is so annoying for me :/
Last edited by EIFEL (2014-01-23 20:07)
- David Grudl
- Nette Core | 8227
EIFEL wrote:
Good solution too. But little bit problematic with very long menu – if you want to click on any bottom link, you have to scroll on top, activate menu and scroll to down
- Pavel Macháň
- Member | 282
David Grudl wrote:
EIFEL wrote:
Good solution too. But little bit problematic with very long menu – if you want to click on any bottom link, you have to scroll on top, activate menu and scroll to down
Hmm… and what Floating menu icon as Forms right panel ?
Last edited by EIFEL (2014-01-24 16:27)
- David Grudl
- Nette Core | 8227
vojtech.dobes wrote:
It is now impossible to click on the Documentation link itself.
This is intentional.
- Jan Tvrdík
- Nette guru | 2595
What about
#docmenu.opened ~ #main {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
?
- David Grudl
- Nette Core | 8227
After few days od testing:
Original concept of side bar:
- from some points of view probably best way
- but adds a “text noise” to the page
- it is inconsistent with rest of website, where sidebar is on right side
- it's hard to combine with TOC, but there are drafts: http://postimg.org/…e/m3h6oqppd/ and better http://tmp.ujovlado.sk/…-proposal-2/
Hidden sidebar https://www.dropbox.com/…jlwnu/01.png and https://www.dropbox.com/…4ye4d/02.png
- After testing I discovered that I am always clicking on Documentation instead of opening the bar
Popup menu (current solution)
- solves noise, consistence, TOC
- I am still not sure if I like it…
What do you think?