Мое предложение для панели Темы/Компоненты (CSS внутри)

Внести вклад UX
1

Я не был большим поклонником старой панели Темы/Компоненты (https://forum.alltiago.com/admin/customize/components), но она была вполне удобной с точки зрения пространства и организации (в какой-то степени). Однако новая, на мой взгляд, — это полный хаос.

Вот мой вариант улучшения:

SCR-20250324-ihkz
SCR-20250324-ihkz979×712 60.5 KB

… мне не нравится крошечный и тесный блок слева, а также скрытие слова «Компоненты» (возможно, это проблема только моего 13-дюймового экрана, но, может быть, у других та же проблема?), да и поведение прокрутки…

… до этого:

SCR-20250324-igwu
SCR-20250324-igwu969×1427 72.6 KB

image
image977×513 29.7 KB

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

SCR-20250324-ihsg
SCR-20250324-ihsg965×150 6.92 KB

Я также убрал лишний заголовок, изображение и избыточную кнопку «Установить» (теперь она одна вместо двух), выровнял ссылки по левому краю и увеличил их ширину, чтобы избежать переноса строк.

image
image558×211 11.8 KB

Вот CSS:

/* Админка — более широкая панель тем/компонентов */
.desktop-view .admin-customize .themes-list,
.desktop-view .admin-customize .show-current-style{
    width: 98%;
}

/* Админка — отступ сверху для содержимого компонента */
.desktop-view .admin-customize .show-current-style {
    margin-top: 3rem;
}

/*Админка — убрать прокрутку контейнера компонентов */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

/* Админка — скрыть H1, кнопку «Установить», изображение */
.admin-contents.admin-customize.admin-customize-themes .content-wrapper h1,
.admin-contents.admin-customize.admin-customize-themes .content-wrapper div.create-actions,
.admin-contents.admin-customize.admin-customize-themes img {
    display: none;
}

/* Админка — настроить нижние ссылки */
.admin-contents.admin-customize.admin-customize-themes .admin-intro {
    margin: 2rem 0 0;
}

.admin-contents.admin-customize.admin-customize-themes .admin-intro .content-wrapper {
    width: 100%;
}

/* Админка — фон для неиспользуемых компонентов (красный) */
.admin-customize .themes-list-container__item.inactive-theme {
    background-color: #3f2525;
}

.admin-customize .themes-list-container__item.inactive-theme:hover {
    background-color: #573535;
}

Я не очень хорошо разбираюсь в CSS, поэтому не знаю, насколько это хорошо, но работает. Этот фрагмент я попросил сгенерировать ChatGPT:

/*Админка — убрать прокрутку контейнера компонентов */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

Если есть что-то избыточное или что-то ещё, пожалуйста, поделитесь, чтобы я мог обновить код.

2 лайка
2

На самом деле всё наоборот.

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

2 лайка
3

Мои определения «старый» и «новый» были связаны с хронологией. «Новый» означал «то, что видно сейчас», даже несмотря на то, что я понимал, что это старая версия. Я просто не хотел усложнять понимание для тех, кто не в курсе ситуации.

2 лайка