Skip to content

V
Venjob_HungNT
Commit 85f48540 by Ngo Trung Hung
Options

create UI Top City

parent b3581cb3
Showing with 170 additions and 15 deletions
app/assets/stylesheets/custom.scss
...@@ -5,6 +5,7 @@ body { ...@@ -5,6 +5,7 @@ body {
} }
.app { .app {
overflow: hidden; overflow: hidden;
background-color: #f0f0f0;
} }
$breakpoint-tablet: 992px; $breakpoint-tablet: 992px;
...@@ -122,12 +123,12 @@ $main-color: #221f20; ...@@ -122,12 +123,12 @@ $main-color: #221f20;
.item_menu_mobile_vertical { .item_menu_mobile_vertical {
list-style: none; list-style: none;
text-align: center; text-align: center;
margin: 18px 0; margin: 24px 0;
} }
.link_item_menu_mobile { .link_item_menu_mobile {
font-size: 14px; font-size: 17px;
color: white; color: white;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
...@@ -179,6 +180,7 @@ $main-color: #221f20; ...@@ -179,6 +180,7 @@ $main-color: #221f20;
} }
.check-nav-mobile:checked ~ .overlay { .check-nav-mobile:checked ~ .overlay {
display: block; display: block;
background-color: rgba($color: #000000, $alpha: 0.2);
} }
.check-nav-mobile:checked ~ .menu__mobile { .check-nav-mobile:checked ~ .menu__mobile {
...@@ -438,7 +440,7 @@ $main-color: #221f20; ...@@ -438,7 +440,7 @@ $main-color: #221f20;
.custom_input_mobile_search { .custom_input_mobile_search {
width: 100%; width: 100%;
height: 30px; height: 30px;
font-size: 12px; font-size: 13px;
outline: none; outline: none;
border: none; border: none;
padding-left: 10px; padding-left: 10px;
...@@ -473,7 +475,7 @@ $main-color: #221f20; ...@@ -473,7 +475,7 @@ $main-color: #221f20;
text-overflow: ellipsis; text-overflow: ellipsis;
background-color: #fff; background-color: #fff;
height: 100%; height: 100%;
font-size: 12px; font-size: 13px;
padding-left: 5px; padding-left: 5px;
color: #666; color: #666;
} }
...@@ -542,6 +544,7 @@ $main-color: #221f20; ...@@ -542,6 +544,7 @@ $main-color: #221f20;
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.slogan { .slogan {
width: 100%;
top: 10%; top: 10%;
} }
.slogan_text { .slogan_text {
...@@ -613,6 +616,8 @@ $main-color: #221f20; ...@@ -613,6 +616,8 @@ $main-color: #221f20;
.box_jobs { .box_jobs {
position: relative; position: relative;
background-color: #fff;
border-radius: 2px;
width: 100%; width: 100%;
height: 134px; height: 134px;
margin: auto; margin: auto;
...@@ -620,10 +625,11 @@ $main-color: #221f20; ...@@ -620,10 +625,11 @@ $main-color: #221f20;
margin-bottom: 5px; margin-bottom: 5px;
border-radius: 2px; border-radius: 2px;
border: 1px solid #999; border: 1px solid #999;
transition: linear 0.2s; transition: 0.2s;
&:hover { &:hover {
transition: linear 0.2s; transition: 0.2s;
box-shadow: 0px 0px 5px 2px rgb(218, 218, 218); box-shadow: 0px 1px 5px 3px rgb(218, 218, 218);
transform: scale(1.002);
} }
} }
...@@ -750,6 +756,106 @@ $main-color: #221f20; ...@@ -750,6 +756,106 @@ $main-color: #221f20;
.btn_favorite_outline.xs { .btn_favorite_outline.xs {
display: none; display: none;
} }
.load_all_jobs {
width: 80%;
height: 30px;
padding: 3px;
text-align: center;
margin: 10px auto;
position: relative;
&::before {
content: "";
position: absolute;
width: 40%;
height: 1px;
border-top: 1px solid rgba($color: #000000, $alpha: 0.3);
top: 0;
left: 5%;
transform: translateY(-50%);
transition: 0.3s;
}
&::after {
content: "";
position: absolute;
width: 40%;
height: 1px;
border-top: 1px solid rgba($color: #000000, $alpha: 0.3);
bottom: 0;
right: 5%;
transform: translateY(-50%);
transition: 0.3s;
}
&:hover {
&::after {
right: 30%;
transition: 0.3s;
}
&::before {
left: 30%;
transition: 0.3s;
}
}
}
.load_all_jobs_text {
line-height: 24px;
font-size: 15px;
font-family: 'Raleway', sans-serif;
font-weight: 600;
color: #c7535dc9;
&:hover {
text-decoration: none;
color: #EA1E30;;
}
}
// Box nine city
.border_box_cities {
// border: 1px solid rgba($color: #000000, $alpha: 0.3);
width: 100%;
height: auto;
margin-top: 25px;
}
.box_text_five_jobs.box_padding_city {
background-color: #da6d2e;
color: white;
font-weight: 600;
margin-bottom: 0px !important;
}
.box_info_city {
width: 100%;
height: 100px;
background-color: rgb(41, 41, 41);
border: 1px solid rgba($color: #c0c0c0, $alpha: 0.3);
padding-top: 25px;
transition: 0.2s;
&:hover {
.ct_jobs_count {
color: #dadada;
}
transition: 0.2s;
background-color: #444444;
}
}
.link_ct {
color: unset;
&:hover {
text-decoration: none;
color: unset;
}
}
.ct_name {
cursor: pointer;
color: white;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.ct_jobs_count {
cursor: pointer;
text-align: center;
color: #999;
}
@media only screen and (min-width: $breakpoint-tablet) { @media only screen and (min-width: $breakpoint-tablet) {
.btn_search_submit { .btn_search_submit {
width: 101%; width: 101%;
...@@ -762,7 +868,7 @@ $main-color: #221f20; ...@@ -762,7 +868,7 @@ $main-color: #221f20;
} }
.box_text_five_jobs { .box_text_five_jobs {
span { span {
font-size: 20px; font-size: 25px;
} }
} }
...@@ -811,7 +917,7 @@ $main-color: #221f20; ...@@ -811,7 +917,7 @@ $main-color: #221f20;
} }
.box_text_five_jobs { .box_text_five_jobs {
span { span {
font-size: 17px; font-size: 23px;
} }
} }
...@@ -857,7 +963,9 @@ $main-color: #221f20; ...@@ -857,7 +963,9 @@ $main-color: #221f20;
.lol { .lol {
width: 80%; width: 80%;
} }
.box_padding_city {
font-size: 18px !important;
}
} }
app/controllers/home_controller.rb
...@@ -3,7 +3,7 @@ class HomeController < ApplicationController ...@@ -3,7 +3,7 @@ class HomeController < ApplicationController
def index def index
@industries = Industry.sort_asc.all @industries = Industry.sort_asc.all
@job_count = Job.all.count @job_count = Job.all.count
@five_jobs = Job.order(created_at: :asc).where(newdata: 1).limit(50) @five_jobs = Job.order(created_at: :asc).where(newdata: 1).limit(5)
@cities = City.all @cities = City.all
end end
end end
app/views/home/index.html.erb
...@@ -5,4 +5,6 @@ ...@@ -5,4 +5,6 @@
<span>Năm công việc mới nhất dành cho bạn</span> <span>Năm công việc mới nhất dành cho bạn</span>
</div> </div>
<%= render 'shared/box_five_job' %> <%= render 'shared/box_five_job' %>
<%= render 'shared/box_nine_city' %>
app/views/layouts/application.html.erb
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<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:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet"> <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>
...@@ -20,7 +21,6 @@ ...@@ -20,7 +21,6 @@
<%= yield %> <%= yield %>
<div class="xxx"></div>
<%= render 'layouts/footer' %> <%= render 'layouts/footer' %>
</div> </div>
</body> </body>
......
app/views/shared/_block_cities_hot.html.erb 0 → 100644
<div class="box_info_city">
<div class="ct_name">
<%= link_to 'Hồ Chí Minh', '#' ,class: 'link_ct'%>
</div>
<div class="ct_jobs_count">
<%= link_to '69 Công việc', '#' ,class: 'link_ct'%>
</div>
</div>
\ No newline at end of file
app/views/shared/_box_five_job.html.erb
...@@ -55,5 +55,14 @@ ...@@ -55,5 +55,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="load_all_jobs">
<%= link_to '>> Xem tất cả việc làm <<', '#', class: 'load_all_jobs_text'%>
</div>
</div>
</div>
</div>
app/views/shared/_box_nine_city.html.erb 0 → 100644
<div class="container">
<div class="border_box_cities">
<div class="box_text_five_jobs box_padding_city">
<span>Top thành phố</span>
</div>
<div class="row no-gutters">
<% 11.times do |item| %>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<%= render 'shared/block_cities_hot' %>
</div>
<% end %>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<%= render 'shared/load_more_city' %>
</div>
</div>
</div>
</div>
\ No newline at end of file
app/views/shared/_load_more_city.html.erb 0 → 100644
<div class="box_info_city">
<div class="ct_name">
<%= link_to 'Xem Thêm', '#' ,class: 'link_ct'%>
</div>
<div class="ct_jobs_count">
<i class="fas fa-ellipsis-h"></i>
</div>
</div>
\ No newline at end of file
lib/src/crawler.rb
...@@ -15,7 +15,7 @@ class Clawler ...@@ -15,7 +15,7 @@ class Clawler
@data_list_cities.length.times do |i| @data_list_cities.length.times do |i|
area = i > 69 ? 0 : 1 area = i > 69 ? 0 : 1
name = (@data_list_cities[i].to_s) name = (@data_list_cities[i].to_s)
City.create!(name: name, area: 0) City.create!(name: name, area: area)
end end
end end
......
lib/src/interface_web.rb
...@@ -21,9 +21,9 @@ class Interface_web ...@@ -21,9 +21,9 @@ 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(5) @crawl_link_for_companies_jobs = crawl_link_for_companies_jobs(3)
def self.get_link_job_and_companies def self.get_link_job_and_companies
@crawl_link_for_companies_jobs ||= crawl_link_for_companies_jobs(5) @crawl_link_for_companies_jobs ||= crawl_link_for_companies_jobs(3)
end end
def self.base_link(url) def self.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