Skip to content

/ osmcz

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bohatší přepínač vrstev #36

Closed
zbycz opened this issue Jan 11, 2016 · 33 comments
Closed

Bohatší přepínač vrstev #36

zbycz opened this issue Jan 11, 2016 · 33 comments
Assignees
@mkyral
Labels
diskuze osmcz-app

Comments

@zbycz
Copy link
Member

@zbycz zbycz commented Jan 11, 2016

Celý UI/UX návrh probíhá v google docu - tvořte co vás napadne a komentujte co je vytvořeno.

https://docs.google.com/document/d/1Z9Ni9v46Pp4YEDd7q2deKF5glnV-_A_QwH96UQ9CEIw/edit?usp=sharing

.

od @severak:

Nebylo by lepší použít v přepínání obecné názvy vrstev (automapa, turistická mapa...)? Bude to více přátelské k nezasvěceným...
Názvy mapových projektů by pak naopak měly zůstat dole v attribution.
Ještě jsem si uvědomil jednu věc - vrstva mapy, která je optimalizovaná pro venkov blbě vypadá ve městě a naopak. Měli bychom to zohlednit a nabídnout oba dva druhy...
@zbycz zbycz added the osmcz-app label Jan 11, 2016
This was referenced Jan 11, 2016
Closed
Open
Closed
@mkyral mkyral mentioned this issue Jan 12, 2016
Closed
@mkyral
Copy link
Member

@mkyral mkyral commented Jan 13, 2016

@severak Máš nějaký příklad mapy pro venkov a pro město? Ať vím, co si pod tím mám představit.
@severak
Copy link
Member

@severak severak commented Jan 13, 2016

@mkyral Například map1.eu vypadá velmi dobře na venkově, naopak ve městě je tak přeplněná nápisy, až je to nepřehledné.
This was referenced Jan 14, 2016
Open
Open
@zbycz
Copy link
Member Author

@zbycz zbycz commented Jan 14, 2016

Přidal jsem google doc, kde bychom mohli společně zauvažovat nad UI/UX návrhem přepínače vrstev. Prosím, tvořte co vás napadne a komentujte co je vytvořeno :-)

https://docs.google.com/document/d/1Z9Ni9v46Pp4YEDd7q2deKF5glnV-_A_QwH96UQ9CEIw/edit?usp=sharing
@zbycz zbycz added the diskuze label Jan 16, 2016
This was referenced Feb 5, 2016
Closed
Closed
@zbycz zbycz mentioned this issue Mar 15, 2016
Closed
zbycz added a commit that referenced this issue Apr 12, 2016
@zbycz
layer-switcher: add L.control.layers from leaflet #36
3d1c57b
zbycz added a commit that referenced this issue Apr 12, 2016
@zbycz
layer-switcher: moved to sidebar #36
adcf224
zbycz added a commit that referenced this issue Apr 12, 2016
@zbycz
layer-switcher: moved to sidebar #36
54beefd
@zbycz
Copy link
Member Author

@zbycz zbycz commented Apr 12, 2016

Leafletí přepínač jsem přehodil do našeho připraveného responzivního sidebaru. Díky @vop-cz že mě k tomu dokopal :-)

I na mobilu to už pěkně scrolluje:
screen shot 2016-04-12 at 11 25 34
@mkyral
Copy link
Member

@mkyral mkyral commented Apr 12, 2016

Pěkný, pěkný ;-)
@vop-cz
Copy link

@vop-cz vop-cz commented Apr 12, 2016

SUPER !!!

