Made some style tweaks to the employers page to move the filters into a sidebar when authorized.

This commit is contained in:
Nick Winter 2014-07-08 20:47:22 -07:00
parent c19a31a58c
commit 928e4362ba
3 changed files with 171 additions and 148 deletions

View file

@ -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

View file

@ -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,71 +14,9 @@ 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
.panel-heading
h4.panel-title
span.glyphicon.glyphicon-folder-open#folder-icon
| Filter
.panel-collapse.collapse.in#collapseOne
.panel-body
form#filters
.filter_section#visa_filter
h4 Visa
label
input(type="checkbox" name="visa" value="Authorized to work in the US")
| US Authorized (#{candidatesInFilter("visa","Authorized to work in the US")})
br
label
input(type="checkbox" name="visa" value="Need visa sponsorship")
| Not Authorized (#{candidatesInFilter("visa","Need visa sponsorship")})
.filter_section#school_filter
h4 Education
label
input(type="checkbox" name="schoolFilter" value="Top School")
| Top School (#{candidatesInFilter("schoolFilter","Top School")})
br
label
input(type="checkbox" name="schoolFilter" value="Other")
| Other (#{candidatesInFilter("schoolFilter","Other")})
.filter_section#role_filter
h4 Role
label
input(type="checkbox" name="roleFilter" value="Web Developer")
| Web Developer (#{candidatesInFilter("roleFilter","Web Developer")})
br
label
input(type="checkbox" name="roleFilter" value="Software Developer")
| Software Developer (#{candidatesInFilter("roleFilter","Software Developer")})
br
label
input(type="checkbox" name="roleFilter" value="Mobile Developer")
| Mobile Developer (#{candidatesInFilter("roleFilter","Mobile Developer")})
.filter_section#seniority_filter
h4 Seniority
label
input(type="checkbox" name="seniorityFilter" value="Senior")
| Senior (#{candidatesInFilter("seniorityFilter","Senior")})
br
label
input(type="checkbox" name="seniorityFilter" value="Junior")
| Junior (#{candidatesInFilter("seniorityFilter","Junior")})
br
label
input(type="checkbox" name="seniorityFilter" value="Recent Grad")
| Recent Grad (#{candidatesInFilter("seniorityFilter","Recent Grad")})
br
label
input(type="checkbox" name="seniorityFilter" value="College Student")
| College Student (#{candidatesInFilter("seniorityFilter","College Student")})
//input#select_all_checkbox(type="checkbox" name="select_all" checked)
//| Select all
p#results #{numberOfCandidates} results
//button.btn#create-alert-button Create Alert
if candidates.length if candidates.length
#candidate-table #candidate-table
table table
@ -87,15 +27,17 @@ block content
- var profileAge = (new Date() - new Date(profile.updated)) / 86400 / 1000; - var profileAge = (new Date() - new Date(profile.updated)) / 86400 / 1000;
- var expired = profileAge > 2 * 30.4; - var expired = profileAge > 2 * 30.4;
- var curated = profile.curated; - var curated = profile.curated;
- var photoSize = fullProfiles ? 100 : 50;
tr.candidate-row(data-candidate-id=candidate.id, id=candidate.id, class=expired ? "expired" : "") tr.candidate-row(data-candidate-id=candidate.id, id=candidate.id, class=expired ? "expired" : "")
td(rowspan=3) td(rowspan=3)
.candidate-picture .candidate-picture
img(src=candidate.getPhotoURL(50,false,true), alt=profile.name, title=profile.name, width=50) img(src=candidate.getPhotoURL(photoSize, false, true), alt=profile.name, title=profile.name, width=photoSize)
if !isntEmployer if fullProfiles
td.candidate-name-cell td.candidate-name-cell
strong strong= profile.name
| #{profile.name} | -
span= profile.jobTitle
tr.description_row(data-candidate-id=candidate.id) tr.description_row(data-candidate-id=candidate.id)
if curated && curated.shortDescription if curated && curated.shortDescription
td.candidate-description #{curated.shortDescription} td.candidate-description #{curated.shortDescription}
@ -104,6 +46,7 @@ block content
tr.border_row(data-candidate-id=candidate.id) tr.border_row(data-candidate-id=candidate.id)
if curated if curated
- var workHistory = curated.workHistory.join(","); - var workHistory = curated.workHistory.join(",");
if !fullProfiles
td.tag_column td.tag_column
img(src="/images/pages/employer/tag.png") img(src="/images/pages/employer/tag.png")
| #{profile.jobTitle} | #{profile.jobTitle}
@ -117,9 +60,71 @@ block content
if workHistory if workHistory
img(src="/images/pages/employer/briefcase.png") img(src="/images/pages/employer/briefcase.png")
| #{workHistory} | #{workHistory}
if fullProfiles
.col-md-3
#filter
.panel-group#filter_panel
a#filter-link(data-toggle="collapse" data-target="#collapseOne")
.panel.panel-default
.panel-heading
h4.panel-title
span.glyphicon.glyphicon-folder-open#folder-icon
| Filter
.panel-collapse.collapse.in#collapseOne
.panel-body
p
strong We've already technically screened all our candidates
| , but you can also filter further:
form#filters
.filter_section#visa_filter
h4 Visa
label
input(type="checkbox" name="visa" value="Authorized to work in the US")
| US Authorized (#{candidatesInFilter("visa","Authorized to work in the US")})
label
input(type="checkbox" name="visa" value="Need visa sponsorship")
| Not Authorized (#{candidatesInFilter("visa","Need visa sponsorship")})
.filter_section#school_filter
h4 Education
label
input(type="checkbox" name="schoolFilter" value="Top School")
| Top School (#{candidatesInFilter("schoolFilter","Top School")})
label
input(type="checkbox" name="schoolFilter" value="Other")
| Other (#{candidatesInFilter("schoolFilter","Other")})
.filter_section#role_filter
h4 Role
label
input(type="checkbox" name="roleFilter" value="Web Developer")
| Web Developer (#{candidatesInFilter("roleFilter","Web Developer")})
label
input(type="checkbox" name="roleFilter" value="Software Developer")
| Software Developer (#{candidatesInFilter("roleFilter","Software Developer")})
label
input(type="checkbox" name="roleFilter" value="Mobile Developer")
| Mobile Developer (#{candidatesInFilter("roleFilter","Mobile Developer")})
.filter_section#seniority_filter
h4 Experience
label
input(type="checkbox" name="seniorityFilter" value="Senior")
| Senior (#{candidatesInFilter("seniorityFilter","Senior")})
label
input(type="checkbox" name="seniorityFilter" value="Junior")
| Junior (#{candidatesInFilter("seniorityFilter","Junior")})
label
input(type="checkbox" name="seniorityFilter" value="Recent Grad")
| Recent Grad (#{candidatesInFilter("seniorityFilter","Recent Grad")})
label
input(type="checkbox" name="seniorityFilter" value="College Student")
| College Student (#{candidatesInFilter("seniorityFilter","College Student")})
//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.

View file

@ -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: ->