Skip to content

V
Venjob_HungNT
Commit 80a5debb by Ngo Trung Hung
Options

create top id1

parent 943b2278
Showing with 560 additions and 22 deletions
app/assets/stylesheets/brands.css 0 → 100644
/*!
* Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-brands-400.eot");
src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400; }
app/assets/stylesheets/custom.scss
...@@ -3,6 +3,10 @@ body { ...@@ -3,6 +3,10 @@ body {
margin: 0px; margin: 0px;
box-sizing: border-box; box-sizing: border-box;
} }
.app {
overflow: hidden;
}
$breakpoint-tablet: 922px; $breakpoint-tablet: 922px;
$main-color: #221f20; $main-color: #221f20;
// Header // Header
...@@ -11,7 +15,9 @@ $main-color: #221f20; ...@@ -11,7 +15,9 @@ $main-color: #221f20;
width: 100%; width: 100%;
background-color: $main-color; background-color: $main-color;
position: fixed; position: fixed;
box-shadow: 0px 2px 4px 2px #999; border-bottom: 1px solid #333;
// box-shadow: 0px 2px 4px 2px #999;
z-index: 10000;
} }
.header_top { .header_top {
display: flex; display: flex;
...@@ -82,11 +88,11 @@ $main-color: #221f20; ...@@ -82,11 +88,11 @@ $main-color: #221f20;
height: 100vh; height: 100vh;
transition: 0.3s; transition: 0.3s;
// background-color: whitesmoke; // background-color: whitesmoke;
transform: translateX(-100%); transform: translateX(-120%);
margin-top: 40px; margin-top: 40px;
background-color: #2d2d2d; background-color: #2d2d2d;
overflow: hidden; overflow: hidden;
z-index: 1000; z-index: 100 !important;
} }
.lbn-nav { .lbn-nav {
...@@ -217,3 +223,367 @@ $main-color: #221f20; ...@@ -217,3 +223,367 @@ $main-color: #221f20;
width: 100%; width: 100%;
height: 140vh; height: 140vh;
} }
// Banner
.box-banner {
width: 100%;
position: relative;
}
.banner-top {
width: 100%;
}
.slogan {
position: absolute;
top: 35%;
left: 50%;
transform: translateX(-50%);
}
.slogan_text {
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: #eaeaea;
transform: scale(1.35);
font-weight: 600;
margin: 0;
padding: 0;
}
.total_job {
position: absolute;
bottom: 100%;
}
.show_total_job {
color: rgb(216, 216, 216);
font-size: 16px;
}
.box-search {
height: 146px;
width: 970px;
background-color: rgba(20,32,25,0.65);
border-radius: 4px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateY(50%) translateX(-50%);
}
.filter_box {
width: 932px;
height: 54px;
background-color: #fff;
// border: 0.5px solid #999;
border-radius: 2px;
overflow: hidden;
margin: auto;
}
.search_scaffold {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.filter_box {
display: flex;
}
.search_input {
position: relative;
width: 34%;
height: 100%;
&::before {
position: absolute;
content: '';
width: 1px;
height: 30px;
border-right: 0.5px solid #999;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.custom_input_search {
width: 100%;
height: 100%;
outline: none;
border: none;
padding-left: 16px;
color: #666;
font-size: 14px;
}
}
.search_industries {
position: relative;
width: 24%;
height: 100%;
padding: 0px 10px;
display: flex;
.show_list_industries {
border: none;
outline: none;
background-color: #fff;
color: #666;
font-size: 14px;
// font-weight: bold;
height: 100%;
width: 100%;
flex-basis: 90%;
}
.icon_list {
height: 100%;
flex-basis: 10%;
color: #999;
font-weight: 100;
transform: scale(1.2) translateY(13px);
}
&::before {
position: absolute;
content: '';
width: 1px;
height: 30px;
border-right: 0.5px solid #999;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
.search_industries select{
padding: 12px 10px 12px 10px;
width: 100%;
border-radius: 4px !important;
box-shadow: none;
background: transparent;
outline: none;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
}
.search_location {
position: relative;
width: 24%;
height: 100%;
padding: 0px 10px;
display: flex;
.show_list_cities {
border: none;
outline: none;
background-color: #fff;
color: #666;
font-size: 14px;
// font-weight: bold;
height: 100%;
width: 100%;
flex-basis: 90%;
}
.icon_list {
height: 100%;
flex-basis: 10%;
color: #999;
font-weight: 100;
transform: scale(1.2) translateY(13px);
}
}
.search_submit {
flex-basis: 18%;
}
.btn_search_submit {
outline: none;
border: none;
text-align: center;
background-color: #5252ff;
width: 100%;
height: 100%;
color: #fff;
font-weight: bold;
font-size: 17px;
transition: 0.1s;
&:hover {
background-color: blue;
}
&:focus {
outline: none !important;
}
}
.box-search-tablet {
display: none;
height: 146px;
width: 100%;
border-radius: 4px;
position: absolute;
bottom: 0;
transform: translateY(50%) ;
}
.search_scaffold-tablet {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.filter_box_tablet {
width: 100%;
height: 54px;
background-color: #fff;
border: 1px solid #999;
border-radius: 2px;
overflow: hidden;
margin: auto;
}
.box-search-mobile {
display: none;
width: 100%;
height: 150px;
padding: 0 3%;
// background-color: rgba(20,32,25,0.65);
background-color: $main-color;
}
.custom_input_mobile_search {
width: 100%;
height: 30px;
font-size: 12px;
outline: none;
border: none;
padding-left: 10px;
margin-bottom: 10px;
}
.fillter-search-mobile {
padding-top: 20px;
}
.total_job_banner {
display: none;
color: white;
text-align: center;
}
@mixin custom_show_list_industries_mobile {
width: 100%;
border: none;
outline: none;
text-overflow: ellipsis;
background-color: #fff;
height: 100%;
font-size: 12px;
padding-left: 5px;
color: #666;
}
.show_list_industries_mobile {
@include custom_show_list_industries_mobile();
}
.show_list_cities_mobile {
@include custom_show_list_industries_mobile()
}
@mixin custom_selected_mobile {
width: 100%;
outline: none;
border: none;
height: 30px;
background-color: #fff;
color: #666;
margin-bottom: 10px;
}
.search_industries_mobile {
position: relative;
@include custom_selected_mobile();
&::before {
position: absolute;
content: '';
width: 1px;
height: 20px;
border-right: 1px solid #999;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
.search_location_mobile {
@include custom_selected_mobile()
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: $breakpoint-tablet) {
.slogan {
top: 25%;
}
.slogan_text {
font-size: 20px;
color: #eaeaea;
transform: scale(1.4);
font-weight: 500;
}
.box-search {
display: none;
}
.box-search-tablet {
display: block;
}
.total_job {
font-weight: bold;
color: black;
left: 50%;
transform: translateX(-50%);
.show_total_job {
color: #fff;
font-weight: bold;
}
}
}
@media only screen and (max-width: 768px) {
.slogan {
top: 10%;
}
.slogan_text {
font-size: 20px;
color: #eaeaea;
transform: scale(1.2);
font-weight: 500;
}
.box-search-tablet {
display: block;
}
}
@media only screen and (max-width: 660px) {
.slogan {
}
// .banner-top {
// display: none;
// }
.slogan_text {
display: none;
}
.total_job_banner {
display: block;
}
.box-search-mobile {
display: block;
}
.box-search-tablet {
display: none;
}
}
@media only screen and (max-width: 580px) {
.search_industries_mobile {
position: relative;
@include custom_selected_mobile();
&::before {
display: none;
}
}
.box-search-mobile {
height: 180px;
}
.total_job_banner {
display: none;
}
}
app/assets/stylesheets/solid.css 0 → 100644
/*!
* Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
app/controllers/home_controller.rb
class HomeController < ApplicationController class HomeController < ApplicationController
def index def index
@data = Job.all @data_industries = Industry.sort_asc.all
@data2 = Company.all @data_job = Job.all
@data_cities = City.all
end end
end end
app/models/industry.rb
class Industry < ApplicationRecord class Industry < ApplicationRecord
has_many :industry_jobs has_many :industry_jobs
has_many :jobs, through: :industry_jobs has_many :jobs, through: :industry_jobs
scope :sort_asc, -> { order(name: :asc)}
# Ex:- scope :active, lambda {where(:active => true)}
# Ex:- scope :active, -> {where(:active => true)}
end end
app/views/home/_banner_and_search.html.erb 0 → 100644
<div class = "box-banner">
<%= image_tag 'banner-search-box-home', class: "banner-top" %>
<div class="row">
<div class="col-xs-12">
<div class = "slogan">
<h2 class = "slogan_text">
NỀN TẢNG TUYỂN DỤNG NHÂN SỰ VENJOB
</h2>
<h4 class = "total_job_banner">
NỀN TẢNG TUYỂN DỤNG NHÂN SỰ VENJOB
</h4>
</div>
</div>
</div>
<div class="box-search">
<div class="search_scaffold">
<div class = "total_job">
<h4 class="show_total_job">Khám phá ngay <b><%=@data_job.count%></b> việc làm tốt nhất trên VenJob</h4>
</div>
<div class="filter_box">
<div class="search_input">
<input type="search" name="" id="" class="custom_input_search" placeholder="Nhập tiêu đề, công ty, địa điểm...">
</div>
<div class="search_industries">
<div class="icon_list">
<i class="fa fa-list-ul" aria-hidden="true"></i>
</div>
<select class="show_list_industries">
<option value="*" selected disabled hidden class="select_first">Tất cả ngành nghề</option>
<% @data_industries.each do |val| %>
<option value="<%= val.id %>"><%= val.name %></option>
<% end %>
</select>
</div>
<div class="search_location">
<div class="icon_list">
<i class="fas fa-map-marker-alt"></i>
</div>
<select class="show_list_cities">
<option value="*" selected disabled hidden class="select_first">Tất cả Tỉnh thành</option>
<% @data_cities.each do |val| %>
<option value="<%= val.id %>"><%= val.name %></option>
<% end %>
</select>
</div>
<div class="search_submit">
<button type="submit" class="btn_search_submit">
<i class="fas fa-search"></i>
Tìm việc
</button>
</div>
</div>
</div>
</div>
<div class="box-search-tablet">
<div class="search_scaffold-tablet">
<div class = "total_job">
<h4 class="show_total_job">Khám phá ngay <b><%=@data_job.count%></b> việc làm tốt nhất trên VenJob</h4>
</div>
<div class="filter_box filter_box_tablet">
<div class="search_input">
<input type="search" name="" id="" class="custom_input_search" placeholder="Nhập tiêu đề, công ty, địa điểm...">
</div>
<div class="search_industries">
<div class="icon_list">
<i class="fa fa-list-ul" aria-hidden="true"></i>
</div>
<select class="show_list_industries">
<option value="*" selected disabled hidden class="select_first">Tất cả ngành nghề</option>
<% @data_industries.each do |val| %>
<option value="<%= val.id %>"><%= val.name %></option>
<% end %>
</select>
</div>
<div class="search_location">
<div class="icon_list">
<i class="fas fa-map-marker-alt"></i>
</div>
<select class="show_list_cities">
<option value="*" selected disabled hidden class="select_first">Tất cả Tỉnh thành</option>
<% @data_cities.each do |val| %>
<option value="<%= val.id %>"><%= val.name %></option>
<% end %>
</select>
</div>
<div class="search_submit">
<button type="submit" class="btn_search_submit">
<i class="fas fa-search"></i>
Tìm việc
</button>
</div>
</div>
</div>
</div>
<div class="box-search-mobile">
<div class="fillter-search-mobile">
<div class="container">
<div class="row no-gutters">
<div class="col-md-12">
<input type="search" name="" id="" class="custom_input_mobile_search" placeholder="Nhập tiêu đề, công ty, địa điểm...">
</div>
<div class="col-sm-6 col-xs-12">
<div class="search_industries_mobile">
<select class="show_list_industries_mobile">
<option value="*" selected disabled hidden class="select_first">Tất cả ngành nghề</option>
<% @data_industries.each do |val| %>
<option value="<%= val.id %>"><%= val.name %></option>
<% end %>
</select>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="search_location_mobile">
<select class="show_list_cities_mobile">
<option value="*" selected disabled hidden class="select_first">Tất cả Tỉnh thành</option>
<% @data_cities.each do |val| %>
<option value="<%= val.id %>"><%= val.name %></option>
<% end %>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row no-gutters">
<div class="offset-6 col-sm-6">
<button type="submit" class="btn_search_submit">
<i class="fas fa-search"></i>
Tìm việc
</button>
</div>
</div>
</div>
</div>
</div>
app/views/home/index.html.erb
<% @data.each do |val| %>
<h1></h1> <%= val.name %>
<% end %>
<% @data2.each do |val| %>
<h1></h1> <%= val.name %>
<% end %>
\ No newline at end of file
app/views/layouts/_header.html.erb
...@@ -10,16 +10,16 @@ ...@@ -10,16 +10,16 @@
<div class="header_top_menu_right"> <div class="header_top_menu_right">
<ul class="list_menu_header_right"> <ul class="list_menu_header_right">
<li class="list_item_menu_header_right"> <li class="list_item_menu_header_right">
<%= link_to 'Favorite', '#', class: 'link_item_menu_header_right' %> <%= link_to 'Yêu thích', '#', class: 'link_item_menu_header_right' %>
</li> </li>
<li class="list_item_menu_header_right"> <li class="list_item_menu_header_right">
<%= link_to 'History', '#', class: 'link_item_menu_header_right' %> <%= link_to 'Lịch sử', '#', class: 'link_item_menu_header_right' %>
</li> </li>
<li class="list_item_menu_header_right"> <li class="list_item_menu_header_right">
<%= link_to 'Login', '#', class: 'link_item_menu_header_right' %> <%= link_to 'Đăng nhập', '#', class: 'link_item_menu_header_right' %>
</li> </li>
<li class="list_item_menu_header_right"> <li class="list_item_menu_header_right">
<%= link_to 'Register', '#', class: 'link_item_menu_header_right' %> <%= link_to 'Đăng ký', '#', class: 'link_item_menu_header_right' %>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -30,16 +30,16 @@ ...@@ -30,16 +30,16 @@
<div class = "menu_mobile_vertical"> <div class = "menu_mobile_vertical">
<ul class = "list_menu_mobile_vertical"> <ul class = "list_menu_mobile_vertical">
<li class = "item_menu_mobile_vertical"> <li class = "item_menu_mobile_vertical">
<%= link_to 'Favorite', '#', class: 'link_item_menu_mobile' %> <%= link_to 'Yêu thích', '#', class: 'link_item_menu_mobile' %>
</li> </li>
<li class = "item_menu_mobile_vertical"> <li class = "item_menu_mobile_vertical">
<%= link_to 'History', '#', class: 'link_item_menu_mobile' %> <%= link_to 'Lịch sử', '#', class: 'link_item_menu_mobile' %>
</li> </li>
<li class = "item_menu_mobile_vertical"> <li class = "item_menu_mobile_vertical">
<%= link_to 'Login', '#', class: 'link_item_menu_mobile' %> <%= link_to 'Đăng nhập', '#', class: 'link_item_menu_mobile' %>
</li> </li>
<li class = "item_menu_mobile_vertical"> <li class = "item_menu_mobile_vertical">
<%= link_to 'Register', '#', class: 'link_item_menu_mobile' %> <%= link_to 'Đăng ký', '#', class: 'link_item_menu_mobile' %>
</li> </li>
</ul> </ul>
</div> </div>
......
app/views/layouts/application.html.erb
...@@ -7,14 +7,18 @@ ...@@ -7,14 +7,18 @@
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
<%= csp_meta_tag %> <%= csp_meta_tag %>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div class = "app"> <div class = "app">
<%= render 'layouts/header' %> <%= render 'layouts/header' %>
<%= render 'layouts/padding' %> <%= render 'layouts/padding' %>
<%= render 'home/banner_and_search' %>
<%= yield %> <%= yield %>
<div class = "xxx"></div> <div class="xxx"></div>
<%= render 'layouts/footer' %> <%= render 'layouts/footer' %>
</div> </div>
</body> </body>
......
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