---------- Původní zpráva ----------
Od: Marián Kyral notifications@github.com
Komu: osmcz/osmcz osmcz@noreply.github.com
Datum: 12. 4. 2016 12:32:25
Předmět: Re: [osmcz/osmcz] Bohatší přepínač vrstev (#36)

"

Pěkný, pěkný ;-)

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
(#36 (comment))

"=
@mkyral
Copy link
Member

@mkyral mkyral commented May 3, 2016

@zbycz Daly by se v tom přepínači jednotlivé překryvné vrstvy seskupit? A skupiny pak třeba zobrazit v tabech?

Třeba "základ vrstvy" - turistické trasy, cyklo trasy, aktivní vrstva, fotky rozcestníků a pak "expertní vrstvy" - Chybné rozcestníky, LPIS, RUIAN vrstvy z poloha.net

vrstvy
@mkyral mkyral mentioned this issue Sep 14, 2016
Closed
@mkyral
Copy link
Member

@mkyral mkyral commented Feb 17, 2017 •
edited

Tak jsem se k tomu konečně dokopal a udělal ten přepínač trochu přehlednější.

obrazek

Vrstvy jsou rozděleny do skupin přičemž skupina může obsahovat jak základní tak i překryvné vrstvy.
Pořadí vrstev je zachováno dle toho jak byly vrstvy postupně přidávány do seznamu a ne dle toho, jak si je interně Leaflet vytvořil (leaflet_id).

TODO:

  • Zachovat pořadí i pro skupiny (dostat skupinu Informace (aktivní vrstva) na druhou/třetí pozici)
  • Zvýraznit skupiny, které obsahují zapnuté vrstvy - třeba změnou barvy hlavičky
  • Přidat tlačitka "Rozbalit vše" a "Sbalit vše" - přidáno, ale pořád to zlobí :-(
  • Ukládat rozbalené skupiny do cookies
  • Sbalit ten úvodní informační text do ikony
  • Přidat tlačítko "Nastavení" - konfigurovatelná šířka panelu, režimy: základní, pokročilé a mapper
  • Doladit styly
  • Pořádně to otestovat
  • Nasadit na produkci
  • Následně - Přidat uživateli možnost skrýt si, pro něj nezajímavé vrstvy
  • Následně - Přidat popisky jednotlivých skupin
  • Možná jednou - Přidat ke každé vrstvě tooltip s popisem vrstvy a třeba i odkazy
  • Možná jednou - Vyhledávání ve vrstvách

K otestování zde.

Přijímám tipy na další zajímavé vrstvy pro přidání ;-)
@mkyral mkyral self-assigned this Feb 20, 2017
@mkyral mkyral modified the milestone: 0.15 Feb 20, 2017
@mkyral
Copy link
Member

@mkyral mkyral commented Feb 21, 2017 •
edited

Další vrstvy pro přidání:
wikimedia
carto.com (poskytují také vektorová data)
mapshakers.com - viz poznámka od @zbycz ve wireframe: ( github ) - povoleno od Filipa - bude potřeba API key

Poznámka: OpenCycleMap a TransportMap nově vyžadují API key
@vop-cz
Copy link

@vop-cz vop-cz commented Feb 21, 2017

@mkyral
Copy link
Member

@mkyral mkyral commented Feb 21, 2017

Díky za obsáhlý komentář. Zítra snad najdu sílu to pořádně projít. Zatím jen drobnost:

rozroluj/sbal vse (ktere se mimochodem da sloucit do jednoho)

To platí jen v případě, že je sbaleno/rozbaleno vše. Ale pokud mám rozbaleno jen pár skupin, tak by, v případě jednoho tlačítka, nebylo jasné, jestli chceš rozbalit vše, nebo naopak vše sbalit ;-)

Ad přihlášený/nepřihlášený - tam to naráží na to, že přihlašování je implementováno jen na produkci, v tom redakčním systému. Na testu jej nemám a dokud tam nebude, tak se nedá vyvíjet nic, co je na to navázáno.
@mkyral
Copy link
Member

@mkyral mkyral commented Feb 22, 2017

Tak už jsem tu ;-)

Na úvod jen podotknu, že s tím velice bojuji a jsem rád, že to více méně funguje dle představ. Největší boj je s css a pak už třetí den ladím "Rozbal/Sbal vše" a pořád to nefunguje :-( K nějakému ladění pro mobil jsem se ještě nedostal. Pořád doufám, že to třeba @zbycz opraví a lépe nastyluje ;-)

Kdyz si totiz prochazim vsechny vrstvy a rozklikam si jednotlive kapitoly, zvetsi se vyska panelu i na desktopu nad unosnou miru (predevsim z hledisk prehlednosti).

