Передісторія: наразі перепрацьовуємо старий сайт https://tero.design — фактично створюється копія сайту з невеликими доопрацюваннями. Виконавець зробив більшу частину роботи, але застряг на одному моменті і йому потрібна допомога для завершення роботи. Я попросив викласти суть проблеми і описати завдання, і нижче ви можете ознайомитися з цим.
Проміжна версія сайту знаходиться на під-домені — https://app.tero.design
🧩 Суть задачі:
Потрібно повністю перепроектувати логіку відображення контенту на сторінці окремого проекту — щоб галерея (grid) з зображеннями і відео відображалася коректно у вигляді адаптивної цегляної кладки (masonry layout). Зараз сітка ламається, ширини і висоти обчислюються некоректно, є обрізання, накладання і візуальні баги.
Приклад того, яким має бути: https://tero.design/project/80 і https://tero.design/project/61
Поточна версія: https://app.tero.design/project/80 і https://app.tero.design/project/61
📌 Що вже реалізовано:
Laravel 11 (PHP 8.2) + Blade-шаблон.
Контент (відео, зображення, 3D-тур, шторки) передається у multimedia_grid (рядками і комірками).
В кожному рядку: розрахунок кінцевої висоти за пропорціями контенту (ratio), далі розподіл за flex-відсотками.
Є кастомний JS для анімації, появи і обробки шторки.
Сітка рендериться через HTML + CSS + JS, без сторонніх бібліотек (Masonry, Packery і т.п. не використовується).
❌ Проблема:
Некоректний розрахунок flex-відсотків. Деякі зображення/відео обрізаються або розтягуються не за пропорціями.
Неконсистентна висота рядка. Іноді контент у рядку обрізаний, іноді — заповнює не всю ширину.
Відео вузькі і високі — займають занадто багато ширини, порушуючи сітку.
На мобільній версії баги з 100% шириною і auto-висотою.
JS конфліктує з lazyload і canvas curtain. Не завжди коректно ініціалізується.
Причина невідома: конфлікт стилів, логіки або помилки розрахунку в PHP/JS.
Поведіночка елементів неконсистентна: в одних рядках все нормально, в інших — повний розвал.
Є кастомна логіка покадрової появи елементів (showItemsSequentially), яка може впливати на позиціонування.
✅ Що потрібно зробити:
Переписати сітку проекту під реальний адаптивний masonry layout, з урахуванням усіх типів контенту:
img — звичайні зображення.
video — відеофайли (з loop, autoplay, muted).
vr — iframe 3D-тур.
curtain — шторки (дві картинки з canvas-роздільником).
Виправити розрахунок ширини/висоти на стороні PHP (або відмовитися від нього на користь JS, якщо потрібно).
Зробити коректну адаптивну поведінку на всіх пристроях (десктоп, планшет, смартфон).
Забезпечити стабільне появлення всіх блоків, без дергань, просідань, багів lazyload.
За бажанням — можна використовувати бібліотеку для masonry: наприклад, Masonry.js, Packery або CSS Grid/Flex з JavaScript розрахунком.
Виносити JS у окремий файл, не інлайново.
💡 Що може допомогти:
Проекти підвантажуються з бази через Laravel.
У проекті вже використовуються Vue + ElementPlus (в адмінці), але на фронті Blade.
Вся мультимедія у /public/multimedia/....
Можна зберігати пропорції контенту через getimagesize(), але якщо це не допомагає — можна використовувати onload у JS для розрахунку.
🔐 Важливо:
Має бути кросбраузерно.
Підтримка мобільних пристроїв обов’язкова.
Адаптивність (висота рядків, ширина колонок) має бути гнучкою, але при цьому візуально збалансованою.
Код має бути чистим, з коментарями.
🧾 Що надати:
Рефакторинг Blade-шаблону сторінки проекту.
Виносені стилі і скрипти (бажано — app.css, project.js).
Робочу masonry-сітку, де:
немає обрізаних елементів;
немає накладань;
шторки і відео працюють коректно;
мобільна версія виглядає адекватно.
🔧 Технології проекту:
Laravel 11 (PHP 8.2)
Vue 3 (для адмінки)
Element Plus (UI)
Flysystem, VueFinder
Дякую за увагу.
Чекаю з нетерпінням ваших пропозицій щодо вартості та термінів реалізації цього завдання.
За питаннями — звертайтеся, намагатимусь швидко відповісти
