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
번호 분류 제목 글쓴이 날짜 조회 수
화제의 글 자유 출석부 관련 비밀을 풀어드릴께요 7 file 더딘하루 2017.05.17 206
화제의 글 자유 난리가 났네요 16 제이엔지 2017.05.15 383
4499 자유 추억의 DOS 게임을 온라인에서 9 file DevinLee 2017.02.08 170
4498 자유 사이트를 완전 엎고 새로 만들고 싶어지실 땐 어떻게 하시나요? 8 피피포 2017.02.08 161
4497 자유 가입했습니다. 6 이나 2017.02.08 79
4496 자유 구글의 인공지능으로 모자이크 없앤다?! 11 file CONORY 2017.02.08 247
4495 유머/엽기 대박! 기아 슈퍼볼 광고.... 4 아파치 2017.02.08 119
4494 자유 개인적으로 만든 사이트가 슬슬 안정 궤도에 올라가니 기분이 좋네요. 33 RADIX 2017.02.07 307
4493 자유 노트북이 왜 계속 멈추는걸까요 ㅜㅜ 4 file 매미맴맴 2017.02.07 112
4492 자유 혹시 LG 38인치 울트라 와이드 모니터 사용해보신 분들 계신가요? 10 DevinLee 2017.02.07 142
4491 이슈/토론 스케치북 스킨의 보안 이슈 패치가 있으니...확인하시고 패치하세요. 3 착한악마 2017.02.07 197
4490 유머/엽기 디자이너의 짜증나는 상황....ㅠㅠ 8 file 아파치 2017.02.07 188
» 자유 후하니님 스티커모듈(스케치북 게시판 적용버전) 디자인 약간 수정해 봤습니다 (+알림센터, 컨텐츠위젯 호환 추가) (모바일 수정 추가) 9 file 기븐 2017.02.06 241
4488 자유 접속 테스트 좀 부탁드립니다.. 10 육식염소 2017.02.06 145
4487 자유 설마 페이지에 아무것도 없는거 아냐!? 1 file 웹지기 2017.02.06 134
4486 유머/엽기 디자이너가 야근 하는 이유 12 file 아파치 2017.02.06 199
4485 자유 회원가입의 기본 포인트는 없나요???ㅜㅜ 2 주피터3837 2017.02.06 97
4484 이슈/토론 커뮤니티 만들때 xe가 그누보드보다 어떤 점이 매력있다고 보세요? 16 둥둥 2017.02.05 381
4483 자유 청소 하다 usb를 발견했는데요... 우리아기 2017.02.05 144
4482 자유 모듈 관리자 페이지 디자인 개편 작업 완료했습니다. 18 file 구름이 2017.02.05 270
4481 자유 오래간만에 왓습니다 ^^ 2 file 언션 2017.02.05 101
4480 자유 설문: 프로그래밍 개발 경력이 다들 어떻게 되시나요? 6 칼럼 2017.02.04 165
Board Pagination Prev 1 ... 34 35 36 37 38 39 40 41 42 43 ... 263 Next
/ 263
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...