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
Bohatší přepínač vrstev #36
Comments
@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. |
@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é. |
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 |
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 :-) |
Pěkný, pěkný ;-) |
SUPER !!! ---------- Původní zpráva ---------- " Pěkný, pěkný ;-) — "= |
@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 |
Tak jsem se k tomu konečně dokopal a udělal ten přepínač trochu přehlednější. Vrstvy jsou rozděleny do skupin přičemž skupina může obsahovat jak základní tak i překryvné vrstvy. TODO:
K otestování zde. Přijímám tipy na další zajímavé vrstvy pro přidání ;-) |
Další vrstvy pro přidání: Poznámka: OpenCycleMap a TransportMap nově vyžadují API key |
zkousel jsem na desktopu i na mobilu
v obou pripadech je nutno pracovat na prehlednosti vrstev, kdyz jich je
takovy pocet (a teoreticky bude i vyssi). 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). To lze resit
mj. jinym (uspornejsim) stylovanim.
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.
Na mobilu (FF i Chrome) se vyse uvedena modra barva ztraci v okamziku, kdy
je tlacitko s danou kapitolou (ktera ma byt modra) oznacene (IMHO obdoba
onMouseOver na desktopu, kde se toto presne projevuje take, ale uzivatelsky
to az tolik nevadi - tedy jen vec stylovani)
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...
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).
Samostatna debata je o usporadani do kapitol, ale tu nyni nevedeme.
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). Vyresilo
by se tim spousta veci, jako napr. zobrazovani te (pro trvaleho uzivatele)
otravne uvitaci vrstvy, nebo treba prave textove zahlavi prepinace vrstev,
ktere mapper opravdu videt a cist pokazde nepotrebuje (usetri se HROMADA
mista predevsim na mobilech). 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.
vop
…---------- Původní zpráva ----------
Od: Marián Kyral <notifications@github.com>
Komu: osmcz/osmcz <osmcz@noreply.github.com>
Datum: 21. 2. 2017 7:32:58
Předmět: Re: [osmcz/osmcz] Bohatší přepínač vrstev (#36)
"
Další vrstvy pro přidání:
wikimedia(https://www.mediawiki.org/wiki/Maps)
carto.com(https://carto.com/location-data-services/basemaps/) (poskytují
také vektorová data)
Poznámka: OpenCycleMap a TransportMap nově vyžadují API key
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
(#36 (comment)), or mute
the thread
(https://github.com/notifications/unsubscribe-auth/AMKXwJr-W71dyQPorDOxdD5HqZpUTeCSks5reoUUgaJpZM4HCVL4)
.
"
|
Díky za obsáhlý komentář. Zítra snad najdu sílu to pořádně projít. Zatím jen drobnost:
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. |
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 ;-)
Nemyslím si. Jak často budeš mít otevřeny všechny skupiny? To, co nepotřebuješ, prostě necháš sbalené.
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 :-(
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é.
Šíř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.
Pořád to ladím a snad se to spíše zlepšuje než zhoršuje :-D
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.
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.
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á. |
Jen pro představu, tohle už řeším třetí den a stále to nejsem schopen vyřešit :-( 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. |
...a není to v praxi jedno? Pokud dojdeme k názoru, že to opravdu bude někdo
chtít (a mít důvod) používat, pak opravdu stačí jedno tlačítko, protože v
jakémkoliv stavu otevření jednotlivých skupin by uživateli stačilo max 2x
zmáčknout na dané tlačítko, aby dosáhnul svého kýženého efektu (otevření
všeho nebo uzavření všeho).
…---------- Původní zpráva ----------
Od: Marián Kyral <notifications@github.com>
Komu: osmcz/osmcz <osmcz@noreply.github.com>
Datum: 22. 2. 2017 0:05:41
Předmět: Re: [osmcz/osmcz] Bohatší přepínač vrstev (#36)
"
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.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
(#36 (comment)), or mute
the thread
(https://github.com/notifications/unsubscribe-auth/AMKXwFZlYz2-FwhrI5FsKzGUN24DKO8eks5re23BgaJpZM4HCVL4)
.
"
|
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… |
Hotovo.
Opraveno. |
Tak text je pryč: @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. |
""
To by musela byt kazda jednotliva vybrana vrstva taky modra - pak by se to
rychle uzivateli myslenkove propojilo.
"
Hotovo.
"
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...
"
"
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.
"
overeno, potvrzuji mobilni Chrom i FF toto maji uz vyresene
vop
|
Dík ;-)
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 :-( |
No obecne vzato do nastaveni by melo prijit napr. vlastni nastaveni podoby
prepinace vrstev - tedy vypis vsech dostupnych a moznost si je zvolit a
pripadne si je i usporadat (poradi tech kapitol) nebo nejake jine
prizusobeni vyzoru (vetsi/mensi pismo), enable/disable nejake soucasti nebo
tlacitek nastroju (nekdo treba nechce mit v mape pro nadbytecnost tlacitko
"Načíst lokální data" ci paranoicky tlacitko "Zobrazit moji aktuální
polohu". Nastavit by bylo mozne i jazyk rozhrani (jakkoliv se mi to zda
ulitnute, ale treba SK by se mohlo hodit). No a v budoucnu stejne tak
enable/disable funkci, ktere mohou pribyvat, ale nejsou to primarni mapove
fce implementovane nyni (upload fotek do Photo DB, otaceni mapy podle
severu, customizace podoby lokalizacniho bou (vlastni sipka apod.),
vykresleni zaznamu trasy apod.
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)
vop
…---------- Původní zpráva ----------
Od: Marián Kyral <notifications@github.com>
Komu: osmcz/osmcz <osmcz@noreply.github.com>
Datum: 22. 2. 2017 21:24:40
Předmět: Re: [osmcz/osmcz] Bohatší přepínač vrstev (#36)
"
Tak text je pryč:
obrazek
(https://cloud.githubusercontent.com/assets/155542/23230158/28f484b6-f943-11e6-9fc7-49d7235d8582.png)
obrazek
(https://cloud.githubusercontent.com/assets/155542/23230211/668eea78-f943-11e6-9e5b-52ebdf4b193e.png)
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.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
(#36 (comment)), or mute
the thread
(https://github.com/notifications/unsubscribe-auth/AMKXwA37mYFxgcEPt_rgoU1NDMQQAwsKks5rfJmEgaJpZM4HCVL4)
.
"
|
super, rozhodne duper
jednu muchu to ale ma, narazime na delsi nazvy vestec, ktere se pak zalamuji
do dvou radku a nevypada to pekne. Toto bude potreba poladit. Na desktopu
bych to resil zkracenim nazvu a uvedenim puvodniho nazvu i s nejakym
pripadnym delsim popiskem do onMouseOver bubliny... Ale na mobilu na to
musime uplne jinak. Sla by nejaka verze s crowlem? Pretekajici cast nazvu
vrstvy by byla proste uriznuta a teprve po nakliknuti te vrstvy by ten nazev
pomalu "krauloval" doleva a byl by tedy jednorazove k precteni... nevim, zda
se mi podarilo to vysvetlit... Jiny napad na prvni dobrou nemam...
vop
…---------- Původní zpráva ----------
Od: Marián Kyral <notifications@github.com>
Komu: osmcz/osmcz <osmcz@noreply.github.com>
Datum: 23. 2. 2017 21:31:47
Předmět: Re: [osmcz/osmcz] Bohatší přepínač vrstev (#36)
"
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
(https://cloud.githubusercontent.com/assets/155542/23277467/3837cfe8-fa0e-11e6-8f14-319e4ae4938d.png)
obrazek
(https://cloud.githubusercontent.com/assets/155542/23277687/1721522e-fa0f-11e6-9e53-09ed3b75e09b.png)
obrazek
(https://cloud.githubusercontent.com/assets/155542/23277611/c1aac118-fa0e-11e6-9f58-022ea4ee9da3.png)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
(#36 (comment)), or mute
the thread
(https://github.com/notifications/unsubscribe-auth/AMKXwMmtlWa5CBhBIPct7sFaccO-4vyBks5rfeyugaJpZM4HCVL4)
.
"
|
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. |
Ad zkracování textu. Něco jsem zkusil, v css je na to podpora, ale v aktuální struktuře |
""
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.
"
V BASIC bych viděl zobrazený ten nápovědný text nad vrstvami (který by měl
navádět na to, že lze vidět mnohem víc...) a zobrazovat by se mohlo (bez
rozdělení do kapitol):
Mapnik
Turistická
OpenCycle
Dopravní
Ortofoto
overlay - Aktivní vrstva
overlay - Turistické trasy ČR
overlay - Ckylistické trasy EU
overlay - Zimní sporty
V ADVANCED by už ta hláška nahoře byla skryta a byly by kapitoly tak jak je
máš nyní, jen bez kapitol Speciální a RÚIAN
V Professional by se zobrazilo implicitně všechno dostupné, ale šlo by to
jednotlivě disablovat v Nastavení...
"
"
|
Dík, |
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. |
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. |
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:
nebo :
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). |
Od: Marián Kyral <notifications@github.com>
"
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).
"
Ano, já jsem došel po delším uvažování také k tomu, že těch voleb nemá být
mnoho, ale u dvou jsem se zase potýkal s tím, že taková varianta znamená 1)
pár vrstev pro BFU, aby se nevyděsil, ale přesto namotivoval; 2) všechno;
No a to "všechno" je v praxi pro leckoho fakt silný kafe.
"
"
|
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í. |
Tak jsem si zase trochu hrál: 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. |
Prepinac vrstev je jiz dlouho nasazen, zaviram. |
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:
The text was updated successfully, but these errors were encountered: