「app\views\project\index.html.erb」ファイルを以下のように編集します。
app\views\project\index.html.erb
<div class="box"> <article class="media"> <div class="column"> <div class="columns is-multiline"> <% if @projects.count > 0 %> <% @projects.each do |project| %> <%= link_to project do %> <div class="column is-one-third"> <div class="card"> <div class="card-image"> <%= link_to project_path(project) do %> <figure class="image is-4by3"> <%= image_tag project.image %> </figure> <% end %> </div> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-4" style="color: black; margin: 10px;"><%= project.name %></h4> </div> <div class="card-content p-t-5 p-b-5"> <span class="tag is-danger is-large" style="margin-top: 10px; margin-bottom: 10px;"><%= number_to_currency(project.price) %></span> </div> <footer class="card-footer"> <h4 class="title is-4" style="color: black; margin: 10px;"><%= project.content %></h4> </footer> </div> </div> <% end %> <% end %> <% else %> <div class="column is-one-third"> <div class="card"> <div class="card-content p-t-5 p-b-5"> <p class="subtitle is-6 m-b-5">表示できるプロジェクトはありません。</p> </div> </div> </div> <% end %> </div> </div> </article> </div>
ブラウザ確認
http://localhost:3000/project/
「app\views\project\show.html.erb」ファイルを以下のように編集します。
app\views\project\show.html.erb
<section class="section"> <div class="container"> <div class="columns"> <!-- 左側 --> <div class="column is-two-thirds"> <div class="columns is-multiline"> <!-- プロジェクト --> <div class="column is-full"> <div class="card"> <div class="card-content"> <div class="content"> <h1 class="title"><%= @project.name %></h1> <div class="title is-4 has-text-right" style="color: black;"><%= number_to_currency(@project.price) %></div> </div> <hr> <div class="hero-carousel" id="carousel-photo"> <%= image_tag @project.image %> </div> </div> </div> </div> <div class="column"> <div class="card"> <div class="card-content"> <!-- コンテンツ --> <div class="box"> <article class="media"> <div class="media-content"> <div class="content"> <h2 class="subtitle">このプランについて</h2> <hr> <%= @project.content %> </div> </div> </article> </div> <!-- タスク Section --> <div class="box"> <article class="media"> <div class="media-content"> <div class="content"> <div class="collection"> <% @tasks.each do |task| %> <% if task.header %> <br/> <div class="collection-item active"> <span class="tag is-link is-large"> <%= task.title %></span> <span class="tag is-white is-large"> <%= task.note %></span> </div> <br/> <% else %> <div class="collection-item active"> <span class="tag is-light is-medium" style="margin: 3px;"> <%= link_to [task.project, task], class: "collection-item", data: { turbolinks: false} do %> <%= task.title %> <% end %> </span> </div> <% end %> <% end %> </div> </div> </div> </article> </div> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column"> <div class="columns is-multiline"> <!-- 購入 --> <div class="column is-full"> <div class="card"> <div class="card-content"> <div class="media"> <div class="media-content"> <strong><%= @project.name %></strong> </div> <div class="media-right"> <p class="title is-4" style="color: black;"><%= number_to_currency(@project.price) %></p> </div> </div> <div class="content f-15"> <p class="m-t-30"><%= @project.content %></p> <p class="m-t-30"> <strong>タスク数: <i class="far fa-clock"></i> <%= @tasks.count %></strong> </p> </div> <% if user_signed_in? %> <button type="submit" class="button is-fullwidth is-danger">購入する</button> <% else %> <button class="button is-fullwidth is-danger" disabled>ログインして下さい</button> <% end %> </div> </div> </div> </div> </div> </div> </div> </section>
ブラウザ確認
http://localhost:3000/project/1
