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

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

年表のような表示

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

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

実際のページは 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
} ?>

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