이전 테마/컴포넌트 패널(https://forum.alltiago.com/admin/customize/components)은 크게 좋아하지 않았지만, 공간 활용이나 구성 방식(그럭저럭)은 괜찮았어요. 하지만 새 패널은 제 생각엔 정말 엉망이에요.
다음과 같이 변경하는 제 대안을 공유합니다:
… 왼쪽의 작고 좁은 박스, 'Components’라는 단어의 숨김 처리(이건 제 13인치 화면만의 문제일 수도 있지만, 다른 분들도 같은 문제를 겪고 있을까요?), 그리고 스크롤 동작이 마음에 들지 않아요.
… 다음과 같이 변경합니다:
더 넓은 공간, 스크롤바 제거, 그리고 빨간색 계열의 배경으로 비활성화된 컴포넌트를 더 쉽게 구별할 수 있습니다. 마우스를 올리면 배경이 조금 더 밝아져요:
또한 불필요한 헤딩, 이미지, 그리고 중복된 설치 버튼(이제 2개 대신 1개만 있음)을 제거하고, 링크를 왼쪽으로 정렬했으며 줄바꿈을 방지하기 위해 폭을 넓혔습니다.
CSS는 다음과 같습니다:
/* Admin - wider theme/component panel */
.desktop-view .admin-customize .themes-list,
.desktop-view .admin-customize .show-current-style{
width: 98%;
}
/* Admin - margin top component's content */
.desktop-view .admin-customize .show-current-style {
margin-top: 3rem;
}
/*Admin - remove scroll on components' container */
.admin-customize .themes-list-container {
overflow-y: visible;
max-height: none;
height: auto;
}
/* Admin - hide H1, Install button, image */
.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 - adjust bottom links */
.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 - unused components' background (red) */
.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 - remove scroll on components' container */
.admin-customize .themes-list-container {
overflow-y: visible;
max-height: none;
height: auto;
}
중복되거나 개선할 부분이 있다면 자유롭게 공유해 주세요. 그러면 코드를 업데이트하겠습니다.