feat(arts-page): add arts page and fix hero frame by oostap1985 · Pull Request #27 · mlutcss/website

oostap1985 · 2026-07-20T21:47:48Z

Привет. Страницу артов сделал grid сеткой, при hover арты немного увеличиваются. Изменение grid позиции у арта, при наведении, сделать можно, но как-то криво смотрится. При клике по арту, модальное окно открывается. Жду комментов)

mr150 · 2026-07-22T15:28:12Z

@@ -2,52 +2,61 @@
 	{
 		"artId":"ghost",
 		"bgColor":"Bgc-$artGhost",


Тут было бы неплохо сделать рефакторинг. Пусть название css переменной с цветом фона будет формироваться по схеме: $art${artId}. Только id надо будет перевести из cebab-case в camelCase

Привет. Небольшой вопрос:
Если я переведу id в camelCase, то мне нужно будет переименовывать все файлы в папке arts (например: robotHare.ejs) и переименовать все переменные цвета (например: --ml-artrobotHare: #........). Делать так?

Пока не исправлял.

Существующий id не меняем. Переводим его только для получения названия CSS переменной. В шаблоне, вместо art.bgColor, будет что-то типа Bgc-$art${cebab2Camel(art.artId)}. CSS переменные с цветами тоже вроде должны быть уже с подходящими названиями. Если какие-то отдельные не будут подходить - поправь

mr150 · 2026-07-22T15:35:45Z

+
+<%
+	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",


Для прозрачности лучше % использовать: O50p

И опять же, px только в отдельных случаях: Bdrd12 -> Bdrd3u

mr150 · 2026-07-23T16:11:33Z

По стилю наведения карточек артов. Делаем вариант №5 из макета. При этом, backdrop-filter надо помутнее, чтобы текст кнопки хорошо читался

oostap1985 · 2026-07-24T13:59:09Z

В последнем коммите, при xxl, арты автоматически выстраиваются в три колонки и занимают столько места по высоте, сколько передаем в "height": "....." в arts.json При добавлении нового арта, галерея сама перестроится и расположит арты так, чтобы три колонки были примерно одинаковой высоты.

mr150 · 2026-07-24T16:21:44Z

+
+
+
+<template id="art-card">


Зачем здесь возиться с template? Просто делаешь кастомный элемент для модалки, в модуле art-panel получаешь модалку со страницы через querySelector (до объявления класса), и добавляешь ее в поле инстанса. Там дальше с ней работаешь

mr150 · 2026-07-24T16:22:16Z

@@ -0,0 +1,66 @@
+export class ArtModal {


Переделываем на кастомный элемент, как писал ниже

mr150 · 2026-07-24T16:22:50Z

+		this.sandboxLink = clone.querySelector(".art-modal-sandbox a");
+		this.shareBtn = clone.querySelector(".art-modal-share");
+
+		this.overlay.addEventListener("click", (e) => {


закрытие должно быть и по нажатию Esc на клаве

mr150 · 2026-07-24T16:23:37Z

+		document.body.appendChild(clone);
+	}
+
+	copyArtLink() {


Вместо дублирования логики надо модалке передавать колбэки из art-panel

mr150 · 2026-07-24T16:24:50Z

+			this.sandboxLink.href = `http://play.mlut.style/?art=${artId}`;
+		}
+		const artClone = artElement.querySelector(".art").cloneNode(true);
+		this.contentContainer.textContent = "";


Почему так очищается контент, а не через innerHTML?

mr150 · 2026-07-24T16:25:47Z

+		if (this.sandboxLink) {
+			this.sandboxLink.href = `http://play.mlut.style/?art=${artId}`;
+		}
+		const artClone = artElement.querySelector(".art").cloneNode(true);


Модалка клонированием не занимается - туда уже готовый к отображению контент передаем

mr150 · 2026-07-24T16:27:05Z

-		this.button.addEventListener('click', () => this.copyArtLink())
+		this.button.addEventListener("click", () => this.copyArtLink());
+		this.addEventListener("click", (e) => {
+			if (e.target.closest(".link-button, a")) return;


На a цепляться не стоит - лучше более специфичный селектор

mr150 · 2026-07-24T16:33:00Z

В новой схеме вообще нет смысла в отдельном шаблоне. Это ведь не универсальная модалка, а только для артов

И сейчас стили модалки не упорядочены. Некоторые арты залезают под кнопки

mr150 · 2026-07-24T16:35:26Z

В последнем коммите, при xxl, арты автоматически выстраиваются в три колонки и занимают столько места по высоте, сколько передаем в "height": "....." в arts.json При добавлении нового арта, галерея сама перестроится и расположит арты так, чтобы три колонки были примерно одинаковой высоты.

Уже лучше, но стоит попробовать настоящий masonry сделать, если не сильно долго будет. Наверняка есть готовые vanilla js библиотеки

…ery (masonry)

oostap1985 · 2026-07-28T15:55:50Z

Привет.
Написал функцию, которая переводит в PascalCase. Она работает, но получается что-то не понятное. Описываю:
Bgc динамически формируется правильно, но почему-то не работает. Магия в том, что если вернуть в массив данных поле "bgColor", все работает, хотя в компоненте я нигде не использую <%= art.bgColor %>.
Пока поле в массиве оставил.

По компоненту модального окна - вроде все исправил.

Насчет библиотеки masonry:
Также в кастомном компоненте подключается, но она не импортируется как модуль.

Нашел другую библиотеку, ее можно импортировать как модуль, но только через esm.sh (import Isotope from 'https://esm.sh/isotope-layout@3.0.6';), но работает как-то плохо. Когда заходишь на страницу артов, нужно ждать секунд 5-6, пока библиотека подгрузится. Решил не использовать ее.

oostap1985 · 2026-07-28T16:03:01Z

И еще.
Могу убрать строгую высоту артов на мобилке и md разрешении и тогда получится как на фото (скинул в тг)

mr150 · 2026-07-28T20:11:39Z

+		this.container = this.querySelector('.modal-container');
+		this.contentContainer = this.querySelector('.art-modal-content');
+		this.closeBtn = this.querySelector('.art-modal-close');
+		this.sandboxLink = this.querySelector('.art-modal-sandbox a');


Уже писал, что не надо цепляться на a

mr150 · 2026-07-28T20:13:48Z

+		this.shareBtn = this.querySelector('.art-modal-share .btn');

-		document.body.appendChild(clone);
+		if (this.overlay) {


Зачем эти проверки? Элементы обязательные и если кто-то не добавит их - пусть компонент явно упадет

mr150 · 2026-07-28T20:15:52Z

+		this.closeBtn = null;
+		this.sandboxLink = null;
+		this.shareBtn = null;
+		this._onShare = null;


Если уж делить на публичные и приватные свойства, то тогда все, что не вызывается из вне должно быть приватным. Тем более, внутренние элементы

mr150 · 2026-07-28T20:18:10Z

-			this.overlay.classList.add("O0", "Pne");
-			if (this.contentContainer) this.contentContainer.textContent = "";
+  close() {
+		if (!this.overlay) return;


Что-то не так с отступами

mr150 · 2026-07-28T20:18:26Z


 	connectedCallback() {
+		if (!modal) {
+		this.modal = document.querySelector('art-modal');


Зачем, если модалку получаем даже до объявления класса

mr150 · 2026-07-28T20:22:26Z

+
+		const artDiv = this.querySelector('.art');
+		if (!artDiv) return;
+		const artHTML = artDiv.outerHTML;


artHtml - camelCase

mr150 · 2026-07-28T20:23:06Z

+		const artDiv = this.querySelector('.art');
+		if (!artDiv) return;
+		const artHTML = artDiv.outerHTML;
+		const bgClass = this.getAttribute('data-bg-class');


Это кастомный элемент, так что можно использовать кастомный атрибут, без data

mr150 · 2026-07-29T11:28:12Z

-			icon.classList.remove("D-n");
-			text.classList.add("D-n");
-		}, 2000);
+			const svg = button.querySelector('svg');


На svg подвязываться не надо

mr150 · 2026-07-29T11:29:01Z

+			const svg = button.querySelector('svg');
+			const span = button.querySelector('.button-text');
+			if (svg) svg.classList.add('D-n');
+			if (span) span.textContent = 'Copied!';


Перед тем, как менять текст, сохраняем исходный и его же потом восстанавливаем

feat(arts-page): add arts page and fix hero frame

a99235e

mr150 reviewed Jul 22, 2026

View reviewed changes

Comment thread src/_data/navLinks.json Outdated

mr150 reviewed Jul 22, 2026

View reviewed changes

Comment thread src/_data/arts.json Outdated

mr150 reviewed Jul 22, 2026

View reviewed changes

Comment thread src/arts-redesign.ejs Outdated

mr150 reviewed Jul 22, 2026

View reviewed changes

mr150 requested changes Jul 22, 2026

View reviewed changes

oostap1985 added 2 commits July 24, 2026 14:41

fix(arts-page): corrections after review

af19071

refactor(arts-page): reorganize gallery structure and layout

0ab73d1

mr150 reviewed Jul 24, 2026

View reviewed changes

mr150 requested changes Jul 24, 2026

View reviewed changes

oostap1985 requested a review from mr150 July 28, 2026 15:29

fix(arts-page): corrections after review (modal) and restructure gall…

ba6669a

…ery (masonry)

mr150 reviewed Jul 28, 2026

View reviewed changes

mr150 reviewed Jul 29, 2026

View reviewed changes




		<template id="art-card">

Uh oh!

Conversation

oostap1985 commented Jul 20, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 commented Jul 23, 2026

Uh oh!

oostap1985 commented Jul 24, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oostap1985 commented Jul 28, 2026

Uh oh!

oostap1985 commented Jul 28, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mr150 commented Jul 24, 2026 •

edited

Loading

mr150 Jul 28, 2026 •

edited

Loading