Please share your CSS! It would make a fix to the TC easier.
here is a rather hacky way to do it (in common/css, NOT /mobile/css)
@use "lib/viewport";
@include viewport.until(md) {
.d-header:not(:has(.extra-info-wrapper.topic-info-visible)):not(:has(.extra-info-wrapper .topic-link)):not(.header-topic-info-visible) .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
}
there is probably a more elegant way but the header bar is challenging to change things like placement and order of items, (thus i won’t do a PR). Also this component is still using the deprecated /mobile folder path and needs to be updated to viewport adjusted code.
2개의 좋아요
apologies, I haven’t gotten around to keeping this component exactly up to date, but yes, the move away from mobile/desktop views definitely broke some of the assumptions the original theme component made.
@Lilly thanks for the nudge forward on this, position absolute would do the trick in the time being… the reordering of items on the component here is just doing a simple CSS grid solution instead
2개의 좋아요
Hey everyone just following up, Lilly did a bunch of work in cleaning this up and getting this up to date - I just merged her changes so this should be good to go now
https://github.com/featheredtoast/discourse-left-menu-theme-component/pull/7
4개의 좋아요
안녕하세요 @featheredtoast. 접이식 폰과 일부 태블릿의 뷰포트 크기에서 Horizon 테마의 헤더 문제를 수정하기 위해 PR을 올렸습니다.
확인해 주시고 머지해 주시면 감사하겠습니다:
5개의 좋아요
좋아 보이네요 - 한번 해봐요, @Lilly 감사합니다!
2개의 좋아요
토픽 내에서 위로 스크롤하여 헤더가 변경될 때(토픽 이름과 카테고리를 표시하도록), 새로 표시되는 헤더에는 햄버거 아이콘이 없습니다. 왼쪽에 햄버거 아이콘이 존재할 경우 포럼 아이콘의 위치가 바뀌게 됩니다. 포럼 아이콘의 오른쪽에 햄버거 아이콘을 배치하는 옵션을 제공하면 어떨지 궁금합니다. 이렇게 하면 두 유형의 헤더 모두에서 포럼 아이콘의 위치가 동일하게 유지될 것입니다. 감사합니다.
P.S. 데스크톱 환경에서 테마 구성 요소가 없는 경우, 햄버거 아이콘이 항상 그대로 유지되는 것을 방금 알게 되었습니다. 모바일에서도 이 기능을 옵션으로 제공할 수 있을지 궁금합니다.
개인적으로는 이 변경 사항에 반대합니다(아마 @featheredtoast는 다른 의견을 가질 수도 있겠지만요). 전체적인 아이디어는 데스크톱 뷰와 일관성을 유지하고 로고 앞에 해당 요소를 배치하는 것이기 때문입니다. 하지만 필요하다면 포럼의 다른 테마 컴포넌트에 아래 CSS를 추가하여 항목 순서를 오버라이드할 수 있습니다.
.d-header {
display: grid;
grid-template-areas: 'logo left-menu custom-header-icon-link-1 custom-header-icon-link-2 custom-header-icon-link-3 custom-header-icon-link-4 custom-header-icon-link-5 extra-info chat header-buttons search right-menu'!important;
}
결과:
긴 토론 제목을 위해 모바일에서 스크롤된 헤더의 공간을 최대한 확보하려면, 모바일에서 스크롤된 헤더에 버거 아이콘을 표시하지 않아야 합니다
5개의 좋아요
여기서 @Lilly님과 같은 의견을 가지고 있습니다. 목표는 왼쪽의 햄버거 메뉴를 다른 앱처럼 느끼게 하는 것이었습니다… 점프는 이미 기본 경험에서 그렇게 하고 있었기 때문에 제가 최적화한 부분이 아닙니다.
그녀가 보여준 것처럼 그리드로 배치되면, 여기 기본 테마 컴포넌트에서 최소한의 입력으로 모든 요소의 위치를 업데이트하기가 쉽습니다.
충분한 수요가 있다면 PR을 환영하지만, 현재로서는 이러한 요청에 대해 처음 듣는 것입니다.
4개의 좋아요
그렇습니까?
데스크톱에서는 (기억이 정확하진 않지만) 햄버거 아이콘이 항상 포럼 아이콘 왼쪽에 남아 있어서 "점프"가 없습니다.
모바일에서는 포럼 아이콘을 제외한 모든 것이 대체되므로 점프가 없습니다.
1개의 좋아요
님의 테마 컴포넌트를 사용하기 시작했는데(공유해 주셔서 감사합니다!), 모든 것을 최대한 깔끔하게 유지하려는 우리의 UI/UX 철학에 맞추기 위해 모바일에서 메인 아이콘을 비활성화했습니다.
1개의 좋아요
