1. s-cape.cz Avatar s-cape.cz
  2. scape_projects
  3. smilebox
  4. Issues

Vyladění mobilní verze galerie / lightboxu

Issue #44 resolved
David Čeřovský created an issue
  • potřebujeme funkční swipe na mobilu/tabletu
  • lépe viditelné ovládací prvky
  • ovládací prvky nemizí a zaclánějí při prohlížení fotek (tedy režim plného prohlížení na celou obrazovku, kde jen swipem přecházím mezi fotkama)
  • sdílecí tlačítko je šílené velké a ještě se roztahuje přes ceou fotku. Něco menšího a do leva dolů (vpravo bývá logo, nahoře zase hlavy lidí)
  • zamezit možnosti scrollování
  • pozor na prohlížení na šířku

Comments (72)

  3. Michal Májský

    Ještě jeden bug Davida trápil: - Pokud rychle za sebou klikáš na šipku (další fotka), tak se lightbox zavře.

  4. Vašek Dohnal

    Omlouvám se za zpoždění při řešení tohoto tasku. Pokusím se shrnout požadavky na galerii, a pak navrhnu postup.

    Požadavky:

    1. Zrušíme stránkování (1, 2, ...), fotky se budou načítat postupně jakmile uživatel dojede na konec stránky – stejné chování jako v mobilní aplikaci.
    2. Galerie se bude dobře zobrazovat na mobilu, tj. včetně překlápění obrazovky, lepšího zobrazení nabídky na sdílení, stažení atd.
    3. Na mobilu se budou fotky měnit swipem, na PC klasicky myší nebo klávesnicí.
    4. Každá fotka bude mít svoji URL, která bude fungovat stejně jako doposud.

    Napadá vás @memostail a @snakeyyy ještě něco?

    Postup:

    Já v tuto chvíli nedokážu přesně odhadnou, kolik práce na tom bude. Hrubým odhadem to vidím na na cca 1-2 mandaye, ale střílím od boku.

    Můj návrh: Bude nejlepší, když se galerie vyvine na samostatné stránce mimo Smilebox a jakmile se vše pořádně odladí a otestuje, integruje se nová galerie do Smileboxu. Navrhuji, že bych založil testovací stránku, udělal kostru galerie, prozkoumal možnosti již existujících knihoven (na infinite scrolling, swipe, lightbox atd.). Toto by mi zabralo 4 hodiny a poté bych byl schopný přesně odhadnout, kolik času by trvalo vše dokončit. Co na to říkáte?

  5. Michal Májský

    Ještě pár požadavků (aby se na ně nezapomnělo)

    • podpora retiny (tzn. umožnit rozhodnout jaký obrázek se vloží a zobrazit jej v poloviční velikosti)
    • bavili jsme se o tom, že i ten stav kde se nacházím na výpisu fotografií by mohl mít svojí URL (nemuselo by být tak složité implementovat)
    • "Fake lightbox" pro Facebook sdílení
    • Počítat v budoucnu s přepínačem, který umožní přepínat mezi souvisejícíma fotkama ("trojice", gify, ..)
  6. David Čeřovský reporter

    Ještě doplním: - možnost vypnout lightbox kamkoliv do šedé části mimo fotku (ne jen klikat na malý křížek nahoře) - momentálně je taky dost divné, když si prohlížím galerie, pak lightbox zavřu a dávám "prohlížečové" zpět, tak "to nic nedělá", jen to mění link. Nejlepší by asi bylo, pokud by to po navrácení tlačítkem vyloženě ven z galerie do výčtu galerií. Ale protože chceme mít také ty linky pro každou fotku (kdybych chtěl sdílet kopírováním odkazu), jde to nějak lépe tohle vyřešit? Pak by to minimálně mělo jet po těch fotkách opravdu zpátky, ale ne že to vlastně teď nic nedělá a vypadá, že to je rozbité - na mobilní/tablet verzi schovávat ovládací prvky při kliknutí a mít jen celou fotku přes displej a swipem přecházet na další/předchozí (jako jsem ukazovla u staré verze webu na mrsmilebox.com)

  7. Vašek Dohnal

    @memostail Zavřít okno kliknutím mimo není problém. Ale mám pocit, že jsme zavrhli sdílení kopírováním odkazu z adresní řádky. Neříkám, že to nejde, ale je tam potíž s tím, že by přechod na další fotku musel znamenat znovunačtení stránky a prohlížení fotek by pak nebylo tak svižné. Dá se to částečně eliminovat v moderních prohlížečích, které umožňují měnit adresu bez načtení stránky, ale není to bohužel 100% řešení.

  8. David Čeřovský reporter

    To ne, samostatné stránky to nechceme, ale klidně to může fungovat jenom na moderních prohlížečích. Na starouše prdíme :)

  9. Vašek Dohnal

    Ok, to zní rozumně. Souhlasíš tedy s těmi 4 hodinami, po kterých budu přesně vědět, co a jak?

  12. Vašek Dohnal

    Na konci tohoto víkendu dokončím první fázi a od dám vědět, jak bude náročná další fáze. Pokusím se mít komplet galerii k testování další víkend.

  13. Vašek Dohnal

    Rozhodl jsem se pro následující postup. Galerii budu vyvíjet na samostatné stránce mimo Smilebox. Už nyní si můžete prohlédnout první střípky zde.

    https://dl.dropboxusercontent.com/u/80507/smilebox_gallery/src/index.html

    jedná se o statickou stránku, do které jsem jen napevno zkopíroval Smilebox design. Zatím mám připravenou ukázku infinite scrollingu a hodně hrubě lightbox. Hlavně jsem se zaměřil na průzkum technologií. Rozdělím galerii na dvě části, které budu vyvíjet samostatně. První část je výpis miniatur (tj. detail galerie) – zde nebudu kromě zrušení stránkování dělat vůbec žádné změny v designu nebo ovládání, prostě jen 1:1 vezmu to, co už je hotové – je to tak OK? Myslím, že ta stránka s detailem galerie je celkem povedená, ale pokud byste chtěli dělat nějaké větší úpravy v grafice/ovládání, teď je ideální chvíle se do toho pustit.

    Druhou částí je lightbox, který budu naopak dělat celý znovu. K němu ještě zašlu návrhy, jak by to mohlo vypadat (půjde hlavně o mobil).

    Z dalšího pátrání mám tyto závěry:

    • podpora mobilů (swipe na fotky) OK
    • každá fotka vlastní URL OK
    • sdílení fotek odkazem z adresního řádku OK, zatím to i vypadá, že bychom mohli zrušit „fake“ lightbox pro Facebook
    • zobrazit pozici fotky, na které jsem zavřel lightbox OK
    • tlačítko zpět: určitě jde při tlačítku zpět zobrazit předchozí fotku, nejsem si zatím jistý, jestli půjde na tlačítko zpět ten lightbox zavřít – ještě hlavně nemám rozmyšlené, jak tahle navigace bude fungovat na mobilu (tam už by zase tlačítko zpět, které zavře lightbox dávalo velký smysl)

    Spočítal jsem, že vše mi zabere 22 hodin (včetně těch prvotních 4 hodin).

  14. David Čeřovský reporter

    Ahoj! Já myslím, že za mě všechno ok, budu rád, když se tomu budeš věnovat jak jsi psal. Sorry za zdržení v odpovědi

  15. David Čeřovský reporter

    Něco nového ohledně toho lightboxu prosím? Rádi bysme něco nového zprovoznili na webu a tohle by bylo super :)

  16. Vašek Dohnal

    Mám hotovou část pro klasické PC a pracuji na mobilní verzi. Ke konci týdne pošlu větší update, abyste si to mohli také prohlédnout.

  17. Vašek Dohnal

    Posílám aktualizaci galerie, k prohlédnutí zde: https://dl.dropboxusercontent.com/u/80507/smilebox_gallery/src/index.html.

    Co funguje a může se testovat:

    • Postupné načítání
    • Ovládání swipem, klávesnicí, myší
    • Zavření lightboxu ESCapem nebo kliknutím mimo fotku
    • Odscrollování galerie k fotce po zavření lightboxu
    • Tlačítko zpět/vpřed
    • Reakce na otočení telefonu
    • Podpora retina fotek

    Co funguje, ale bude dostupné až na reálném Smileboxu a nikoliv na současné testovací stránce

    • Sdílení fotky zkopírováním URL

    Co ještě není:

    • Nastylované ovládací prvky
    • Swipe efekt při přepínání fotek

    Co bych nyní rád vyřešil je, jak by mělo graficky vypadat ovládání galerie. Jsou v zásadě dvě možnosti:

    1) Grafiku pro desktop verzi udělám stejnou, jaká je teď. Jen na mobilní verzi zruším tu nabídku přes celou fotku a schovám ji do rohu za „hamburger menu“. To by mohlo vypadat např. nějak takto takto:

    Image 30.png

    Image 31.png

    Anebo klidně stejně jako v hlavním menu:

    Image 37.png

    2) Druhou variantou je ovládání lightboxu přepracovat. Když jsem zkoumal, jak mají své galerie udělané velcí hráči (FB, Google, Instagram atd.), nejlépe to mají podle mě udělané na Google Photos (alespoň z pohledu potřeb Smileboxu).

    Ve výchozím stavu je vidět jen a pouze fotka:

    Image 32.png

    V případě Smileboxu bych ji nezobrazoval takto na fullscreen, ale nechal bych okolo ní poloprůhledný rámeček, stejně jako teď. Pokud uživatel hýbne myší, nebo tapne prstem na obrazovku, zobrazí se jednoduché menu:

    Image 34.png

    Image 35.png

    U nás by podle mě stačilo zobrazit jen tři ikonky: STÁHNOUT a SDÍLET a ZAVŘÍT. Líbí se mi na tom hlavně, že tahle ikonková navigace funguje skvěle i na mobilu (resp. malé velikosti okna):

    Image 36.png

    Tlačítko SDÍLET bych dále neomezoval jen na Facebook nebo Twitter. Existuje např. služba AddToAny https://www.addtoany.com/, která umí najednou zobrazit tlačítka pro mnoho dalších sítí (vše je konfigurovatelné), takže po kliknutí na SDÍLET by se mohlo uživateli zobrazit např.:

    Image 38.png

    Výhodou je, že to umí pro většinu z podporovaných služeb udělat jejich dialog a např. si pyšní tím, že na mobilu umí spustit nativní aplikaci: https://www.addtoany.com/blog/share-to-mobile-apps-from-mobile-web/.

    Image 40.png

  18. Vašek Dohnal

    Mám nové poznatky k výše uvedenému. Stále řeším, že si nevím rady, jak udělat swipe efekt pro mobilní verzi. Při pátrání jsem narazil na super lightbox, který má většinu z toho, co potřebujeme, vyřešené. Mrkněte se, prosím, na http://photoswipe.com/ a klikněte třeba na medvěda. Pro úplnost posílám, jak vypadá tento lightbox na mobilu.

    Ve výchozím stavu není je zobrazená jenom fotka:

    Image 43.png

    Při tapnutí se objeví ovládací prvky:

    Image 44.png

    Swipe efekt vypadá dobře:

    Image 45.png

    A toto jsou funkce navíc, s kterými jsme ani nepočítali:

    FULLSCREEN

    Image 46.png

    Menu:

    Image 47.png

    Ty ovládací prvky a obecně chování je v podstatě to samé, co je na Google Photos – popisoval jsem v předchozím příspěvku. Kromě dalšího to umí na mobilu i gesta: přiblížení obrázku dvěma prsty, zavření galerie „odsunutím do dáli“ atd. Co jsem si s tím zatím hrál, dá se spoustu věcí upravit – od designu po logiku. Co na to říkáte? Mně se ten lightbox moc líbí – už jenom proto, že ho mají dlouho odladěný pro různé prohlížeče, mobily, tablety atd.

  19. Michal Májský

    Za mě to vypadá na dobrý řešení. API ma dobrý, takže napojit to na ostatní funkcionalitu co potřebujem by neměl být problém.

  20. Vašek Dohnal

    @snakeyyy Taky mi přijde, že by to mělo být OK. Vlastně jediné, co mi od toho lightboxu potřebujeme zvenčí, je, aby nám řekl, když se zavře a já mohl uživatele odscrollovat na danou pozici. Má to jednu zajímavou vlastnost, že u každé fotky potřebuje dopředu vědět její rozměry, ale to pro nás není problém? Jediný zádrhel, který vidím, je s URL detailu fotky pro sdílení. Oni to řeší klasicky přes hash #, já to mám vyřešené přes Angulaří URLs – tak, jak jsem ti to popisoval, to funguje to dobře. Napadlo mě, že bych jednoduše poslouchal na změnu fotky a pomocí HistoryAPI: replaceState bych ukládal parametr do URL tedy detail fotky by vypadal: https://smilebox.cz/galerie/fooo/?photoID={Number}#&gid=xx&pid=xx.

  21. Michal Májský

    Vědět rozměry fotky není problém. No nejlepší by bylo tu jejich podporu URL vypnout a dosadit tam vlastní víceméně tak jak říkáš. Ale takhle ji přetížit by snad taky mělo jít.

  22. David Čeřovský reporter

    Prohlížel jsem si akorát dneska intenzivněji to tvoje řešení Vašku a líbilo se mi to, začánalo to vypadat moc pěkně. Ale tenhle lightbox je teda už dotaženej, opravdu je to už spousty věcí hezky vyřešeno, hezky plynule to funguje, což se v prohlížeči v těch lightboxech moc nestává. Ty sdílecí prvky mi přijdou taky příjemné a pokud vám to sedí i po technické stránce, tak jsem určitě pro. Google + galerie sám považuju za nejlepší galerii, sám to používám pro svoje fotky na webu a dlouhodobě mi to vyhovuje. Takže je sympatické, že jsi došel k podobnému závěru :)

    Tak jsme domluvení? :)

  23. Vašek Dohnal

    Na stejné adrese je k vidění galerie s novým ligtboxem (ten jsem oproti originálu trochu upravil, aby více zapadal do designu Smileboxu). Ještě budu muset upravit Smilebox, proto jsou teď v této testovací verzi deformované obrázky na výšku a sdílení pomocí URL bude stejně jako v předchozí verzi až na Smileboxu. Další krok, pokud bude vše OK, je integrace se Smileboxem. To už jsem probral s Michalem a neměl by tam být žádný zádrhel, takže počítám, že ke konci víkendu by to mohlo běžet na testovací verzi.

  24. David Čeřovský reporter

    Funguje to pěkně, je to rychlé a ovládání je takové decentní. Co jsem si všiml zatím: 1. To sdílecí tlačítko je pěkné, ale nejraději bych dal to vytištění a stažení výrazněji. Klidně fakt jako nějaké tlačítko s tiskárnou a download tlačítkem. Na desktopu by to mohlo být s popiskem a na mobilu by stačilo jen ta tlačítka 2. chová si to divně při zavírání, vžýdykcy tam vidím jak se nějak přesypává celá ta stránka, povedlo se mi to chytnout screenshotem ![Snímek obrazovky 2016-04-08 v 14.25.29.png] (https://bitbucket.org/repo/4nA5qR/images/2001384686-Sn%C3%ADmek%20obrazovky%202016-04-08%20v%C2%A014.25.29.png) 3. Zachováme i popisek u fotky?

    Dík!

  25. Vašek Dohnal

    Díky za feedback. Něco vymyslím. Jen k té 3.: Tenhle popisek, co je pod fotkou?

    Image 5.png

    to není problém, ale otázka je, abyste se neupopiskovali – nebo byste dávali popisek jen k nějakým fotkám? A nebo by to byl popisek galerie? Ale tam se mi zase nelíbí, že by byl u všech fotek stejný. Teď je v adminu toto pole u fotek:

    Image 6.png

    tak můžu udělat, že pokud bude vyplněné, zobrazí se i v lightboxu.

  26. Vašek Dohnal
    1. Upravil jsem zavírání galerie, teď zůstávají skryté pod ligtboxem náhledy, takže by již nemělo nic přeskakovat.
    2. Přidal jsem ikonky, šlo by to tak?

    Image 8.png

  27. David Čeřovský reporter

    To by šlo! No vypadá to pěkně, u mě na iphonu to jede fakt svižně i ten swipe a všechno přetáčení na šířku na portrét jede dobře. Jediné co mi přijde, že jsou ty ikonky vůči všemu na webu hodně malé a tedy se to hůř trefuje prstem na telefonu. Nešlo by použít tu sadu ikonek, co máme na webu? Nebo můžeme ji přemalovat do nějakého formátu, který je použitý v tomhle lightboxu?

  28. Vašek Dohnal

    Ty ikonky jsou tyhle?

    Image 134.png

    to by použít šlo, jen budu potřebovat dokreslit ikonku na maximalizaci obrazovky a nejsem si jistý, jestli se tam bude hodit zavírací ikonka s tím kolečkem:

    Image 14.png

    Jinak ale mimochodem ty současné ikonky, co tam jsou, jdou bez problémů zvětšit. Takže pokud vám jde jenom o velikost, můžu zvětšit ty současné, ale jestli chcete design těch původních, tak také není problém.

  29. David Čeřovský reporter

    Ta velikost by určitě pomohla, ale spíš mi šlo o konzistenci těch tlačítek na webu, protože pak jsou tam v galerie jiné na sdílet a vytisknout a to už vypadá špatně

  30. Vašek Dohnal

    Přepracoval jsem tu lištu, nyní vypadá takto:

    Image 10 smbx.png

    Šlo by to? Tlačítko fullscreen jsem prozatím schoval, protože žádné teď nemáme.

  31. David Čeřovský reporter

    chtělo by to trochu posrovnat, vypadá to, že jsou nějak od sebe každý jinak vzdáleně a nejsou v jedné linii. Klidně je udělej o něco menší a na ten telefon vypadá že je hlavně větší mezera mezi sdílecim a stahovacim tlačítkem

  32. Vašek Dohnal

    Image 13.png

    Tak doufám, že jsem to vylepšil. Bohužel ty ikonky jsou trochu nešťastné – v současném řešení jsou napevno zadrátované a já jim nedokážu měnit velikost, navíc má ještě k tomu každá jiné rozměry. Tzn. pokud byste chtěli jinak velké ikonky, úplně nejlepší by bylo je překreslit do SVG (vektoru) a to už se pak s nimi dá dělat ledaccos – já si myslím, že ty současné ikonky byly dělané k zarovnání do sloupce (výšku mají totiž stejnou).

  33. David Čeřovský reporter

    Ikonky Míša překreslí, to bude rychlovka snad. Co bych ale určitě ještě naladil je písmo, aby bylo stejné jako ty čísla fotek a jeho velikost, vypadá to moc malinké k těm ikonkám. Také to stále ještě ty fotky na výšku roztahuje, jinak už by to bylo myslím připravené na spuštění ne? :)

  34. Vašek Dohnal

    Ok díky. Písmo upravím. To roztahování máš na mysli třeba u téhle fotky?:

    Image 16.png

    To je úmyslně, mám tam nahraná jen testovací data, u kterých jsem nechtěl vyplňovat rozlišení. Po nasazení se tak dít nebude. Ad nasazení: jakmile vyřešíme design, tak nahraju galerii na testovací server a pokud bude vše OK, může se to pustit do světa.

  35. David Čeřovský reporter

    Jasně, to jsem nevěděl. Tak bych to nahrál tedy na testovací, ať vidíme co to dělá. Chtěl bych tam otestovat to linkování na facebook a ty odkazy na jednotlivé fotky (kopírováním url). Vracení se do galerie po zavření lightboxu (jestli mě to puscrooluje do té části, kde byla fotka a ne na začátek. To moc na těhle testovacích opakujících se fotkách nejde dobře poznat.

  38. Vašek Dohnal

    Nejlepší by bylo, kdyby byly ty ikonky v SVG, to bychom pak nemuseli řešit vůbec rozměry. Ale i klasické PNG není vůbec problém – a na rozměru nezáleží, já si je případně zmenším dle potřeby. Jen poprosím, jestli by bylo možné je udělat tak, aby byly všechny stejně velké. Díky moc!

  42. David Čeřovský reporter

    Super, díky, už jsem to vzkoušel. Vypadá to moc pěkně na desktopu (Safari) v retině i na mobilu (tam to je bez chyby, fakt pěkný) a na ipadu PRO.

    našel jsem si tam tyhle věci akorát: 1. na desktopu bych tu fotku nezobrazoval takhle moc přes celé, můžeme s tím zksuit ještě laborovat? Hodně jsme to na začátku řešili při vývoji webu a shodli jsme se(teda hlavně já :), že to nemáme rádi zobrazovat takhle velikánské přes celou obrazovku. Nakonec se to udělalo i původně hodně veliké, ale teď to je až moc blízko ke kraji a ovládacím prvkům. Dal bych tam tak cca 15-20 procent ty fotky menší a tím se nám to nebude cpát tak do krajů. Na mobilu je to takhle super naopak.

    1. na iPadu musím na náhled s fotkou ve čtverečku kliknout dvakrát, aby se mi fotka zobrazila (první klik je ten polarodi styl bílý rámeček). Jedná se o ten ipad PRo který má gigantické rozměry. Taky by tam mohla být ta fotka v detailu menší, leze už do ovládacích prvků

    2. Nahrál jsem si tam cvičně nějakou galerii a použil fotku na pozadí. Jak se to bude chovat, když tam bude těch fotek opravdu hodně? Dříve to fungovalo krásně v tom stránkování, teď už i u takhle menší galerie to vypadá divně. To ale nevím, jak teda vymyslet, asi to nejde moc řešit z principu té "nekonečné" galerie :/ Rádi jsme to začali používat a to mě dříve nenapadlo, že se to tímhle přechodem ze stránkování rozbije.

    3. na super netu to mrská všechno strašně rychle, je to pecka. Na mobilu jsem tam nic divného nenašel

    Je to fakt pěknej lightbox, je to rychlý a když jste ho takhle upravili tak umí všechno co bylo třeba. Mám z toho moc radost! Jediná slabost bude ta rozblurovaná fotka na pozadí, ale to zvládnem :)

  43. David Čeřovský reporter

    Tak ještě zjištění od Petra, na Edge na Win10 se nezobrazjí v lightboxu ovládací prvky vůbec.

    • úprava: 4. bylo by super moct klikat pro další fotku přímo na fotku a ne jen na malinkou šipku. Nejlepší řešení mi vždycky přišlo kdy pravé dvě třetiny byly na následujícíc fotku a levá třetina ná vrácení na předchozí. Šlo by to přidat?
  44. Vašek Dohnal

    Díky za zprávy, vezmu to popořadě:

    1) MS Edge

    Testoval jsem galerii v Edge a bohužel mi ten problém nenastal. Můžete mi prosím poslat screenshot, jak to u vás vypadá? Ideálně i takhle s konzolí, která se objeví po stisknutí F12 – takto je Edge u mně:

    Untitled.png

    2) iPad

    Já bohužel nemám k iPadu přístup, teď mi nezbývá, než to ladit takto na dálku. Zkusil jsem změnit, jak se pracuje s dotyky na obrazovce – děje se tak i nyní?

    3) Nekonečná galerie

    Ta fotka na pozadí se chová úplně stejně jako doposud, tj. zobrazí se to, jako kdyby uživatel kliknul „xkrát“ na nynějších „Dalších 40 fotek“.

    4) Přechod na další fotku

    Toto bude trochu komplikovanější, než se zdá. Podle mě klikání buď na fotku nebo do třetiny šipky nejde ruku v ruce s funkcionalitou „zavřít ligtbox kliknutím mimo fotku“. Nyní se lightbox zavře, když se klikne sem:

    Image 6.png

    Tedy pokud bychom chtěli nechat obě funkcionality, uživatelé by si mohli kliknutím do podobné oblasti buď zobrazit další/předchozí anebo zavřít lightbox, což je podle mě dost matoucí. Pro představu: Google Fotky podporují jen klikání do třetin, klik na fotku nic nedělá a mimo fotku se lightbox nezavře, protože to stále spadá do třetiny na další/předchozí. Zase na druhou stranu Google Fotky šipky dopředu/dozadu šikovně skrývají, pokud není uživatel ve třetině, takže ho to nenutí, aby se strefoval do malých obrázků. A pak se do toho ještě dostává mobil, kde je podle mě klikání na fotku o to víc nežádoucí – nyní se kliknutím na fotku zobrazí ovládací prvky, navíc podle mě nebude uživateli jasné, kde končí levá třetina a kde končí samotná klikací fotka.

    5) Velikost fotek v lightboxu

    Přidal jsem odsazení shora/zdola, fotky jsou nyní trochu menší, víc toho ten ligbox bohužel nedokáže.

  45. David Čeřovský reporter

    ahoj, co jsem mohl jsem zatím prozkoumal, tak nějak takhle: 1. to nechám na Petrovi, nemám tu nikde wind 10 2.iPad zkusím zítra, ten leží radši v práci :) 3. no jasně, prostě já to jen vždycky stránkoval a tuhle věc si neuvědomil ani moc dřív :) Spíš jak to vypadá, když z fotky na šířku se udělá pro galerii s 100 fotkama taková úzká nudle rozostřená? 4. Možná jsem to blbě vysvětlil, ale já myslel klikáním na fotku a ty třetiny vyloženě na fotce. Ale stačilo by úlně klikat na fotku a dostávat se na desktopu na další fotku. Aspon teda holky na základně si na to zvykly a stěžovali si :) 5. konečně vlastně na tomhle dobře chápu, proč jsou teď ty ikonky vpravo vedle fotky, je to šikovný místo, kde ty ikonky nepřekáží. V tomhle řešení s okrajem jsou pěkné ty na šířku fotky, ale už jsou hodně malinkaté ty na výšku. Takže následuje blbý dotaz :) Náhodou ty ikonky dát doprava vedle fotky jako v původní verzi, to by šlo? :) Nevím jak je to složitý zásah samozřejmě..

  46. Vašek Dohnal

    Ahoj, já navrhuji se teď trochu zastavit. Moc si nedovedu představit, jak by ty ikonky vpravo měly fungovat na mobilu, protože na něm mi to zase rozbije swipe (uživatel nebude moct chytnout fotku po celé šíři), ikonky se budou překrývat se šipkami a budeme muset jinak vyřešit sdílecí menu, což.... Přijde mi, že všechny tyto změny (menší zobrazené fotky, klikání na fotku, ikonky jako na starém) plus klasické stránkování (fotka na pozadí) mají jediného vítěze a to sice ten současný lightbox. Mám trochu obavu, abychom složitě nevymýšleli něco, co už vymyšlené je a evidentně to víceméně funguje. Já tedy navrhuji, abyste si pořádně rozmysleli, co a jak má vypadat a fungovat a případně zvážili návrat k původnímu řešení – hrozně nerad bych dělal něco, co vám nakonec nebude vyhovovat.

    Ten původní lightbox má dva problémy: Nezobrazí další/předchozí fotku swipem na fotku. To je něco, co dovedu (pokud oželíte ten swipe efekt mezi dvěma fotkami) relativně rychle dodělat. A druhým problémem je nabídka pro mobilní sdílení, kterou je možné vyřešit nějak takto:

    Image 10.png

    ...a v zásadě bychom měli skoro vyhráno...

  47. David Čeřovský reporter

    @illagrenan Ale ne, stávající řešení nám nevyhovuje a nechci to k tomu směrovat. Jako stránkování jsem měl docela rád, ale tohle je takové jednodušší a když to hezky funguje, tak i pohodlnější. Popravdě ale kdyby jste řekli hned na začátku, že je tam jednoduché ten swipe dodělat do toho stávajícího řešení, tak bych to tak bral. Teď už jsme ale absolvovali tenhle výběr, upravu a testování nového lightboxu, takže už bych se určitě zpátky nevracel. To sdílení nechme jak je. Můžeš tedy jen ještě ten okraj udělat menší prosím? Něco mezi původním a tímhle :) Jsem se s tím moc rozjel teda ok :)

  48. Michal Májský

    Ahoj, tak jsem se v tom po delší době zorientoval...a předně chci říct, že z toho mám dobrý pocit, že ta galerie, kterou jsme společně dali dohromady je slušný krok dopředu.

    Jeslti tomu dobře rozumím, tak řešíme ještě několik věcí:

    1) Problém na Ipadu: Už se nám jich nashromáždilo víc a platí pro ně, že nejsou vidět v žádném emulátoru, takže to asi opravdu bude chtít si to zařízení vypůjčit. Ještě bych v tomhle případě předtím zkusil jestli by v tomhle případě nepomohlo https://github.com/ftlabs/fastclick, vašku?

    2) Blur pozadí: To je problém, který nevznikl předěláním galerie, ale uvědomili jsme si ho až teď. Dobrý řešení mě nenapadá. Vzdát se bluru nebo ho používat jen u kratších galerií, kde to nebude patrné.

    3) Přechody na další fotku a klikací zony: Vidím, že to teď není ještě ideální. Pro mě osobně je největší problém v tom, že mezi fotkou a šipkou je zóna, která lightbox zavře (a pak následuje zona okolo šipky, která otevírá další / předchozí fotku). Kliknutí na fotku, které by zobrazilo další, se mi taky docela zamlouvá. Nicméně z technického hlediska je potřeba tomu vyhradit čas a pořádně to vyzkoušet, protože všechna tahle funkcionalita se potenciálně bije se swipováním na mobilech, takže není tak jednoduché ji udělat.

    4) Editace galerie Ještě jsem si uvědomil, že jsme neřešili použití nového lightboxu v editaci galerie. To by asi chtělo sjednotit, nebo myslíte že to není nutné?

    Davide, jsme teďka v situaci, kdy vidím, že si s tím potřebujeme ještě trochu vyhrát, ale už jsme na hranici našeho odhadu pracnosti. Je OK, pokud na to vyhradíme ještě další čas?

  49. David Čeřovský reporter

    jasně, klidně přidejte nějaký delší čas. Kolik jsme na to tedy teď celkem s odhadem? Jinak rychlá reakce: 1. klidně si ho můře půjčit u nás 2. asi bych to neřešil a nechal jak je 3. to klikání mi přijde taky ok na fotku na další. Zkuste to naladit prosím 4. prosím všude bych použil ten nová lightbox, jinak to bude mišmaš

    dík

  50. Vašek Dohnal

    Ahoj,

    1. iPad: @snakeyyy ten fastclick jsem použil, ale nemohu ověřit, zda to pomohlo nebo ne. Testoval jsem to přes virtualizovaný iPad AIR, kde to funguje, takže to možná bude v něčem jiném. @memostail Stavím se u vás tuhle středu dopoledne? Vyhovuje? Že bych to otestoval na tom iPadu.
    2. Klikání: Jen abych to shrnul: tedy zavřít lightbox kliknutím mimo fotku už nově nepůjde. A chceme jít cestou A) klik na fotku = přechod na další plus zvětšit prostor okolo šipek NEBO B) klikání na poloviny - tam bych si to dovedl představit tak, že celá obrazovka bude rozdělená horizontálně na dvě poloviny, kde se bude dít další/předchozí.
    3. Editace galerie: Ok dodělám i na stránce editace galerie. Má to tedy vypadat stejně jako detail galerie? tj. včetně infinite scrollingu? Plus je tam navíc jen editace popisku a hromadný výběr fotek.
    4. Odhad: Já jsem nyní na 22 hodinách. Odhaduji, že nasadit lightbox na editaci galerie mi zabere 4 hodiny a klikání 1,5 hodiny. Pokud budeš souhlasit, pustil bych se přednostně do toho klikání, protože bych to rád ideálně v tu středu pak otestoval na iPadu.
  51. David Čeřovský reporter
    1. Zrovna asi nejde testovací prostředí, tak to neodzkouším, ale klidně se ve středu zastav. Chtělo by se to podívat rovnou i na tu druhou věc se strašně se zobrazujícíma kolážema na webu (ty co mají tu prolínačku)
    2. To klikání mimo fotku na zavření by fakt nešlo zachovat? Já ted nevim s čim se to bije, mysylel sem, že to klikání na fotku na další by tomu nevadilo. Malý prostor na šipky mi nevadil. Ale můžeme si to říct osobně ve středu, at si tomu rozumíme přesně
    3. Mělo by to vypadat stejně jako detail galerie jenom ty dvě věci navíc.
    4. ok
  52. Vašek Dohnal

    2) Jo jo to by šlo zachovat, Michalovi se to ale nezdálo – @snakeyyy co na to říkáš, že bychom zavírali lightbox i přecházeli na fotku?

  53. Michal Májský

    Já mám problém s tím, kde je ta zóna, která lightbox zavře (ted je mezi šipkou a fotkou) ne s tím principem obecně. Ale pokud jsem jediný kdo na to narazil a zavřel lightbox i když nechtěl, tak to není třeba řešit.

  54. David Čeřovský reporter

    já sem s tím byl ok, že se to dá zavřít i v tomhle prostoru. Ty šipečky jsou malý a mají kolem sebe kousek místa, kde se ještě dají klikat. Někde jsem viděl takové řešení se změnou kurzoru, která vypadala hezky, ale je to zas další složitost na kteoru už teď není čas myslím. Ať se můžeme taky věnovat jiným věcem než lightboxu, je to ještě dost úkolů jiných

  55. Vašek Dohnal

    Přidal jsem do galerie klikání na fotku a co jsem zatím testoval, zdá se, že je vše OK a chová se to dobře – tak poprosím, abyste se na to také mrkli, aby to bylo odzkoušené na více mobilních zařízeních. Ještě jsem vylepšil zobrazení na mobilu, kde se nově automaticky skrývá lišta s adresou.

  57. Michal Májský

    Mám k tý editaci jednu drobnost - není mi jasné, kdy dojde k uložení toho popisku, resp. zda se vůbec uloží, ale možná s tím mám problém jakožto programátor a běžný uživatel to takhle nevnímá. Davide můžeš to otestovat na pár lidech v tvém okolí?

  58. David Čeřovský reporter

    Měl jsem z toho podobný pocit z té aditace, bylo by to asi lepší tak, že se ti tam po editaci toho popisku objeví malá ikonka (jako fajfka nebo uložit), na kteoru můžeš kliknout a tím se jí změní stav a přestane blikat kurzor.

  59. Vašek Dohnal

    Přidal jsem k poli pro editaci tlačítko s ✔ pro uložení, tak na to prosím mrkněte, zda by to tak šlo.

  60. Michal Májský

    Hele suprová by byla ještě flash message pokud by se nebila s tím lightboxem, ale jinak za mě dobrý.

  65. Michal Májský

    Ještě jsem si uvědomil jednu věc - galerie v referencích - měly by se také převést na nový lightbox.

  67. Michal Májský

    JJ, udělal jsem tam takovou "zjednodušenou galerii", kdy tam není stránkování, takže na výpisu fotek je jich jen několik, ale v lightboxu se dostaneš na všechny. Myslím, že to budeš muset udělat podobně, protože ten infinite scrolling tady být nemůže (pod těmi fotkami je ještě další obsah).

  73. Log in to comment
Assignee
Type
enhancement
Priority
major
Status
resolved
Votes
0
Watchers
3
Jira: the preferred issue tracker for Bitbucket. Join the team!