我对主题/组件面板(内部包含CSS)的建议

我不喜欢旧的主题/组件面板(https://forum.alltiago.com/admin/customize/components),但它在空间和组织方面(有点)足够好。但新的面板简直是一团糟,恕我直言。

这是我的替代方案,从这个:

……我不喜欢左边那个又小又挤的盒子,以及隐藏的“组件”一词(也许这只是我 13 英寸屏幕的问题,但也许其他人也有同样的问题?),还有滚动行为……

……到这个:

更多的空间,没有滚动条,禁用的组件更容易看到,背景是偏红色的。当你将鼠标悬停在上面时,它会稍微变亮:

我还删除了那个额外的标题、图片和多余的“安装”按钮(现在只有一个而不是两个),并将链接对齐到左侧并给了它们额外的宽度以避免换行。

这是 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 个赞