Skip to content
This repository was archived by the owner on Mar 23, 2023. It is now read-only.

Commit 8827fdb

Browse files
constantine-nikolaouconstantine-nikolaou
authored
Merge pull request #73 from mena-devs/job-improvements
Update job post layout, functions and UX
2 parents 2560126 + 2e5b038 commit 8827fdb

37 files changed

Lines changed: 725 additions & 378 deletions

‎app/assets/stylesheets/custom.scss‎

Lines changed: 229 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88

99
.content-wrap {
10-
padding-bottom: 0px;
10+
padding:20px;
1111
}
1212

1313
.button-directory {
@@ -85,4 +85,232 @@ p.member_profile_invalid {
8585
.filter-title {
8686
padding-top:8px;
8787
margin:0px;
88+
}
89+
90+
.page-actions {
91+
border-bottom: #e8e8e8 solid 1px;
92+
background-color: #fcfcfc;
93+
}
94+
95+
.break-word {
96+
word-wrap:break-word;
97+
98+
li {
99+
word-wrap:break-word;
100+
}
101+
}
102+
103+
.button-container {
104+
width:100%;
105+
height:40px;
106+
margin:auto;
107+
}
108+
109+
// Job Description
110+
.job-description {
111+
border: 1px solid #e8e8e8;
112+
background-color: #fcfcfc;
113+
padding: 20px;
114+
margin-top: 20px;
115+
border-radius: 6px;
116+
}
117+
118+
// Progress Bar
119+
.progress-all ::before {
120+
box-sizing: unset;
121+
}
122+
123+
.progress-all {
124+
margin: 8px;
125+
font-family: 'Open Sans', sans-serif;
126+
127+
color: var(--color-black);
128+
--color-white: #fff;
129+
--color-black: #333;
130+
--color-gray: #75787b;
131+
--color-gray-light: #bbb;
132+
--color-gray-disabled: #e8e8e8;
133+
--color-green: #53a318;
134+
--color-green-dark: #383;
135+
--font-size-small: 10px
136+
--font-size-default: 12px;
137+
138+
h2 {
139+
color: var(--color-gray);
140+
font-size: var(--font-size-small);
141+
line-height: 1.5;
142+
font-weight: 400;
143+
text-transform: uppercase;
144+
letter-spacing: 3px;
145+
}
146+
}
147+
148+
.progress-section section {
149+
margin-bottom: 12px;
150+
}
151+
152+
.progress-bar-2 {
153+
display: flex;
154+
justify-content: space-between;
155+
list-style: none;
156+
padding: 0;
157+
margin: 0 0 24px 0;
158+
}
159+
160+
.progress-bar-2 li {
161+
flex: 2;
162+
position: relative;
163+
padding: 0 0 14px 0;
164+
font-size: var(--font-size-default);
165+
line-height: 1.5;
166+
color: var(--color-green);
167+
font-weight: 600;
168+
white-space: nowrap;
169+
overflow: visible;
170+
min-width: 0;
171+
text-align: center;
172+
border-bottom: 2px solid var(--color-gray-disabled);
173+
}
174+
.progress-bar-2 li:first-child,
175+
.progress-bar-2 li:last-child {
176+
flex: 1;
177+
text-align: left;
178+
}
179+
.progress-bar-2 li:last-child {
180+
text-align: right;
181+
}
182+
.progress-bar-2 li:before {
183+
content: "";
184+
display: block;
185+
width: 8px;
186+
height: 8px;
187+
background-color: var(--color-gray-disabled);
188+
border-radius: 50%;
189+
border: 2px solid var(--color-white);
190+
position: absolute;
191+
left: calc(50% - 6px);
192+
bottom: -7px;
193+
z-index: 3;
194+
transition: all .2s ease-in-out;
195+
}
196+
.progress-bar-2 li:first-child:before {
197+
left: 0;
198+
}
199+
.progress-bar-2 li:last-child:before {
200+
right: 0;
201+
left: auto;
202+
}
203+
.progress-bar-2 span {
204+
transition: opacity .3s ease-in-out;
205+
}
206+
.progress-bar-2 li:not(.is-active) span {
207+
color: #bbb;
208+
}
209+
.progress-bar-2 .is-complete:not(:first-child):after,
210+
.progress-bar-2 .is-active:not(:first-child):after {
211+
content: "";
212+
display: block;
213+
width: 100%;
214+
position: absolute;
215+
bottom: -2px;
216+
left: -50%;
217+
z-index: 2;
218+
border-bottom: 2px solid var(--color-green);
219+
}
220+
.progress-bar-2 li:last-child span {
221+
width: 200%;
222+
display: inline-block;
223+
position: absolute;
224+
left: -100%;
225+
}
226+
227+
.progress-bar-2 .is-complete:last-child:after,
228+
.progress-bar-2 .is-active:last-child:after {
229+
width: 200%;
230+
left: -100%;
231+
}
232+
233+
.progress-bar-2 .is-complete:before {
234+
background-color: var(--color-green);
235+
}
236+
237+
.progress-bar-2 .is-active:before,
238+
.progress-bar-2 li:hover:before,
239+
.progress-bar-2 .is-hovered:before {
240+
background-color: var(--color-white);
241+
border-color: var(--color-green);
242+
}
243+
.progress-bar-2 li:hover:before,
244+
.progress-bar-2 .is-hovered:before {
245+
transform: scale(1.33);
246+
}
247+
248+
.progress-bar-2 li:hover span,
249+
.progress-bar-2 li.is-hovered span {
250+
opacity: 1;
251+
}
252+
253+
.progress-bar-2:hover li:not(:hover) span {
254+
opacity: 0;
255+
}
256+
257+
.x-ray .progress-bar-2,
258+
.x-ray .progress-bar-2 li {
259+
border: 1px dashed red;
260+
}
261+
262+
.progress-bar-2 .has-changes {
263+
opacity: 1 !important;
264+
}
265+
.progress-bar-2 .has-changes:before {
266+
content: "";
267+
display: block;
268+
width: 8px;
269+
height: 8px;
270+
position: absolute;
271+
left: calc(50% - 4px);
272+
bottom: -20px;
273+
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');
274+
}
275+
276+
// Entry customisation
277+
.entry {
278+
margin: 0 0 10px;
279+
padding: 0 0 10px;
280+
border:0px;
281+
}
282+
283+
.job-post-user-actions {
284+
height:100px;
285+
}
286+
287+
.style-msg .sb-msg {
288+
border-left: 3px solid rgba(255, 255, 255, 0.5);
289+
border-right: 3px solid rgba(255, 255, 255, 0.5);
290+
}
291+
292+
.add-content-margin {
293+
margin-top: 25px;
294+
}
295+
296+
.clear-padding-margin {
297+
padding:0px;
298+
margin:0px;
299+
}
300+
301+
.lb-sm {
302+
font-size: 12px;
303+
}
304+
305+
.lb-md {
306+
font-size: 14px;
307+
}
308+
309+
.lb-lg {
310+
font-size: 18px;
311+
}
312+
313+
.center-content {
314+
margin:auto;
315+
text-align:center;
88316
}

‎app/assets/stylesheets/responsive.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1389,11 +1389,15 @@
13891389
}
13901390
}
13911391
#page-title {
1392-
padding: 20px 0 25px;
1392+
padding: 20px 0 5px;
13931393
text-align: center;
13941394
h1 {
13951395
line-height: 1.5;
1396-
font-size: 24px;
1396+
font-size: 20px;
1397+
}
1398+
h2 {
1399+
line-height: 1.2;
1400+
font-size: 18px;
13971401
}
13981402
.breadcrumb {
13991403
position: relative !important;

‎app/assets/stylesheets/style.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ h1, h2, h3, h4, h5, h6 {
169169
color: #444;
170170
font-weight: 600;
171171
line-height: 1.5;
172-
margin: 0 0 30px 0;
172+
margin: 0 0 5px 0;
173173
font-family: 'Raleway', sans-serif;
174174
}
175175

@@ -3918,7 +3918,7 @@ body {
39183918
font-weight: 600;
39193919
letter-spacing: 1px;
39203920
color: #333;
3921-
font-size: 28px;
3921+
font-size: 24px;
39223922
text-transform: uppercase;
39233923
}
39243924
span {

‎app/controllers/jobs_controller.rb‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,24 @@ def index
1111
@page_description = 'Technical & software development jobs listed on MENAdevs'
1212
@page_keywords = AppSettings.meta_tags_keywords
1313

14-
@jobs = Job.approved.order(:posted_on).reverse_order
14+
@jobs = Job.approved_jobs.order(:posted_on).reverse_order
1515

1616
if (user_signed_in? && params.has_key?(:state))
17-
filter_by_params
17+
filter_by_params(current_user)
1818
end
1919

2020
@jobs = Kaminari.paginate_array(@jobs).page(params[:page]).per(25)
2121
end
2222

2323
# GET /list-jobs-admin
2424
def list_jobs
25-
@admin_jobs = Job.all.order(:updated_at).reverse_order.page(params[:page])
25+
@jobs = Job.all.order(:created_at).reverse_order
26+
27+
if params.has_key?(:state)
28+
filter_by_params
29+
end
30+
31+
@jobs = Kaminari.paginate_array(@jobs).page(params[:page]).per(25)
2632

2733
render :admin_index
2834
end
@@ -108,6 +114,15 @@ def approve
108114
end
109115
end
110116

117+
# PATCH/PUT /jobs/1/reject
118+
def reject
119+
if @job.publish!
120+
redirect_to(@job, notice: 'The job is now live.')
121+
else
122+
render :edit
123+
end
124+
end
125+
111126
# PATCH/PUT /jobs/1/take_down
112127
def take_down
113128
if @job.take_down!
@@ -130,16 +145,19 @@ def set_job
130145
@job = @job.decorate.first
131146
end
132147

133-
def filter_by_params
134-
user_jobs = Job.user_jobs(current_user)
148+
def filter_by_params(user = nil)
149+
user_jobs = user.nil? ? Job.all : Job.user_jobs(user)
135150
state_params = params[:state]
136151

137-
if state_params == 'user'
152+
case state_params
153+
when 'user'
138154
@jobs = user_jobs
139-
elsif state_params == 'draft'
140-
@jobs = user_jobs.user_draft
141-
elsif state_params == 'expired'
142-
@jobs = user_jobs.user_expired
155+
when 'draft'
156+
@jobs = user_jobs.draft_jobs
157+
when 'pending'
158+
@jobs = user_jobs.pending_jobs
159+
when 'expired'
160+
@jobs = user_jobs.expired_jobs
143161
end
144162
end
145163

0 commit comments

Comments
 (0)