リンク集の見栄えを整える【Rails備忘録】

ぞんざいなリンクのリスト，その見栄えをなんとかしたい．次の頭の赤線で囲ったところは，単純に<ul>〜</ul>で囲っただけのリスト環境である．機能的には何ら問題ないが，簡素すぎて味気なさすぎる．

コードとしては，次に示すような，実に単純なものだ．

<h2>Teacher's Dashboard</h2>

<ul>

  <li><%= link_to 'Lessons (Rubrics) management', td_lessons_path %></li>

  <li><%= link_to 'Meetings management', td_meetings_path %></li>

  ...

これを，次のようにする．

ポイントは次の4つ．

1. list-groupとlist-group-itemを使ってリストボタン化する
2. octiconsを使ってアイコンのラベルを付ける
3. context_tagを使って一部を色付けする
4. html_safeで&raquo;や&nbsp;を有効にする

改良したコードはこんな感じになる．少し面倒だがひとつひとつはシンプルなので，コードを紐解くのはさほど難しくはなかろう．

<h2>Teacher's Dashboard</h2>

<div class="list-group">

  <%= link_to "#{octicon 'checklist', height: 24,

                         class: 'right left', 'aria-label': 'checklist'} &nbsp;

               #{content_tag :span, 'Lessons (Rubrics) management',

                             class: 'text-primary'} &raquo;".html_safe,

            td_lessons_path, class: 'list-group-item list-group-item-action' %>

  <%= link_to "#{octicon 'clock', height: 24,

                         class: 'right left', 'aria-label': 'clock'} &nbsp;

               #{content_tag :span, 'Meetings management',

                             class: 'text-primary'} &raquo;".html_safe,

           td_meetings_path, class: 'list-group-item list-group-item-action' %>

  ...