Commit 7bf75241 by Mai Hoang Thai Ha

add layout header and footer

parent aa1b7f6c
Pipeline #1326 failed with stages
in 0 seconds
...@@ -10,7 +10,7 @@ gem 'sqlite3', '~> 1.4' ...@@ -10,7 +10,7 @@ gem 'sqlite3', '~> 1.4'
# Use Puma as the app server # Use Puma as the app server
gem 'puma', '~> 5.0' gem 'puma', '~> 5.0'
# Use SCSS for stylesheets # Use SCSS for stylesheets
gem 'sass-rails', '>= 6' gem 'sass-rails', '~> 6.0'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0' gem 'webpacker', '~> 5.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
......
...@@ -208,7 +208,7 @@ DEPENDENCIES ...@@ -208,7 +208,7 @@ DEPENDENCIES
puma (~> 5.0) puma (~> 5.0)
rack-mini-profiler (~> 2.0) rack-mini-profiler (~> 2.0)
rails (~> 6.1.3, >= 6.1.3.2) rails (~> 6.1.3, >= 6.1.3.2)
sass-rails (>= 6) sass-rails (~> 6.0)
selenium-webdriver selenium-webdriver
spring spring
sqlite3 (~> 1.4) sqlite3 (~> 1.4)
......
// @import "bootstrap"; // @import "bootstrap";
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
.name { // reset css
font-size: 100px; *{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
text-decoration: none;
box-sizing: border-box;
}
// header
header {
background-color: black;
.container {
padding: 8px 0;
nav {
ul {
flex-direction: row;
li {
margin-left: 18px;
a {
color: $gray-400;
font-size: 18px;
text-decoration: none;
font-weight: 500;
&:hover{
color: $white;
}
}
}
}
}
}
}
// footer
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #777;
a {
text-decoration:none;
color: $gray-600;
&:hover {
color: $gray-900;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 15px;
}
}
} }
\ No newline at end of file
// Place all the styles related to the StaticPages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/
class ApplicationController < ActionController::Base class ApplicationController < ActionController::Base
def hello
render html: "Welcome to VenJob"
end
end end
class StaticPagesController < ApplicationController
def home
end
def help
end
end
module StaticPagesHelper
end
<footer class="footer">
<small>
The <%= link_to "VenJob", root_path %>
by Mai Hoàng Thái Hà
</small>
<nav>
<ul>
<li><%= link_to "About", '#' %></li>
<li><%= link_to "Contact", '#' %></li>
</ul>
</nav>
</footer>
\ No newline at end of file
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to image_tag("logo.png", alt: "Zigexn logo", width: "150"),
root_path %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Log in", '#' %></li>
<li><%= link_to "Sign up", '#' %></li>
</ul>
</nav>
</div>
</header>
\ No newline at end of file
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>VenJob</title> <title>hi</title>
<meta name="viewport" content="width=device-width,initial-scale=1"> <%# <%= full_title(yield(:title)) %>
<meta name="viewport" content="width=device-width,initial-scale=1" charset="utf-8">
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
<%= csp_meta_tag %> <%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= render 'layouts/shim' %>
</head> </head>
<body> <body>
<%= yield %> <%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body> </body>
</html> </html>
<h1>StaticPages#help</h1>
<p>Find me in app/views/static_pages/help.html.erb</p>
<h1>StaticPages#home</h1>
<p>Find me in app/views/static_pages/home.html.erb</p>
Rails.application.routes.draw do Rails.application.routes.draw do
root 'application#hello' root 'static_pages#home'
get 'help' => 'static_pages#help'
get 'about' => 'static_pages#about'
# get 'contact' => 'static_pages#contact'
end end
require "test_helper"
class StaticPagesControllerTest < ActionDispatch::IntegrationTest
test "should get home" do
get static_pages_home_url
assert_response :success
end
test "should get help" do
get static_pages_help_url
assert_response :success
end
end
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment