XETOWN

분수 광장

특정한 주제 없이 자유로운 이야기를 나눌 수 있습니다.
Extra Form

# 모바일 게시판에서 정상작동 하는 것 확인했습니다.

 

후하니님의 자료를 반응형 레이아웃+모바일에 맞게 수정하려고 고심하다가

 

결국 이런 방식으로 바꿨습니다.

 

* 스티커 모듈: https://www.xetown.com/lakepark/448113

  스케치북 스킨: https://www.xetown.com/lakepark/460899

 

5b832692983c47536ed765a8c6863579.PNG

 

(샘플 이미지가 구려서 죄송합니다;;;;;)

 

1번은 PC 풀사이즈입니다. 가로 폭이 고정된게 아니라 댓글 영역 하단에 꽉 차게 나옵니다. 참고로 저희 사이트는 컨텐츠 영역 950px인데(스티커 영역은 여백제외 880px), 하단 스티커부분의 여백은 이에 맞춰져 있습니다.

 

그리고 상단부분이 저렇게 페이지 나눔이 없이 10개든 20개든 30개든 쭉 다 나옵니다. 가로폭이 목록보다 좁아지면 2번처럼 가로로 스크롤이 됩니다.

 

3번은 모바일에서 보이는 모습입니다. (참고로 저희는 모바일에서도 에디터모드를 사용하기 때문에 에디터 선택버튼이 나오게 했습니다)

 

아무래도 페이지를 나눠서 넘기는 방식은 가로 폭이 딱 정해져야 하고, 직관성이 떨어지기 때문에 좌우 스크롤이 낫다고 생각했습니다.(특히 모바일에서는 더욱)

 

오른쪽에 집 모양과 톱니바퀴 눌렀을 때 현재창으로 뜨는 것이 다소 불편해서, 새 창으로 뜨도록 했습니다.

 

그리고 이 모듈은 회원가입한 사람만 스티커를 구매하고 사용 가능하기 때문에, 비회원에게는 스티커 버튼 자체가 노출되지 않도록 했습니다.

 

적용은 첨부된 압축파일을 풀어서 덮어씌우면 되는데, 스티커 모듈에서도 한가지 수정이 필요합니다.

 

모듈 폴더를 보시면 sticker.model.php 파일이 있는데, 해당 파일 47번째 줄을 보시면 다음과 같은 항목이 있습니다.

$list_count = Mobile::isMobileCheckByAgent() ? 5 : 12;

 

이걸 다음과 같이 바꿉니다.

$list_count = 9999;

 

(굉장히 무식한 방법인데.. 혹시 이거 말고 더 좋은 방법을 알고 계시는 분이 계시면 도움 좀 부탁드립니다.)

 

혹시 귀찮을까봐 해당 파일도 같이 첨부하도록 하겠습니다. (첨부파일 확장자 phps -> php 로 바꿔야 합니다)

 

sticker.model.phps sketchbook5.zip

 

또한, 적용 후에 혹시 우측 홈/설정 버튼의 위치가 이상할 경우, sticker.js 파일을 열고 "right:58px" 이라고 검색하면 뭔가 나오는데, 이 "58"과 그 아래 "18"이라고 되어 있는 부분을 사이트 디자인에 맞게 적절히 수정하면 됩니다. 수정시에는 40px의 차이가 나게 수정해야 합니다. (예: 60/20)

 

-----

 

알림센터와 컨텐츠 위젯에 스티커 댓글이 "{@sticker:숫자|숫자}" 이런 식으로 못생기게 나오는 걸 발견해서 수정했습니다.

 

알림센터(라이믹스 17.02.07. 최신버전 기준, 버전 3.1): ncenterlite.zip

 

컨텐츠 위젯: content.zip

 

 

* 알림센터 참고: https://github.com/rhymix/rhymix/commit/bcb29cf26f5a1e2cfa00c090a5b824b292a9d95b

 

$args->target_summary = cut_str(trim(utf8_normalize_spaces(strip_tags($content))), 50) ?: (strpos($content, '<img') !== false ? lang('ncenterlite_content_image') : lang('ncenterlite_content_empty'));

이 구문을

 

$args->target_summary = strpos($content, 'sticker') === 2 ? lang('ncenterlite_sticker_comment') : (cut_str(trim(utf8_normalize_spaces(strip_tags($content))), 50) ?: (strpos($content, '<img') !== false ? lang('ncenterlite_content_image') : lang('ncenterlite_content_empty')));

이렇게 바꾸고 lang 파일에 'ncenterlite_sticker_comment' 추가했습니다.

 

 

* 컨텐츠 위젯 참고: https://www.xetown.com/qna/494632 ($lang->sticker 이게 어딘가에서 쓰이고 있는거 같길래 'sticker_comment'로 변경했습니다.)

 

 

-----

 

스티커 모듈의 기본 스킨을 모바일 및 반응형에 좀 더 알맞게 수정했습니다.

 

모바일에서 목록 리스트와 본문 페이지의 이미지가 좀 더 작게 나오도록 했고, 여백을 조절해서 작은 화면에서 좀 더 좋게 나오도록 수정했습니다.

 

또한 스티커 설정 페이지도 모바일에서 좀 더 보기 좋게 수정했습니다.

 

default.zip

  • profile
    희스깅 2017.02.06 22:34:13
    모바일에선 스티커버튼 출력이안되네용
  • ?
    기븐 2017.02.06 23:14:30
    왜 안되는지 모르겠네요. 일단 저희는 반응형이라서 PC 그대로 나옵니다만 일단 이론적으로는 모바일에서도 나와야 정상인데..
  • profile
    Novelic 2017.02.06 23:51:46
    지금 외부 환경이라서 기븐 님의 파일로는 확인하지 못했습니다만, 이전 후하니 님 스킨도 사이트가 별도의 모바일 스킨과 레이아웃을 사용하고 있는 상태(/index.php?m=1), 즉 board/skins가 아니라 board/m.skins에 업로드 된 스킨을 사용하고 있을 시에서는 출력이 되지 않았습니다.
  • ?
    기븐 2017.02.07 00:02:33
    음 그렇다면 이쪽 문제가 아니라 스티커 모듈 자체의 문제일거 같기도 한데.. 일단 sticker.css나 js 파일에는 문제가 없는 거 같거든요. 정확한 건 아닙니다만..

    좀 더 알아봐야겠네요.
  • ?
    기븐 2017.02.07 21:38:34

    방금 확인결과, 별다른 조치를 하지 않아도 모바일에서 잘 나오네요.(m.skins 폴더에 올린 게시판 스킨으로 확인)

    다만 제 실수로 커스텀한 내용을 빼먹어서 디자인이 틀어지네요. 해당 부분 추가해서 다시 올리겠습니다.

  • ?
    기븐 2017.02.06 23:13:10

    확인결과 대댓글 창의 경우 창 넓이가 더 넓게 되어 있어서 우측 아이콘 레이아웃이 약간 틀어지네요.

    board.css에서 re_cmt 검색 후에 나오는 "margin:15px -2px 0;" 이 부분을 "margin:15px 3px 0;" 이렇게 고쳐주면 댓글 창과 넓이가 거의 같아져서 해결되네요.

     

    그리고 아마 댓글에서 프로필 이미지 사용하는 사이트의 경우 약간 달라질겁니다. 수동으로 조절하셔야..

  • ?
    기븐 2017.02.07 00:00:29
    약간 문제를 발견해서 수정합니다. 스티커를 하나도 구매하지 않았을 경우 목록이 못생기게 나오길래 최소 높이값을 지정했습니다.

    수정된 파일은 sticker.css 입니다.
  • ?
    기븐 2017.02.07 18:31:28
    sticker.js 파일에서

    "너무 빠른 시간동안 이모티콘을 등록할 수 없습니다." 문구를
    "너무 빠른 시간동안 스티커를 등록할 수 없습니다." 로 바꿨습니다.
  • ?
    기븐 2017.02.07 22:58:25

    수정한 board.css 파일과 스티커모듈 기본 스킨에서 변경한 파일들 모아서 전부 새로 업로드했습니다.


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
화제의 글 자유 xe푸시앱에 치명적인 오류가 발견되어 알려드립니다. 7 단희아빠 2017.03.15 252
4573 자유 혹시 LG 38인치 울트라 와이드 모니터 사용해보신 분들 계신가요? 10 DevinLee 2017.02.07 123
4572 이슈/토론 스케치북 스킨의 보안 이슈 패치가 있으니...확인하시고 패치하세요. 3 착한악마 2017.02.07 173
4571 유머/엽기 디자이너의 짜증나는 상황....ㅠㅠ 8 file 아파치 2017.02.07 171
» 자유 후하니님 스티커모듈(스케치북 게시판 적용버전) 디자인 약간 수정해 봤습니다 (+알림센터, 컨텐츠위젯 호환 추가) (모바일 수정 추가) 9 file 기븐 2017.02.06 204
4569 자유 접속 테스트 좀 부탁드립니다.. 10 육식염소 2017.02.06 139
4568 자유 설마 페이지에 아무것도 없는거 아냐!? 1 file 웹지기 2017.02.06 120
4567 유머/엽기 디자이너가 야근 하는 이유 12 file 아파치 2017.02.06 178
4566 자유 회원가입의 기본 포인트는 없나요???ㅜㅜ 2 주피터3837 2017.02.06 84
4565 이슈/토론 커뮤니티 만들때 xe가 그누보드보다 어떤 점이 매력있다고 보세요? 16 둥둥 2017.02.05 299
4564 자유 청소 하다 usb를 발견했는데요... 우리아기 2017.02.05 133
4563 자유 모듈 관리자 페이지 디자인 개편 작업 완료했습니다. 18 file 구름이 2017.02.05 231
4562 자유 오래간만에 왓습니다 ^^ 2 file 언션 2017.02.05 92
4561 자유 설문: 프로그래밍 개발 경력이 다들 어떻게 되시나요? 6 칼럼 2017.02.04 147
4560 자유 비회원이 관리자에게 쪽지 보내는 모듈 제작중.. (Feat. 요즘 XE개발 계획) 1 file 람보 2017.02.04 126
4559 자유 XE 개발자는 채용 자체가 거의 없나보네요. 12 GG 2017.02.03 257
4558 자유 비보안 비밀번호 모음으로 인해 Chrome 56에 경고가 표시됩니다. 17 file 라엘 2017.02.02 195
4557 자유 반갑습니다.ㅎㅎ 3 크로스 2017.02.02 66
4556 자유 RPGMV와 XE의 연동... 8 ExtendKR 2017.02.02 171
4555 자유 12시 땡 하고 출책을 어떻게들 하시는건가요? 6 우리아기 2017.02.02 122
4554 자유 코딩이나 라이브로 요즘 바빠 생방송 시간못지키는중..(라이브중이에요 놀러오실분) 람보 2017.02.01 68
Board Pagination Prev 1 ... 13 14 15 16 17 18 19 20 21 22 ... 246 Next
/ 246
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...