Merge pull request #73 from mena-devs/job-improvements

Update job post layout, functions and UX
mena-devs · Dec 28, 2020 · 8827fdb · 8827fdb
2 parents 2560126 + 2e5b038
commit 8827fdb
Show file tree

Hide file tree

Showing 37 changed files with 725 additions and 378 deletions.
diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
@@ -7,7 +7,7 @@
 }
 
 .content-wrap {
-  padding-bottom: 0px;
+  padding:20px;
 }
 
 .button-directory {
@@ -85,4 +85,232 @@ p.member_profile_invalid {
 .filter-title {
   padding-top:8px;
   margin:0px;
+}
+
+.page-actions {
+  border-bottom: #e8e8e8 solid 1px;
+  background-color: #fcfcfc;
+}
+
+.break-word {
+  word-wrap:break-word;
+
+  li {
+    word-wrap:break-word;
+  }
+}
+
+.button-container {
+  width:100%;
+  height:40px;
+  margin:auto;
+}
+
+// Job Description
+.job-description {
+  border: 1px solid #e8e8e8;
+  background-color: #fcfcfc;
+  padding: 20px;
+  margin-top: 20px;
+  border-radius: 6px;
+}
+
+// Progress Bar
+.progress-all ::before {
+  box-sizing: unset;
+}
+
+.progress-all {
+  margin: 8px;
+  font-family: 'Open Sans', sans-serif;
+
+  color: var(--color-black);
+  --color-white: #fff;
+  --color-black: #333;
+  --color-gray: #75787b;
+  --color-gray-light: #bbb;
+  --color-gray-disabled: #e8e8e8;
+  --color-green: #53a318;
+  --color-green-dark: #383;
+  --font-size-small: 10px
+  --font-size-default: 12px;
+
+  h2 {
+    color: var(--color-gray);
+    font-size: var(--font-size-small);
+    line-height: 1.5;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+  }
+}
+
+.progress-section section {
+  margin-bottom: 12px;
+}
+
+.progress-bar-2 {
+  display: flex;
+  justify-content: space-between;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 24px 0;
+}
+
+.progress-bar-2 li {
+  flex: 2;
+  position: relative;
+  padding: 0 0 14px 0;
+  font-size: var(--font-size-default);
+  line-height: 1.5;
+  color: var(--color-green);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: visible;
+  min-width: 0;
+  text-align: center;
+  border-bottom: 2px solid var(--color-gray-disabled);
+}
+.progress-bar-2 li:first-child,
+.progress-bar-2 li:last-child {
+  flex: 1;
+  text-align: left;
+}
+.progress-bar-2 li:last-child {
+  text-align: right;
+}
+.progress-bar-2 li:before {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-gray-disabled);
+  border-radius: 50%;
+  border: 2px solid var(--color-white);
+  position: absolute;
+  left: calc(50% - 6px);
+  bottom: -7px;
+  z-index: 3;
+  transition: all .2s ease-in-out;
+}
+.progress-bar-2 li:first-child:before {
+  left: 0;
+}
+.progress-bar-2 li:last-child:before {
+  right: 0;
+  left: auto;
+}
+.progress-bar-2 span {
+  transition: opacity .3s ease-in-out;
+}
+.progress-bar-2 li:not(.is-active) span {
+  color: #bbb;
+}
+.progress-bar-2 .is-complete:not(:first-child):after,
+.progress-bar-2 .is-active:not(:first-child):after {
+  content: "";
+  display: block;
+  width: 100%;
+  position: absolute;
+  bottom: -2px;
+  left: -50%;
+  z-index: 2;
+  border-bottom: 2px solid var(--color-green);
+}
+.progress-bar-2 li:last-child span {
+  width: 200%;
+  display: inline-block;
+  position: absolute;
+  left: -100%;
+}
+
+.progress-bar-2 .is-complete:last-child:after,
+.progress-bar-2 .is-active:last-child:after {
+  width: 200%;
+  left: -100%;
+}
+
+.progress-bar-2 .is-complete:before {
+  background-color: var(--color-green);
+}
+
+.progress-bar-2 .is-active:before,
+.progress-bar-2 li:hover:before,
+.progress-bar-2 .is-hovered:before {
+  background-color: var(--color-white);
+  border-color: var(--color-green);
+}
+.progress-bar-2 li:hover:before,
+.progress-bar-2 .is-hovered:before {
+  transform: scale(1.33);
+}
+
+.progress-bar-2 li:hover span,
+.progress-bar-2 li.is-hovered span {
+  opacity: 1;
+}
+
+.progress-bar-2:hover li:not(:hover) span {
+  opacity: 0;
+}
+
+.x-ray .progress-bar-2,
+.x-ray .progress-bar-2 li {
+  border: 1px dashed red;
+}
+
+.progress-bar-2 .has-changes {
+  opacity: 1 !important;
+}
+.progress-bar-2 .has-changes:before {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  left: calc(50% - 4px);
+  bottom: -20px;
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%208%22%3E%3Cpath%20fill%3D%22%23ed1c24%22%20d%3D%22M4%200l4%208H0z%22%2F%3E%3C%2Fsvg%3E');
+}
+
+// Entry customisation
+.entry {
+  margin: 0 0 10px;
+  padding: 0 0 10px;
+  border:0px;
+}
+
+.job-post-user-actions {
+  height:100px;
+}
+
+.style-msg .sb-msg {
+  border-left: 3px solid rgba(255, 255, 255, 0.5);
+  border-right: 3px solid rgba(255, 255, 255, 0.5);
+}
+
+.add-content-margin {
+  margin-top: 25px;
+}
+
+.clear-padding-margin {
+  padding:0px;
+  margin:0px;
+}
+
+.lb-sm {
+  font-size: 12px;
+}
+
+.lb-md {
+  font-size: 14px;
+}
+
+.lb-lg {
+  font-size: 18px;
+}
+
+.center-content {
+  margin:auto;
+  text-align:center;
 }
diff --git a/app/assets/stylesheets/responsive.scss b/app/assets/stylesheets/responsive.scss
@@ -1389,11 +1389,15 @@
     }
   }
   #page-title {
-    padding: 20px 0 25px;
+    padding: 20px 0 5px;
     text-align: center;
     h1 {
       line-height: 1.5;
-      font-size: 24px;
+      font-size: 20px;
+    }
+    h2 {
+      line-height: 1.2;
+      font-size: 18px;
     }
     .breadcrumb {
       position: relative !important;

diff --git a/app/assets/stylesheets/style.scss b/app/assets/stylesheets/style.scss
@@ -169,7 +169,7 @@ h1, h2, h3, h4, h5, h6 {
   color: #444;
   font-weight: 600;
   line-height: 1.5;
-  margin: 0 0 30px 0;
+  margin: 0 0 5px 0;
   font-family: 'Raleway', sans-serif;
 }
 
@@ -3918,7 +3918,7 @@ body {
     font-weight: 600;
     letter-spacing: 1px;
     color: #333;
-    font-size: 28px;
+    font-size: 24px;
     text-transform: uppercase;
   }
   span {

diff --git a/app/controllers/jobs_controller.rb b/app/controllers/jobs_controller.rb
@@ -11,18 +11,24 @@ def index
     @page_description = 'Technical & software development jobs listed on MENAdevs'
     @page_keywords    = AppSettings.meta_tags_keywords
 
-    @jobs = Job.approved.order(:posted_on).reverse_order
+    @jobs = Job.approved_jobs.order(:posted_on).reverse_order
 
     if (user_signed_in? && params.has_key?(:state))
-      filter_by_params
+      filter_by_params(current_user)
     end
 
     @jobs = Kaminari.paginate_array(@jobs).page(params[:page]).per(25)
   end
 
   # GET /list-jobs-admin
   def list_jobs
-    @admin_jobs = Job.all.order(:updated_at).reverse_order.page(params[:page])
+    @jobs = Job.all.order(:created_at).reverse_order
+
+    if params.has_key?(:state)
+      filter_by_params
+    end
+
+    @jobs = Kaminari.paginate_array(@jobs).page(params[:page]).per(25)
 
     render :admin_index
   end
@@ -108,6 +114,15 @@ def approve
     end
   end
 
+  # PATCH/PUT /jobs/1/reject
+  def reject
+    if @job.publish!
+      redirect_to(@job, notice: 'The job is now live.')
+    else
+      render :edit
+    end
+  end
+
   # PATCH/PUT /jobs/1/take_down
   def take_down
     if @job.take_down!
@@ -130,16 +145,19 @@ def set_job
       @job = @job.decorate.first
     end
 
-    def filter_by_params
-      user_jobs = Job.user_jobs(current_user)
+    def filter_by_params(user = nil)
+      user_jobs = user.nil? ? Job.all : Job.user_jobs(user)
       state_params = params[:state]
 
-      if state_params == 'user'
+      case state_params
+      when 'user'
         @jobs = user_jobs
-      elsif state_params == 'draft'
-        @jobs = user_jobs.user_draft
-      elsif state_params == 'expired'
-        @jobs = user_jobs.user_expired
+      when 'draft'
+        @jobs = user_jobs.draft_jobs
+      when 'pending'
+        @jobs = user_jobs.pending_jobs
+      when 'expired'
+        @jobs = user_jobs.expired_jobs
       end
     end