静的ページの移行、SASS paddingの設定等
今日は、静的ページの移行を目標にしよう。
躓いた部分を書いていこう。あとはコツコツと。
最初に全部のページとURLを確定してしまったほうが良さそうだな。
あとで、リンクパス設定するのめんどいし。
一つ一つファイル追加するのもよいけど、コマンドで追加できないのかな。
調べてみよう。
rails g controller controllername new create
したら、既にあるものに追加されるのかな。
まぁやってみるか
conflict app/controllers/
が出てきたので、y＋Enterを押してもただ改行されるだけ・・・
うーむ。h+Enterでもだめ。
何か違うボタンを押す必要があるのだろうか。
Ruby on Rails generating controller with existing folder - Stack Overflow
ここを読んだけど、conflictの問題が大きそう。面倒くさいので手動で追加することにした。
helperは追加されているので
routes.rb と controller とViewの追加をした。
URLを叩いて、表示されているのを確認したので、次はリンクパスを作成する。
ナビゲーションメニューの設定からしていこう。
・・・よし！ナビゲーションメニューの設定完了。
これで各ページの修正が出来る。
一度Push プッシュ！
早速一番上に設置したフォームパーツでつまずく。
Rails Bootstrap Formsが良さそうなので、導入してみよう。
gem 'bootstrap_form'
を追加して、bundle install。
applicationにもrequireを追加して、サーバーを再起動。
<、>、<%、%>などのタグを削除する。閉じタグは全て削除する
というのを忘れてしまう。
一度スリム化する。
というか、そもそも rubyの form_for の意味をよくわかっていないので、一度調べてみよう。
@userはテーブルデータなので、エラーが表示されてしまう。
これは、＠user = "" にしておけば、ひとまず回避。
= bootstrap_form_tag url: '/subscribe' do |f|
= f.email_field :email, value: 'name@example.com'
= f.submit
だと、表示を確認できた。
これの微調整をどうするかだなぁ。
<% %> は - ハイフンで出来るのを忘れてしまうなぁ。
<%= %> は＝でOKなのは理解した。
peartialは楽だなぁ。
素晴らしい。
さて、このフォームを自由に使いこなしたいけど一体どうしたらよいのやら。
うーむ。
構築の基礎であるアプリケーションフォームを二つ欲しい。
使えそう。
色々と調べてもちょっと進めなさそうなので、やはりパス。
淡々とそれぞれのページを移行するのに・・・寄り道してしまう。
ひとまず、rails bootstrap form は導入できたので、一度プッシュしよう。
まず、このフォーム文をなんとかしたい。
素直にここを読むか。。
を、できたできた。意味がわかってきた。
Sass にマージン追加とか、そこら辺を入れておいたほうが良さそう。
マージンとか、関数を使って設定しているが、時間かかるぅぅ。。。
配列がうまく使えればよさそうだなぁ。
一回一回、sass入力して、リロードして、確認とかアホくさくなってきたので、オンラインでテスト実行する。
というか、Sassはまだまだだなぁ。
色々とこねくり回して、できそうな予感がしてきた。
時間かけすぎだよね。。本当に。
焦らない焦らない。一休みもしないで、この部分だけは今日作る。
できたー！！
何回もテストしながら、さぐりさぐりやっているため、理解しているかは本当に謎ではあるが、ひとまず理想の形ができた。
$size: low, mid, high;
$position: top, bottom, right, left;
$short_code: t, b, r, l;
$value :5;
@for $i from 1 through 3 {
@for $d from 1 through 4 {
.mg-#{nth($short_code, $d)}-#{nth($size, $i)}
{margin-#{nth($position, $d)}: #{$value * $i}px;}
.pd-#{nth($short_code, $d)}-#{nth($size, $i)}
{padding-#{nth($position, $d)}: #{$value * $i}px;}
}
}
これで、low, mid, highの３パターンのそれぞれ上下左右のサイズ設定が可能となる！
テストできるのとても良いな。
今日は検索窓の追加と、SASSでサイズの追加しかしていないけど、まぁOK！ゆっくりぽちぽちやっていこう。
