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

Open
zbycz opened this Issue Jan 11, 2016 · 23 comments

Projects

None yet

4 participants

@zbycz
Member
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
@mkyral
Member
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
Member
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
@zbycz
Member
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
@zbycz zbycz added a commit that referenced this issue Apr 12, 2016
@zbycz zbycz layer-switcher: moved to sidebar #36 adcf224
@zbycz zbycz added a commit that referenced this issue Apr 12, 2016
@zbycz zbycz layer-switcher: moved to sidebar #36 54beefd
@zbycz
Member
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
Member
mkyral commented Apr 12, 2016

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

@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
Member
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
Member
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
Member
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
vop-cz commented Feb 21, 2017
@mkyral
Member
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
Member
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
Member
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
vop-cz commented Feb 22, 2017
@mkyral
Member
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
Member
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
Member
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
Member
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
vop-cz commented Feb 23, 2017
@mkyral
Member
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
vop-cz commented Feb 23, 2017
@vop-cz
vop-cz commented Feb 23, 2017
@mkyral
Member
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment