Przed-historia: obecnie przebudowujemy starą stronę https://tero.design - faktycznie tworzona jest kopia strony z drobnymi poprawkami. Wykonawca wykonał większość pracy, ale utknął na jednym etapie i potrzebuje pomocy, aby dokończyć zadanie. Poprosiłem o opisanie istoty problemu i zadania, a poniżej możesz zapoznać się z tym.
Strona tymczasowa znajduje się na subdomenie - https://app.tero.design
🧩 Sedno zadania:
Trzeba całkowicie przebudować logikę wyświetlania treści na stronie pojedynczego projektu — tak aby galeria (grid) z obrazami i wideo wyświetlała się poprawnie w formie responsywnego układu cegiełkowego (masonry layout). Obecnie siatka się psuje, szerokości i wysokości są obliczane niepoprawnie, występują przycięcia, nakładki i błędy wizualne.
Przykład jak powinno wyglądać: https://tero.design/project/80 oraz https://tero.design/project/61
Obecna wersja: https://app.tero.design/project/80 oraz https://app.tero.design/project/61
📌 Co jest obecnie zrealizowane:
Laravel 11 (PHP 8.2) + Blade-template.
Treść (wideo, obrazy, 3D-tur, zasłony) jest przekazywana do multimedia_grid (wierszami i komórkami).
W każdym wierszu: obliczanie końcowej wysokości na podstawie proporcji treści (ratio), następnie rozkład według flex-procentów.
Posiada własny JS do animacji, pojawiania się i obsługi zasłony.
Siatka jest renderowana za pomocą HTML + CSS + JS, bez użycia bibliotek zewnętrznych (np. Masonry, Packery).
❌ Problem:
Niepoprawne obliczanie flex-procentów. Niektóre obrazy/wideo są przycinane lub rozciągane niezgodnie z proporcjami.
Niejednolita wysokość wiersza. Czasami treść jest przycinana, innym razem — nie wypełnia całej szerokości.
Wąskie i wysokie wideo — zajmują za dużo szerokości, zakłócając siatkę.
Błędy na wersji mobilnej z szerokością 100% i auto-wysokością.
JS koliduje z lazyload i canvas curtain. Nie zawsze poprawnie się inicjuje.
Przyczyna nieznana: konflikt stylów, logiki lub błędy w obliczeniach PHP/JS.
Zachowanie elementów jest niekonsekwentne: w niektórych wierszach wszystko działa poprawnie, w innych — totalny chaos.
Posiada własną logikę pojawiania się elementów krok po kroku (showItemsSequentially), która może wpływać na pozycjonowanie.
✅ Co trzeba zrobić:
Przebudować siatkę projektu na prawdziwy responsywny masonry layout, uwzględniając wszystkie typy treści:
img — zwykłe obrazy.
video — pliki wideo (z loop, autoplay, muted).
vr — iframe 3D-tur.
curtain — zasłony (dwa obrazki z separatorami canvas).
Naprawić obliczanie szerokości/wysokości po stronie PHP (lub zrezygnować z tego na rzecz JS, jeśli konieczne).
Zapewnić poprawne zachowanie responsywne na wszystkich urządzeniach (desktop, tablet, smartfon).
Zabezpieczyć stabilne pojawianie się wszystkich bloków, bez szarpania, opóźnień i błędów lazyload.
Opcjonalnie — można użyć biblioteki do masonry: np. Masonry.js, Packery lub CSS Grid/Flex z obliczeniami w JavaScript.
Wydzielić JS do osobnego pliku, nie w inlinie.
💡 Co może pomóc:
Projekty są ładowane z bazy przez Laravel.
W projekcie już używane Vue + ElementPlus (w panelu admina), ale na froncie Blade.
Wszystkie multimedia znajdują się w /public/multimedia/....
Można zapisywać proporcje treści za pomocą getimagesize(), ale jeśli to nie pomaga — można użyć onload w JS do obliczeń.
🔐 Ważne:
Powinno działać w różnych przeglądarkach.
Obsługa urządzeń mobilnych obowiązkowa.
Responsywność (wysokość wierszy, szerokość kolumn) powinna być elastyczna, ale wizualnie zrównoważona.
Kod musi być czysty, z komentarzami.
🧾 Co dostarczyć:
Zrefaktoryzowany Blade-template strony projektu.
Wydzielone style i skrypty (najlepiej — app.css, project.js).
Działającą siatkę masonry, gdzie:
brak przyciętych elementów;
brak nakładek;
zasłony i wideo działają poprawnie;
wersja mobilna wygląda odpowiednio.
🔧 Technologie projektu:
Laravel 11 (PHP 8.2)
Vue 3 (dla panelu admina)
Element Plus (UI)
Flysystem, VueFinder
Dziękuję za uwagę. Czekam na Państwa propozycje dotyczące kosztów i terminów realizacji tego zadania. Jeśli będą pytania — proszę się kontaktować, postaram się szybko odpowiedzieć
