feat(arts-page): add arts page and fix hero frame#27
Conversation
| @@ -2,52 +2,61 @@ | |||
| { | |||
| "artId":"ghost", | |||
| "bgColor":"Bgc-$artGhost", | |||
There was a problem hiding this comment.
Тут было бы неплохо сделать рефакторинг. Пусть название css переменной с цветом фона будет формироваться по схеме: $art${artId}. Только id надо будет перевести из cebab-case в camelCase
There was a problem hiding this comment.
Привет. Небольшой вопрос:
Если я переведу id в camelCase, то мне нужно будет переименовывать все файлы в папке arts (например: robotHare.ejs) и переименовать все переменные цвета (например: --ml-artrobotHare: #........). Делать так?
Пока не исправлял.
There was a problem hiding this comment.
Существующий id не меняем. Переводим его только для получения названия CSS переменной. В шаблоне, вместо art.bgColor, будет что-то типа Bgc-$art${cebab2Camel(art.artId)}. CSS переменные с цветами тоже вроде должны быть уже с подходящими названиями. Если какие-то отдельные не будут подходить - поправь
|
|
||
| <% | ||
| const artsPageCSS = { | ||
| card:"W100p H46u Ov-h Bdrd12 Bgc-$core815 Bd3;s;$brand O0.5 O1_h sm_H50u md_H60u xxl_H-a -Ts", |
There was a problem hiding this comment.
Для прозрачности лучше % использовать: O50p
There was a problem hiding this comment.
И опять же, px только в отдельных случаях: Bdrd12 -> Bdrd3u
|
По стилю наведения карточек артов. Делаем вариант №5 из макета. При этом, backdrop-filter надо помутнее, чтобы текст кнопки хорошо читался |
|
В последнем коммите, при xxl, арты автоматически выстраиваются в три колонки и занимают столько места по высоте, сколько передаем в "height": "....." в arts.json При добавлении нового арта, галерея сама перестроится и расположит арты так, чтобы три колонки были примерно одинаковой высоты. |
|
|
||
|
|
||
|
|
||
| <template id="art-card"> |
There was a problem hiding this comment.
Зачем здесь возиться с template? Просто делаешь кастомный элемент для модалки, в модуле art-panel получаешь модалку со страницы через querySelector (до объявления класса), и добавляешь ее в поле инстанса. Там дальше с ней работаешь
| @@ -0,0 +1,66 @@ | |||
| export class ArtModal { | |||
There was a problem hiding this comment.
Переделываем на кастомный элемент, как писал ниже
| this.sandboxLink = clone.querySelector(".art-modal-sandbox a"); | ||
| this.shareBtn = clone.querySelector(".art-modal-share"); | ||
|
|
||
| this.overlay.addEventListener("click", (e) => { |
There was a problem hiding this comment.
закрытие должно быть и по нажатию Esc на клаве
| document.body.appendChild(clone); | ||
| } | ||
|
|
||
| copyArtLink() { |
There was a problem hiding this comment.
Вместо дублирования логики надо модалке передавать колбэки из art-panel
| this.sandboxLink.href = `http://play.mlut.style/?art=${artId}`; | ||
| } | ||
| const artClone = artElement.querySelector(".art").cloneNode(true); | ||
| this.contentContainer.textContent = ""; |
There was a problem hiding this comment.
Почему так очищается контент, а не через innerHTML?
| if (this.sandboxLink) { | ||
| this.sandboxLink.href = `http://play.mlut.style/?art=${artId}`; | ||
| } | ||
| const artClone = artElement.querySelector(".art").cloneNode(true); |
There was a problem hiding this comment.
Модалка клонированием не занимается - туда уже готовый к отображению контент передаем
| this.button.addEventListener('click', () => this.copyArtLink()) | ||
| this.button.addEventListener("click", () => this.copyArtLink()); | ||
| this.addEventListener("click", (e) => { | ||
| if (e.target.closest(".link-button, a")) return; |
There was a problem hiding this comment.
На a цепляться не стоит - лучше более специфичный селектор
There was a problem hiding this comment.
В новой схеме вообще нет смысла в отдельном шаблоне. Это ведь не универсальная модалка, а только для артов
There was a problem hiding this comment.
И сейчас стили модалки не упорядочены. Некоторые арты залезают под кнопки
Уже лучше, но стоит попробовать настоящий masonry сделать, если не сильно долго будет. Наверняка есть готовые vanilla js библиотеки |
2 participants
Привет. Страницу артов сделал grid сеткой, при hover арты немного увеличиваются. Изменение grid позиции у арта, при наведении, сделать можно, но как-то криво смотрится. При клике по арту, модальное окно открывается. Жду комментов)