Nemyslím si. Jak často budeš mít otevřeny všechny skupiny? To, co nepotřebuješ, prostě necháš sbalené.

To lze resit mj. jinym (uspornejsim) stylovanim.

Návrhy, obrázky a pull requesty vítány. Já s css a bootstrapem stále docela bojuji a neustále to dělá něco úplně jiného, než chci :-(

Stylovani nazvu kapitoly, ve ktere je obsazena vybrana vrstva, jako modry text, mi neprislo vubec intuitivni. To by musela byt kazda jednotliva vybrana vrstva taky modra - pak by se to rychle uzivateli myslenkove propojilo. Cimz nastinuji mozne reseni - spojit vybranou vrstvu a kapitolu spolecnym barevnym vajadrenim, ale asi bych uprednostnil background-color.

Jo. Nastavit jinou barvu pozadí byla moje první myšlenka, ale nepovedlo se mi ta tlačítka nastylovat, tak zatím řešeno jen změnou barvy textu. Možná to ještě zkusím, ale veškeré pokusy byly zatím neúspěšné.

Na (mem) mobilu (Quad HD rozlišení, tedy 2 560 x 1 440 pixelů) mi lista s vyberem vrstev zabira prilis velkou sirku a to bezduvodne - alespon z pohledu obsahu, tedy delek nazvu vrstev. Stacila by priblizne polovina...

Šířka panelu je fixní, nastavena na 250 pixelů. Teoreticky by šlo to na mobilu nastavit menší. Nebo udělat ten panel uživatelky přizpůsobivý a uživatelem zvolenou šířku si zapamatovat.

Mel jsem pri testovani pred 2 dny potize s tim, ze mi to pri prepinani mezi vrstvami vykreslilo v jeden moment vse co melo byt bile tak jako cerne a uz to neslo vratit, ale dnes uz jsem to nenasimuloval (test FF a Chrom).

Pořád to ladím a snad se to spíše zlepšuje než zhoršuje :-D

Soucasne bych zde rad pripomnel vec, kterou komunikujeme jiz dlouho se ZBY a to rozdeleni toho, co uzivatel vidi podle toho, zda je BFU (=neprihlaseny nebo prihlaseny, ale s nastavenim basic/advanced zobrazeni), nebo zda je mapper (=prihlaseny s nastavenim mapper-user nebo mapper-advanced).

Viz příspěvek výše. Dokud nebude to přihlášení dostupné v dev šabloně stránky, tak s tím nejde nic dělat. Už jsem na to koukal, ale v tom kódu se nevyznám a nevím, kde to hledat a co je potřeba překopírovat.

Nicméně by šlo udělat vedle nadpisu "Vrstvy" tlačítko "Nastavení", kde by se tyhle věci daly pořešit. @tkas třeba chtěl, aby měl uživatel možnost schovat si, pro něj, nezajímavé vrstvy. Ale na to by asi bylo ideální samostatné issue.

Vyresilo by se tim spousta veci, … nebo treba prave textove zahlavi prepinace vrstev, ktere mapper opravdu videt a cist pokazde nepotrebuje (usetri se HROMADA mista predevsim na mobilech).

Souhlas, ten text je tam po nějaké době zbytečný. Dal by se schovat pod nějakou ikonu, třeba "?" a zobrazí se až na požádání. To není složité - zapíšu si a možná to večer udělám.

Ja bych to prepinani podle potrebne sirky nabidky vrstev udelal nyni z nejakch praktickych duvodu (bez rozlisovani zalogovany nebo ne) klidne do zahlavi te listy s prepinacem vrstev podobne, jako jsou nyni tlacitka pro rozroluj/sbal vse (ktere se mimochodem da sloucit do jednoho). Naparovat to na zalogovaneho uzivatele (v podstate pujde jen o to, kolik techto tlacitek se mu zobrazi) lze nasledne, az si pohrajeme s praktickou podobou cele te listy.

Jo jo, to by šlo schovat pod ikonku nastavení.

Mimochodem: celý večer jsme se snažil dostat ta dvě tlačítka na přepínání vrstev na pravou stranu. A nepovedlo se mi to :-(

Mimochodem 2: Koukal jsem teď na ten wireframe od @zbycz a ač jsem jej už dlouho neviděl, tak jsem se docela trefil. Má tam dokonce ten tooltip a vyhledávání. Jen tlačítko nastavení tam nemá.
@mkyral
Copy link
Member

@mkyral mkyral commented Feb 22, 2017 •
edited

Jen pro představu, tohle už řeším třetí den a stále to nejsem schopen vyřešit :-(
Problém je v interakci s bootstrapem a jeho funkcí collapse/collapse in.

osmcz_ls_issue

Jen poznámka na večer: https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

Edit Tak zdá se, že se mi to konečně podařilo opravit.
@vop-cz
Copy link

@vop-cz vop-cz commented Feb 22, 2017

@mkyral
Copy link
Member

@mkyral mkyral commented Feb 22, 2017

Je to jedno. A úplně stejně tam můžou zůstat dvě tlačítka. Alespoň do doby, než tam bude málo místa a bude potřeba nějaké tlačítko vykopnout. Aktuálně to ale pro mně znamená nějakou práci navíc. Možná někdy, až bude moře času a budu mít chuť si s tím hrát…
@mkyral
Copy link
Member

@mkyral mkyral commented Feb 22, 2017

To by musela byt kazda jednotliva vybrana vrstva taky modra - pak by se to rychle uzivateli myslenkove propojilo.

Hotovo.

Na mobilu (FF i Chrome) se vyse uvedena modra barva ztraci v okamziku, kdy je tlacitko s danou kapitolou (ktera ma byt modra) oznacene

Opraveno.
@mkyral
Copy link
Member

@mkyral mkyral commented Feb 22, 2017 •
edited

Tak text je pryč:

obrazek

obrazek

@vop-cz Co myslíš? Chtělo by to ještě poladit ty styly, ale jinak už to vypadá docela dobře ;-)

Do toho nastavení by šel dát nějaký přepínač "Normální/kompaktní" styl.
@mkyral
Copy link
Member

@mkyral mkyral commented Feb 23, 2017

Ještě jsem to dneska kapku poladil a na mobilu zmenšil šířku přepínače vrstev. Z 250px na 180px. Už to vypadá použitelněji.

obrazek

obrazek

obrazek
@vop-cz
Copy link

@vop-cz vop-cz commented Feb 23, 2017

@mkyral
Copy link
Member

@mkyral mkyral commented Feb 23, 2017

Dík ;-)

Jo, je to fakt intuitivnejsi... esi to nakonec bude cerveny, modry nebo jiny je uz jedno, dulezity je, ze to funguje a az si to vezme do parady nejaky graficky hracicka, treba to udela nejak jinak graficky, ale funkce je zajistena...

Snad se někdo najde. Tohle je aktuálně moje maximum. Ale sežeň schopného grafika co si s tím bude hrát zadarmo :-(
@vop-cz
Copy link

@vop-cz vop-cz commented Feb 23, 2017

@vop-cz
Copy link

@vop-cz vop-cz commented Feb 23, 2017

@mkyral
Copy link
Member

@mkyral mkyral commented Feb 24, 2017

Kazdopadne - jak jsem jiz psal - bych byl pro, aby ten prepinac vrstev mel tri zakladni rozsahy - nazveme to treba basic, advanced, professional. V navaznosti na zalogovani (via ucet na OSM, tak jak je to nyni jiz aplikovano), by nezalogovany byl automaticky basic a mohl se prepnout do advanced. Zalogovany by mohl jit az do professional. V teto urovni by mel k dispozici i analyticke vrstvy (kterych se da pridat neskutecna hormada, byt v podstate muze jit o duplikaci jiz jinych hotovych a specializovanych webu a vrstev)

Tak neměl by to být problém. Máš návrh jak ty vrstvy rozdělit? Mohl bych třeba začít tím, že ta tlačítka podbarvím podle toho, k jaké skupině patří. Basic - bílé, Advanced - modré, Expert - červené. Nebo nějak podobně. Dodělat pak nějaký přepínač do nastavení pak snad už půjde jednoduše. Jen nevím, kdy se k tomu dostanu. Na víkend mám jiné plány.
@mkyral
Copy link
Member

@mkyral mkyral commented Feb 24, 2017

Ad zkracování textu. Něco jsem zkusil, v css je na to podpora, ale v aktuální struktuře <label><input><span>Popis</span> to nefunguje. Muselo by se to celé překopat a pak zase může přestat fungovat něco jiného :-(
@vop-cz
Copy link

@vop-cz vop-cz commented Feb 25, 2017

@mkyral
Copy link
Member

@mkyral mkyral commented Feb 25, 2017

Dík,
tohle bude kapku složitější, to bych si nechal až na další kolo
@zbycz zbycz mentioned this issue Feb 25, 2017
Closed
@zbycz
Copy link
Member Author

@zbycz zbycz commented Feb 27, 2017 •
edited

Líbí,líbí.

Jinak moc nesouhlasím s rozdělením na základní, pokročilé a expertní. Podle mě by tam měl být jen jeden přepínač. Základní vs. pokročilé(=expert). Moc voleb je z hlediska UX špatně.. uživatel stejně neví co je zač, takže zbytečně musí prozkoumávat všechno.
@zbycz
Copy link
Member Author

@zbycz zbycz commented Feb 27, 2017

A asi bych to navrhoval pomocí checkboxu úplně dole ve switecheru (zároveň to musí být i stejná cesta jak se dostat zpět). Myslím si že by to nemělo být pomocí tabů jak byl screenshot výše, protože to není věc která se používá často. Typicky ji každý použije jen jednou.
@mkyral
Copy link
Member

@mkyral mkyral commented Feb 27, 2017

No chtěl jsem to dát do toho nastavení, jako "radio" tlačítko a teoreticky by pod tím mohl být checkbox "Zobrazit speciální vrstvy"

takže třeba nějak takhle:

Zobrazit vrstvy
[ Základní | Pokročilé | Speciální ]

nebo :

Zobrazit vrstvy
[ Základní | Pokročilé ]
[ ] Zobrazit speciální vrstvy

Ale možná bude to rozdělení na dvě skupiny nakonec jednodušší.

Ono by si chlapci přáli jednak mít možnost skrýt vrstvy, které je nezajímají, nebo naopak možnost uložit si aktuálně zobrazené vrstvy pod nějakým názvem a kdykoli později si je okamžitě vyvolat (rychlá volba).
@vop-cz
Copy link

@vop-cz vop-cz commented Feb 28, 2017

@zbycz
Copy link
Member Author

@zbycz zbycz commented Mar 2, 2017

Podle mě to "všechno" je v pořádku, jen to chce pěkně rozdělit do sekcí. Tak jak to Marián udělal...

Existuje jedno užitečné UX pravidlo, že uživatel by si neměl vybírat z více než 7 voleb stejné úrovně. V tomto případě tedy max 7 sekcí/kategorií.
Jinak celkově to také souzní s tím mým původním návrhem: LINK
@mkyral
Copy link
Member

@mkyral mkyral commented Mar 5, 2017

Tak jsem si zase trochu hrál:

Základní
obrazek

Skupiny
obrazek

Ještě uvažuji, zda v mobilní verzi, v zájmu úspory místa, taky vysouvat ten text, nebo jej nechat schovaný.

Ale to už je kosmetická změna. Ještě bych chtěl přidat vrstvu https://www.mediawiki.org/wiki/Maps , vyřešit API klíč pro openCycleMap a TransportMap, schovat tlačítko nastavení (zatím k ničemu není) a šup s tím na produkci :-D

@zbycz Jestli chceš poladit grafiku, tak do toho.
@tkas
Copy link
Contributor

@tkas tkas commented Apr 9, 2019

Prepinac vrstev je jiz dlouho nasazen, zaviram.
@tkas tkas closed this Apr 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mkyral mkyral

Labels
diskuze osmcz-app
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
@mkyral @zbycz @severak @tkas @vop-cz