Документы и фотографии: навигация и просмотр без лишнего шума

Просмотр медиа — это отдельный сценарий

У публичного портфолио есть два похожих, но не одинаковых раздела: документы об образовании и фотогалерея. В обоих случаях человек открывает карточку, смотрит материал крупнее и должен без усилий вернуться к следующему объекту. Пока этот путь сделан только «чтобы открыть файл», он быстро начинает мешать: карточки выглядят тяжело, просмотр обрывается на одном фото, а на мобильном экране элементы управления спорят друг с другом.

В этой итерации я собрал оба сценария вокруг одного принципа: контент остаётся главным, а интерфейс помогает смотреть его, а не отвлекает на себя.

Карточка документа стала компактнее

У документов появились более собранные карточки: превью занимает устойчивое место, заголовок и описание не разъезжают сетку, а действие открывается понятной строкой внизу карточки. Небольшие hover-состояния и ограничение длинного текста не добавляют декоративности ради декоративности — они сохраняют ровный ритм даже при разных названиях и описаниях.

Отдельно важна адаптация: на узком экране внутренние отступы и типографика уменьшаются, но кнопка открытия остаётся достаточно заметной и удобной для касания.

Фотогалерея перестала быть набором одиночных модальных окон

В полноэкранном просмотре фотографий появились переходы вперёд и назад, а также горячие клавиши со стрелками. Если пользователь дошёл до конца уже загруженной части ленты, галерея может дозагрузить следующую страницу и продолжить просмотр с нужного кадра.

Это простой, но полезный пример прогрессивного улучшения: карточки и обычная загрузка остаются серверными, а JavaScript добавляет непрерывную навигацию только поверх уже существующей ленты.

Контролируемый просмотр не равен ложной защите

В модальных окнах отключены случайное перетаскивание и стандартное контекстное меню, а для активного просмотра перехватываются сочетания печати и сохранения. Поверх документов добавлен ненавязчивый водяной знак.

Важно не переоценивать эти меры: браузер всё равно получает ресурс, поэтому они не заменяют авторизацию, серверные ограничения или юридическую защиту контента. Их задача намного скромнее и честнее — убрать случайные действия в сценарии просмотра и сделать публикацию материалов более контролируемой.

Практический результат

Страницы документов и фотографий теперь воспринимаются как законченные медиаразделы. Документы легче просматривать в аккуратной сетке, а фотогалерея позволяет переходить по кадрам без постоянного возврата к карточкам. При этом базовая серверная разметка осталась простой, а интерактивность не превратила страницы в отдельное SPA-приложение.