Skip to content
This repository was archived by the owner on Jun 10, 2019. It is now read-only.

Commit 62251d2

Browse files
jjhamptonjjhampton
authored
Merge pull request #985 from jjhampton/982-highlighted-jobs
Display featured jobs on Jobs page, above search results
2 parents b64f0e0 + cfd6461 commit 62251d2

File tree

6 files changed

+214
-3
lines changed

6 files changed

+214
-3
lines changed

‎src/scenes/home/jobs/featuredJob/featuredJob.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* Note: these styles are copied to match the ziprecruiter styles that are being dynamically inserted on our page (see jobs.js) */
2+
3+
.job {
4+
padding: 15px 0px;
5+
}
6+
7+
.link {
8+
text-decoration: none;
9+
color: #1a0dab;
10+
font-size: 17px;
11+
float: left;
12+
margin-right: 3px;
13+
margin-bottom: 1px;
14+
}
15+
16+
.details {
17+
font-size: 13px;
18+
color: #999999;
19+
margin: 3px 0;
20+
clear: both;
21+
}
22+
23+
.detailsContainer {
24+
float: left;
25+
margin-right: 15px;
26+
}
27+
28+
.detail {
29+
margin-left: 4px;
30+
}
31+
32+
.remote {
33+
composes: detail;
34+
font-style: italic;
35+
}
36+
37+
.description {
38+
clear: both;
39+
font-size: 14px;
40+
color: #545454;
41+
line-height: 1.4;
42+
word-wrap: break-word;
43+
}

‎src/scenes/home/jobs/featuredJob/featuredJob.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
4+
import { faMapMarkerAlt, faBuilding, faCloudUploadAlt } from '@fortawesome/fontawesome-free-solid';
5+
import OutboundLink from 'shared/components/outboundLink/outboundLink';
6+
import styles from './featuredJob.css';
7+
8+
const FeaturedJob = ({
9+
title,
10+
source,
11+
sourceUrl,
12+
city,
13+
state,
14+
country,
15+
description,
16+
remote
17+
}) => (
18+
<div>
19+
<div className={styles.job}>
20+
<div>
21+
<OutboundLink href={sourceUrl} analyticsEventLabel={`[FeaturedJob] ${sourceUrl}`}>
22+
<span className={styles.link}>{title}</span>
23+
</OutboundLink>
24+
</div>
25+
<div className={styles.details}>
26+
<div className={styles.detailsContainer}>
27+
<FontAwesomeIcon icon={faBuilding} size="sm" style={{ color: '#afafaf' }} />
28+
<span className={styles.detail}>{source}</span>
29+
</div>
30+
<div className={styles.detailsContainer}>
31+
<FontAwesomeIcon icon={faMapMarkerAlt} size="sm" style={{ color: '#afafaf' }} />
32+
{city && <span className={styles.detail}>{city},</span>}
33+
{state && <span className={styles.detail}>{state},</span>}
34+
{country && <span className={styles.detail}>{country}</span>}
35+
</div>
36+
{remote &&
37+
<div className={styles.detailsContainer}>
38+
<FontAwesomeIcon icon={faCloudUploadAlt} size="sm" style={{ color: '#afafaf' }} />
39+
<span className={styles.remote}>Remote</span>
40+
</div>
41+
}
42+
</div>
43+
<div className={styles.description}>
44+
{description}
45+
</div>
46+
</div>
47+
</div >
48+
);
49+
50+
FeaturedJob.propTypes = {
51+
title: PropTypes.string.isRequired,
52+
source: PropTypes.string.isRequired,
53+
sourceUrl: PropTypes.string.isRequired,
54+
city: PropTypes.string.isRequired,
55+
state: PropTypes.string.isRequired,
56+
country: PropTypes.string.isRequired,
57+
description: PropTypes.string.isRequired,
58+
remote: PropTypes.bool
59+
};
60+
61+
FeaturedJob.defaultProps = {
62+
remote: false
63+
};
64+
65+
export default FeaturedJob;

