レイアウトの作成

レイアウトの作成

Bootstrapの導入が完了しているので、Bootstrapを使用し、レイアウトを整えていきます。

Bootstarpの詳しい解説はしないので、変更コードを記述していきます。

ヘッダーの部分テンプレートレイアウト

app/views/layouts/_header.html.erb

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="/">
      <span>Bookers</span>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto">
      <% if user_signed_in? %>
        <li class="nav-item">
          <%= link_to user_path(current_user.id), class: 'nav-link text-light' do %>
            <i class="fas fa-home"></i> Home
          <% end %>
        </li class="nav-item">
        <li>
          <%= link_to users_path, class: 'nav-link text-light' do %>
            <i class="fas fa-users"></i> Users
          <% end %>
        </li>
        <li class="nav-item">
          <%= link_to books_path, class: 'nav-link text-light' do %>
            <i class="fas fa-book-open"></i> Books
          <% end %>
        </li>
        <li class="nav-item">
          <%= link_to destroy_user_session_path, method: :delete, class: 'nav-link text-light' do %>
            <i class="fas fa-sign-out-alt"></i> Log out
          <% end %>
        </li>
      <% else %>
        <li class="nav-item">
          <%= link_to root_path, class: 'nav-link text-light' do %>
            <i class="fas fa-home"></i> Home
          <% end %>
        </li>
        <li class="nav-item">
          <%= link_to about_path, class: 'nav-link text-light' do %>
            <i class="fas fa-link"></i> About
          <% end %>
        </li>
        <li class="nav-item">
          <%= link_to new_user_registration_path, class: 'nav-link text-light' do %>
            <i class="fas fa-user-plus"></i> Sign up
          <% end %>
        </li>
        <li class="nav-item">
          <%= link_to new_user_session_path, class: 'nav-link text-light' do %>
            <i class="fas fa-sign-in-alt"></i> Log in
          <% end %>
        </li>
      <% end %>
    </div>
  </div>
</nav>

フッターのレイアウト

app/views/layouts/application.html.erb

<footer>
  <div class="container mt-5">
    <div class="row">
      <div class="mx-auto">
        <p>CopyRight Infratop.inc</p>
      </div>
    </div>
  </div>
</footer>

トップページのレイアウト

app/views/homes/top.html.erb

<div class="container">
  <div class="row">
    <div class="mx-auto col-11 col-sm-10 col-lg-8 col-xl-6">
      <h1>welcome to <i class="fas fa-book"></i><strong>Bookers</strong> !!</h1>
      <p>In <i class="fas fa-book"></i><strong>Bookers</strong>,</p>
      <p>you can share and exchange your opinions , inpressions , and emotions</p>
      <p>about various books!</p>

      <div class="btn-wrapper mx-auto col-10">
        <div class="row">
          <%= link_to "Log in", new_user_session_path, class: "btn btn-sm btn-info btn-block mb-3" %>
        </div>
        <div class="row">
          <%= link_to "Sign up", new_user_registration_path, class: "btn btn-sm btn-success btn-block" %>
        </div>
      </div>
    </div>
  </div>
</div>

アバウトページのレイアウト

app/views/homes/about.html.erb

<div class="container">
  <div class="row">
    <h1 class="mx-auto">Welcome to <i class="fas fa-book"></i><strong>Bookers</strong>!</h1>
  </div>
</div>

Sign_upページのレイアウト

app/views/devise/registrations/new.html.erb

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-8 col-lg-5 px-5 px-sm-0">
      <h2>Sign up</h2>

      <%= form_with model: @user, url: user_registration_path, id: 'new_user', class: 'new_user' do |f| %>
        <%= render "devise/shared/error_messages", resource: resource %>

        <div class="field">
          <%= f.label :name %><br />
          <%= f.text_field :name %>
        </div>

        <div class="field">
          <%= f.label :email %><br />
          <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
        </div>

        <div class="field">
          <%= f.label :password %>
          <% if @minimum_password_length %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
          <% end %><br />
          <%= f.password_field :password, autocomplete: "new-password" %>
        </div>

        <div class="field">
          <%= f.label :password_confirmation %><br />
          <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
        </div>

        <div class="actions">
          <%= f.submit "Sign up", class: "btn btn-sm btn-success" %>
        </div>
      <% end %>

      <%= render "devise/shared/links" %>
    </div>
  </div>
</div>

Log_inページのレイアウト

app/views/devise/sessions/new.html.erb

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-8 col-lg-5 px-5 px-sm-0">

      <h2>Log in</h2>

      <%= form_with model: @user, url: user_session_path do |f| %>
        <div class="field">
          <%= f.label :name %><br />
          <%= f.text_field :name %>
        </div>

        <div class="field">
          <%= f.label :password %><br />
          <%= f.password_field :password, autocomplete: "current-password" %>
        </div>

        <% if devise_mapping.rememberable? %>
          <div class="field">
            <%= f.check_box :remember_me %>
            <%= f.label :remember_me %>
          </div>
        <% end %>

        <div class="actions">
          <%= f.submit "Log in", class: "btn btn-sm btn-primary" %>
        </div>
      <% end %>

      <%= render "devise/shared/links" %>
    </div>
  </div>
</div>

ユーザー一覧ページのレイアウト

app/views/users/index.html.erb

<div class="container px-5 px-sm-0">
  <div class="row">
    <div class="col-md-3">
      <!--ユーザー情報-->
      <%= render 'info', user: @user %>
      <!--本の投稿機能-->
      <%= render 'books/new', book: @book %>
    </div>
    <!--ユーザー一覧表示-->
    <div class="col-md-8 offset-md-1">
      <h2>Users</h2>
      <table class="table">
        <thead>
          <tr>
            <th>image</th>
            <th>name</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <% @users.each do |user| %>
            <tr>
              <td><%= image_tag user.get_profile_image(80,80) %></td>
              <td><%= user.name %></td>
              <td>
                <%= link_to "Show", user_path(user.id) %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
