Rails7.1 | 動画学習アプリ作成 | 35 | ホームページ - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【34 | raty-js】 << 【ホーム】 >> 【36 | 購入確認電子メール】

ホームページを作成します。

「app\assets\images」フォルダに「home」フォルダを新規作成し、何でも良いので「background01.jpg」ファイルを入れて下さい。

「app/assets/stylesheets/application.scss」ファイルに以下の記述を追加します。

//ホームページ用
.has-bg-img {
  background: url("/assets/home/background01.jpg") center center;
  background-size: cover;
  height: 300px;
}

記述追加　【app/assets/stylesheets/application.scss】57行目

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 @import "bootstrap";

 @use "./noty";

 @use "./dropzone";

 body * {
    font-family: Kosugi Maru;
}

.font1 {
    font-family: Rampart One;
}

.font2 {
    font-family: Kaisei Opti;
}

//アバター　オンライン
.avatar {
    position: relative;
    display: inline-block;
    &::before {
      content: "";
      position: absolute;
      bottom: 1px;
      left: 38px;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      border: 1px solid white;
    }
    &.online:before {
      background-color: #1dbf73;
    }
    &.offline:before {
      background-color: gray;
    }
}

//ホームページ用
.has-bg-img {
  background: url("/assets/home/background01.jpg") center center;
  background-size: cover;
  height: 300px;
}

「app\controllers\pages_controller.rb」ファイルを以下のように編集して下さい。

記述編集　app\controllers\pages_controller.rb
3行目に記述を追加しています。

class PagesController < ApplicationController
  def home
    @projects = Project.all
  end
end

「app\views\pages\home.html.erb」ファイルを以下のように編集します。

app\views\pages\home.html.erb

<div class="container ">

    <div class="has-bg-img mb-4">
  
        <h2 class="text-light font2" style="margin-left: 1rem;">
            <p class="pt-4">動画で学習するサイト <br/>
            いつでもどこでも学習できます</p>
        </h2>

    </div>
</div>

<!-- ホーム -->
<div class="container">

    <div class="row mb-4">
        <div class="font1"><h3>購入可能なプロジェクト</h3></div>

        <% @projects.each do |project| %>
            <div class="col-md-4">
                <div class="card mb-2">
                    <%= link_to project_path(project), data: { turbo: false} do %>
                        <%= image_tag project_cover(project), style: "width: 100%;", class: "card-image-top" %>
                    <% end %>
                    <div class="card-body">
                        <span><i class="fa fa-star fa-1x" style="color: gold;"></i><%= pluralize(project.average_rating, "") %></span>
                        <%= link_to project_path(project), data: { turbo: false} do %>
                            <h5 class="card-title mt-2">
                                <span class="btn btn-light"><%= project.name %></span>
                            </h5>
                        <% end %>
                        <div class="card-text" style="margin-left: 0.5rem;">

                            <%= link_to user_path(project.user), style: "text-decoration:none;" do %>
                                <figure class="figure">
                                    <%= image_tag avatar_url(project.user), style: "width: 40px;", class: "figure-img img-fluid rounded-pill" %>
                                </figure>
                                <span class="badge bg-light text-dark" style="font-size: 0.9rem;"><%= project.user.full_name %></span>
                            <% end %>                    
                        </div>


                        <h5 class="badge rounded-pill bg-danger text-light" style="font-size: 1rem;"><%= number_to_currency(project.price) %></h5>
                    </div>
                </div>
            </div>
        <% end %>
    </div>
</div>