mjtakenon / hakoniwa

🏝
4 stars 0 forks source link

indexページのCSS&デザイン修正 #162

Closed nonuplet closed 9 months ago

nonuplet commented 9 months ago

Overview

indexページのCSS周りやデザインの修正、bladeテンプレートからvueへの置き換えを行いました。

index.blade.phpの内容をIndexPage.vueへ置き換え

index.blade.php の内容を新たに作成した IndexPage.vue に置き換えました。

このbladeの影響で一部CSSが app.scss に記載していたことにより、scoped になっておらず他のコンポーネントのデザインに悪影響を及ぼしていたため、Vueファイルに分割し閉じ込めるようにしました。

この修正によるデザインの変更はありません。

Infoboxの実装

indexページで使っていた .box-alert.box-error などについて、CSSの定義だけで拡張性に乏しい状態でした。そこで新たにInfoBoxコンポーネントを実装しました。

オマケとしてアイコン設定も出来るようになっています。FontAwesomeのクラスを指定するとアイコンを決められます。指定しない場合は notify alert errorのボックス指定によって自動的にアイコンが割り当てられます。 独自アイコンを使用する場合は、 library.add() をお忘れなく…

image