Home > Web猫ブログの経歴をタイムライン仕様に変更しました

Web猫ブログの経歴をタイムライン仕様に変更しました

Web猫ブログの経歴をタイムライン仕様に変更しました

Thu Apr 11 2019

Web猫ブログとは

フロントエンドにVue.jsのフレームワークの一つNuxt.jsを、Headless CMSの一つであるContentfulを採用しています。見えない裏側でCircleCIを使った自動化、Graphcool (GraphQL)やFirestoreも入っています。

https://webneko.info/

スキーマ上の変更

既にページコンポーネントで Graphcool上のデータを一括して取得しています。ですが modelに titledescription が存在していませんでした。

type Work @model {
  company: String!
  description: String
  endAt: DateTime
  id: ID! @isUnique
  startAt: DateTime!
  title: String
}

titledescription は、それぞれ string 型として定義する。

CSSを使って表現

開始日を基準にソートも既に実装済。実質スタイルの追加を行えば良い、ということでした。擬似要素 before を使って、 description を borderの右側に表示します。いざ実装を進めると然程難しくなかったように思います。

.timeline-content {
    width: 85%;
    float: left;
    text-align: left;
    border-left: 3px #35495e solid;
    padding-left: 30px;
    font-size: 2vmin;
}

.timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #42b883;
    position: absolute;
    left: 106px;
    top: 24px;
    border-radius: 100%;
}

余談ですが

list-style: none; 時、左側にマージンが生まれスマホなど、画面サイズの小さい場合にレイアウトが崩れた。 padding: 0; を子のクラス li に入れてあげることで解決しました。

コメントを残す