じろう

2019年11月02日に参加

学習履歴詳細

[基本情報]1h 過去問道場でアルゴリズムとプログラミングの問題を58問 [Rails]デザイン改修、Scssファイルが反映されないバグが1ヶ月半越しの解決

やったこと

過去問道場でアルゴリズムとプログラミングの問題を58問解いた
log/indexのデザイン改修+色見直しに入った
追加したテーマカラーのspacered, spacegreenを一旦すべてspaceblueに書き換え、YWTのカードを同じ色に設定
三色でセンスのいい色 156Pのカラーパレットを試しに使用
card-footerの背景色がおかしかったのを修正
card-headerを白色にし、付箋風デザインをborder-leftで試す
application.scss以外のview別scssファイルの読み込みがうまくいったりいかなかったりするのを修正

わかったこと

viewごとに設定しようと思って作ったScssファイルが、反映されたりされなかったりするバグはこう解決した。

application.scss

@import "variables";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-tagsinput";
@import "logs/index.scss";
@import "users/show.scss";

この下2行から拡張子を取り除き、こう書き換える

@import "logs/index.scss";
@import "users/show.scss";

そして、development.rb

  config.assets.compile = true #動的コンパイルを有効化

を追加したところ、Scssファイルの保存・更新→ページの更新でしっかり反映されるようになった。

参考
RailsでCSS(Sass)が反映されない時の対処法

また付箋風の新デザインはborder-leftで実装
新デザイン

.dones{
  .card {
    background-color: rgba(248, 248, 248, 0.897);
  }
  .card-header{
    background-color: rgba(248, 248, 248, 0.897);
    border-left: thick outset $spaceblue;
  }
}

borderの参考情報
基本のborder
border-style
border-width

次やること

border-leftで付箋風になったはいいものの、ちょっと隙間があるので修正
YWT全てのカラムにこれを適用
Tのカードのwhen-to-doカラムをcard-footerに追いやってもいいかも?
Wのcommentが空のとき、カードの開閉を無効にする

Rails
Bootstrap
基本情報技術者

2020年06月25日(木)

2.7時間