fixed view

app/assets/stylesheets/top.scss

 // Top page 
 // search 
-
+// banner
+.banner {
+  background-image: url('banner.jpg');
+  min-height: 200px;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
 
 // latest-job
 

app/controllers/jobs_controller.rb

@@ -3,7 +3,7 @@ class JobsController < ApplicationController
     if job_params.present?
       search
     else
-      @jobs = Job.includes(:company).page(params[:page]).per(20)
+      @jobs = Job.includes(:company, :cities_jobs, :cities).page(params[:page]).per(Job::JOB_PER_PAGE)
     end
   end
 
@@ -17,7 +17,7 @@ class JobsController < ApplicationController
     if job_params.key?(:model) && job_params.key?(:slug) # search by model
       model = params[:model].classify.constantize
       @target = model.find_by(slug: job_params[:slug])
-      @jobs = @target.jobs.includes(:company).page(params[:page]).per(20)
+      @jobs = @target.jobs.includes(:company, :cities_jobs, :cities).page(params[:page]).per(Job::JOB_PER_PAGE)
     elsif job_params.key?(:search)                      # search by keywords
       wildcard_search = "%#{job_params[:search]}%"
       @jobs = Job.where('name ILIKE ? OR postal_code LIKE ?', wildcard_search, wildcard_search)

app/models/city.rb

@@ -8,7 +8,7 @@ class City < ApplicationRecord
   validates :slug, presence: true, uniqueness: { case_sensitive: true }
 
   def self.top_jobs
-    joins(:jobs).group(:name, :slug).order('COUNT(jobs.id) DESC').count
+    joins(:jobs).group(:name, :slug).order('COUNT(jobs.id) DESC').count.take(TOP_JOB_COUNT)
   end
 
   def self.job_quantity_by_region

app/models/industry.rb

@@ -6,7 +6,7 @@ class Industry < ApplicationRecord
   validates :slug, presence: true, uniqueness: { case_sensitive: true }
 
   def self.top_jobs
-    joins(:jobs).group(:name, :slug).order('COUNT(jobs.id) DESC').count
+    joins(:jobs).group(:name, :slug).order('COUNT(jobs.id) DESC').count.take(TOP_JOB_COUNT)
   end
 
   def self.job_quantity_by_industry

app/models/job.rb

 class Job < ApplicationRecord
   LATEST_JOBS_LIMIT = 5
+  JOB_PER_PAGE = 20
 
   has_and_belongs_to_many :industries
   has_and_belongs_to_many :cities

app/views/jobs/index.html.slim

@@ -20,10 +20,14 @@
         = link_to job.company.name, '#', class: 'job-company text-decoration-none text-secondary'
         p.job-salary.text-success
           | Salary: #{job.salary}
-        / ul.list-unstyled
-        /   - job.cities.each do |city|
-        /     li
-        /       = city.name
+        ul.list-unstyled
+          - city_list = job.cities
+          - city_list.each_with_index do |city, i|
+            span
+              = city.name
+              - if i != city_list.length - 1
+                span.mx-1 
+                  | |
         .job-desc
           = truncate(simple_format(job.description), escape: false, length: 250)
       hr.my-4

app/views/jobs/show.html.slim

 ruby: 
   city_list = @job.cities
+  industry_list = @job.industries
 
 / html
 .container.my-5
@@ -12,18 +13,22 @@ ruby:
     - city_list.each_with_index do |city, i|
       = link_to job_list_path(model: :city, slug: city.slug), class: 'text-decoration-none text-info' do
         = city.name
-      = ' | ' if i != city_list.length - 1
+      - if i != city_list.length - 1
+        span.mx-1.text-info
+          | |
     span.d-block.mx-2
       |   >  
-    - industry_list = @job.industries
     - industry_list.each_with_index do |industry, i|
       = link_to job_list_path(model: :industry, slug: industry.slug), class: 'text-decoration-none text-info' do
         = industry.name
-      = ' | ' if i != industry_list.length - 1
+      - if i != industry_list.length - 1
+        span.mx-1.text-info
+          | |
     span.d-block.mx-2
       |  > 
     = @job.title
   hr.my-4
+
   / job details 
   .job-detail.my5 
     .job-apply.d-flex.align-items-center.justify-content-between
@@ -36,11 +41,15 @@ ruby:
       .col-4
         ul.list-unstyled
           li 
-            strong
+            strong.d-block
               | Location 
-            - @job.cities.each do |city|
-              p
+            - city_list = @job.cities
+            - city_list.each_with_index do |city, i|
+              span
                 = city.name
+                - if i != city_list.length - 1
+                  span.mx-1 
+                    ||
           li 
             strong 
               | Salary
@@ -69,7 +78,7 @@ ruby:
             strong
               | Expiration date
             p 
-              = @job.expiration_date  
+              = @job.expiration_date.in_time_zone("Hanoi").to_date
     .job-benefits.my-4
       h3 
         | Benefits

app/views/layouts/application.html.slim

@@ -2,7 +2,7 @@ doctype html
 html
   head
     title
-      =full_title(yield(:title))
+      = full_title(yield(:title))
     meta[name='viewport' content='width=device-width,initial-scale=1' charset='utf-8']
     = csrf_meta_tags
     = csp_meta_tag

app/views/top/index.html.slim

 - provide(:title, 'Home page')
 / search box
 .container
-  .row.text-center
+  .banner.d-flex.justify-content-center.align-items-center
+    .row
       .col
-      h2.my-4
+        h2.text-white
           | Total: #{pluralize(@total_job, "job")}
   = render 'shared/search'
+
 / latest job
 .latest-job.mb-5
   .container.mb-5
@@ -21,10 +23,13 @@
             | Salary: 
             = job.salary
           .job-locations
-            ul
-              - job.cities.each do |city|
-                li
+              - city_list = job.cities
+              - city_list.each_with_index do |city, i|
+                span
                   = city.name
+                  - if i != city_list.length - 1
+                    span.mx-1 
+                      | |
           .job-desc
             = truncate(simple_format(job.description), escape: false, length: 250)
       hr.my-2