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).
Both the header and footer are displayed without any problem.
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