mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-04-29 07:24:08 -04:00
Made some style tweaks to the employers page to move the filters into a sidebar when authorized.
This commit is contained in:
Nick Winter
parent
c19a31a58c
commit
928e4362ba
3 changed files with 171 additions and 148 deletions
app
|
|
@ -1,4 +1,13 @@
|
||||||
#employers-view
|
#employers-view
|
||||||
|
.artisanal-claim
|
||||||
|
font-variant: small-caps
|
||||||
|
text-align: center
|
||||||
|
font-size: 20px
|
||||||
|
font-weight: bold
|
||||||
|
font-family: Copperplate, "Copperplate Gothic Light", fantasy
|
||||||
|
border-top: 1px solid #DBDBDB
|
||||||
|
border-bottom: 1px solid #DBDBDB
|
||||||
|
margin-bottom: 5px
|
||||||
|
|
||||||
.employer-button
|
.employer-button
|
||||||
background: #fce232 /* Old browsers */
|
background: #fce232 /* Old browsers */
|
||||||
|
|
@ -14,13 +23,17 @@
|
||||||
|
|
||||||
//filter panels
|
//filter panels
|
||||||
#filter
|
#filter
|
||||||
|
border: 2px solid #CBCBCB
|
||||||
margin-bottom: 10px
|
margin-bottom: 10px
|
||||||
.panel-heading
|
.panel-heading
|
||||||
background-color: darkgrey
|
background-color: #D9D9D9
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
border-top-left-radius: 0px
|
||||||
|
border-top-right-radius: 0px
|
||||||
|
#folder-icon
|
||||||
|
margin-right: 5px
|
||||||
.panel-body
|
.panel-body
|
||||||
background-color: darkgrey
|
background-color: #D9D9D9
|
||||||
border-radius: 4px
|
|
||||||
border-top-left-radius: 0px
|
border-top-left-radius: 0px
|
||||||
border-top-right-radius: 0px
|
border-top-right-radius: 0px
|
||||||
.panel
|
.panel
|
||||||
|
|
@ -28,13 +41,24 @@
|
||||||
border-radius: 0px
|
border-radius: 0px
|
||||||
|
|
||||||
#filters
|
#filters
|
||||||
|
margin-bottom: 10px
|
||||||
.filter_section
|
.filter_section
|
||||||
width: 25%
|
min-width: 25%
|
||||||
|
margin-right: 10px
|
||||||
display: inline-block
|
display: inline-block
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
margin-bottom: 10px
|
|
||||||
label input
|
h4
|
||||||
margin-right: 10px
|
margin-bottom: 5px
|
||||||
|
|
||||||
|
label
|
||||||
|
display: block
|
||||||
|
font-weight: normal
|
||||||
|
margin-bottom: 0
|
||||||
|
cursor: pointer
|
||||||
|
input
|
||||||
|
margin-right: 5px
|
||||||
|
|
||||||
.get-started-button
|
.get-started-button
|
||||||
vertical-align: text-bottom
|
vertical-align: text-bottom
|
||||||
margin-left: 10px
|
margin-left: 10px
|
||||||
|
|
@ -82,7 +106,6 @@
|
||||||
height: 150px
|
height: 150px
|
||||||
padding-right: 15px
|
padding-right: 15px
|
||||||
|
|
||||||
|
|
||||||
.reason
|
.reason
|
||||||
width: 33%
|
width: 33%
|
||||||
padding-left: 3%
|
padding-left: 3%
|
||||||
|
|
@ -108,9 +131,6 @@
|
||||||
#bottom_row
|
#bottom_row
|
||||||
height: auto
|
height: auto
|
||||||
#candidate-table
|
#candidate-table
|
||||||
width: 96%
|
|
||||||
margin-left: 2%
|
|
||||||
margin-right: 2%
|
|
||||||
background-color: #E7E7E7
|
background-color: #E7E7E7
|
||||||
table
|
table
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
@ -118,49 +138,48 @@
|
||||||
margin-left: 2%
|
margin-left: 2%
|
||||||
margin-right: 2%
|
margin-right: 2%
|
||||||
margin-bottom: 30px
|
margin-bottom: 30px
|
||||||
.tag_column
|
.tag_column, .location_column, .education_column, .work_column
|
||||||
width: 25%
|
width: 33%
|
||||||
display: inline-block
|
display: inline-block
|
||||||
.location_column
|
img
|
||||||
display: inline-block
|
margin-right: 5px
|
||||||
width: 25%
|
vertical-align: top
|
||||||
.education_column
|
|
||||||
display: inline-block
|
|
||||||
width: 25%
|
|
||||||
.work_column
|
|
||||||
display: inline-block
|
|
||||||
width: 25%
|
|
||||||
tr
|
tr
|
||||||
.candidate-picture
|
.candidate-picture
|
||||||
width: 50px
|
width: 100px
|
||||||
height: 50px
|
height: 100px
|
||||||
border-radius: 5px
|
border-radius: 5px
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
margin-right: 10px
|
margin-right: 10px
|
||||||
|
img
|
||||||
|
border-radius: 5px
|
||||||
|
|
||||||
.candidate-description
|
.candidate-description
|
||||||
width: 100%
|
width: 100%
|
||||||
vertical-align: bottom
|
vertical-align: bottom
|
||||||
td
|
td.candidate-description
|
||||||
margin-bottom: 10px
|
|
||||||
margin-top: 10px
|
|
||||||
padding-bottom: 5px
|
padding-bottom: 5px
|
||||||
padding-top: 10px
|
td.candidate-name-cell
|
||||||
.candidate-name-cell
|
padding-top: 15px
|
||||||
position: relative
|
padding-bottom: 5px
|
||||||
top: 10px
|
font-size: 18px
|
||||||
//refactor later, bad practice
|
|
||||||
|
|
||||||
|
|
||||||
.border_row
|
.border_row
|
||||||
border-bottom: 1px solid #d3d3d3
|
border-bottom: 1px solid #d3d3d3
|
||||||
vertical-align: bottom
|
vertical-align: bottom
|
||||||
td
|
td
|
||||||
padding-top: 0px
|
padding-top: 5px
|
||||||
padding-bottom: 5px
|
padding-bottom: 15px
|
||||||
.description_row td
|
|
||||||
padding-bottom: 0px
|
.teaser-profiles #candidate-table table
|
||||||
|
.tag_column, .location_column, .education_column, .work_column
|
||||||
|
width: 25%
|
||||||
|
tr
|
||||||
|
.candidate-description
|
||||||
padding-top: 15px
|
padding-top: 15px
|
||||||
|
.candidate-picture
|
||||||
|
width: 50px
|
||||||
|
height: 50px
|
||||||
|
|
||||||
#results
|
#results
|
||||||
display: inline-block
|
display: inline-block
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
extends /templates/recruitment_base
|
extends /templates/recruitment_base
|
||||||
|
|
||||||
block content
|
block content
|
||||||
|
.artisanal-claim
|
||||||
|
| Always 100% Pre-Screened
|
||||||
if me.get('anonymous')
|
if me.get('anonymous')
|
||||||
a#login-link Login
|
a#login-link Login
|
||||||
br
|
br
|
||||||
|
|
@ -12,114 +14,117 @@ block content
|
||||||
if !me.get('anonymous')
|
if !me.get('anonymous')
|
||||||
a#logout-link(data-i18n="login.log_out") Logout
|
a#logout-link(data-i18n="login.log_out") Logout
|
||||||
br
|
br
|
||||||
#filter
|
.row
|
||||||
.panel-group#filter_panel
|
- var fullProfiles = isEmployer || me.isAdmin();
|
||||||
a#filter-link(data-toggle="collapse" data-target="#collapseOne")
|
#candidates-column(class=fullProfiles ? "full-profiles col-md-9" : "teaser-profiles col-md-12")
|
||||||
.panel.panel-default
|
if candidates.length
|
||||||
.panel-heading
|
#candidate-table
|
||||||
h4.panel-title
|
table
|
||||||
|
tbody
|
||||||
span.glyphicon.glyphicon-folder-open#folder-icon
|
for candidate, index in featuredCandidates
|
||||||
| Filter
|
- var profile = candidate.get('jobProfile');
|
||||||
.panel-collapse.collapse.in#collapseOne
|
- var authorized = candidate.id; // If we have the id, then we are authorized.
|
||||||
.panel-body
|
- var profileAge = (new Date() - new Date(profile.updated)) / 86400 / 1000;
|
||||||
form#filters
|
- var expired = profileAge > 2 * 30.4;
|
||||||
.filter_section#visa_filter
|
- var curated = profile.curated;
|
||||||
h4 Visa
|
- var photoSize = fullProfiles ? 100 : 50;
|
||||||
label
|
|
||||||
input(type="checkbox" name="visa" value="Authorized to work in the US")
|
tr.candidate-row(data-candidate-id=candidate.id, id=candidate.id, class=expired ? "expired" : "")
|
||||||
| US Authorized (#{candidatesInFilter("visa","Authorized to work in the US")})
|
td(rowspan=3)
|
||||||
br
|
.candidate-picture
|
||||||
label
|
img(src=candidate.getPhotoURL(photoSize, false, true), alt=profile.name, title=profile.name, width=photoSize)
|
||||||
input(type="checkbox" name="visa" value="Need visa sponsorship")
|
if fullProfiles
|
||||||
| Not Authorized (#{candidatesInFilter("visa","Need visa sponsorship")})
|
td.candidate-name-cell
|
||||||
.filter_section#school_filter
|
strong= profile.name
|
||||||
h4 Education
|
| -
|
||||||
label
|
span= profile.jobTitle
|
||||||
input(type="checkbox" name="schoolFilter" value="Top School")
|
tr.description_row(data-candidate-id=candidate.id)
|
||||||
| Top School (#{candidatesInFilter("schoolFilter","Top School")})
|
if curated && curated.shortDescription
|
||||||
br
|
td.candidate-description #{curated.shortDescription}
|
||||||
label
|
else
|
||||||
input(type="checkbox" name="schoolFilter" value="Other")
|
td.candidate-description #{profile.shortDescription}
|
||||||
| Other (#{candidatesInFilter("schoolFilter","Other")})
|
tr.border_row(data-candidate-id=candidate.id)
|
||||||
.filter_section#role_filter
|
if curated
|
||||||
h4 Role
|
- var workHistory = curated.workHistory.join(",");
|
||||||
label
|
if !fullProfiles
|
||||||
input(type="checkbox" name="roleFilter" value="Web Developer")
|
td.tag_column
|
||||||
| Web Developer (#{candidatesInFilter("roleFilter","Web Developer")})
|
img(src="/images/pages/employer/tag.png")
|
||||||
br
|
| #{profile.jobTitle}
|
||||||
label
|
td.location_column
|
||||||
input(type="checkbox" name="roleFilter" value="Software Developer")
|
img(src="/images/pages/employer/location.png")
|
||||||
| Software Developer (#{candidatesInFilter("roleFilter","Software Developer")})
|
| #{curated.location}
|
||||||
br
|
td.education_column
|
||||||
label
|
img(src="/images/pages/employer/education.png")
|
||||||
input(type="checkbox" name="roleFilter" value="Mobile Developer")
|
| #{curated.education}
|
||||||
| Mobile Developer (#{candidatesInFilter("roleFilter","Mobile Developer")})
|
td.work_column
|
||||||
.filter_section#seniority_filter
|
if workHistory
|
||||||
h4 Seniority
|
img(src="/images/pages/employer/briefcase.png")
|
||||||
label
|
| #{workHistory}
|
||||||
input(type="checkbox" name="seniorityFilter" value="Senior")
|
if fullProfiles
|
||||||
| Senior (#{candidatesInFilter("seniorityFilter","Senior")})
|
.col-md-3
|
||||||
br
|
#filter
|
||||||
label
|
.panel-group#filter_panel
|
||||||
input(type="checkbox" name="seniorityFilter" value="Junior")
|
a#filter-link(data-toggle="collapse" data-target="#collapseOne")
|
||||||
| Junior (#{candidatesInFilter("seniorityFilter","Junior")})
|
.panel.panel-default
|
||||||
br
|
.panel-heading
|
||||||
label
|
h4.panel-title
|
||||||
input(type="checkbox" name="seniorityFilter" value="Recent Grad")
|
span.glyphicon.glyphicon-folder-open#folder-icon
|
||||||
| Recent Grad (#{candidatesInFilter("seniorityFilter","Recent Grad")})
|
| Filter
|
||||||
br
|
.panel-collapse.collapse.in#collapseOne
|
||||||
label
|
.panel-body
|
||||||
input(type="checkbox" name="seniorityFilter" value="College Student")
|
p
|
||||||
| College Student (#{candidatesInFilter("seniorityFilter","College Student")})
|
strong We've already technically screened all our candidates
|
||||||
|
| , but you can also filter further:
|
||||||
//input#select_all_checkbox(type="checkbox" name="select_all" checked)
|
form#filters
|
||||||
//| Select all
|
.filter_section#visa_filter
|
||||||
p#results #{numberOfCandidates} results
|
h4 Visa
|
||||||
//button.btn#create-alert-button Create Alert
|
label
|
||||||
if candidates.length
|
input(type="checkbox" name="visa" value="Authorized to work in the US")
|
||||||
#candidate-table
|
| US Authorized (#{candidatesInFilter("visa","Authorized to work in the US")})
|
||||||
table
|
label
|
||||||
tbody
|
input(type="checkbox" name="visa" value="Need visa sponsorship")
|
||||||
for candidate, index in featuredCandidates
|
| Not Authorized (#{candidatesInFilter("visa","Need visa sponsorship")})
|
||||||
- var profile = candidate.get('jobProfile');
|
.filter_section#school_filter
|
||||||
- var authorized = candidate.id; // If we have the id, then we are authorized.
|
h4 Education
|
||||||
- var profileAge = (new Date() - new Date(profile.updated)) / 86400 / 1000;
|
label
|
||||||
- var expired = profileAge > 2 * 30.4;
|
input(type="checkbox" name="schoolFilter" value="Top School")
|
||||||
- var curated = profile.curated;
|
| Top School (#{candidatesInFilter("schoolFilter","Top School")})
|
||||||
|
label
|
||||||
tr.candidate-row(data-candidate-id=candidate.id, id=candidate.id, class=expired ? "expired" : "")
|
input(type="checkbox" name="schoolFilter" value="Other")
|
||||||
td(rowspan=3)
|
| Other (#{candidatesInFilter("schoolFilter","Other")})
|
||||||
.candidate-picture
|
.filter_section#role_filter
|
||||||
img(src=candidate.getPhotoURL(50,false,true), alt=profile.name, title=profile.name, width=50)
|
h4 Role
|
||||||
if !isntEmployer
|
label
|
||||||
td.candidate-name-cell
|
input(type="checkbox" name="roleFilter" value="Web Developer")
|
||||||
strong
|
| Web Developer (#{candidatesInFilter("roleFilter","Web Developer")})
|
||||||
| #{profile.name}
|
label
|
||||||
tr.description_row(data-candidate-id=candidate.id)
|
input(type="checkbox" name="roleFilter" value="Software Developer")
|
||||||
if curated && curated.shortDescription
|
| Software Developer (#{candidatesInFilter("roleFilter","Software Developer")})
|
||||||
td.candidate-description #{curated.shortDescription}
|
label
|
||||||
else
|
input(type="checkbox" name="roleFilter" value="Mobile Developer")
|
||||||
td.candidate-description #{profile.shortDescription}
|
| Mobile Developer (#{candidatesInFilter("roleFilter","Mobile Developer")})
|
||||||
tr.border_row(data-candidate-id=candidate.id)
|
.filter_section#seniority_filter
|
||||||
if curated
|
h4 Experience
|
||||||
- var workHistory = curated.workHistory.join(",");
|
label
|
||||||
td.tag_column
|
input(type="checkbox" name="seniorityFilter" value="Senior")
|
||||||
img(src="/images/pages/employer/tag.png")
|
| Senior (#{candidatesInFilter("seniorityFilter","Senior")})
|
||||||
| #{profile.jobTitle}
|
label
|
||||||
td.location_column
|
input(type="checkbox" name="seniorityFilter" value="Junior")
|
||||||
img(src="/images/pages/employer/location.png")
|
| Junior (#{candidatesInFilter("seniorityFilter","Junior")})
|
||||||
| #{curated.location}
|
label
|
||||||
td.education_column
|
input(type="checkbox" name="seniorityFilter" value="Recent Grad")
|
||||||
img(src="/images/pages/employer/education.png")
|
| Recent Grad (#{candidatesInFilter("seniorityFilter","Recent Grad")})
|
||||||
| #{curated.education}
|
label
|
||||||
td.work_column
|
input(type="checkbox" name="seniorityFilter" value="College Student")
|
||||||
if workHistory
|
| College Student (#{candidatesInFilter("seniorityFilter","College Student")})
|
||||||
img(src="/images/pages/employer/briefcase.png")
|
|
||||||
| #{workHistory}
|
//input#select_all_checkbox(type="checkbox" name="select_all" checked)
|
||||||
|
//| Select all
|
||||||
|
p#results #{numberOfCandidates} results
|
||||||
|
//button.btn#create-alert-button Create Alert
|
||||||
|
|
||||||
|
|
||||||
if !isEmployer && !me.isAdmin()
|
if !fullProfiles
|
||||||
div#info_wrapper
|
div#info_wrapper
|
||||||
span.hiring-call-to-action
|
span.hiring-call-to-action
|
||||||
h2#start-hiring(data-i18n="employers.start_hiring") Start hiring.
|
h2#start-hiring(data-i18n="employers.start_hiring") Start hiring.
|
||||||
|
|
|
||||||
|
|
@ -128,11 +128,11 @@ module.exports = class EmployersView extends View
|
||||||
return (_.filter candidates, (c) -> c.get('jobProfile').curated?[filterName] is filterValue).length
|
return (_.filter candidates, (c) -> c.get('jobProfile').curated?[filterName] is filterValue).length
|
||||||
else
|
else
|
||||||
return Math.floor(Math.random() * 500)
|
return Math.floor(Math.random() * 500)
|
||||||
|
|
||||||
getActiveAndApprovedCandidates: =>
|
getActiveAndApprovedCandidates: =>
|
||||||
candidates = _.filter @candidates.models, (c) -> c.get('jobProfile').active
|
candidates = _.filter @candidates.models, (c) -> c.get('jobProfile').active
|
||||||
return _.filter candidates, (c) -> c.get('jobProfileApproved')
|
return _.filter candidates, (c) -> c.get('jobProfileApproved')
|
||||||
|
|
||||||
getRenderData: ->
|
getRenderData: ->
|
||||||
ctx = super()
|
ctx = super()
|
||||||
ctx.isEmployer = @isEmployer()
|
ctx.isEmployer = @isEmployer()
|
||||||
|
|
@ -143,7 +143,7 @@ module.exports = class EmployersView extends View
|
||||||
ctx.activeCandidates = _.filter ctx.candidates, (c) -> c.get('jobProfile').active
|
ctx.activeCandidates = _.filter ctx.candidates, (c) -> c.get('jobProfile').active
|
||||||
ctx.inactiveCandidates = _.reject ctx.candidates, (c) -> c.get('jobProfile').active
|
ctx.inactiveCandidates = _.reject ctx.candidates, (c) -> c.get('jobProfile').active
|
||||||
ctx.featuredCandidates = _.filter ctx.activeCandidates, (c) -> c.get('jobProfileApproved')
|
ctx.featuredCandidates = _.filter ctx.activeCandidates, (c) -> c.get('jobProfileApproved')
|
||||||
|
|
||||||
unless @isEmployer() or me.isAdmin()
|
unless @isEmployer() or me.isAdmin()
|
||||||
ctx.featuredCandidates = _.filter ctx.featuredCandidates, (c) -> c.get('jobProfile').curated
|
ctx.featuredCandidates = _.filter ctx.featuredCandidates, (c) -> c.get('jobProfile').curated
|
||||||
ctx.featuredCandidates = ctx.featuredCandidates.slice(0,7)
|
ctx.featuredCandidates = ctx.featuredCandidates.slice(0,7)
|
||||||
|
|
@ -156,7 +156,6 @@ module.exports = class EmployersView extends View
|
||||||
ctx.moment = moment
|
ctx.moment = moment
|
||||||
ctx._ = _
|
ctx._ = _
|
||||||
ctx.numberOfCandidates = ctx.featuredCandidates.length
|
ctx.numberOfCandidates = ctx.featuredCandidates.length
|
||||||
ctx.isntEmployer = not (@isEmployer() or me.isAdmin())
|
|
||||||
ctx
|
ctx
|
||||||
|
|
||||||
isEmployer: ->
|
isEmployer: ->
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue