Create an EC site with Rails5 ④ ~ Header and footer ~

Introduction

This is a continuation of the series "Creating an EC site with Rails 5 (3)" (https://qiita.com/GreenFingers_tk/items/d77555311286d966462e), which creates an EC site where you can shop at a fictitious bakery. This time, we will make the header and footer. Since it's a big deal, I tried to make it responsive.

Source code

https://github.com/Sn16799/bakeryFUMIZUKI

Color scheme

As an aside, I decided on the theme color for the entire site. Since the store name (fictitious) is Fumizuki, we will summarize it in a summer-like blue color. I will also post the color code for the time being. For your information.

Dark blue …… # 120136, rgb (18,1,54) Medium blue …… # 035aa6, rgb (3,90,166) Light blue …… # 40bad5, grb (64,186,213) One point yellow …… # fbcf1e, rgb (252,191,30)

header

Create a partial template for the header in app / views / layouts. The file name is _header.html.erb.

Conditional branching is performed so that the display changes in three patterns: ** when logged in as an administrator **, ** when the customer logs in **, and ** when not logged in **. I want to display the message "Welcome, Mr. XX!" When logging in to the customer, but the view code becomes complicated because the surname and first name are saved separately in the database. Therefore, add a little to the Model file so that you can output a string that concatenates the surname and first name.

app/model/customer.rb


def full_name
  self.family_name + " " + self.first_name
end

Now you can type full_name in view or controller to see it in full name!

app/views/layouts/_header.html.erb


<header class="container-fluid middle-blue-back">
  <nav class="navbar navbar-expand-lg">
    <!--Logo image. I will replace it later.-->
    <div>
      <%= link_to customer_top_path, style: 'color: #fcbf1e' do %>
      <h1>LOGO</h1>
      <% end %>
    </div>

    <!--Toggle button that appears only when the screen width becomes narrow-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarFumizuki" aria-controls="navbarFumizuki" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>

    <!--Various links. Display switching between administrator login, customer login, and non-login.-->
    <div class="collapse navbar-collapse" id="navbarFumizuki">
      <!--Administrator-->
      <ul class="navbar-nav mr-auto w-75 nav-justified">
        <% if admin_signed_in? %>
          <div class="admin-message">You are logged in as an administrator</div>
          <li class="nav-item"><%= link_to 'Product list', admins_products_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Member list', admins_customers_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Order history list', admins_orders_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Genre management', admins_genres_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Log out', destroy_admin_session_path, method: :delete, class: 'nav-link' %></li>
        <!--client-->
        <% elsif customer_signed_in? %>
          <li class="nav-item"><%= link_to 'About', customer_about_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'My page', customer_path(current_customer.id), class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Product list', products_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'cart', cart_items_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Log out', destroy_customer_session_path, method: :delete, class: 'nav-link' %></li>
        <!--Non-login-->
        <% else %>
          <li class="nav-item"><%= link_to 'About', customer_about_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Product list', products_path, class: 'nav-link' %></li>
          <li class="nav-item" ><%= link_to 'sign up', new_customer_registration_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Login', new_customer_session_path, class: 'nav-link' %></li>
        <% end %>
      </ul>
      <!--message(customer)or search window(admin) -->
      <% if customer_signed_in? %>
        <p>Welcome<%= current_customer.full_name %>San!</p>
      <% else admin_signed_in? %>
        <!--The search form is tentative. Make something that works later and replace it.-->
        <form class="form-inline my-2 my-lg-0">
        <input type="search" class="form-control mr-sm-2" placeholder="Search..." aria-label="Search...">
        <button type="submit" class="btn btn-outline-success my-2 my-sm-0">Search
        </button>
	    </form>
      <% end %>
    </div>
  </nav>
</header>

footer

It doesn't matter if you didn't add a function or not, but I'll make it because I'm lonely without it.

app/views/layouts/_footer.html.erb


<div class="container-fluid middle-blue-back">
  <h3 class="footer-message">Bakery FUMIZUKI</h3>
</div>

It has a simple composition with a blue background and yellow in the center with the letters "Bakery FUMIZUKI".

Make a rough framework

Edit application.html.erb to adjust the layout of the entire site. The header and footer created earlier are also loaded here.

app/views/layouts/application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <title>Fumizuki</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <!--Responsive-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- swiper -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

    <!-- font awsome -->
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </head>

  <body>
    <%= render 'layouts/header' %>
    <div class="container-fluid">
      <div class="row">
        <%= yield %>
      </div>
    </div>
    <%= render 'layouts/footer' %>
  </body>
</html>

The sweeper in the middle is a library for sliding photos. I won't use it in this article, but I thought it would be useful in the future because it's convenient. Below that, font-awsome is a convenient site where you can use many icons for free just by copying the link. I think I will use this one soon.

Decorated with scss

Set various colors for the class name described on the HTML side.

app/assets/stylesheets/application.scss


@import 'bootstrap';

.middle-blue-back {
  background-color: #035aa6
}

.light_blue_letter {
 color: #40bad5
}

.footer-message {
  line-height: 100px;
  text-align: center;
  color: #fcbf1e
}

// header
.navbar-toggler {
  border-color: #40bad5;
}
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(64,186,213)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-link {
  color: #40bad5;
}

Also work on the top page

I wanted to see what the color sample I chose for the theme color would look like in the browser, so I tried it on the top page. I will erase it later when I write the official top page.

html:app/views/homes/top.html.erb


<div class="col">
  <h1>Homes#top</h1>
  <div class="row">
    <div class="col-3" style="height: 100px; background-color: #120136"></div>
    <div class="col-3" style="height: 100px; background-color: #035aa6"></div>
    <div class="col-3" style="height: 100px; background-color: #40bad5"></div>
    <div class="col-3" style="height: 100px; background-color: #fcbf1e"></div>
  </div>
</div>

Try accessing [localhost: 3000](localhost: 3000). fumizuki_top.jpg

Both the header and footer are displayed without any problem.

toggle.jpg

When I narrowed the screen width with the developer tools, it became a hamburger icon properly!

Postscript

With Bootstrap, you can easily support responsiveness, which is a really useful function. I've written some CSS, but I'm just specifying the colors. Since the color code is only 4 colors, even if you complete the entire application, the amount of CSS code will not increase much.

Also, you may think that there are a few people who have read this far. I am also a little worried. The theme color of the site, like I've seen somewhere.

Yes. ** Completely I ● EA **. I didn't notice it until it was displayed on the site, so I was surprised after writing the code. It's okay because I like IK ● A, but I don't think I like anything over there, so I'm wondering if I've continued to implement it. Once it looks like IKE ●, it's also a problem that every time you visit the site, you think ** "This shop never sells bread" **.

Can I complete the site without being offended by KEA? Continue to Next time!

reference

Bootstrap4 Migration Guide Bootstrap4 Japanese Reference Introduction to Tohoho's Bootstrap 4 How to change the color of the Bootstrap 4 hamburger menu

Recommended Posts

Create an EC site with Rails5 ④ ~ Header and footer ~
Create an EC site with Rails5 ⑤ ~ Customer model ~
Create an EC site with Rails 5 ⑩ ~ Create an order function ~
Create an EC site with Rails5 ⑦ ~ Address, Genre model ~
Create an EC site with Rails5 ⑥ ~ seed data input ~
Create an EC site with Rails5 ③-Set model associations and other things-
Create an EC site with Rails5 ② ~ Bootstrap4 settings, Controller / action definition ~
Create an EC site using stripe! (Account creation)
[Rails] Create an application
Creating an EC site with Rails5 ①-App configuration, various gem preparation, Model / Routing creation-
[Rails] EC site cart function
Maybe it works! Create an image with Docker and share it!
Create Rails5 and postgresql environment with Docker and make pgadmin available
Create an immutable class with JAVA
Create portfolio with rails + postgres sql
Create an app with Spring Boot 2
Create an app catalog site using CLI for Microsoft 365 with Docker
[Rails] DB design for EC site
Create pagination function with Rails Kaminari
Create an excel file with poi
Create an app with Spring Boot
Create My Page with Rails devise
Let's create an instance with .new yourself. .. ..
[Java] Create an executable module with Gradle
[Rails6] Create a new app with Rails [Beginner]
Easy deployment with Capistrano + AWS (EC2) + Rails
Building Rails 6 and PostgreSQL environment with Docker
Create Rails 6 + MySQL environment with Docker compose
[Rails withdrawal] Create a simple withdrawal function with rails
[Rails 5] Create a new app with Rails [Beginner]
Let's make an error screen with Rails
Create an ARM-cpu environment with qemu on mac and run java [Result → Failure]
[AWS] Intentionally load an Ubuntu EC2 instance and check the metrics with CloudWatch
Nuxt.js × Create an application in Rails API mode
[Rails / ActiveRecord] About the difference between create and create!
Downgrade an existing app created with rails 5.2.4 to 5.1.6
[Rails] rails new to create a database with PostgreSQL
Create a team chat with Rails Action Cable
Create jupyter notebook with Docker and run ruby
Create an app by specifying the Rails version
Rails6.0 ~ How to create an eco-friendly development environment
How to build API with GraphQL and Rails
Create an Annotator that uses kuromoji with NLP4J [007]
[Rails] How to build an environment with Docker
[Rails] Difference between create method and new + save method
I tried to create a shopping site administrator function / screen with Java and Spring
How to create a header or footer once and use it on another page