‎src/scenes/home/jobs/featuredJobs.json‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
[
2+
{
3+
"title": "Technical Product Marketing Manager",
4+
"source": "GitLab",
5+
"sourceUrl": "https://jobs.lever.co/gitlab/022890d6-549a-48fe-8891-51c13b8d1137",
6+
"city": "",
7+
"state": "",
8+
"country": "Any",
9+
"description": "As a Technical Product Marketing Manager, you will work closely with our marketing, engineering, business development and sales team, and partners to help them understand how core GitLab technical value offerings solve customer problems as well as educate them about market competitors. You will be responsible for technical marketing content and representing GitLab as a technical evangelist at key trade shows and customer meetings.",
10+
"status": "active",
11+
"remote": true,
12+
"tags": [
13+
"Marketing",
14+
"Product Management"
15+
]
16+
},
17+
{
18+
"title": "Senior Database Engineer",
19+
"source": "GitLab",
20+
"sourceUrl": "https://jobs.lever.co/gitlab/8b711f1c-d378-4383-a027-bac550aeee6d",
21+
"city": "",
22+
"state": "",
23+
"country": "Americas",
24+
"description": "Our database engineer is a hybrid role: part developer, part database expert. You will spend the majority of your time making application changes to improve database performance, availability, and reliability; though you will also spend time working on the database infrastructure that powers GitLab.com. Infrastructure work involves (but is not limited to) tasks such as making configuration changes, adjusting monitoring, and upgrading the database.",
25+
"status": "active",
26+
"remote": true,
27+
"tags": [
28+
"Infrastructure",
29+
"Database"
30+
]
31+
},
32+
{
33+
"title": "Field Marketing Manager",
34+
"source": "GitLab",
35+
"sourceUrl": "https://jobs.lever.co/gitlab/f53275a2-bac6-43c8-9a7f-a1d3021c9521",
36+
"city": "",
37+
"state": "",
38+
"country": "Asia Pacific",
39+
"description": "GitLab is looking for a highly motivated, sales-focused field marketer who will be responsible for supporting our Asia Pacific (APAC) sales team. A successful Field Marketing Manager has strong understanding of sales-focused marketing as well as our audiences of enterprise IT leaders, IT ops practitioners, and developers. They enjoy taking charge of regional marketing programs, detailed planning, proactive communication, and flawlessly delivering memorable marketing experiences supporting our sales objectives.",
40+
"status": "active",
41+
"remote": true,
42+
"tags": [
43+
"Marketing",
44+
"Sales"
45+
]
46+
}
47+
]

‎src/scenes/home/jobs/jobs.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* Note: these styles are copied to match the ziprecruiter styles that are inserted on our page */
2+
3+
.featuredJobsContainer {
4+
width: 100%;
5+
float: left;
6+
clear: both;
7+
}
8+
9+
.featuredJobs {
10+
font-family: Arial, Helvetica, sans-serif;
11+
margin: 30px 0px 10px;
12+
width: 100%;
13+
max-width: 768px;
14+
}
15+
16+
.contact {
17+
margin: 30px 0 0 0;
18+
align-self: flex-start;
19+
font-size: 1rem;
20+
}

‎src/scenes/home/jobs/jobs.js‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import React, { Component } from 'react';
22
import Section from 'shared/components/section/section';
3+
import OutboundLink from 'shared/components/outboundLink/outboundLink';
4+
import FeaturedJob from './featuredJob/featuredJob';
5+
import FeaturedJobsData from './featuredJobs.json';
6+
import styles from './jobs.css';
37

48
const zipRecruiterScript = document.createElement('script');
59

@@ -29,11 +33,34 @@ class Jobs extends Component {
2933
};
3034
tryRunInit();
3135
}
36+
3237
render() {
38+
const featuredJobs = FeaturedJobsData
39+
.filter(job => job.status === 'active')
40+
.map(job => (
41+
<FeaturedJob
42+
key={`${Math.random()} + ${job.name} + ${job.sourceUrl}`}
43+
{...job}
44+
/>
45+
));
46+
3347
return (
34-
<Section title="Open Positions" theme="white">
35-
<div id="zipsearch_container" />
36-
</Section>
48+
<div>
49+
<Section title="Featured Jobs" theme="whiteCondensed">
50+
<div className={styles.featuredJobsContainer}>
51+
<div className={styles.featuredJobs}>
52+
{featuredJobs}
53+
</div>
54+
</div>
55+
<p className={styles.contact}>
56+
Are you hiring? <OutboundLink href="mailto:[email protected]" analyticsEventLabel="User clicked on Job Posting contact">Contact</OutboundLink> us to post your job opening with Operation Code!
57+
</p>
58+
</Section>
59+
<Section title="Search All Jobs" theme="white">
60+
<div id="zipsearch_container" />
61+
</Section>
62+
</div>
63+
3764
);
3865
}
3966
}

‎src/shared/components/section/section.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@
1515
background-color: #FFF;
1616
}
1717

18+
.condensed {
19+
min-height: 0;
20+
}
21+
22+
.whiteCondensed {
23+
composes: white;
24+
composes: condensed;
25+
}
26+
1827
.content {
1928
display: flex;
2029
flex-flow: column;

0 commit comments

Comments
 (0)