계정 생성 폼에서 전체 이름 필드 숨기기

개발
1

팀 여러분께,

아래와 같이 그리드 레이아웃을 사용하여 Discourse의 일반 계정 생성 양식을 커스텀했습니다:

image
image828×555 24.9 KB

현재 다음 SCSS를 사용하여 전체 이름(full name) 필드를 숨기고 있습니다:

.d-modal.create-account .login-form {
   form{
        .input-group:nth-child(3)
            display:none !important;
        }
   }
}

아래에 언급된 input-group div에는 고유한 클래스가 없으므로 nth-child 선택자를 사용하여 전체 이름 필드를 숨기고 있습니다:

하지만 이제 Google Oauth2 로그인을 활성화했는데, 이 경우 전체 이름 필드가 4번째 위치에 있습니다. 따라서 현재 CSS는 아래에 보이는 것처럼 인증 제공자(Auth provider)의 계정 생성 양식을 깨뜨립니다:

image
image826×574 28.3 KB

CSS를 사용하여 현재 양식이 일반 계정 생성 양식인지, 아니면 인증 제공자(예: Google Oauth2) 양식인지를 어떻게 식별할 수 있을까요? 그러면 필드에 따라 CSS를 적절히 적용할 수 있을 것 같습니다.

비밀번호(Password) 필드도 비슷한 문제가 있습니다.

감사합니다,
Saurabh

2

CSS의 :has 선택자가 사용 사례에 적합할 수 있습니다:

.input-group:has(#new-account-name) { ... }
3

답변 감사합니다.
하지만 :has 셀렉터가 작동하지 않습니다.

9

이건 PM으로 조금你来我去했는데, 결국 계정 생성 모달에 클래스가 추가되었습니다. :partying_face: :balloon: