RX / XERXE 사용기XpressEngine
조회 수 219 추천 수 5 댓글 50
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 첨부
Extra Form

아, 디자인은 어려워.

귀찮으니까ㅋ 스샷 위주로 설명해보겠습니다.

 

  1. 각주 마커에 마우스오버하면 풍선말이 뜨고 거기에 각주 내용이 나옵니다.
    1.png
    눈썰미 있는 분들은 아시겠지만 스케치북의 풍선말 박스 스타일을 가져왔어요.
    그치만 삼각형은 이미지를 쓰지 않고 CSS로 직접 넣기도 했습니다;;
     
     
  2. 각주 내용에 이미지가 포함되어 있으면 (gif를 제외하곤) 풍선말에 같이 나옵니다.
    2.png
    이미지가 나오면 좀 더 역동적으로 보이겠죠?ㅎㅎ
    gif는 용량 문제도 있고ㅎ 링크라도 있을 경우엔 XE임베드파싱 모듈의 로딩 이미지가 나오기도 해서 뺐습니다.
     
     
  3. 풍선말이 윈도우 화면 바깥으로 나가지 못하게 자동으로 아래로 내려갑니다.
    3.png
    bigfoot.js 스타일을 따라해봤어요.
      
     
  4. 풍선말은 윈도우 측면으로도 빠져나갈 수 없습니다.
    4.png
    어휴, 이거 땜에 시간 무지 걸렸습니다.
    처음엔 풍선말 꼬다리를 풍선말에 pseudo 요소로 넣었었는데, 풍선말이 이동하면 저 놈도 같이 이동을 해버리더라구요.
    그래도 뭐 어떻게 낑낑 대며 해결했습니다ㅎㅎ
     
     
  5. 각주 마커를 클릭하면 각주 내용으로 스크롤 이동하게 되고 배경색이 하이라이트됩니다.
    5.png
    0.8초 후에 다시 투명 처리되니까 저대로 노랗게 있을 거라고 생각 안하셔도 돼요ㅋ
    이동 방식은 옵션이 있습니다.
    브라우저 히스토리에 저장되는 해시 이동도 가능하구요. '뒤로 가기', '앞으로 가기'가 불가능한 그냥 스크롤 이동도 가능합니다.
     
     
  6. 각주 내용 부분이에요. 번호에 신경 좀 썼습니다.
    6.png
    플랫하기보다는 약간 동그스름하지요 ㅎㅎ
     
     
  7. 번호에 마우스오버하면 이렇게 hover 효과가 됩니다.
    7.png
    클릭해보고 싶죠? ㅋㅋ
     
     
  8. 일련번호를 클릭하면 당연히 각주 마커로 이동하게 됩니다. 하이라이트 효과와 함께요 :D
    8.png
     
  9. 뽀너스 : 이번 스타일링으로 다음과 같은 컴포넌트 설정 옵션이 추가됐습니다.
    9.png

 

- 스타일링 실제 적용은 http://bit.ly/2etMIwY 에서 확인하실 수 있구요.

