concrete5のページリストを年表にしてみる

concrete5 のページリストの View をカスタマイズして、年表のような表示にしてみました。

## 年表のような表示

Webクリエイターズボックスの http://www.webcreatorbox.com/tech/css-timeline/ で紹介されているスタイルシートをベースに、年表のような表示を書いてみました。

![history1.png](https://qiita-image-store.s3.amazonaws.com/0/31643/25ec1040-c567-756c-ce18-75c4cb25eb36.png)

パソコン(横幅640px以上)の場合の表示です。スマホから閲覧した場合は↓のように表示します。

![history2.png](https://qiita-image-store.s3.amazonaws.com/0/31643/c26309ad-6566-4391-8676-325d47219614.png)

実際のページは https://rescuework.nagoya/profile1 をごらんください。

## CSSの解説

縦方向の区切り線は、borderを使用して表示しています。区切り線上の丸印は、背景に色をつけ、border-radius: 100% で丸く見せています。

    .timeline {
        list-style: none;
    }
    .timeline > li {
        margin-bottom: 20px;
        position: relative;
    
    }
    
    @media ( max-width : 639px ){
        .timeline {
            border-left: 3px #e5e5d1 solid;
            padding-left: 20px;
        }
        .timeline-date:before {
            content: '';
            width: 12px;
            height: 12px;
            background: #6fc173;
            position: absolute;
            left: -27px;
            top: 4px;
            border-radius: 100%;
        }
    }
    /* for Desktop */
    @media ( min-width : 640px ){
        .timeline > li {
            overflow: hidden;
            margin: 0;
        }
        .timeline-date {
            width: 124px;
            float: left;
            margin-top: 20px;
        }
        .timeline-content {
            width: 75%;
            float: left;
            border-left: 3px #e5e5d1 solid;
            padding-left: 30px;
        }
        .timeline-content:before {
            content: '';
            width: 12px;
            height: 12px;
            background: #6fc173;
            position: absolute;
            left: 120px;
            top: 24px;
            border-radius: 100%;
        }
    }

## Webクリエイターズボックスのコードをベースにした理由

Webクリエイターズボックスのコードをベースにした理由は、JavaScript不使用、です。もちろん他にもCSSだけで実現しているものはあると思いますが、いくつか調べた範囲でWebクリエイターズボックスのコードが一番よさげでした。

年表を会社概要や沿革などで表示することを考えると、訪問者の閲覧環境に左右される技術は使いにくいな、と考えたからです。CSSだけで年表の見栄えを設定するのであれば、CSSを無効にしている場合や、テキストブラウザ等のCSSを無視するブラウザであっても、最低限のリスト表示は問題なく行われるからです。

## コード

gist で公開しています。
 https://gist.github.com/ounziw/c80a7291faf549dd31782be6714208a9 をご覧ください。ライセンスはWTFPLです。

    <?php // view.php
    defined('C5_EXECUTE') or die("Access Denied.");
    // タイトル、RSS、サムネイルは出力しない
    // 日付は常に表示する。
    // ページネーションや、ページ0件の場合の表示は考慮していない
    $th = Loader::helper('text');
    $c = Page::getCurrentPage();
    $dh = Core::make('helper/date'); /* @var $dh \Concrete\Core\Localization\Service\Date */
    ?>
    
    <?php if ($c->isEditMode() && $controller->isBlockEmpty()) {
        ?>
        <div class="ccm-edit-mode-disabled-item"><?php echo t('Empty Page List Block.')?></div>
        <?php
    } else {
        ?>
    
        <div class="ccm-block-page-list-wrapper">
    
            <ul class="timeline">
    
                <?php
                foreach ($pages as $page):
                    $title = $th->entities($page->getCollectionName());$description = $page->getCollectionDescription();
                    $description = $controller->truncateSummaries ? $th->wordSafeShortText($description, $controller->truncateChars) : $description;
                    $description = $th->entities($description);
                    $date = $dh->formatCustom('Y年m月',$page->getCollectionDatePublic());
                ?>
    
    
                    <li>
                        <p class="timeline-date"><?php echo $date?></p>
                        <div class="timeline-content">
                            <h3><?php echo $title; ?></h3>
                            <p><?php echo $description ?></p>
                        </div>
                    </li>
    
                <?php endforeach;
                ?>
            </ul>
    
        </div><!-- end .ccm-block-page-list-wrapper -->
    
        <?php
    } ?>

※コードを本文中に追記しました。