개요

평소에는 ReactNative에서 iOS 앱을 개발, 개선하고 있습니다.

이번은, qiita로 기사를 쓰기에 있어서 자신이 가지고 있는 기술에 대해 현재 무엇이 qiita로 받고 있는지 사전에 해당 기술의 태그의 일람(예: 자바스크립트 )을 조사하고 나서 그리기 시작하지만, 이 일람의 페이지 전환이 다루기 어려웠기 때문에, 자신이 개발 운영하고 있는 서비스의 UI 개선 등에 활용할 수 있도록 메모를 공유한다

현재 상태

사이트에 들어간 직후


페이지 네이션에 주목하는 동작


위에서 설명한 것처럼 다음 페이지를 누르면 뒤로 링크가 나타나고 페이지에 눌려지도록 페이지 네이션 영역이 오른쪽으로 이동합니다.
그 결과, 다음 페이지 링크도 어긋나 버려 뒤로 링크가 나오는 2 페이지 이후 같은 위치에서 클릭할 수 없게 그 어긋남에 대응하는 위치에 커서를 움직이지 않을 것을 추격하지 않게 되어 버린다

아래에 해당 HTML을 기술한다

first_page_.html

<ul class="st-Pager">

   <li class="st-Pager_count"><span>1 / 2935</span></li>
   <li class="st-Pager_next">
       <a class="st-Pager_link" rel="next"><span class="fa fa-angle-right"></span></a>
   </li>
</ul>

next_page_.html

<ul class="st-Pager">
   <li class="st-Pager_prev">
      <a class="st-Pager_link" rel="prev">
        <span class="fa fa-angle-left"></span>
      </a>
   </li>
   <li class="st-Pager_count"><span>2 / 2935</span></li>
   <li class="st-Pager_next">
       <a class="st-Pager_link" rel="next"><span class="fa fa-angle-right"></span></a>
   </li>
</ul>

이 두 가지를 비교하면 li.st-Pager_prev가 새로 출현하고 있음을 알 수 있습니다.

해결안

해결책으로 미리 1페이지에서도 돌아오는 링크를 출현시키는 것이 qiita의 css를 보고 바로 해결할 수 있는 방법이라고 느꼈다

아무래도 justify-content: center의 사양이 원래 이 css를 설정한 태그를 중심으로 두는 것에 특화한 설계인 것 같고, 태그가 폭이 변화했을 때와 같이 중앙도 변화해 가는 것이 원인이다 다

즉 처음부터 변화시키지 않는 전제로 디자인해 나가는 것이 해결에의 최단 거리가 아닐까 생각하고 있다

proposal_first.html

<ul class="st-Pager">
   <li class="st-Pager_prev">
      <a class="st-Pager_link disabled" rel="prev">
        <span class="fa fa-angle-left"></span>
      </a>
   </li>
   <li class="st-Pager_count"><span>1 / 2935</span></li>
   <li class="st-Pager_next">
       <a class="st-Pager_link" rel="next"><span class="fa fa-angle-right"></span></a>
   </li>
</ul>

위 HTML은 first_page_.html로 돌아가는 링크를 추가시킨 구성으로 되어 있다
그 뒤로 링크의 클래스에 새롭게 disabled를 추가했다.

paginate.css

a.disabled{
   pointer-events: none;
}

이제 첫 페이지에있는 뒤로 링크가 눌리지 않는 상태가되었습니다.
그 때문에 배치 밸런스는 1페이지째와 2페이지째 이후 모두 같게 되어, 페이지 이송의 번거로움이 줄었다고 생각한다

단지 이대로는 페이지를 보내도 뒤로 링크를 누를 수 없기 때문에 JavaScript에서 a 태그의 disabled 클래스를 지워 다시 페이지를 돌아갈 수 있도록 세공을 하고 싶다

이번 메모에서는 1페이지째와 2페이지째 이후의 링크 디자인 무너짐에 대해 언급했지만 최종 페이지와 그 전의 페이지도 상기 기술의 응용으로 해결한다

참고문헌

css