로그인

검색

Extra Form
추천지수 6

게시판 마다 게시글 본문 외 확장변수로 입력을 받는 경우가 있습니다. 한줄입력,이메일,전화번호,url 등 다양한 입력을 받을 수 있는데요. 이 입력란의 디자인이 라이믹스 2.0.15 업데이트 후 틀어지는 경우가 있을 겁니다. 

 

경우에 따라서는 디자인 외 기능이 작동하지도 않을 수 있습니다.

 

이유는 해당 입력 input의 타입이 모두 text 에서 개별적인 특성에 맞춰 세분화 되어 새롭게 변경이 되었기 때문입니다.

 

각 입력항목에 맞춰 디자인을 다르게 하거나 할경우  input의 type="text" 이 값에 의존하여 이 항목에 일괄적으로 css name을 추가하거나 기능을 제어했던 스킨들의 경우 text 타입을 버리고 새로운 type으로 변경된 이메일,전화번호,url 등에는 기존의 의도했던 css name이 추가되지 못하고 또 해당 클래스로 제어했던 부분도 제어하지 못하게 됩니다.

 

그리고 해당 변경사항을 적용하면서 text 타입의 경우 기존에 부여했던 class 명 "text" 가 누락되는 버그가 생겼습니다.

https://github.com/rhymix/rhymix/issues/1791

 

해당 이슈로 인해 위 버그는 개발자 버전에서는 해결이 되었습니다.

 

 

일단 input의 타입이 변경이 되면서 기존방식으로 css name 추가가 불가능해지거나 혹은 css의 기준이 되는 것에서 제외되는 스킨들은 변경된 type의 class로 새롭게 디자인이 적용되도록 css에 추가해주거나  js 에서 추가를 해주어야 합니다.

 

스케치북 스킨의 경우는 기존에 .itx 라는 클래스를 input type "text" 를 가지면 추가가 되도록 js에서 컨트롤 하고 있었습니다.

text 타입을 잃게 된 나머지 타입에도 .itx 가 부여가 되도록 조치를 해주어야 합니다.

 

/modules/board/skins/sketchbook/js/editor.js

 

파일을 열어보시면

 

// Extra Form
    var ex = $('.bd .exForm');
    ex.find('input[type=text]').addClass('itx');
    ex.find('input[type=button]').addClass('bd_btn');

 

 

위와 같이 itx 를 추가해 주는 코드가 있는데 여기에 새로운 타입을 추가해 줘야 합니다.

 

// Extra Form
    var ex = $('.bd .exForm');
    ex.find('input[type=text]').addClass('itx');
    ex.find('input[type=url]').addClass('itx');
    ex.find('input[type=tel]').addClass('itx');
    ex.find('input[type=email]').addClass('itx');

    ex.find('input[type=button]').addClass('bd_btn');

 

 

화면 캡처 2021-09-29 143735.png

 

 

제가 파악한 바로는 일단 3가지 타입 정도만 추가를 해주면 현재로선 기존에 의도된 디자인에서 틀어지는 것이 없는 것 같습니다. 새롭게 발견이 된다면 조치를 쉽게 할 수 있을 겁니다.

 

 

스케치북과 같이 js에서 따로 컨트롤 하는 것이 없다면 css 파일을 열어서 

.text 로 컨트롤 했던 부분 중 이번에 타입이 변경되어 코어에서 기본으로 제공하던 .text 클래스명을 가지지 못하는 것들에 대응을 해줘야 합니다.

이번 패치로 기본스킨에 적용되는 부분을 참고하시면 됩니다.

 

https://github.com/kijin/rhymix/commit/9b5ebb3a797ccc941e9222675a13e9d1f7ef36b3

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
4 추천
Atachment
첨부 '0'

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Flex 레이아웃 로그인 오류 메시지 안뜨는 문제 해결

    Date2021.01.31 Category오류 Views252 Votes3
    Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
Prev 1 2 Next
/ 2