- 자료 다운로드는 https://www.xetown.com/rxe_file/722912 에서 하실 수 있습니다.

  • profile
    웹지기 2017.09.19 21:12:26
    너무 편리하고 예쁘게 버전업 되었네요.
    이렇게 업그레이드 되고 나니 XE임에도 회원과 함께 쓰려고 했던 처음 맘으로 굳어져 갑니다.
  • profile
    윤삼 2017.09.19 22:03:29
    XE에서 일반 회원도 사용할 수 있게 하는 (준)매뉴얼을 조만간 만들어볼게요 ^^/
  • profile
    다이오니 2017.09.19 21:24:42
    이제 완성형에 가깝네요!

    멋져요!
  • profile
    윤삼 2017.09.19 22:04:25
    근데 끝내 완성은 못할 거 같아요.
    브라우저 호환성 문제를 제 수준에선 영 해결을 못할 것 같습니다. 끄응...
  • profile
    GG 2017.09.19 21:36:31

  • profile
    윤삼 2017.09.19 22:06:49

    뭔가 해서 찾아봤네요ㅎㅎ

    GG님 혹시 이런 분이셨어요? 설마.. ㅋㅋㅋㅋㅋ

     

  • profile
    GG 2017.09.19 22:12:52

  • profile
    보고하비 2017.09.19 21:48:57
    해내셨네요 ^^
  • profile
    윤삼 2017.09.19 22:08:34
    해냈다고 하기까진 좀 그렇고, 그냥 구색만 좀 갖췄을 뿐이에요ㅎㅎ
    각주 편집 단계에선 아직 브라우저 호환성 문제가 있어요;;;
  • profile
    보고하비 2017.09.19 22:13:11
    크롬 브라우저에서는 아주 잘되네요 익스는 뭐 그러려니 ^^
  • profile
    윤삼 2017.09.19 22:21:38
    익스도 익스지만, 제가 전문개발자가 아니다보니 파폭이나 사파리 등에서도 테스트는 못해봤어요.
  • profile
    보고하비 2017.09.19 22:28:14
    네 이정도면 전문가죠 ^^ 인정합니다.
  • profile
    윤삼 2017.09.19 22:32:22

    격려 말씀 감사합니다~ ㅎㅎ

  • profile
    보고하비 2017.09.19 22:34:13
    항상 응원할게요 ~~~
  • profile
    VJT 2017.09.19 22:38:12
    대단해요..!
  • profile
    윤삼 2017.09.19 22:52:25
    과찬의 말씀 :)
  • profile
    간장게장 2017.09.19 22:38:25
    오늘 잠자리 일찍 들려다가 스마트폰 xetown 접속했다가 다시 PC 켰습니다. ㅎㅎ
    업데이트 해보지 않으면 안될 것 같아서요 ^^
  • profile
    윤삼 2017.09.19 22:53:15
    작성 편집이야 관리자만 가능하더라도, 조회는 누구나 할 수 있을 테니 써봄직 하실 겁니다 ㅎㅎ
  • profile
    오징 2017.09.19 22:57:34 Files첨부 (1)

    윤삼님 애드온을 기다렸고 윤삼님도 개발하시느라

    삼박사일넘게 고생하셨을꺼라는것도 알지만

     

    라우저 호환성이 문제가 아니네요.

    보여드릴수도 없고 참...

     

    화가 나네요. 설명하신거보고 사이트가서 보는데

    이렇게 2017-09-19_22-51-38.gif 각주번호를 마우스오버해도 안뜨고! 클릭하면 메뉴만

    팅팅 떠버리니!!!!! 하아.......

     

     

    제 점수는요~  100점드리겠습니다.

  • profile
    윤삼 2017.09.19 23:11:23

    심각한 버그군요.
    해당 레이아웃에서 플로팅 버튼의 a태그에 border-radius 설정이 안 돼 있는 모양입니다.
    이 놈의 말도 안 되는 레이아웃 제작자를 잡아다가 얼른 수정하게끔 하겠습니다.
    피드백 감사합니다.

  • profile
    오징 2017.09.19 23:27:07 Files첨부 (1)

    3.jpg

    1
  • profile
    윤삼 2017.09.19 23:44:05 Files첨부 (1)

    0.png

  • profile
    하늘희 2017.09.20 02:39:41
    ㅋㅋㅋ
  • profile
    윤삼 2017.09.20 09:47:13
    어찌나 설레던지ㅋㅋㅋㅋㅋ
  • profile
    오징 2017.09.20 22:41:51 Files첨부 (1)

    진지하게 border-radius를 말씀하셔서.... 세로드립이었는데... 하아....

    anigif.gif

  • profile
    윤삼 2017.09.20 22:53:54 Files첨부 (1)

    엇, 세로드립이네요 진짜ㅋㅋㅋㅋㅋㅋ
    저는 그냥 진지를 가장한 농담인줄 알고 저도 진지한 농담한 거였어요ㅎㅎ
    사실 플로팅 버튼에 border-radius는 이미 들어가 있는 걸요ㅋㅋㅋㅋ

    0.gif

  • profile
    charmingcolor 2017.09.20 00:41:38
    윤삼님의 끊임없는 탐구력은 정말 본받고 싶습니다....
    저는 귀차니즘과 많은 과제물로 인해 불가능데스....
  • profile
    윤삼 2017.09.20 09:44:56
    할 일이 쌓였을 때야말로 잉여력을 뽐낼 좋은 기회죠.
    스릴 만점ㅋㅋㅋㅋㅋㅋㅋ
  • profile
    Chronos 2017.09.20 07:57:42
    고생하셨습니다. (_ _)
  • profile
    윤삼 2017.09.20 09:47:50
    역시 당분간 농땡이 치면서 쉬어야죠ㅎㅎ
  • profile
    구름이 2017.09.20 10:18:26

    수고하십니다.

    바쁜 업무를 끝내고 에디터에서 "가나다라1)" 입력하면 각주 컴포넌트가 열리도록 작업을 해보고 싶네요.
    "가나다라"가 선택되고 "1)"은 사라지던지.. 후처리를 별도로 하면될듯 합니다.

    새창 열리기 차단 해제는 해야 작동 될듯합니다.

    레이어로 출력되면 정말 좋겠네요.

    단축키 기능을 넣어도 좋겠구요.

    P.S 6,7에 예약 모듈이 .. 감사합니다 ㅎ

  • profile
    윤삼 2017.09.20 11:49:22
    우와, 그럼 에디터 자동완성 모듈에서 각주를 지원해주는 셈이 되겠군요!! 영광입니다^^/

    모듈에서 레이어를 활용하시니 레이어로 입력창이 뜬다면 일관성 있고 좋을 것 같습니다ㅎㅎ

    ... 근데 6, 7이 뭐예용?
  • profile
    구름이 2017.09.20 11:59:48
    6.각주 내용 부분이에요. 번호에 신경 좀 썼습니다.
    7.번호에 마우스오버하면 이렇게 hover 효과가 됩니다.

    이부분에 예야모듈이 언급되어서요 ㅋ
  • profile
    윤삼 2017.09.20 12:05:33
    ㅋㅋㅋㅋㅋ PPL 됐네요 :D
  • profile
    웹지기 2017.09.20 10:20:25

    각주이동속도 설정 값이 동작을 안해서 살펴보다가 애드온을 열어보니 이 값을 가져오는 코드가 없는데요. 이설정값은 컴퍼넌트에서 직접 처리하나요? 

     

    앗, 찾았습니다. 역시 컴퍼넌트에 있었네요!

  • profile
    웹지기 2017.09.20 10:34:07
    if(!$ap_footnote_velocity || !is_numeric($ap_footnote_velocity) || $ap_footnote_velocity < 1)
    {
    $ap_footnote_velocity = 1;
    }


    이 조건때문에 무조건 1로 설정되는 듯 하네요. js에서 값을 직접 주면 그 값의 속도로 잘 이동되네요.
  • profile
    웹지기 2017.09.20 11:06:31
    저희 모바일에서 하일라이트 표시 안되는 문제가..

    저희 플랫모바일 스킨을 사용하는 곳은
    <section class="flatBoard">

    <section>

    로 보드 전체가 감싸져 있는데요.

    이 안에 다시 각주부분이
    < section> 으로 자리를 하고 있어 하일라이트 해야 할 곳을 못찾는건 아닌지 궁금하네요.
  • profile
    윤삼 2017.09.20 11:42:09
    컴포넌트 설정에서 속도가 안 먹던가요? 이건 저도 테스트를 해본 부분인데... 저녁 늦게쯤에나 다시 확인해볼 수 있을 것 같습니다.

    section 태그는 문제가 안 될 것 같아요. 하이라이트 타겟 잡을 때 제 기억으론 data-footnote-id로 잡아놨던 거 같거든요(벌써 기억이 가물가물ㅠ). 그게 아니라 해도 class 이름으로 잡았을 것이기 때문에 다른 지점에서 문제가 있는 게 아닐까 싶어요.

    아, 그리고 신규 입력되는 각주는 xe의 html5 지원 문제 때문에 (웹지기님을 위해ㅋ) section이 아니라 그냥 div로 입력되게 해놨어요.
  • profile
    웹지기 2017.09.20 11:45:15
    네. 속도는 설정값이 안먹더라구요. 그래서 일단 저희는 js에 직접 숫자로 넣었어요.
    id로 잡으셨더라구요.

    div로 바꾸셨군요. 바뀐거로 저희도 바꿔봐야 겠네요. 변화는 없겠지만요 ㅋ
  • profile
    윤삼 2017.09.21 01:44:22
    /modules/editor/components/ap_footnote/ap_footnote.class.php 에서
    28행을
    $ap_footnote_velocity = $component_info->extra_vars->velocity->value;
    으로 바꿔주세요;;
    제가 변수를 옮기는 과정에서 수정을 마저 못했었네요ㅜ

    if(!$ap_footnote_velocity || !is_numeric($ap_footnote_velocity) || $ap_footnote_velocity < 1)
    {
    $ap_footnote_velocity = 1;
    }
    이 부분은 다시 1로 해두시구요^^
  • profile
    간장게장 2017.09.20 13:25:16 Files첨부 (1)

    컴포넌트 문제는 아닌 것 같습니다만, 

    제가 사용하는 Cozy Home 게시판 스킨에서는 아래처럼 p 태그로 인해 정렬이 어그러지는군요.

    아마도 p 태그에 위마진을 준 것 때문인 것 같기는 한데.. 사이트 글 전체가 이걸 전제로 작성된 거라 포기하기도 어렵네요. ㅜ.ㅠ

    gag_1.jpg

    현재는 그냥 수작업으로 p 태그 지워서 사용하고 있습니다.

     

     

    참고로 휴리파파님 APLOS 게시판 스킨에서는 아주 약간만, 표시나지 않을 정도로만 어그러지네요.

  • profile
    웹지기 2017.09.20 13:48:01
    이런경우는 해당 자료의 CSS를 수정해서 사용하시면 됩니다.
  • profile
    간장게장 2017.09.20 13:51:24
    사실 잘 모르는 상황에서 여러 곳 고쳐 놓으니 나중에는 어디를 어떻게 고쳤는지 몰라 애를 먹는 경우가 있더군요.
    다들 훌륭한 것들 제공해 주시는데 사용자가 서툴러서.. ㅎㅎ
  • profile
    윤삼 2017.09.20 13:50:25
    p태그에 그렇게 윗여백을 주는 경우는 드물 텐데, 스킨 두 개나 그렇다니;;;
    일단 임시로 common/ap_footnote.css에서 p태그 여백 처리를 해보시고 패치 결과 알려주시면 다음 버전 css에 적용하도록 하겠습니다.
  • profile
    간장게장 2017.09.20 13:52:14
    개인적인 성향 때문에 윗여백을 그렇게 줘 버렸네요..
    문단이라는 이미지 때문에..

    감사합니다.
  • profile
    웹지기 2017.09.20 13:57:00

    .fn_cnt ol > li p{ margin:0 } 또는 .fn_cnt ol > li p{ margin:0 !important;} 를
    보드 스킨의 css에 넣으시면 됩니다.

    사용하시는 보드스킨의 css에서 문서 안의 모든 p에 margin-top 값을 주어서 그렇습니다.

     

  • profile
    간장게장 2017.09.20 16:52:57
    늘 도움 감사합니다. ㅎ
    멋지십니다. ^^
  • profile
    윤삼 2017.09.21 01:59:42
    말씀하신 부분 반영해서 0.3.1로 업데이트 했습니다.
    올리고 나니 p태그에 !important를 줄 걸 하는 생각이 들었는데, 잘 적용되려는지 모르겠네요.
  • profile
    위파 2017.09.21 10:54:46
    대단하십니다.~!!
  • profile
    윤삼 2017.09.21 11:59:32
    많이 부족한 자룝니다ㅎㅎ

서버에 요청 중입니다. 잠시만 기다려 주십시오...