Change class hierarchy markup to ordered-list

[r7kamura]

変更内容

#88 を承けて、継承リストを順序付きリストで記述するように変更してみました。ただし、これまでと比べて記述順序が逆になっています。

それと、これは些細な変更ですが、dynamic include等の継承リスト以降に続く可能性がある情報について、これまでbr要素とテキストノードで表現されていたのを、それぞれp要素で囲むようにしました。これは、その方が構造的に適切で、かつそうした方がデザインが崩れにくく、結果的に実装しやすかったためです。

順序変更の理由

• Rubyのコードで継承のコードを書くときは、左が子、右が親になる
  • それ故にこれまではこういう記述順になっていたのではないかと思います
• Googleのドキュメント等を見る限り、パンくずリストを順序付きリストで表現するときは、根から順に記述していくのが一般的に見える
• ウェブサイト内の2つのパンくずリストが構造的に別の順序で表記されていると、混乱を招く
• 実装が楽
  • グローバルナビゲーションと同じものを使い回せるため

ということを踏まえて考えた結果、これまでの継承リストと記述順序を逆にした方が良いのでは、と思い変更しています。

変更前

変更後

[r7kamura]

生成されるHTMLはこう変わります。

変更前

<h1>class Hash</h1>
<p>


クラスの継承リスト: Hash

      &lt; <a href="../class/Enumerable.html">Enumerable</a>
      

      &lt; <a href="../class/Object.html">Object</a>
      

      &lt; <a href="../class/Kernel.html">Kernel</a>
      

      &lt; <a href="../class/BasicObject.html">BasicObject</a>
      






<br> dynamic include:
 <a href="../class/JSON=3a=3aGenerator=3a=3aGeneratorMethods=3a=3aHash.html">JSON::Generator::GeneratorMethods::Hash</a> (by <a href="../library/json.html">json</a>)


</p>

変更後

<h1>class Hash</h1>



  <nav>
    クラスの継承リスト:
    <ol class="inline-breadcrumb-list">
      
        <li>
          <a href="../class/BasicObject.html">BasicObject</a>
        </li>
        
      
        <li>
          <a href="../class/Kernel.html">Kernel</a>
        </li>
        
      
        <li>
          <a href="../class/Object.html">Object</a>
        </li>
        
      
        <li>
          <a href="../class/Enumerable.html">Enumerable</a>
        </li>
        
      
      <li>
        Hash
      </li>
    </ol>
  </nav>







<p>
  dynamic include:
  <a href="../class/JSON=3a=3aGenerator=3a=3aGeneratorMethods=3a=3aHash.html">JSON::Generator::GeneratorMethods::Hash</a> (by <a href="../library/json.html">json</a>)
</p>

[nurse]

継承リストのあたり領域は左側が一等地で右側は不揃いで重要度の低いものとなりがちなところ、継承リストの親側、つまりBasicObjectやKernel、Object等は情報量ゼロで多くの場合ノイズであり、それを一等地に置くのはあまり良くないかなと感じました

[hanachin]

こんな感じでHTMLのリストの順序はそのまま見た目を逆順にできそう?

diff --git a/data/bitclust/template.offline/class b/data/bitclust/template.offline/class
index 405249d..2f975c0 100644
--- a/data/bitclust/template.offline/class
+++ b/data/bitclust/template.offline/class
@@ -33,7 +33,7 @@
 <% unless @entry.alias? %>
   <nav>
     <%= _('ancestors') %>:
-    <ol class="inline-breadcrumb-list">
+    <ol class="inline-breadcrumb-list inline-breadcrumb-list--ancestors">
       <% supers.reverse_each do |c| %>
         <li>
           <%= class_link(c.name) %>
diff --git a/theme/default/style.css b/theme/default/style.css
index 3d3296a..898f3ed 100644
--- a/theme/default/style.css
+++ b/theme/default/style.css
@@ -298,6 +298,26 @@ hr {
     margin-bottom: 0;
 }
 
+.inline-breadcrumb-list.inline-breadcrumb-list--ancestors {
+    display: inline-flex;
+    flex-direction: row-reverse;
+}
+
+.inline-breadcrumb-list.inline-breadcrumb-list--ancestors li {
+    display: inline-flex;
+}
+
+.inline-breadcrumb-list.inline-breadcrumb-list--ancestors li + li::before {
+    content: "";
+    padding: inherit;
+}
+
+.inline-breadcrumb-list.inline-breadcrumb-list--ancestors li + li::after {
+    content: "<";
+    padding-left: 0.1rem;
+    padding-right: 0.1rem;
+}
+
 .inline-breadcrumb-list li + li::before {
     content: ">";
     padding-left: 0.1rem;

[r7kamura]

CSSを変更して、見た目上は逆順に描画するように変更してみました。

スタイルシートについて。以下のクラスで共通するプロパティは確かに存在しますが、複数クラスを重ねて使うことで複雑性が増すことを危惧して、コードの共通化は避け、それぞれ別のクラスを用意しています。

• .inline-breadcrumb-list
• .inlint-ancestors-list

[hanachin]

今までと見た目上かわらなさそうなので、いいんじゃないかなあと思います(ブラウザの問題なのか継承リストの部分コピペしようとしたときにちょっと挙動が怪しい感じがしますが)。

[hanachin]

Can I useの https://caniuse.com/#feat=flexbox みて不安だったので調べました、IE11なら大丈夫そうかな (IEで確認してないので分からないけど)
https://developer.mozilla.org/ja/docs/Web/CSS/display

[znz]

特にもう意見も出なさそうなので、マージしてみます。