New stories layout #341
New stories layout #341
Conversation
filiptaticek
commented
Jul 31, 2023
•
filiptaticek
commented
- Stories are no longer divided on czech and ukranian, they are all together
- We now use grid and the design of the stories is different
…ch and ukranian, but are all together
|
@met nevíš prosím co se s tímto jediným failnutým testem, ,,TimeoutError: waiting for Page.printToPDF failed: timeout 30000ms exceeded" dá dělat? |
Asi nic. To neznamená, že je něco rozbité, jen github někdy nestihle vygenerovat tu stovku PDF včas a tak to ukončil. |
|
Tohle je kritická oblast, a měnil se kompletně layout, takže tady nás to před mergnutím musí zkontrolovat víc.
Stačí pak napsat sem, že jste to zkontrolovali. A pak to teprve mergneme. |
| const storiesCEE = filteredStories.filter((story) => story.country === 'CZ'); | ||
| const RenderStoryPanel = ({ story }: { story: Story }) => { | ||
| // Check if the current image's source is "/kids/dvanact-mesicku.jpg", because it takes a lot of time to load | ||
| const isPriorityImage = story.slug === 'dvanact-mesicku'; |
There was a problem hiding this comment.
Tohle mi přijde nestandardní řešení. Pokusil bych se spíš zkomprimovat ten obrázek.
There was a problem hiding this comment.
Uznávám, že to není ideal řešení, jak myslíš zkomprimovat ten obrázek prosím?
There was a problem hiding this comment.
@filiptaticek zkusit ho uložit v obrázkovém editoru tak, aby měl stále dobré rozlišení, ale optimalozvanou velikost. Což by mělo jít. Zkus to. Vypadá to, že originál jen nebyl moc optimalizovaný. Věřím, že i na polovinu současné velikosti se dostaneš, aniž by to bylo vizuálně nějak poznat.
There was a problem hiding this comment.
Ok zkusím díky
There was a problem hiding this comment.
Zkoumal jsem to, komprimoval, ale bug zůstal. Je to proto, že ta stránka má problém načíst ty pohádky, co jsou nahoře, což je Perníková chaloupka, a Dvanáct měsíčků. I když jsem ty obrázky nahradil například obrázkem tri-prasatka.jpg, který je menší než ostatní obrázky ,tak ten bug tam zůstal. Next samotný navrhuje hodit tam prostě priority attribute, viz. https://nextjs.org/docs/pages/api-reference/components/image#priority, takže bych to nechal, tak jak to bylo, to jest dát priority těm Dvanácti měsíčkům. Nejde totiž o velikost obrázku, ale kde na stránce je.
There was a problem hiding this comment.
Ok, tak tyhle věci nechám radši zatím na tobě. Ten commit vrátím.
There was a problem hiding this comment.
Ten commit je pryč, můžeme teda mergnout? Za mě vše v pořádku
There was a problem hiding this comment.
@filiptaticek Pingnul jsem přes Slack @matuyka aby se na to mrkla z pohledu testerky, než to mergneme. Označoval jsem ji už před pár dny, ale asi si toho nevšimla.
There was a problem hiding this comment.
@filiptaticek @met Po funkčnej stránke je za mňa všetko ok, mám len 1 UI drobnosť - na webe je prechod po kliknutí na obrázok ok, ale v prehliadači na mobile je to trošku kostrbaté - obrázok podskočí - resp. ten prechod nie je taký plynulý/je príliš rýchly, ale nič, čo by bránilo mergovaniu. Ale inak to vyzerá super ;)
There was a problem hiding this comment.
@filiptaticek Pokud s tím, so píše @matuyka nic snadno neuděláme, tak můžeme mergovat.
| priority={isPriorityImage} | ||
| /> | ||
| <Link href={`/kids/stories/${story.slug}`} className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> | ||
| <PlayIcon className="w-full cursor-pointer w-[60px] h-[60px] sm:w-[74.57px] sm:h-[74.57px] group-hover:visible xl:invisible inline-block active:scale-125 active:fill-primary-yellow active:stroke-primary-yellow transition duration-100 fill-primary-blue stroke-primary-blue" /> |
There was a problem hiding this comment.
Ten playIcon mě trochu zmátl. Předpokládal jsem že při kliku na něj už se pohádka začne přehrávat. Jestli by nebylo hezčí tu kartu při hoveru jen trochu zvětšit a playIcon dát pryč @met ?
There was a problem hiding this comment.
@jejdacz Souhlasím, že ten PLAY je hezký, ale to očekávání, že se pohádka spustí automaticky jsem taky měl (a to nedáme, protože tu máme prohlížeče blokující automatická spouštění zvuku, na tom už jsme v minulosti havarovali několikrát).
Takže souhlasím dát PLAY tlačítko pryč a hover realizova jinak, klidně zvětšením obrázku, prokud to bude dobře vypadat.
There was a problem hiding this comment.
Už se mi to podařilo vyřešit, play je pryč, a teď to zoomuje při hoveru, můžete mrknout prosím?
There was a problem hiding this comment.
@filiptaticek Ten hover jako efekt vypadá dobře. Jen je neaktivní ten název pohádky dole pod obrázkem. Klikací by měl být celý box i s tím názvem. A ideálně ten hover efekt mít už na tom celém boxu, tj. obrázek se scaluje i když najedu muší na název pohádky.
| <h2 className={`text-primary-blue text-center ${currentPlatform === Platform.KIOSK ? 'text-20' : ''}`}> | ||
| {t(titleKey, { defaultValue: 'stories' })} | ||
| </h2> | ||
| <h2 className={`text-primary-blue text-center ${currentPlatform === Platform.KIOSK ? 'text-20' : ''}`}>{t(titleKey)}</h2> |
There was a problem hiding this comment.
currentPlatform === Platform.KIOSK tady na to už se dotazujeme o dva řádky výše
There was a problem hiding this comment.
Vyřešeno, díky za upozornění
…ribute to the first story in the list
