mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-23 23:58:02 -05: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
|
|
@ -1,4 +1,13 @@
|
|||
#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
|
||||
background: #fce232 /* Old browsers */
|
||||
|
|
@ -14,13 +23,17 @@
|
|||
|
||||
//filter panels
|
||||
#filter
|
||||
border: 2px solid #CBCBCB
|
||||
margin-bottom: 10px
|
||||
.panel-heading
|
||||
background-color: darkgrey
|
||||
background-color: #D9D9D9
|
||||
cursor: pointer
|
||||
border-top-left-radius: 0px
|
||||
border-top-right-radius: 0px
|
||||
#folder-icon
|
||||
margin-right: 5px
|
||||
.panel-body
|
||||
background-color: darkgrey
|
||||
border-radius: 4px
|
||||
background-color: #D9D9D9
|
||||
border-top-left-radius: 0px
|
||||
border-top-right-radius: 0px
|
||||
.panel
|
||||
|
|
@ -28,13 +41,24 @@
|
|||
border-radius: 0px
|
||||
|
||||
#filters
|
||||
margin-bottom: 10px
|
||||
.filter_section
|
||||
width: 25%
|
||||
min-width: 25%
|
||||
margin-right: 10px
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
margin-bottom: 10px
|
||||
label input
|
||||
margin-right: 10px
|
||||
|
||||
h4
|
||||
margin-bottom: 5px
|
||||
|
||||
label
|
||||
display: block
|
||||
font-weight: normal
|
||||
margin-bottom: 0
|
||||
cursor: pointer
|
||||
input
|
||||
margin-right: 5px
|
||||
|
||||
.get-started-button
|
||||
vertical-align: text-bottom
|
||||
margin-left: 10px
|
||||
|
|
@ -82,7 +106,6 @@
|
|||
height: 150px
|
||||
padding-right: 15px
|
||||
|
||||
|
||||
.reason
|
||||
width: 33%
|
||||
padding-left: 3%
|
||||
|
|
@ -108,9 +131,6 @@
|
|||
#bottom_row
|
||||
height: auto
|
||||
#candidate-table
|
||||
width: 96%
|
||||
margin-left: 2%
|
||||
margin-right: 2%
|
||||
background-color: #E7E7E7
|
||||
table
|
||||
cursor: pointer
|
||||
|
|
@ -118,49 +138,48 @@
|
|||
margin-left: 2%
|
||||
margin-right: 2%
|
||||
margin-bottom: 30px
|
||||
.tag_column
|
||||
width: 25%
|
||||
.tag_column, .location_column, .education_column, .work_column
|
||||
width: 33%
|
||||
display: inline-block
|
||||
.location_column
|
||||
display: inline-block
|
||||
width: 25%
|
||||
.education_column
|
||||
display: inline-block
|
||||
width: 25%
|
||||
.work_column
|
||||
display: inline-block
|
||||
width: 25%
|
||||
img
|
||||
margin-right: 5px
|
||||
vertical-align: top
|
||||
tr
|
||||
.candidate-picture
|
||||
width: 50px
|
||||
height: 50px
|
||||
width: 100px
|
||||
height: 100px
|
||||
border-radius: 5px
|
||||
overflow: hidden
|
||||
margin-right: 10px
|
||||
img
|
||||
border-radius: 5px
|
||||
|
||||
.candidate-description
|
||||
width: 100%
|
||||
vertical-align: bottom
|
||||
td
|
||||
margin-bottom: 10px
|
||||
margin-top: 10px
|
||||
td.candidate-description
|
||||
padding-bottom: 5px
|
||||
padding-top: 10px
|
||||
.candidate-name-cell
|
||||
position: relative
|
||||
top: 10px
|
||||
//refactor later, bad practice
|
||||
|
||||
td.candidate-name-cell
|
||||
padding-top: 15px
|
||||
padding-bottom: 5px
|
||||
font-size: 18px
|
||||
|
||||
.border_row
|
||||
border-bottom: 1px solid #d3d3d3
|
||||
vertical-align: bottom
|
||||
td
|
||||
padding-top: 0px
|
||||
padding-bottom: 5px
|
||||
.description_row td
|
||||
padding-bottom: 0px
|
||||
padding-top: 5px
|
||||
padding-bottom: 15px
|
||||
|
||||
.teaser-profiles #candidate-table table
|
||||
.tag_column, .location_column, .education_column, .work_column
|
||||
width: 25%
|
||||
tr
|
||||
.candidate-description
|
||||
padding-top: 15px
|
||||
.candidate-picture
|
||||
width: 50px
|
||||
height: 50px
|
||||
|
||||
#results
|
||||
display: inline-block
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
extends /templates/recruitment_base
|
||||
|
||||
block content
|
||||
.artisanal-claim
|
||||
| Always 100% Pre-Screened
|
||||
if me.get('anonymous')
|
||||
a#login-link Login
|
||||
br
|
||||
|
|
@ -12,71 +14,9 @@ block content
|
|||
if !me.get('anonymous')
|
||||
a#logout-link(data-i18n="login.log_out") Logout
|
||||
br
|
||||
#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
|
||||
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
|
||||
.row
|
||||
- var fullProfiles = isEmployer || me.isAdmin();
|
||||
#candidates-column(class=fullProfiles ? "full-profiles col-md-9" : "teaser-profiles col-md-12")
|
||||
if candidates.length
|
||||
#candidate-table
|
||||
table
|
||||
|
|
@ -87,15 +27,17 @@ block content
|
|||
- var profileAge = (new Date() - new Date(profile.updated)) / 86400 / 1000;
|
||||
- var expired = profileAge > 2 * 30.4;
|
||||
- var curated = profile.curated;
|
||||
- var photoSize = fullProfiles ? 100 : 50;
|
||||
|
||||
tr.candidate-row(data-candidate-id=candidate.id, id=candidate.id, class=expired ? "expired" : "")
|
||||
td(rowspan=3)
|
||||
.candidate-picture
|
||||
img(src=candidate.getPhotoURL(50,false,true), alt=profile.name, title=profile.name, width=50)
|
||||
if !isntEmployer
|
||||
img(src=candidate.getPhotoURL(photoSize, false, true), alt=profile.name, title=profile.name, width=photoSize)
|
||||
if fullProfiles
|
||||
td.candidate-name-cell
|
||||
strong
|
||||
| #{profile.name}
|
||||
strong= profile.name
|
||||
| -
|
||||
span= profile.jobTitle
|
||||
tr.description_row(data-candidate-id=candidate.id)
|
||||
if curated && curated.shortDescription
|
||||
td.candidate-description #{curated.shortDescription}
|
||||
|
|
@ -104,6 +46,7 @@ block content
|
|||
tr.border_row(data-candidate-id=candidate.id)
|
||||
if curated
|
||||
- var workHistory = curated.workHistory.join(",");
|
||||
if !fullProfiles
|
||||
td.tag_column
|
||||
img(src="/images/pages/employer/tag.png")
|
||||
| #{profile.jobTitle}
|
||||
|
|
@ -117,9 +60,71 @@ block content
|
|||
if workHistory
|
||||
img(src="/images/pages/employer/briefcase.png")
|
||||
| #{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
|
||||
span.hiring-call-to-action
|
||||
h2#start-hiring(data-i18n="employers.start_hiring") Start hiring.
|
||||
|
|
|
|||
|
|
@ -156,7 +156,6 @@ module.exports = class EmployersView extends View
|
|||
ctx.moment = moment
|
||||
ctx._ = _
|
||||
ctx.numberOfCandidates = ctx.featuredCandidates.length
|
||||
ctx.isntEmployer = not (@isEmployer() or me.isAdmin())
|
||||
ctx
|
||||
|
||||
isEmployer: ->
|
||||
|
|
|
|||
Loading…
Reference in a new issue