Пред-история: переделываем в данный момент старый сайт 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-сетку, где:
нет обрезанных элементов;
нет наложений;
шторки и видео работают корректно;
mobile выглядит адекватно.
🔧 Технологии проекта:
Laravel 11 (PHP 8.2)
Vue 3 (для админки)
Element Plus (UI)
Flysystem, VueFinder
Спасибо за внимание.
Жду с нетерпением Ваших предложений по стоимости и срокам реализации данной задачи.
В случае вопросов - обращайтесь, буду стараться быстро ответить
