create job detail

app/assets/stylesheets/application.scss

@@ -26,7 +26,7 @@
    background-color: $main-color;
    background-color: $main-color;
  }
  }
 
 
- hr {
+ .divider {
    width: 100px;
    width: 100px;
    border-top: 2px solid $main-color
    border-top: 2px solid $main-color
  }
  }

app/controllers/jobs_controller.rb

+class JobsController < ApplicationController
+  def show
+    @job = Job.find(params[:id])
+  end
+end

app/views/home/_job.html.erb

 <div class='col-md-6 col-sm-12 my-2'>
 <div class='col-md-6 col-sm-12 my-2'>
   <div class='card'>
   <div class='card'>
     <div class='card-body'>
     <div class='card-body'>
-      <%= link_to job.title, '#', class: 'card-title font-weight-bold text-decoration-none' %>
+      <%= link_to job.title, job_path(job), class: 'card-title font-weight-bold text-decoration-none' %>
       <p class='card-text'><%= job.company.name %></p>
       <p class='card-text'><%= job.company.name %></p>
       <p class='mb-0'>
       <p class='mb-0'>
         <strong>Work place:</strong>
         <strong>Work place:</strong>

app/views/home/index.html.erb

@@ -8,14 +8,14 @@
 </div>
 </div>
 <div id='latest-jobs' class='my-4 text-center'>
 <div id='latest-jobs' class='my-4 text-center'>
   <h1>Latest Jobs</h1>
   <h1>Latest Jobs</h1>
-  <hr>
+  <hr class="divider">
   <div class='row'>
   <div class='row'>
     <%= render partial: 'home/job', collection: @jobs %>
     <%= render partial: 'home/job', collection: @jobs %>
   </div>
   </div>
 </div>
 </div>
 <div id='top-cities' class='my-4 text-center'>
 <div id='top-cities' class='my-4 text-center'>
   <h1>Top Cities</h1>
   <h1>Top Cities</h1>
-  <hr>
+  <hr class="divider">
   <div class='row'>
   <div class='row'>
     <%= render partial: 'locations/location', collection: @top_cities %>
     <%= render partial: 'locations/location', collection: @top_cities %>
   </div>
   </div>
@@ -23,7 +23,7 @@
 </div>
 </div>
 <div id='top-industries' class='my-4 text-center'>
 <div id='top-industries' class='my-4 text-center'>
   <h1>Top Industries</h1>
   <h1>Top Industries</h1>
-  <hr>
+  <hr class="divider">
   <div class='row'>
   <div class='row'>
     <%= render partial: 'industries/industry', collection: @top_industries %>
     <%= render partial: 'industries/industry', collection: @top_industries %>
   </div>
   </div>

app/views/industries/index.html.erb

 <div id='industries' class='text-center my-3'>
 <div id='industries' class='text-center my-3'>
   <h2>Industries List</h2>
   <h2>Industries List</h2>
-  <hr>
+  <hr class="divider">
   <div class='row'>
   <div class='row'>
     <%= render partial: 'industries/industry', collection: @industries %>
     <%= render partial: 'industries/industry', collection: @industries %>
   </div>
   </div>

app/views/jobs/show.html.erb

+<nav aria-label='breadcrumb'>
+  <ol class='breadcrumb'>
+    <li class='breadcrumb-item'><%= link_to 'TOP', root_path %></li>
+    <li class='breadcrumb-item'><%= link_to @job.locations.first.city, root_path %></li>
+    <li class='breadcrumb-item'><%= link_to @job.industries.first.name, root_path %></li>
+    <li class='breadcrumb-item active' aria-current='page'><%= @job.title %></li>
+  </ol>
+</nav>
+<div class="row">
+  <div class="col-10">
+    <h2 class="font-weight-bold"><%= @job.title %></h2>
+    <h3><%= @job.company.name %></h3>
+    <h5><strong>Work places: </strong>
+      <i><%= @job.locations.map(&:city).join(' | ') %></i>
+    </h5>
+    <h5><strong>Industries: </strong>
+      <i><%= @job.industries.map(&:name).join(' | ') %></i>
+    </h5>
+    <h5><strong>Salary: </strong><%= @job.salary %></h5>
+    <hr>
+    <h3><strong>Description:</strong></h3>
+    <%= @job.description.html_safe %>
+  </div>
+  <div class="col-2">
+    <%= link_to 'Apply Now', '#', class: 'btn btn-outline-success btn-lg' %>
+  </div>
+</div>
+<div class="row my-3">
+  <div class="col-6 text-right">
+    <%= link_to 'Apply Now', '#', class: 'btn btn-outline-success btn-lg' %>
+  </div>
+  <div class="col-6 text-left">
+    <%= link_to 'Favorite', '#', class: 'btn btn-outline-danger btn-lg' %>
+  </div>
+</div>

app/views/locations/index.html.erb

 <div class='list my-3 text-center'>
 <div class='list my-3 text-center'>
   <h2>Area List</h2>
   <h2>Area List</h2>
-  <hr>
+  <hr class="divider">
   <ul class='list-group list-group-horizontal justify-content-center'>
   <ul class='list-group list-group-horizontal justify-content-center'>
     <li class='list-group-item'>
     <li class='list-group-item'>
       <a href='#vietnam'>Việt Nam</a>
       <a href='#vietnam'>Việt Nam</a>
@@ -12,14 +12,14 @@
 </div>
 </div>
 <div id='vietnam' class='text-center'>
 <div id='vietnam' class='text-center'>
   <h2>Vietnam</h2>
   <h2>Vietnam</h2>
-  <hr>
+  <hr class="divider">
   <div class='row'>
   <div class='row'>
     <%= render partial: 'locations/location', collection: @vn_cities_lists %>
     <%= render partial: 'locations/location', collection: @vn_cities_lists %>
   </div>
   </div>
 </div>
 </div>
 <div id='international' class='text-center'>
 <div id='international' class='text-center'>
   <h2>International</h2>
   <h2>International</h2>
-  <hr>
+  <hr class="divider">
   <div class="row">
   <div class="row">
     <%= render partial: 'locations/location', collection: @internal_cities_lists %>
     <%= render partial: 'locations/location', collection: @internal_cities_lists %>
   </div>
   </div>

config/routes.rb

@@ -2,5 +2,6 @@ Rails.application.routes.draw do
   root to: 'home#index'
   root to: 'home#index'
   get 'cities', to: 'locations#index'
   get 'cities', to: 'locations#index'
   get 'industries', to: 'industries#index'
   get 'industries', to: 'industries#index'
+  resources :jobs, only: :show
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 end
 end