모바일 버전에서 배너 링크를 가로로 배치하는 방법

개발
1

모바일 버전의 배너 링크를 세로 대신 가로로 표시할 수 있는 방법이 있을까요? 감사합니다!

Captura de pantalla 2022-03-30 a las 9.42.30
Captura de pantalla 2022-03-30 a las 9.42.30295×521 21.9 KB

2
3

정말 감사합니다. 어떤 이유에선지 제가 그걸 알아채지 못했네요. 완벽하게 작동합니다!

4
5

작은 화면에서 배너의 높이를 낮추기 위해 커스터마이징하는 방법의 예시 코드입니다.
:warning: 테마 커스터마이징의 모바일 탭에 이 코드를 입력하세요!

// Makes the welcome banner adapted to small screen sizes
.below-site-header-outlet.welcome-link-banner-connector {
    .welcome-link-banner-wrapper {
        background-image: url($mobile-banner-bg);
        background-size: cover;
        .welcome-wrapper {
            .featured-banner-link {
                flex-direction: row;
                padding-bottom: 0.5em;
                &>div a {
                    padding: 0 5px;
                    h3 {
                        font-size: 0.75em;
                        white-space: normal;
                    }
                }
            }
        }
    }
}

필요에 맞게 조정할 수 있도록 (이것이 바로 “빈” SCSS 네스트가 있는 이유입니다).

현재 제 프로젝트에서 이 코드를 적용하면 다음과 같은 모습입니다:

image
image375×667 91.8 KB

수정: @Moin이 제 자신의 튜닝을 언급하는 데 저보다 더 빨랐네요… 잘하셨어요 :clap: :smile:

8

환영 배너의 모바일 표시 방식이 크게 개선되었습니다. 어제 신규 사용자가 모바일로 제 사이트에 가입하는 것을 지켜보았는데, 배너가 너무 커서 헤맸습니다. 기본적으로 아래로 스크롤해야 콘텐츠를 볼 수 있다는 사실을 인지하지 못했습니다. 그래서 더 나은 방법을 찾아보던 중, 이 CSS 스니펫은 정말 훌륭했습니다.

background-image: url($mobile-banner-bg);는 포크된 TC에서 가져온 것이 명확하므로 제거해야 했습니다.

@awesomerobot, 이 모바일 개선 사항을 테마 컴포넌트에 추가하는 PR을 고려해 주시겠습니까?

9

물론이죠. PR은 항상 환영합니다.

10

@awesomerobot, 지금까지 해당 사항에 대한 PR을 보지 못했기 때문에, @Canapin이 만든 개선 사항을 추가하고 두 개의 로케일을 더 추가하는 PR을 직접 생성했습니다. :wink:

11

확인해 보니 @team의 요청대로 로케일 변경 사항을 제거하신 것을 확인했습니다. 다만 해당 PR은 이미 닫혀 있어서, 새로운 PR을 하나 열었습니다:

12

최고네요! 언제 병합될 거라고 생각하세요?

13

확신은 없는데, @awesomerobot, 제 PR 괜찮나요?

14

괜찮아, 지금 병합했어. 고마워!

17

좋아요! 하지만 세로 아이콘 문제는 태블릿에서도 발생하므로, 모바일용 사용자 정의 CSS를 단순히 적용하면 화면 크기가 너무 작은 곳에서부터 시작됩니다. 불행히도 Discourse의 사용자 정의 CSS에서는 태블릿을 대상으로 지정할 수 없습니다. 제 해결 방법은 공통 사용자 정의 CSS 탭에 다음 텍스트를 입력하는 것이었습니다.

이것은 태블릿 보기에서 오른쪽에 나타나는 원치 않는 여백을 수정하는 내용도 포함하며, 링크의 글꼴 크기를 1em으로 늘리는 것도 선택했습니다.

@media (max-width: 768px) {
  .below-site-header-outlet.welcome-link-banner-connector {
    .welcome-link-banner-wrapper {
        background-size: cover;
        .welcome-wrapper {
            .welcome-content {
                &>p {
                    max-width: initial;
                }
            }
            .featured-banner-link {
                flex-direction: row;
                padding-bottom: 0.5em;
                &>div a {
                    padding: 0 5px;
                    h3 {
                        font-size: 1em;
                        white-space: normal;
                        }
                    }
                }
            }
        }
    }
}
18

이 정보 감사합니다!
모바일 버전을 테마 컴포넌트에 대해 풀 리퀘스트를 하지 않은 이유는 여러 구성에서 테스트를 하지 않았기 때문이에요. 그리고 당신의 메시지는 모바일 코드가 실제로는 추가적인 작업이 필요하다는 것을 보여주고 있네요 :slight_smile: