webcomponents / webcomponents/webcomponents.org

Site requires much more scrolling when in element packages

Aperta
#846 6 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Old Site
Lingua principale
TypeScript
Stelle
385
Fork
80
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

I came to this site due to redirects from the Polymer Elements Catalog, and find it a lot less enjoyable to use. After thinking about it a while, it's due mostly to the amount of wasted space in the site. For example, compare these screenshots of the [element catalog](http://i.imgur.com/FLn6eIE.png) and [webcomponents.org](http://i.imgur.com/EdCN1bY.png). For the same package, the Polymer site shows 15 elements, while the webcomponents.org site shows 4, and you have to scroll to see the rest.

This is due mostly to a bunch of wasted space above, having to do with the collections that are inside this collection. Meanwhile, what collection this is in is put in the sidebar to the right - which I think is a very confusing design. Breadcrumbs might be better, since it seems like these collections can be nested arbitrarily. Or if it's a many to many relationship of collections to children and parents, then at least put both concepts of *in collection* and *contains these collections* in the sidebar so they're logically related and give more space to the content.

There's some smaller points too, like each element's row in the screenshot has a logo on it, but does it need to? These are all components of the same collection which are all polymer elements. I see the same logo 8 times in the one page already. At least get rid of the giant one on the top right, and put it inline with the collection metadata.

Here's a really poorly thrown together [mock](http://i.imgur.com/IvcvcW6.png) of a quick way to make better space of the screen.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Esamina la pagina della raccolta di element-package e confrontane il layout con gli screenshot e il mock collegati del catalogo Polymer. Concentrati sullo spazio utilizzato dalle raccolte nidificate, dai metadati della barra laterale, dai breadcrumbs e dai loghi ripetuti; il lavoro è completato quando la pagina della raccolta mostra più elementi con una relazione più chiara tra le raccolte padre e figlie.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
typescript
Ambito
design, frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.