Skip to content

V
Venjob_HungNT
Commit 4f3e97eb by Ngo Trung Hung
Options

Top ID1 50%

parent ebb463f1
Showing with 359 additions and 46 deletions
app/assets/javascripts/application.js
...@@ -13,4 +13,6 @@ ...@@ -13,4 +13,6 @@
//= require rails-ujs //= require rails-ujs
//= require activestorage //= require activestorage
//= require turbolinks //= require turbolinks
//= require_tree . // //= require_tree .
app/assets/javascripts/custom.js 0 → 100644
$(document).ready(function () {
$('.btn_favorite_outline').click(function (e) {
$(this).toggleClass('active');
});
});
\ No newline at end of file
app/assets/stylesheets/custom.scss
...@@ -26,16 +26,12 @@ $main-color: #221f20; ...@@ -26,16 +26,12 @@ $main-color: #221f20;
margin: auto; margin: auto;
height: 100%; height: 100%;
} }
.header_top_logo {
}
.logo_header { .logo_header {
margin-top: 5px; margin-top: 5px;
height: 42px; height: 42px;
} }
.header_top_menu_right {
}
.list_menu_header_right { .list_menu_header_right {
list-style: none; list-style: none;
display: flex; display: flex;
...@@ -103,6 +99,7 @@ $main-color: #221f20; ...@@ -103,6 +99,7 @@ $main-color: #221f20;
position: absolute; position: absolute;
left: 0px; left: 0px;
display: none; display: none;
cursor: pointer;
} }
.avatar_manu { .avatar_manu {
...@@ -367,6 +364,7 @@ $main-color: #221f20; ...@@ -367,6 +364,7 @@ $main-color: #221f20;
display: flex; display: flex;
.show_list_cities { .show_list_cities {
cursor: pointer;
border: none; border: none;
outline: none; outline: none;
background-color: #fff; background-color: #fff;
...@@ -393,7 +391,7 @@ $main-color: #221f20; ...@@ -393,7 +391,7 @@ $main-color: #221f20;
outline: none; outline: none;
border: none; border: none;
text-align: center; text-align: center;
background-color: #5252ff; background-color: #EA1E30;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #fff; color: #fff;
...@@ -401,7 +399,7 @@ $main-color: #221f20; ...@@ -401,7 +399,7 @@ $main-color: #221f20;
font-size: 17px; font-size: 17px;
transition: 0.1s; transition: 0.1s;
&:hover { &:hover {
background-color: blue; background-color: #d41323;
} }
&:focus { &:focus {
outline: none !important; outline: none !important;
...@@ -434,7 +432,7 @@ $main-color: #221f20; ...@@ -434,7 +432,7 @@ $main-color: #221f20;
.box-search-mobile { .box-search-mobile {
display: none; display: none;
width: 100%; width: 100%;
height: 140px; height: 120px;
padding: 0 3%; padding: 0 3%;
// background-color: rgba(20,32,25,0.65); // background-color: rgba(20,32,25,0.65);
background-color: $main-color; background-color: $main-color;
...@@ -448,14 +446,28 @@ $main-color: #221f20; ...@@ -448,14 +446,28 @@ $main-color: #221f20;
padding-left: 10px; padding-left: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.fillter-search-mobile { // .fillter-search-mobile {
padding-top: 20px; // padding-top: 20px;
} // }
.total_job_banner { .slogan_text_h5 {
display: none; display: none;
color: white; color: white;
text-align: center; text-align: center;
} }
.box-show-total-jobs-mobile {
background-color: $main-color;
text-align: center;
padding: 4px 0px;
display: none;
span {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transform: translateY(10px);
font-size: 12.5px;
font-weight: 600;
color: #eaeaea;
}
}
@mixin custom_show_list_industries_mobile { @mixin custom_show_list_industries_mobile {
width: 100%; width: 100%;
border: none; border: none;
...@@ -497,17 +509,10 @@ $main-color: #221f20; ...@@ -497,17 +509,10 @@ $main-color: #221f20;
transform: translateY(-50%); transform: translateY(-50%);
} }
} }
.search_location_mobile { .search_location_mobile {
@include custom_selected_mobile()
@include custom_selected_mobile()
} }
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: $breakpoint-tablet) { @media only screen and (max-width: $breakpoint-tablet) {
.slogan { .slogan {
top: 25%; top: 25%;
...@@ -526,7 +531,8 @@ $main-color: #221f20; ...@@ -526,7 +531,8 @@ $main-color: #221f20;
} }
.total_job { .total_job {
font-weight: bold; font-weight: bold;
color: black; width: 100%;
text-align: center;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
.show_total_job { .show_total_job {
...@@ -535,6 +541,7 @@ $main-color: #221f20; ...@@ -535,6 +541,7 @@ $main-color: #221f20;
} }
} }
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.slogan { .slogan {
top: 10%; top: 10%;
...@@ -545,21 +552,16 @@ $main-color: #221f20; ...@@ -545,21 +552,16 @@ $main-color: #221f20;
transform: scale(1.2); transform: scale(1.2);
font-weight: 500; font-weight: 500;
} }
.box-search-tablet { // .box-search-tablet {
display: block; // display: block;
} // }
} }
@media only screen and (max-width: 660px) { @media only screen and (max-width: 660px) {
.slogan {
}
// .banner-top {
// display: none;
// }
.slogan_text { .slogan_text {
display: none; display: none;
} }
.total_job_banner { .slogan_text_h5 {
display: block; display: block;
} }
.box-search-mobile { .box-search-mobile {
...@@ -568,7 +570,13 @@ $main-color: #221f20; ...@@ -568,7 +570,13 @@ $main-color: #221f20;
.box-search-tablet { .box-search-tablet {
display: none; display: none;
} }
.btn_search_submit {
font-size: 12px;
}
.box-show-total-jobs-mobile{
display: block;
}
} }
@media only screen and (max-width: 580px) { @media only screen and (max-width: 580px) {
.search_industries_mobile { .search_industries_mobile {
...@@ -579,11 +587,222 @@ $main-color: #221f20; ...@@ -579,11 +587,222 @@ $main-color: #221f20;
} }
} }
.box-search-mobile { .box-search-mobile {
height: 180px; height: 160px;
}
.slogan_text_h5 {
font-size: 16px;
font-weight: 600;
}
}
// Use scss index
.padding_index {
width: 100%;
height: 100px;
}
.box_text_five_jobs {
width: 100%;
text-align: center;
margin-bottom: 20px;
span {
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 200;
}
}
.box_jobs {
position: relative;
width: 100%;
height: 130px;
margin: auto;
margin-top: 10px;
margin-bottom: 5px;
border-radius: 2px;
border: 1px solid #999;
transition: linear 0.2s;
&:hover {
transition: linear 0.2s;
box-shadow: 0px 0px 5px 2px rgb(218, 218, 218);
}
}
.box_info {
position: relative;
margin: 10px 0px 10px 25px;
}
.img_job_name {
width: 18px;
height: 18px;
transform: translateY(-1px);
}
.job_name {
font-size: 14px;
line-height: 14px;
font-weight: 600;
color: #d41323;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: #af000f;
text-decoration: none;
}
}
.box_info_copany_name {
font-size: 12.5px;
line-height: 12.5px;
color: #666;
margin-top: 5px;
}
.lol {
width: 100%;
height: 28px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.box_info_location {
font-size: 11px;
color: #666;
margin-top: 5px;
}
.box_info_salary {
font-size: 11px;
color: #008563;
font-weight: 600;
transform: translateY(-2px);
}
.box_btn_favotite {
position: relative;
width: 100%;
height: 130px;
// background-color: #d41323;
}
.coc {
height: 12px;
width:100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-top: -3px;
}
.box_info_des {
width: 100%;
font-size: 11px;
line-height: 12px;
color: #888;
margin: 0;
}
.btn_favorite_outline {
position: absolute;
top: 50%;
transform: translateY(-50%);
outline: none;
background-color: transparent;
border: 1px solid rgb(211, 211, 211);
border-radius: 4px;
width: 120px;
height: 40px;
color: #666;
font-size: 15px;
animation: cubic-bezier(0.075, 0.82, 0.165, 1);
transition: 0.3s;
&:hover {
animation: cubic-bezier(0.075, 0.82, 0.165, 1);
transition: 0.3s;
color: #fff;
background-color: #e74754;
}
&:focus {
outline: none;
}
}
.btn_favorite_outline.active {
color: #fff;
background-color: #d41323;
outline: none;
}
.btn_favorite_outline.small {
display: none;
}
.btn_favorite_outline.xs {
display: none;
}
@media only screen and (max-width: $breakpoint-tablet) {
// index
.padding_index {
height: 60px;
} }
.total_job_banner { .box_text_five_jobs {
span {
font-size: 20px;
}
}
.coc {
height: 12px;
width:100%;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-top: -3px;
}
.box_info_des {
width: 100%;
font-size: 11px;
line-height: 12px;
color: #888;
margin: 0;
}
.btn_favorite_outline {
display: none; display: none;
} }
.btn_favorite_outline.small {
width: 80%;
display: block;
}
}
@media only screen and (max-width: 768px) {
// index
.padding_index {
height: 45px;
}
.box_text_five_jobs {
span {
font-size: 17px;
}
}
}
@media only screen and (max-width: 660px) {
.padding_index {
height: 25px;
}
.btn_favorite_outline.xs {
width: 45px;
position: absolute;
top: 36px;
right: 16px;
display: block;
z-index: 200;
}
}
@media only screen and (max-width: 576px) {
.lol {
width: 80%;
}
} }
app/controllers/home_controller.rb
...@@ -2,7 +2,10 @@ class HomeController < ApplicationController ...@@ -2,7 +2,10 @@ class HomeController < ApplicationController
def index def index
@data_industries = Industry.sort_asc.all @data_industries = Industry.sort_asc.all
@data_job = Job.all @data_total_job = Job.all.count
@data_five_jobs = Company.get_5_last_jobs()
@data_cities = City.all @data_cities = City.all
end end
end end
app/helpers/application_helper.rb
module ApplicationHelper module ApplicationHelper
def full_title(page_title)
base_title = "VenJob"
if page_title.empty?
base_title
else
"#{base_title} | #{page_title}"
end
end
end end
app/models/city.rb
class City < ApplicationRecord class City < ApplicationRecord
has_many :city_jobs has_many :city_jobs
has_many :jobs, through: :city_jobs has_many :jobs, through: :city_jobs
end end
app/models/company.rb
class Company < ApplicationRecord class Company < ApplicationRecord
has_many :jobs has_many :jobs
def self.get_5_last_jobs
data = Company.joins(:jobs).select('companies.*, jobs.name as job_title,
jobs.create_date as job_created,
jobs.salary,
jobs.description').where('companies.id = jobs.company_id')
@data_five_jobs = data.order(job_created: :desc).limit(5)
end
end end
app/views/home/_banner_and_search.html.erb
...@@ -6,17 +6,18 @@ ...@@ -6,17 +6,18 @@
<h2 class = "slogan_text"> <h2 class = "slogan_text">
NỀN TẢNG TUYỂN DỤNG NHÂN SỰ VENJOB NỀN TẢNG TUYỂN DỤNG NHÂN SỰ VENJOB
</h2> </h2>
<h4 class = "total_job_banner"> <h5 class = "slogan_text_h5">
NỀN TẢNG TUYỂN DỤNG NHÂN SỰ VENJOB NỀN TẢNG TUYỂN DỤNG NHÂN SỰ VENJOB
</h4> </h5>
</div> </div>
</div> </div>
</div> </div>
<!-- Process search pc-->
<div class="box-search"> <div class="box-search">
<div class="search_scaffold"> <div class="search_scaffold">
<div class = "total_job"> <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> <h4 class="show_total_job">Khám phá ngay <b><%=@data_total_job%></b> việc làm tốt nhất trên VenJob</h4>
</div> </div>
<div class="filter_box"> <div class="filter_box">
<div class="search_input"> <div class="search_input">
...@@ -53,10 +54,11 @@ ...@@ -53,10 +54,11 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Process search tablet-->
<div class="box-search-tablet"> <div class="box-search-tablet">
<div class="search_scaffold-tablet"> <div class="search_scaffold-tablet">
<div class = "total_job"> <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> <h4 class="show_total_job">Khám phá ngay <b><%=@data_total_job%></b> việc làm tốt nhất trên VenJob</h4>
</div> </div>
<div class="filter_box filter_box_tablet"> <div class="filter_box filter_box_tablet">
<div class="search_input"> <div class="search_input">
...@@ -93,6 +95,10 @@ ...@@ -93,6 +95,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box-show-total-jobs-mobile">
<span>Khám phá ngay <%=@data_total_job%></b> việc làm tốt nhất trên VenJob</span>
</div>
<!-- Process search mobile-->
<div class="box-search-mobile"> <div class="box-search-mobile">
<div class="fillter-search-mobile"> <div class="fillter-search-mobile">
<div class="container"> <div class="container">
......
app/views/home/index.html.erb
<%= render 'home/banner_and_search' %>
<div class="padding_index"></div>
<div class="box_text_five_jobs">
<span>Năm công việc mới nhất dành cho bạn</span>
</div>
<%= render 'shared/box_five_job' %>
app/views/layouts/application.html.erb
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>HungntVenjob</title> <title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= 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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head> </head>
...@@ -16,7 +18,7 @@ ...@@ -16,7 +18,7 @@
<%= 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' %>
......
app/views/shared/_box_five_job.html.erb 0 → 100644
<div class="container">
<div class="row">
<div class="col-sm-12">
<% @data_five_jobs.each do |val| %>
<div class="box_jobs">
<div class="col-sm-12 d-block d-sm-none">
<button type="submit" class="btn_favorite_outline xs">
<i class="far fa-heart"></i>
</button>
</div>
<div class="row">
<div class="col-sm-10 col-md-9 col-lg-10">
<div class="box_info">
<div class="lol">
<%= link_to "#{val.job_title}", "#", class: "job_name" %>
<%= image_tag 'trophy',class: "img_job_name" %>
</div>
<h5 class="box_info_copany_name"><i class="far fa-building"></i> <%= val.name %></h5>
<h5 class="box_info_location"><i class="fas fa-map-marker-alt"></i> <%= val.address %></h5>
<h5 class="box_info_salary"><i class="fas fa-dollar-sign"></i> Lương: <%= val.salary %></h5>
<div class="coc" >
<h5 class="box_info_des"><%= strip_tags(val.description) %></h5>
</div>
</div>
</div>
<div class="col-sm-2 col-md-3 d-none d-sm-block col-lg-2">
<div class="box_btn_favotite">
<button type="submit" class="btn_favorite_outline">
<i class="far fa-heart"></i> Yêu thích
</button>
<button type="submit" class="btn_favorite_outline small">
<i class="far fa-heart"></i>
</button>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
lib/src/interface_web.rb
...@@ -21,10 +21,10 @@ class Interface_web ...@@ -21,10 +21,10 @@ class Interface_web
data << website_companies << website_jobs data << website_companies << website_jobs
end end
@crawl_link_for_companies_jobs = crawl_link_for_companies_jobs(4) @crawl_link_for_companies_jobs = crawl_link_for_companies_jobs(10)
def self.get_link_job_and_companies def self.get_link_job_and_companies
@crawl_link_for_companies_jobs ||= crawl_link_for_companies_jobs(4) @crawl_link_for_companies_jobs ||= crawl_link_for_companies_jobs(10)
end end
def self.base_link(url) def self.base_link(url)
...@@ -69,6 +69,8 @@ class Interface_web ...@@ -69,6 +69,8 @@ class Interface_web
@data_companies @data_companies
end end
add_data = proc do
end
def self.crawl_data_jobs_interface_1(url) def self.crawl_data_jobs_interface_1(url)
page = base_link(url) page = base_link(url)
......
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