diff --git a/src/assets/images/icon-skills-blue.png b/src/assets/images/icon-skills-blue.png new file mode 100644 index 0000000000..658369b2d2 Binary files /dev/null and b/src/assets/images/icon-skills-blue.png differ diff --git a/src/assets/images/icon-skills.png b/src/assets/images/icon-skills.png new file mode 100644 index 0000000000..9708ba945f Binary files /dev/null and b/src/assets/images/icon-skills.png differ diff --git a/src/assets/images/icon-skills.svg b/src/assets/images/icon-skills.svg deleted file mode 100644 index e2c6de4376..0000000000 --- a/src/assets/images/icon-skills.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - 52CD6D74-4265-497A-89D8-FF91F35564F8 - Created with sketchtool. - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/l1.png b/src/assets/images/l1.png new file mode 100644 index 0000000000..be745ce393 Binary files /dev/null and b/src/assets/images/l1.png differ diff --git a/src/assets/images/l2.png b/src/assets/images/l2.png new file mode 100644 index 0000000000..fd3e0c91c4 Binary files /dev/null and b/src/assets/images/l2.png differ diff --git a/src/assets/images/l3.png b/src/assets/images/l3.png new file mode 100644 index 0000000000..963e89ca56 Binary files /dev/null and b/src/assets/images/l3.png differ diff --git a/src/assets/images/l4.png b/src/assets/images/l4.png new file mode 100644 index 0000000000..2e066b7f5d Binary files /dev/null and b/src/assets/images/l4.png differ diff --git a/src/server/services/recruitCRM.js b/src/server/services/recruitCRM.js index 4f7fb95189..b8659ae824 100644 --- a/src/server/services/recruitCRM.js +++ b/src/server/services/recruitCRM.js @@ -114,20 +114,27 @@ export default class RecruitCRMService { const data = await response.json(); if (data.current_page < data.last_page) { const pages = _.range(2, data.last_page + 1); - // eslint-disable-next-line no-restricted-syntax - for (const page of pages) { - // eslint-disable-next-line no-await-in-loop - const pageDataRsp = await fetch(`${this.private.baseUrl}/v1/jobs/search?${qs.stringify(req.query)}&page=${page}`, { + return Promise.all( + pages.map(page => fetch(`${this.private.baseUrl}/v1/jobs/search?${qs.stringify(req.query)}&page=${page}`, { method: 'GET', headers: { 'Content-Type': req.headers['content-type'], Authorization: this.private.authorization, }, - }); - // eslint-disable-next-line no-await-in-loop - const pageData = await pageDataRsp.json(); - data.data = _.flatten(data.data.concat(pageData.data)); - } + })), + ) + .then(async (allPages) => { + // eslint-disable-next-line no-restricted-syntax + for (const pageDataRsp of allPages) { + // eslint-disable-next-line no-await-in-loop + const pageData = await pageDataRsp.json(); + data.data = _.flatten(data.data.concat(pageData.data)); + } + return res.send(data.data); + }) + .catch(e => res.send({ + error: e, + })); } return res.send(data.data); } catch (err) { diff --git a/src/shared/components/GUIKit/JobListCard/index.jsx b/src/shared/components/GUIKit/JobListCard/index.jsx index d94f4dc175..f2801de3b0 100644 --- a/src/shared/components/GUIKit/JobListCard/index.jsx +++ b/src/shared/components/GUIKit/JobListCard/index.jsx @@ -10,7 +10,7 @@ import './style.scss'; import IconBlackDuration from 'assets/images/icon-black-duration.svg'; import IconBlackLocation from 'assets/images/icon-black-location.svg'; import IconBlackPayment from 'assets/images/icon-black-payment.svg'; -import IconBlackSkills from 'assets/images/icon-skills.svg'; +import iconBlackSkills from 'assets/images/icon-skills.png'; export default function JobListCard({ job, @@ -30,7 +30,7 @@ export default function JobListCard({ {job.name}
- {skills} + skills-icon {skills}
{job.country} diff --git a/src/shared/components/GUIKit/JobListCard/style.scss b/src/shared/components/GUIKit/JobListCard/style.scss index 1cff03c199..d25dc60fd5 100644 --- a/src/shared/components/GUIKit/JobListCard/style.scss +++ b/src/shared/components/GUIKit/JobListCard/style.scss @@ -69,7 +69,8 @@ width: 141px; } - svg { + svg, + img { margin-right: 7px; } } diff --git a/src/shared/components/GUIKit/SearchCombo/index.jsx b/src/shared/components/GUIKit/SearchCombo/index.jsx index 29400e9cb0..c94b4e0480 100644 --- a/src/shared/components/GUIKit/SearchCombo/index.jsx +++ b/src/shared/components/GUIKit/SearchCombo/index.jsx @@ -17,6 +17,11 @@ function SearchCombo({ setVal(''); onSearch(''); }; + const onKeyDown = (e) => { + if (e.which === 13) { + onSearch(inputVal); + } + }; return (
@@ -24,7 +29,7 @@ function SearchCombo({ { !inputVal ? {placeholder} : null } - setVal(event.target.value)} /> + setVal(event.target.value)} onKeyDown={onKeyDown} /> { inputVal ? : null } diff --git a/src/shared/components/GUIKit/SearchCombo/style.scss b/src/shared/components/GUIKit/SearchCombo/style.scss index a47b4940ec..30d0928547 100644 --- a/src/shared/components/GUIKit/SearchCombo/style.scss +++ b/src/shared/components/GUIKit/SearchCombo/style.scss @@ -9,7 +9,6 @@ width: 100%; position: relative; margin-right: 10px; - z-index: 1; input.input { background: transparent; @@ -17,6 +16,8 @@ border-radius: 6px; height: 39px; margin: 0; + position: relative; + z-index: 1; } .search-placeholder { @@ -29,6 +30,12 @@ z-index: 0; top: 8px; left: 15px; + + @include xs-to-sm { + max-width: 250px; + overflow: hidden; + white-space: nowrap; + } } .clear-search { @@ -36,6 +43,7 @@ top: calc(50% - 5px); right: 15px; cursor: pointer; + z-index: 2; } } diff --git a/src/shared/components/Gigs/GigDetails.jsx b/src/shared/components/Gigs/GigDetails.jsx index cbf3602331..9f83e9198e 100644 --- a/src/shared/components/Gigs/GigDetails.jsx +++ b/src/shared/components/Gigs/GigDetails.jsx @@ -17,6 +17,11 @@ import IconMoney from 'assets/images/icon-payment.svg'; import IconDuration from 'assets/images/icon-calendar-gig.svg'; import IconHours from 'assets/images/icon-duration.svg'; import IconTimezone from 'assets/images/icon-timezone.svg'; +import iconSkills from 'assets/images/icon-skills-blue.png'; +import iconLabel1 from 'assets/images/l1.png'; +import iconLabel2 from 'assets/images/l2.png'; +import iconLabel3 from 'assets/images/l3.png'; +import iconLabel4 from 'assets/images/l4.png'; // Cleanup HTML from style tags // so it won't affect other parts of the UI @@ -41,11 +46,11 @@ export default function GigDetails(props) { return (
{ - job.error ? ( + job.error || job.enable_job_application_form !== 1 ? (

Gig does not exist.

- VIEW OTHER JOBS + VIEW OTHER GIGS
) : ( @@ -90,8 +95,8 @@ export default function GigDetails(props) {
-

Required Tech Skills

-

{skills}

+

Skills

+

skills-icon {skills}

Description

{ReactHtmlParser(job.job_description_text, ReactHtmlParserOptions)}

@@ -126,12 +131,25 @@ export default function GigDetails(props) {

Thank you for checking out our latest gig at Topcoder. Gig work through us is simple and effective for those that would like traditional freelance work. To learn more about how Gigs work with us, go here.

At Topcoder, we pride ourselves in bringing our customers the very best candidates to help fill their needs. Want to improve your chances? You can do a few things:

    -
  • Check out our Topcoder challenges and participate. Challenges showing your technology skills make you a “qualified” candidate so we know you’re good. The proof is in the pudding!
    • -
  • Make sure your Topcoder profile says it all. Fill out your profile to the best of your ability. Your skills, your location, your devices, etc, all help you improve your chances of being selected for a gig
    • -
  • Let us know you’re here! Check in on our Gig Work forum and tell us you’re looking for a gig. It’s great visibility for the Gig team
    • -
  • Subscribe to our Gig notifications email. We’ll send you a weekly update on gigs available so you don’t miss a beat. Find the button at the top of this page.
    • +
  • + label 1 +
    Make sure your Topcoder profile says it all. Fill out your profile to the best of your ability. Your skills, your location, your devices, etc, all help you improve your chances of being selected for a gig.
    +
    • +
  • + label 2 +
    Subscribe to our Gig notifications email.. We’ll send you a weekly update on gigs available so you don’t miss a beat.
    +
    • +
  • + label 3 +
    Let us know you’re here! Check in on our Gig Work forum and tell us you’re looking for a gig. It’s great visibility for the Gig team.
    +
    • +
  • + label 4 +
    Check out our Topcoder challenges and participate. Challenges showing your technology skills make you a “qualified” candidate so we know you’re good. The proof is in the pudding!
    +
+
If you have any questions or doubts, don’t hesitate to email support@topcoder.com.
diff --git a/src/shared/components/Gigs/style.scss b/src/shared/components/Gigs/style.scss index 03756963e1..840e6508a2 100644 --- a/src/shared/components/Gigs/style.scss +++ b/src/shared/components/Gigs/style.scss @@ -23,6 +23,11 @@ height: 80vh; } + .wrap .content .right .support a { + font-weight: 600; + text-decoration: none; + } + .wrap { h2 { color: #26b3c5; @@ -118,15 +123,26 @@ li { font-size: 14px; line-height: 26px; - } + strong { + font-weight: bold; + } + } /* stylelint-enable */ ul { margin-bottom: 0; + list-style: none; + padding: 0; li { margin-bottom: 15px; + display: flex; + align-items: flex-start; + + img { + margin-right: 16px; + } &:last-child { margin-bottom: 0; @@ -138,6 +154,16 @@ .gig-skills { display: flex; } + + .support { + background-color: #eaf6fd; + border-radius: 10px; + padding: 20px; + text-transform: uppercase; + font-weight: 600; + font-family: Barlow, sans-serif; + margin-top: 20px; + } } .left { @@ -159,6 +185,16 @@ margin-top: 0; } } + + .skills { + display: flex; + align-items: center; + /* stylelint-disable */ + img { + margin-right: 8px; + } + /* stylelint-enable */ + } } } } diff --git a/src/shared/containers/Gigs/RecruitCRMJobs.jsx b/src/shared/containers/Gigs/RecruitCRMJobs.jsx index eacff10bde..e9ffd09d65 100644 --- a/src/shared/containers/Gigs/RecruitCRMJobs.jsx +++ b/src/shared/containers/Gigs/RecruitCRMJobs.jsx @@ -118,10 +118,15 @@ class RecruitCRMJobsContainer extends React.Component {
{ - jobsToDisplay.map(job => ) + jobsToDisplay.length + ? jobsToDisplay.map(job => ) + : No Results }
- + { + jobsToDisplay.length + ? : null + } ); } diff --git a/src/shared/containers/Gigs/jobLisingStyles.scss b/src/shared/containers/Gigs/jobLisingStyles.scss index ef403335ee..4edc9b7c5b 100644 --- a/src/shared/containers/Gigs/jobLisingStyles.scss +++ b/src/shared/containers/Gigs/jobLisingStyles.scss @@ -16,5 +16,10 @@ display: flex; flex-direction: column; margin: 20px 0 50px 0; + + .no-results { + display: flex; + justify-content: center; + } } } diff --git a/src/shared/containers/GigsPages.jsx b/src/shared/containers/GigsPages.jsx index 65b18b48a8..f0406e7259 100644 --- a/src/shared/containers/GigsPages.jsx +++ b/src/shared/containers/GigsPages.jsx @@ -6,7 +6,7 @@ import PT from 'prop-types'; import Header from 'containers/TopcoderHeader'; import Footer from 'components/TopcoderFooter'; import Viewport from 'components/Contentful/Viewport'; -import { config } from 'topcoder-react-utils'; +import { config, MetaTags } from 'topcoder-react-utils'; import RecruitCRMJobDetails from 'containers/Gigs/RecruitCRMJobDetails'; @@ -15,6 +15,7 @@ export default function GigsPagesContainer(props) { const { id } = match.params; return (
+
{ id ? (