From 8165397f6a0971af1c4a6f6a1118b66744a9e0d6 Mon Sep 17 00:00:00 2001 From: John Hampton Date: Sat, 2 Jun 2018 17:31:15 -0400 Subject: [PATCH 1/9] Create featuredJob component and display mock list --- .../home/jobs/featuredJob/featuredJob.css | 2 + .../home/jobs/featuredJob/featuredJob.js | 49 ++++++++++++++++++ src/scenes/home/jobs/featuredJobs.json | 50 +++++++++++++++++++ src/scenes/home/jobs/jobs.css | 14 ++++++ src/scenes/home/jobs/jobs.js | 37 ++++++++++++-- 5 files changed, 149 insertions(+), 3 deletions(-) create mode 100644 src/scenes/home/jobs/featuredJob/featuredJob.css create mode 100644 src/scenes/home/jobs/featuredJob/featuredJob.js create mode 100644 src/scenes/home/jobs/featuredJobs.json create mode 100644 src/scenes/home/jobs/jobs.css diff --git a/src/scenes/home/jobs/featuredJob/featuredJob.css b/src/scenes/home/jobs/featuredJob/featuredJob.css new file mode 100644 index 000000000..8c94902e5 --- /dev/null +++ b/src/scenes/home/jobs/featuredJob/featuredJob.css @@ -0,0 +1,2 @@ +/* Note: these styles are copied to match the ziprecruiter styles that are inserted on our page */ + diff --git a/src/scenes/home/jobs/featuredJob/featuredJob.js b/src/scenes/home/jobs/featuredJob/featuredJob.js new file mode 100644 index 000000000..b1089afb5 --- /dev/null +++ b/src/scenes/home/jobs/featuredJob/featuredJob.js @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const FeaturedJob = ({ + title, + source, + sourceUrl, + city, + state, + country, + description, + remote +}) => ( +
+
+
+ {title} +
+
+
+ {source} + {city} + {state} + {country} + {remote ? 'Remote' : ''} +
+
+
+
{description}
+
+
+); + +FeaturedJob.propTypes = { + title: PropTypes.string.isRequired, + source: PropTypes.string.isRequired, + sourceUrl: PropTypes.string.isRequired, + city: PropTypes.string.isRequired, + state: PropTypes.string.isRequired, + country: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + remote: PropTypes.bool +}; + +FeaturedJob.defaultProps = { + remote: false +}; + +export default FeaturedJob; diff --git a/src/scenes/home/jobs/featuredJobs.json b/src/scenes/home/jobs/featuredJobs.json new file mode 100644 index 000000000..418938567 --- /dev/null +++ b/src/scenes/home/jobs/featuredJobs.json @@ -0,0 +1,50 @@ +[ + { + "title": "Software Engineeer", + "source": "Microsoft", + "sourceUrl": "https://www.microsoft.com", + "city": "Redmond", + "state": "Washington", + "country": "United States", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + "status": "active", + "remote": false, + "tags": [ + "C#", + "ASP.Net", + "DevOps" + ] + }, + { + "title": "QA Engineeer", + "source": "Apple", + "sourceUrl": "https://www.apple.com", + "city": "San Francisco", + "state": "California", + "country": "United States", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ", + "status": "active", + "remote": false, + "tags": [ + "C#", + "ASP.Net", + "DevOps" + ] + }, + { + "title": "DevOps Engineeer", + "source": "GitHub", + "sourceUrl": "https://www.github.com", + "city": "Austin", + "state": "texas", + "country": "United States", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + "status": "inactive", + "remote": false, + "tags": [ + "C#", + "ASP.Net", + "DevOps" + ] + } +] \ No newline at end of file diff --git a/src/scenes/home/jobs/jobs.css b/src/scenes/home/jobs/jobs.css new file mode 100644 index 000000000..f5dcd8bd3 --- /dev/null +++ b/src/scenes/home/jobs/jobs.css @@ -0,0 +1,14 @@ +/* Note: these styles are copied to match the ziprecruiter styles that are inserted on our page */ + +.featuredJobsContainer { + width: 100%; + float: left; + clear: both; +} + +.featuredJobs { + font-family: Arial, Helvetica, sans-serif; + margin: 30px 0px 10px; + width: 100%; + max-width: 768px; +} \ No newline at end of file diff --git a/src/scenes/home/jobs/jobs.js b/src/scenes/home/jobs/jobs.js index 5168f3653..4c50668be 100644 --- a/src/scenes/home/jobs/jobs.js +++ b/src/scenes/home/jobs/jobs.js @@ -1,5 +1,8 @@ import React, { Component } from 'react'; import Section from 'shared/components/section/section'; +import FeaturedJob from './featuredJob/featuredJob'; +import FeaturedJobsData from './featuredJobs.json'; +import styles from './jobs.css'; const zipRecruiterScript = document.createElement('script'); @@ -29,11 +32,39 @@ class Jobs extends Component { }; tryRunInit(); } + + featuredJobs render() { + const featuredJobs = FeaturedJobsData + .filter(x => x.status === 'active') + .map(job => ( + + )); return ( -
-
-
+
+
+
+
+ {featuredJobs} +
+
+
+
+
+
+
+ ); } } From 7331beb6d5a02556e75bbce2d8ba0725060b4a2e Mon Sep 17 00:00:00 2001 From: John Hampton Date: Sat, 2 Jun 2018 18:36:24 -0400 Subject: [PATCH 2/9] Adjust styling/JSX markup for featuredJob Added Font Awesome icons similar to SVGs in search results --- .../home/jobs/featuredJob/featuredJob.css | 43 ++++++++++++++++++- .../home/jobs/featuredJob/featuredJob.js | 37 ++++++++++------ src/scenes/home/jobs/featuredJobs.json | 6 +-- 3 files changed, 70 insertions(+), 16 deletions(-) diff --git a/src/scenes/home/jobs/featuredJob/featuredJob.css b/src/scenes/home/jobs/featuredJob/featuredJob.css index 8c94902e5..9c0ca0dad 100644 --- a/src/scenes/home/jobs/featuredJob/featuredJob.css +++ b/src/scenes/home/jobs/featuredJob/featuredJob.css @@ -1,2 +1,43 @@ -/* Note: these styles are copied to match the ziprecruiter styles that are inserted on our page */ +/* Note: these styles are copied to match the ziprecruiter styles that are being dynamically inserted on our page (see jobs.js) */ +.job { + padding: 15px 0px; +} + +.link { + text-decoration: none; + color: #1a0dab; + font-size: 17px; + float: left; + margin-right: 3px; + margin-bottom: 1px; +} + +.details { + font-size: 13px; + color: #999999; + margin: 3px 0; + clear: both; +} + +.detailsContainer { + float: left; + margin-right: 15px; +} + +.detail { + margin-left: 4px; +} + +.remote { + composes: detail; + font-style: italic; +} + +.description { + clear: both; + font-size: 14px; + color: #545454; + line-height: 1.4; + word-wrap: break-word; +} \ No newline at end of file diff --git a/src/scenes/home/jobs/featuredJob/featuredJob.js b/src/scenes/home/jobs/featuredJob/featuredJob.js index b1089afb5..4874aa25f 100644 --- a/src/scenes/home/jobs/featuredJob/featuredJob.js +++ b/src/scenes/home/jobs/featuredJob/featuredJob.js @@ -1,5 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import FontAwesomeIcon from '@fortawesome/react-fontawesome'; +import { faMapMarkerAlt, faBuilding, faCloudUploadAlt } from '@fortawesome/fontawesome-free-solid'; +import styles from './featuredJob.css'; const FeaturedJob = ({ title, @@ -12,23 +15,33 @@ const FeaturedJob = ({ remote }) => (
-
-
+
+ -
-
- {source} - {city} - {state} - {country} - {remote ? 'Remote' : ''} +
+
+ + {source}
-
+
+ + {city}, + {state}, + {country} +
+ {remote && +
+ + Remote +
+ } +
+
+ {description}
-
{description}
-
+
); FeaturedJob.propTypes = { diff --git a/src/scenes/home/jobs/featuredJobs.json b/src/scenes/home/jobs/featuredJobs.json index 418938567..98aadb5c1 100644 --- a/src/scenes/home/jobs/featuredJobs.json +++ b/src/scenes/home/jobs/featuredJobs.json @@ -1,6 +1,6 @@ [ { - "title": "Software Engineeer", + "title": "Software Engineer", "source": "Microsoft", "sourceUrl": "https://www.microsoft.com", "city": "Redmond", @@ -16,7 +16,7 @@ ] }, { - "title": "QA Engineeer", + "title": "QA Engineer", "source": "Apple", "sourceUrl": "https://www.apple.com", "city": "San Francisco", @@ -24,7 +24,7 @@ "country": "United States", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ", "status": "active", - "remote": false, + "remote": true, "tags": [ "C#", "ASP.Net", From a4cfd234ba53dafa8210a05f8f86cd10a41742b6 Mon Sep 17 00:00:00 2001 From: John Hampton Date: Sat, 2 Jun 2018 18:42:47 -0400 Subject: [PATCH 3/9] Use OutboundLink component for featured job link --- src/scenes/home/jobs/featuredJob/featuredJob.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/scenes/home/jobs/featuredJob/featuredJob.js b/src/scenes/home/jobs/featuredJob/featuredJob.js index 4874aa25f..acdef1091 100644 --- a/src/scenes/home/jobs/featuredJob/featuredJob.js +++ b/src/scenes/home/jobs/featuredJob/featuredJob.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import { faMapMarkerAlt, faBuilding, faCloudUploadAlt } from '@fortawesome/fontawesome-free-solid'; +import OutboundLink from 'shared/components/outboundLink/outboundLink'; import styles from './featuredJob.css'; const FeaturedJob = ({ @@ -17,7 +18,9 @@ const FeaturedJob = ({
- {title} + + {title} +
From 501959b156b0fde28d108f14c8e141e53701100a Mon Sep 17 00:00:00 2001 From: John Hampton Date: Sat, 2 Jun 2018 21:35:07 -0400 Subject: [PATCH 4/9] Add contact link Also cleaned up code in response to code review --- src/scenes/home/jobs/jobs.css | 6 ++++++ src/scenes/home/jobs/jobs.js | 7 +++++-- src/shared/components/section/section.css | 9 +++++++++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/scenes/home/jobs/jobs.css b/src/scenes/home/jobs/jobs.css index f5dcd8bd3..014fafecd 100644 --- a/src/scenes/home/jobs/jobs.css +++ b/src/scenes/home/jobs/jobs.css @@ -11,4 +11,10 @@ margin: 30px 0px 10px; width: 100%; max-width: 768px; +} + +.contact { + margin: 30px 0 0 0; + align-self: flex-start; + font-size: 1rem; } \ No newline at end of file diff --git a/src/scenes/home/jobs/jobs.js b/src/scenes/home/jobs/jobs.js index 4c50668be..c897108b2 100644 --- a/src/scenes/home/jobs/jobs.js +++ b/src/scenes/home/jobs/jobs.js @@ -33,7 +33,6 @@ class Jobs extends Component { tryRunInit(); } - featuredJobs render() { const featuredJobs = FeaturedJobsData .filter(x => x.status === 'active') @@ -51,14 +50,18 @@ class Jobs extends Component { remote={job.remote} /> )); + return (
-
+
{featuredJobs}
+

+ Are you hiring? Contact us to post your job opening with Operation Code! +

diff --git a/src/shared/components/section/section.css b/src/shared/components/section/section.css index f32327e99..4f6327537 100644 --- a/src/shared/components/section/section.css +++ b/src/shared/components/section/section.css @@ -15,6 +15,15 @@ background-color: #FFF; } +.condensed { + min-height: 0; +} + +.whiteCondensed { + composes: white; + composes: condensed; +} + .content { display: flex; flex-flow: column; From 32c96110a9838a3e23bf3db8748d115c908178a5 Mon Sep 17 00:00:00 2001 From: John Hampton Date: Sat, 2 Jun 2018 21:44:04 -0400 Subject: [PATCH 5/9] Set all mock jobs in static JSON file to inactive This should prevent them from displaying. Also added '(Mock Data)' to their titles to prevent any confusion. These should be replaced with actual featured jobs when those exist, or this file can be replaced when the API is ready to serve up real data. --- src/scenes/home/jobs/featuredJobs.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/scenes/home/jobs/featuredJobs.json b/src/scenes/home/jobs/featuredJobs.json index 98aadb5c1..10ba77aad 100644 --- a/src/scenes/home/jobs/featuredJobs.json +++ b/src/scenes/home/jobs/featuredJobs.json @@ -1,13 +1,13 @@ [ { - "title": "Software Engineer", + "title": "Software Engineer (Mock Data)", "source": "Microsoft", "sourceUrl": "https://www.microsoft.com", "city": "Redmond", "state": "Washington", "country": "United States", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", - "status": "active", + "status": "inactive", "remote": false, "tags": [ "C#", @@ -16,14 +16,14 @@ ] }, { - "title": "QA Engineer", + "title": "QA Engineer (Mock Data)", "source": "Apple", "sourceUrl": "https://www.apple.com", "city": "San Francisco", "state": "California", "country": "United States", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ", - "status": "active", + "status": "inactive", "remote": true, "tags": [ "C#", @@ -32,11 +32,11 @@ ] }, { - "title": "DevOps Engineeer", + "title": "DevOps Engineeer (Mock Data)", "source": "GitHub", "sourceUrl": "https://www.github.com", "city": "Austin", - "state": "texas", + "state": "Texas", "country": "United States", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "status": "inactive", From 4f321342bdbe0e6e69ae2092f7f184a8333f5ded Mon Sep 17 00:00:00 2001 From: John Hampton Date: Sat, 2 Jun 2018 22:23:32 -0400 Subject: [PATCH 6/9] Add OutboundLink component, update email address --- src/scenes/home/jobs/jobs.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scenes/home/jobs/jobs.js b/src/scenes/home/jobs/jobs.js index c897108b2..78bacc498 100644 --- a/src/scenes/home/jobs/jobs.js +++ b/src/scenes/home/jobs/jobs.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import Section from 'shared/components/section/section'; +import OutboundLink from 'shared/components/outboundLink/outboundLink'; import FeaturedJob from './featuredJob/featuredJob'; import FeaturedJobsData from './featuredJobs.json'; import styles from './jobs.css'; @@ -60,7 +61,7 @@ class Jobs extends Component {

- Are you hiring? Contact us to post your job opening with Operation Code! + Are you hiring? Contact us to post your job opening with Operation Code!

From f4dfab2103a011db8c0ec9d35a91a22f700d5b91 Mon Sep 17 00:00:00 2001 From: John Hampton Date: Sun, 3 Jun 2018 01:00:01 -0400 Subject: [PATCH 7/9] Refactor, pass props w/ object spread notation --- src/scenes/home/jobs/jobs.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/scenes/home/jobs/jobs.js b/src/scenes/home/jobs/jobs.js index 78bacc498..29ad0601d 100644 --- a/src/scenes/home/jobs/jobs.js +++ b/src/scenes/home/jobs/jobs.js @@ -36,19 +36,11 @@ class Jobs extends Component { render() { const featuredJobs = FeaturedJobsData - .filter(x => x.status === 'active') + .filter(job => job.status === 'active') .map(job => ( )); From 54af5e61459b9b3c116f6e69cdf47616ca7fb55d Mon Sep 17 00:00:00 2001 From: John Hampton Date: Thu, 12 Jul 2018 21:07:37 -0400 Subject: [PATCH 8/9] Add first set of featured jobs to static JSON file --- src/scenes/home/jobs/featuredJobs.json | 67 ++++++++++++-------------- 1 file changed, 32 insertions(+), 35 deletions(-) diff --git a/src/scenes/home/jobs/featuredJobs.json b/src/scenes/home/jobs/featuredJobs.json index 10ba77aad..89f673876 100644 --- a/src/scenes/home/jobs/featuredJobs.json +++ b/src/scenes/home/jobs/featuredJobs.json @@ -1,50 +1,47 @@ [ { - "title": "Software Engineer (Mock Data)", - "source": "Microsoft", - "sourceUrl": "https://www.microsoft.com", - "city": "Redmond", - "state": "Washington", - "country": "United States", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", - "status": "inactive", - "remote": false, + "title": "Technical Product Marketing Manager", + "source": "GitLab", + "sourceUrl": "https://jobs.lever.co/gitlab/022890d6-549a-48fe-8891-51c13b8d1137", + "city": "", + "state": "", + "country": "Any", + "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.", + "status": "active", + "remote": true, "tags": [ - "C#", - "ASP.Net", - "DevOps" + "Marketing", + "Product Management" ] }, { - "title": "QA Engineer (Mock Data)", - "source": "Apple", - "sourceUrl": "https://www.apple.com", - "city": "San Francisco", - "state": "California", - "country": "United States", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ", - "status": "inactive", + "title": "Senior Database Engineer", + "source": "GitLab", + "sourceUrl": "https://jobs.lever.co/gitlab/8b711f1c-d378-4383-a027-bac550aeee6d", + "city": "", + "state": "", + "country": "Americas", + "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.", + "status": "active", "remote": true, "tags": [ - "C#", - "ASP.Net", - "DevOps" + "Infrastructure", + "Database" ] }, { - "title": "DevOps Engineeer (Mock Data)", - "source": "GitHub", - "sourceUrl": "https://www.github.com", - "city": "Austin", - "state": "Texas", - "country": "United States", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", - "status": "inactive", - "remote": false, + "title": "Field Marketing Manager", + "source": "GitLab", + "sourceUrl": "https://jobs.lever.co/gitlab/f53275a2-bac6-43c8-9a7f-a1d3021c9521", + "city": "", + "state": "", + "country": "Asia Pacific", + "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.", + "status": "active", + "remote": true, "tags": [ - "C#", - "ASP.Net", - "DevOps" + "Marketing", + "Sales" ] } ] \ No newline at end of file From cfd64612fc283e562120f1a861164524d3ea6b5a Mon Sep 17 00:00:00 2001 From: John Hampton Date: Thu, 12 Jul 2018 21:14:42 -0400 Subject: [PATCH 9/9] Conditionally render city/state/country Don't display those properties if they are falsey --- src/scenes/home/jobs/featuredJob/featuredJob.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scenes/home/jobs/featuredJob/featuredJob.js b/src/scenes/home/jobs/featuredJob/featuredJob.js index acdef1091..7accde802 100644 --- a/src/scenes/home/jobs/featuredJob/featuredJob.js +++ b/src/scenes/home/jobs/featuredJob/featuredJob.js @@ -29,9 +29,9 @@ const FeaturedJob = ({
- {city}, - {state}, - {country} + {city && {city},} + {state && {state},} + {country && {country}}
{remote &&