</div>

ユーザー詳細ページのレイアウト

app/views/users/show.html.erb

<div class="container px-5 px-sm-0">
  <div class="row">
    <div class="col-md-3">
      <!--ユーザー情報-->
      <%= render 'info', user: @user %>
      <!--本の投稿機能-->
      <%= render 'books/new', book: @book %>
    </div>

    <div class="col-md-8 offset-md-1">
      <!--ユーザーが投稿した本の一覧機能-->
      <%= render 'books/index', books: @books %>
    </div>
  </div>
</div>

ユーザー情報編集ページのレイアウト

app/views/users/edit.html.erb

<div class="container">
  <div class="row">
    <div class="mx-auto col-sm-12 col-md-8 col-lg-5 px-5 px-sm-0">
      <h2>User info</h2>
      <%= form_with model: @user do |f| %>
        <div class="form-group">
          <%= f.label :name %>
          <%= f.text_field :name, autofocus: true, id:"inputName", placeholder:"名前", class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :profile_image, "Image" %>
          <%= f.file_field :profile_image, accept: "image/*", class: "form-control-file" %>
        </div>
        <div class="form-group">
          <%= f.label :introduction %>
          <%= f.text_area :introduction, autofocus: true, id:"inputIntroduction", class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.submit "Update User", class: "btn btn-secondary" %>
        </div>
      <% end %>
    </div>
  </div>
</div>

ユーザー情報の部分テンプレートレイアウト

app/views/users/_info.html.erb

<h2>User info</h2>
<%= image_tag user.get_profile_image(100,100) %>
<table class="table">
  <tbody>
    <tr></tr>
    <tr>
      <th>name</th>
      <th><%= user.name %></th>
    </tr>
    <tr>
      <th>introduction</th>
      <th><%= user.introduction %></th>
    </tr>
  </tbody>
</table>

<div class="row">
  <%= link_to edit_user_path(user), class: "btn btn-block btn-outline-secondary" do %>
    <i class="fas fa-user-cog"></i>
  <% end %>
</div>

本の一覧ページのレイアウト

app/views/books/index.html.erb

<div class="container px-5 px-sm-0">
  <div class="row">
    <div class="col-md-3">
      <%= render 'users/info', user: @user %>
      <%= render 'new', book: @book %>
    </div>

    <div class="col-md-8 offset-md-1">
      <%= render 'index', books: @books %>
    </div>
  </div>
</div>

本の詳細ページのレイアウト

app/views/books/show.html.erb

<div class="container px-5 px-sm-0">
  <div class="row">
    <div class="col-md-3">
      <%= render 'users/info', user: @user %>
      <%= render 'books/new', book: @new_book %>
    </div>

    <div class="col-md-8 offset-md-1">
      <h2>Book detail</h2>
      <table class="table">
        <tbody>
          <tr>
            <td>
              <%= link_to user_path(@user) do %>
                <%= image_tag @user.get_profile_image(100,100) %><br>
                <%= @user.name %>
              <% end %>
            </td>
            <td>
              <%= link_to book_path(@book) do %>
                <%= @book.title %>
              <% end %>
            </td>
            <td>
              <%= @book.body %>
            </td>
            <% if @book.user == current_user %>
              <td>
                <%= link_to "Edit", edit_book_path(@book), class: "btn btn-sm btn-success"  %>
              </td>
              <td>
                <%= link_to "Destroy", book_path(@book), method: :delete, class: "btn btn-sm btn-danger", "data-confirm" => "本当に消しますか？" %>
              </td>
            <% end %>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

本の編集ページのレイアウト

app/views/books/edit.html.erb

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-8 col-lg-5 px-5 px-sm-0 mx-auto">
      <h1>Editing Book</h1>
      <%= form_with model: @book, mothod: :patch do |f| %>
        <div class="form-group">
          <%= f.label :title %>
          <%= f.text_field :title,class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :opinion %>
          <%= f.text_area :body, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.submit "Update Book", class: "btn btn-success" %>
        </div>
      <% end %>

      <%= link_to "Show", book_path(@book) %>
      |
      <%= link_to "Back", books_path %>
    </div>
  </div>
</div>

本の一覧の部分テンプレートレイアウト

app/views/books/_index.html.erb

<h2>Books</h2>
<table class="table table-hover">
  <thead>
    <tr>
      <th></th>
      <th>Title</th>
      <th>Opinion</th>
    </tr>
  </thead>
  <tbody>
    <% books.each do |book| %>
      <tr>
        <td>
          <%= link_to user_path(book.user_id) do %>
            <%= image_tag book.user.get_profile_image(80,80) %>
          <% end %>
          </td>
        <td>
          <%= link_to book_path(book.id) do %>
            <%= book.title %>
          <% end %>
          </td>
        <td><%= book.body %></td>
      </tr>
    <% end %>
  </tbody>
</table>

本の投稿機能の部分テンプレートレイアウト

app/views/books/_new.html.erb

<h2 class="mt-3">New book</h2>
<%= form_with model: book do |f| %>
  <div class="form-group">
    <%= f.label :title %>
    <%= f.text_field :title, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :opinion %>
    <%= f.text_area :body, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.submit 'Create Book', class: "btn btn-success" %>
  </div>
<% end %>

以上。

アプリケーションの作成 参考URL　 作成するアプリケーションについて - takifugu’s blog