From 0d38ccc4f9d597936c6fe3a7c3fc119641dae0d5 Mon Sep 17 00:00:00 2001 From: Fdom92 Date: Wed, 4 Dec 2019 16:52:43 +0100 Subject: [PATCH 1/7] feat(opportunities): start the new design for the opportunities --- src/assets/i18n/en.ts | 65 +++- .../opportunities-arrow-animated.svg | 1 + .../opportunities/opportunities-arrow.svg | 1 + .../opportunities-design-active.svg | 1 + .../opportunities-dev-active.svg | 1 + .../opportunities-header-animated.svg | 1 + .../opportunities/opportunities-header.svg | 1 + .../opportunities-mobile-design-active.svg | 1 + .../opportunities-mobile-dev-active.svg | 1 + .../opportunities-mobile-header-animated.svg | 1 + ...opportunities-mobile-transition-design.svg | 1 + .../opportunities-mobile-transition-dev.svg | 1 + .../opportunities-tablet-header-animated.svg | 1 + ...opportunities-tablet-transition-design.svg | 1 + .../opportunities-tablet-transition-dev.svg | 1 + .../opportunities-transition-design-dev.svg | 1 + .../opportunities-transition-design.svg | 1 + .../opportunities-transition-dev-design.svg | 1 + .../opportunities-transition-dev.svg | 1 + .../content-graphic/content-graphic.scss | 18 + .../content-graphic/content-graphic.tsx | 15 +- .../app-opportunities/app-opportunities.scss | 180 ++++++++- .../app-opportunities/app-opportunities.tsx | 360 ++++++++++++------ src/pages/open-forge-app/open-forge-app.tsx | 2 +- 24 files changed, 516 insertions(+), 142 deletions(-) create mode 100644 src/assets/opportunities/opportunities-arrow-animated.svg create mode 100644 src/assets/opportunities/opportunities-arrow.svg create mode 100644 src/assets/opportunities/opportunities-design-active.svg create mode 100644 src/assets/opportunities/opportunities-dev-active.svg create mode 100644 src/assets/opportunities/opportunities-header-animated.svg create mode 100644 src/assets/opportunities/opportunities-header.svg create mode 100644 src/assets/opportunities/opportunities-mobile-design-active.svg create mode 100644 src/assets/opportunities/opportunities-mobile-dev-active.svg create mode 100644 src/assets/opportunities/opportunities-mobile-header-animated.svg create mode 100644 src/assets/opportunities/opportunities-mobile-transition-design.svg create mode 100644 src/assets/opportunities/opportunities-mobile-transition-dev.svg create mode 100644 src/assets/opportunities/opportunities-tablet-header-animated.svg create mode 100644 src/assets/opportunities/opportunities-tablet-transition-design.svg create mode 100644 src/assets/opportunities/opportunities-tablet-transition-dev.svg create mode 100644 src/assets/opportunities/opportunities-transition-design-dev.svg create mode 100644 src/assets/opportunities/opportunities-transition-design.svg create mode 100644 src/assets/opportunities/opportunities-transition-dev-design.svg create mode 100644 src/assets/opportunities/opportunities-transition-dev.svg diff --git a/src/assets/i18n/en.ts b/src/assets/i18n/en.ts index 74639215..f402b696 100644 --- a/src/assets/i18n/en.ts +++ b/src/assets/i18n/en.ts @@ -294,9 +294,64 @@ export const translations = { opportunities: { hero: { - title: "Great News! We're Hiring.", - text: "If you're curious, hardworking, and adventurous, we're looking for you! Check out our job description and apply today.", - text2: 'Learn More', + title: 'Looking for a New Adventure?', + text: 'If you’re a talented designer or developer, we want to hear from you! Choose the role that best describes you to continue.', + text2: 'Let’s get to know each other…', + developer: 'DEVELOPER', + designer: 'DESIGNER', + develop: { + title: 'Show Us What You’re Made Of', + text: "If you're curious, hardworking, and adventurous, we're looking for you! Check out our job description and apply today.", + button: 'Apply Now', + }, + design: { + title: 'Show Us What You’re Made Of', + text: "If you're curious, hardworking, and adventurous, we're looking for you! Check out our job description and apply today.", + button: 'Apply Now', + }, + }, + candidate: { + develop: { + title: 'The ideal candidate can....', + text1: 'Be a great team player experienced in working with agile teams with the ability to collaborate closely with developers, copywriters and UX designers.', + text2: 'Continually keep yourself and your design team updated with the latest changes in your industry’s standards.', + text3: 'Be self-starter.', + text4: 'Be a team player -- you put the interests of the team and the company above your own.', + text5: 'Be passionate about open source software', + }, + design: { + title: 'The ideal candidate can....', + text1: 'Be a great team player experienced in working with agile teams with the ability to collaborate closely with developers, copywriters and UX designers.', + text2: 'Create, improve and utilize wireframes, prototypes, style guides, user flows, and effectively communicate your interaction ideas using any of these methods.', + text3: + 'Present and defend your design decisions. All your design decisions should be based on the overall design roadmap as well as your own design thinking and fundamental principles (i.e. color theory, visual weight, etc.)', + text4: 'Continually keep yourself and your design team updated with the latest changes in your industry’s standards.', + }, + }, + requisites: { + develop: { + title: 'And can meet the following prerequisites:', + text1: 'Three or more years of experience and proven track record.', + text2: 'Strong portfolio to be presented and defended during interview.', + text3: 'Experience using Firebase products (Database, Authentication, Notifications).', + text4: 'Experience in CSS (SCSS, BEM, LESS, SASS).', + text5: 'Experience in JavaScript (React, Angular, Node, Express).', + text6: 'Experience in Hybrid Apps (Ionic).', + text7: 'Experience with Heroku, Github Pages, or AWS is a plus.', + text8: 'Experience building web applications and/or mobile apps is a plus.', + text9: 'Experience in working on open source projects is a plus.', + }, + design: { + title: 'And can meet the following prerequisites', + text1: 'Three or more years of experience and proven track record.', + text2: 'Strong portfolio to be presented and defended during the interview.', + text3: 'Hands-on experience creating wireframes, prototypes, storyboards, user flows, etc.', + text4: 'Proficiency with tools such as Photoshop, Sketch, Illustrator, InVision, MarvelApp, etc.', + text5: 'Understanding of basic front-end languages: HTML5, CSS3 Javascript.', + text6: 'The ability to generate creative ideas with problem-solving mindset.', + text7: 'Experience working in an agile/scrum development process.', + text8: 'Be open to receiving objective criticism and improving upon it.', + }, }, intro: { title: 'Forget normal interviews!', @@ -306,7 +361,7 @@ export const translations = { }, design: { text: - 'At OpenForge, we believe that sometimes actions speak louder than words, so as part of your interview assignment, we’d like to challenge you to design 3 pages of an app of your choosing.', + "From our work to our interview process, we break the norm. We believe in Open Source contributions; so part of your interview assignment will be exactly that - build out a simple (open source) Ionic or React App!.", }, }, test: { @@ -343,7 +398,7 @@ export const translations = { form: { allset: "You're all set! Let's get started.", almost: 'Not quite...keep sliding or keep learning; you can do it!', - request: 'Request an interview', + request: 'Apply', midLevelTitle: 'Mid-Level Developer', technology: 'Technology', fullTime: 'Full-Time', diff --git a/src/assets/opportunities/opportunities-arrow-animated.svg b/src/assets/opportunities/opportunities-arrow-animated.svg new file mode 100644 index 00000000..957d38d2 --- /dev/null +++ b/src/assets/opportunities/opportunities-arrow-animated.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-arrow.svg b/src/assets/opportunities/opportunities-arrow.svg new file mode 100644 index 00000000..c40d9e38 --- /dev/null +++ b/src/assets/opportunities/opportunities-arrow.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-design-active.svg b/src/assets/opportunities/opportunities-design-active.svg new file mode 100644 index 00000000..1504e949 --- /dev/null +++ b/src/assets/opportunities/opportunities-design-active.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-dev-active.svg b/src/assets/opportunities/opportunities-dev-active.svg new file mode 100644 index 00000000..441a334e --- /dev/null +++ b/src/assets/opportunities/opportunities-dev-active.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-header-animated.svg b/src/assets/opportunities/opportunities-header-animated.svg new file mode 100644 index 00000000..0a5af6df --- /dev/null +++ b/src/assets/opportunities/opportunities-header-animated.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-header.svg b/src/assets/opportunities/opportunities-header.svg new file mode 100644 index 00000000..ce5709a8 --- /dev/null +++ b/src/assets/opportunities/opportunities-header.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-design-active.svg b/src/assets/opportunities/opportunities-mobile-design-active.svg new file mode 100644 index 00000000..3e477a18 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-design-active.svg @@ -0,0 +1 @@ +mobile-opp-design-header \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-dev-active.svg b/src/assets/opportunities/opportunities-mobile-dev-active.svg new file mode 100644 index 00000000..8b90d5b2 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-dev-active.svg @@ -0,0 +1 @@ +mobile-opp-dev-header \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-header-animated.svg b/src/assets/opportunities/opportunities-mobile-header-animated.svg new file mode 100644 index 00000000..a70f4eb0 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-header-animated.svg @@ -0,0 +1 @@ +Opp-default \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-transition-design.svg b/src/assets/opportunities/opportunities-mobile-transition-design.svg new file mode 100644 index 00000000..e7e48214 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-transition-design.svg @@ -0,0 +1 @@ +mobile-opp-design-header \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-transition-dev.svg b/src/assets/opportunities/opportunities-mobile-transition-dev.svg new file mode 100644 index 00000000..34842e63 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-transition-dev.svg @@ -0,0 +1 @@ +mobile-opp-dev-header \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-tablet-header-animated.svg b/src/assets/opportunities/opportunities-tablet-header-animated.svg new file mode 100644 index 00000000..c829eab4 --- /dev/null +++ b/src/assets/opportunities/opportunities-tablet-header-animated.svg @@ -0,0 +1 @@ +Opp-tablet-DEFAULT \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-tablet-transition-design.svg b/src/assets/opportunities/opportunities-tablet-transition-design.svg new file mode 100644 index 00000000..b38003c4 --- /dev/null +++ b/src/assets/opportunities/opportunities-tablet-transition-design.svg @@ -0,0 +1 @@ +Opp-tablet-DEFAULT \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-tablet-transition-dev.svg b/src/assets/opportunities/opportunities-tablet-transition-dev.svg new file mode 100644 index 00000000..8e7bf8ec --- /dev/null +++ b/src/assets/opportunities/opportunities-tablet-transition-dev.svg @@ -0,0 +1 @@ +Opp-tablet-DEFAULT \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-transition-design-dev.svg b/src/assets/opportunities/opportunities-transition-design-dev.svg new file mode 100644 index 00000000..5ccc0114 --- /dev/null +++ b/src/assets/opportunities/opportunities-transition-design-dev.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-transition-design.svg b/src/assets/opportunities/opportunities-transition-design.svg new file mode 100644 index 00000000..a0f225d0 --- /dev/null +++ b/src/assets/opportunities/opportunities-transition-design.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-transition-dev-design.svg b/src/assets/opportunities/opportunities-transition-dev-design.svg new file mode 100644 index 00000000..ca4ca31a --- /dev/null +++ b/src/assets/opportunities/opportunities-transition-dev-design.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-transition-dev.svg b/src/assets/opportunities/opportunities-transition-dev.svg new file mode 100644 index 00000000..b10569d7 --- /dev/null +++ b/src/assets/opportunities/opportunities-transition-dev.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/components/content-graphic/content-graphic.scss b/src/components/content-graphic/content-graphic.scss index f8a58fd2..aedee0bd 100644 --- a/src/components/content-graphic/content-graphic.scss +++ b/src/components/content-graphic/content-graphic.scss @@ -25,6 +25,15 @@ line-height: 2.5rem; margin-bottom: 15px; } + + &.original { + color: #121212; + font-size: 28px; + } + + &.thin { + font-weight: 400; + } } p { @@ -41,4 +50,13 @@ padding: 0 15px; } } + + .align-left { + text-align: left !important; + } + + .footer-btn { + display: flex; + justify-content: flex-start; + } } diff --git a/src/components/content-graphic/content-graphic.tsx b/src/components/content-graphic/content-graphic.tsx index 52e40d78..a0126575 100644 --- a/src/components/content-graphic/content-graphic.tsx +++ b/src/components/content-graphic/content-graphic.tsx @@ -29,12 +29,7 @@ export class ContentGraphic { 'text-md-right': !this.reverse, }} > - +
- + +
); diff --git a/src/pages/app-opportunities/app-opportunities.scss b/src/pages/app-opportunities/app-opportunities.scss index d05f4f87..46d157db 100644 --- a/src/pages/app-opportunities/app-opportunities.scss +++ b/src/pages/app-opportunities/app-opportunities.scss @@ -1,43 +1,188 @@ .opportunities { // hero .hero { - background-position: top center; - background-size: cover; - height: 100vh; + background-size: contain; + background-repeat: no-repeat; + height: calc(100vh - 76px); + margin-top: 76px; + + &.header-animated { + background-image: url('/assets/opportunities/opportunities-header-animated.svg'); + + @include media-breakpoint-down(md) { + background-image: url('/assets/opportunities/opportunities-tablet-header-animated.svg'); + } + @include media-breakpoint-down(sm) { + background-image: url('/assets/opportunities/opportunities-mobile-header-animated.svg'); + } + } + + &.header-transition-dev { + background-image: url('/assets/opportunities/opportunities-transition-dev.svg'); + + @include media-breakpoint-down(md) { + background-image: url('/assets/opportunities/opportunities-tablet-transition-dev.svg'); + } + @include media-breakpoint-down(sm) { + background-image: url('/assets/opportunities/opportunities-mobile-transition-dev.svg'); + } + } + + &.header-transition-design { + background-image: url('/assets/opportunities/opportunities-transition-design.svg'); + + @include media-breakpoint-down(md) { + background-image: url('/assets/opportunities/opportunities-tablet-transition-design.svg'); + } + @include media-breakpoint-down(sm) { + background-image: url('/assets/opportunities/opportunities-mobile-transition-design.svg'); + } + } + + &.header-transition-dev-design { + background-image: url('/assets/opportunities/opportunities-transition-dev-design.svg'); + + @include media-breakpoint-down(md) { + background-image: url('/assets/opportunities/opportunities-tablet-transition-design.svg'); // MISSING REAL TRANSITION SVG + } + @include media-breakpoint-down(sm) { + background-image: url('/assets/opportunities/opportunities-mobile-transition-design.svg'); // MISSING REAL TRANSITION SVG + } + } + + &.header-transition-design-dev { + background-image: url('/assets/opportunities/opportunities-transition-design-dev.svg'); + + @include media-breakpoint-down(md) { + background-image: url('/assets/opportunities/opportunities-tablet-transition-dev.svg'); // MISSING REAL TRANSITION SVG + } + @include media-breakpoint-down(sm) { + background-image: url('/assets/opportunities/opportunities-mobile-transition-dev.svg'); // MISSING REAL TRANSITION SVG + } + } + + &.header-dev-active { + background-image: url('/assets/opportunities/opportunities-dev-active.svg'); + + @include media-breakpoint-down(md) { + background-image: url('/assets/opportunities/opportunities-tablet-dev-active.svg'); // MISSING SVG + } + @include media-breakpoint-down(sm) { + background-image: url('/assets/opportunities/opportunities-mobile-dev-active.svg'); + } + } + + &.header-design-active { + background-image: url('/assets/opportunities/opportunities-design-active.svg'); + + @include media-breakpoint-down(md) { + background-image: url('/assets/opportunities/opportunities-tablet-design-active.svg'); // MISSING SVG + } + @include media-breakpoint-down(sm) { + background-image: url('/assets/opportunities/opportunities-mobile-design-active.svg'); + } + } .container, .row { - height: 100%; + height: calc(100vh - 76px); + justify-content: center; + } + + .hero-text-container { + margin-top: 8rem; + + @include media-breakpoint-down(lg) { + margin-top: 4rem; + } + + @include media-breakpoint-down(sm) { + margin-top: 3rem; + } + } + + .hero-arrow-img { + display: flex; + margin-top: 1rem; + flex-direction: column; + justify-content: center; + align-items: center; + img { + width: 50px; + } } h2 { - color: $white; + color: #121212; font-size: 4rem; margin-bottom: 1rem; + text-align: center; @include media-breakpoint-down(lg) { font-size: 3rem; } + @include media-breakpoint-down(md) { + font-size: 2rem; + } @include media-breakpoint-down(sm) { - font-size: 2.2rem; + font-size: 26px; } } p { - color: $white; + color: #121212; font-size: 1.2rem; font-weight: 300; margin-bottom: 1.5rem; - max-width: 500px; + text-align: center; @include media-breakpoint-down(lg) { - font-size: 1rem; + font-size: 16px; + } + @include media-breakpoint-down(md) { + font-size: 14px; + } + } + + .opportunity-btn { + background-color: #0095aa; + border: 0.75px solid #ffffff; + border-radius: 16px; + box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5); + + &.active, + &:focus { + box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5), inset 0 0 7px 4px rgba(0, 0, 0, 0.3) !important; + background-color: #0095aa !important; + border-color: white !important; + } + + @include media-breakpoint-down(sm) { + width: 60%; + margin-top: 1rem; + margin-bottom: 1rem; + } + } + + .hero-type-buttons { + display: flex; + flex-direction: row; + justify-content: space-evenly; + + @include media-breakpoint-down(sm) { + flex-direction: column; + align-items: center; } } } + header.hero-submit { + margin-top: 76px; + } + .interviews { padding: 3rem 0; a { + color: #6d6e71; text-decoration: underline; } @@ -213,6 +358,10 @@ color: #d9534f; } } + + .submit-btn-container { + text-align: center; + } } } @@ -220,4 +369,17 @@ margin-left: 5px; margin-right: 5px; } + + button.apply-btn { + background-color: #0095aa; + border: 0.75px solid #ffffff; + border-radius: 16px; + box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5); + } + + hr { + width: 100%; + margin: 0; + border: 1.5px solid rgba(23, 23, 25, 0.1); + } } diff --git a/src/pages/app-opportunities/app-opportunities.tsx b/src/pages/app-opportunities/app-opportunities.tsx index be937987..36e62028 100644 --- a/src/pages/app-opportunities/app-opportunities.tsx +++ b/src/pages/app-opportunities/app-opportunities.tsx @@ -106,6 +106,8 @@ export class AppOpportunities { url: 'https://openforge.io/opportunities/develop/', image: 'https://openforge.io/assets/graphic-opportunities-dev-header.png', }, + candidateUrl: '/assets/graphic-opportunities-master-develop.jpg', + requisitesUrl: '/assets/case-study-development.png', }, design: { googleDoc: 'https://docs.google.com/document/d/1wqwowtkU52JmLb8HkR-bOZhx_MpLIUXnTJSy47U_OuI/edit', @@ -155,6 +157,8 @@ export class AppOpportunities { url: 'https://openforge.io/opportunities/design/', image: 'https://openforge.io/assets/graphic-opportunities-design-header.png', }, + candidateUrl: '/assets/graphic-opportunities-master-design.jpg', + requisitesUrl: '/assets/case-study-design.png', }, }; @@ -167,17 +171,15 @@ export class AppOpportunities { @Prop() match: MatchResults; @Prop() history: RouterHistory; + @State() opporunityTypeCurrent: string; + @State() opporunityTypePrevious: string; + @State() opporunityTypeActive: string; + @Watch('match') matchHandler() { this.changeMetadata(); } - componentWillLoad() { - if (!this.texts[this.match.params.type]) { - this.history.push(`/`, {}); - } - } - componentDidLoad() { this.resetFormValues(); this.changeMetadata(); @@ -196,7 +198,7 @@ export class AppOpportunities { const { field, value, target } = event.detail; this.formValues[field] = value; - if (this.match.params.type === 'develop') { + if (this.opporunityTypeCurrent === 'develop') { if (this.formValues.angular > 90 && this.formValues.node > 90 && this.formValues.ionic > 90 && this.formValues.html > 90 && this.formValues.css > 90) { this.interviewButtonDisabled = false; } else { @@ -204,7 +206,7 @@ export class AppOpportunities { } } - if (this.match.params.type === 'design') { + if (this.opporunityTypeCurrent === 'design') { if (this.formValues.sketch > 70 && this.formValues.adobe > 70 && this.formValues.interactive > 70 && this.formValues.ux > 70 && this.formValues.presentation > 70) { this.interviewButtonDisabled = false; } else { @@ -332,121 +334,246 @@ export class AppOpportunities { } changeMetadata() { - if (this.texts[this.match.params.type]) { + if (this.texts[this.opporunityTypeCurrent]) { // Change meta tags dynamically d - document.querySelector("meta[property='og:title']").setAttribute('content', this.texts[this.match.params.type].metatags.title); - document.querySelector("meta[property='og:description']").setAttribute('content', this.texts[this.match.params.type].metatags.description); - document.querySelector("meta[property='og:url']").setAttribute('content', this.texts[this.match.params.type].metatags.url); - document.querySelector("meta[property='og:image']").setAttribute('content', this.texts[this.match.params.type].metatags.image); - document.querySelector("meta[name='keywords']").setAttribute('content', this.texts[this.match.params.type].metatags.keywords); + document.querySelector("meta[property='og:title']").setAttribute('content', this.texts[this.opporunityTypeCurrent].metatags.title); + document.querySelector("meta[property='og:description']").setAttribute('content', this.texts[this.opporunityTypeCurrent].metatags.description); + document.querySelector("meta[property='og:url']").setAttribute('content', this.texts[this.opporunityTypeCurrent].metatags.url); + document.querySelector("meta[property='og:image']").setAttribute('content', this.texts[this.opporunityTypeCurrent].metatags.image); + document.querySelector("meta[name='keywords']").setAttribute('content', this.texts[this.opporunityTypeCurrent].metatags.keywords); + } + } + + selectType(type: string) { + if (this.opporunityTypeCurrent !== type) { + this.opporunityTypePrevious = this.opporunityTypeCurrent; + this.opporunityTypeCurrent = type; + setTimeout(() => { + this.opporunityTypeActive = this.opporunityTypeCurrent; + }, 1000); } } render() { return (
- {/* header - hero */} - {this.texts[this.match.params.type] - ? [ -
-
-
-
-

- -

-

- -

- -
+ {!this.canRequestInterview ? ( + // Header for initial state +
+
+
+
+

+ +

+

+ +

+
+ + +
+
+ {this.opporunityTypeCurrent + ? [ + , + , + ] + : null}
-
, - - /* section - interviews */ -
+
+
+
+ ) : ( + // Header for the state after click on apply +
+ +

+ +

+

+ +

+
+ +
+ +
+ )} + {this.opporunityTypeCurrent ? ( + !this.canRequestInterview ? ( + // Content section for initial state +
+
+ +

+ +

+

+ +

+ + + +

+ +

+

+ +

+ +
+ +
- -

- -

-

- -

- - - -

- -

-

- +

+

+ +

+

+

- -
- -
-
-
-

- -

-

- -

+
+
+
+

{this.texts[this.opporunityTypeCurrent].firstSkill.name}

+ +
+
+

{this.texts[this.opporunityTypeCurrent].secondSkill.name}

+
-
-
-

{this.texts[this.match.params.type].firstSkill.name}

- -
-
-

{this.texts[this.match.params.type].secondSkill.name}

- -
-
-

{this.texts[this.match.params.type].thirdSkill.name}

- - -
+
+

{this.texts[this.opporunityTypeCurrent].thirdSkill.name}

+ +
- -
- -

- -

-

- -

- - - -

- -

-

- -

- -
-
, - - /* section - apply */ +
+ +
+ +

+ +

+

+ +

+ + + +

+ +

+

+ +

+ +
+ + ) : ( + // Content section for the state after click on apply +
+
+ +

+ +

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + {this.opporunityTypeCurrent === 'develop' ? ( +
  • + +
    • + ) : null} +
+ + +

+ +

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + {this.opporunityTypeCurrent === 'develop' ? ( +
  • + +
    • + ) : null} +
+ +
+ ) + ) : null} + {this.opporunityTypeCurrent + ? [
{!this.formSubmitted ? (
{!this.canRequestInterview ? ( + // First form with sliders

@@ -464,11 +591,11 @@ export class AppOpportunities {

- - - - - + + + + + {!this.interviewButtonDisabled ? (

@@ -480,15 +607,16 @@ export class AppOpportunities {

)} - ) : ( + // Second form to submit the resume

Want to know exactly what you're getting yourself into? Check out our - + Google Document to see the ins and outs of what this epic adventure will include! @@ -563,9 +691,11 @@ export class AppOpportunities { {this.messageError}

- +
+ +
)} @@ -586,9 +716,9 @@ export class AppOpportunities { )}
, - , ] : null} + ); } diff --git a/src/pages/open-forge-app/open-forge-app.tsx b/src/pages/open-forge-app/open-forge-app.tsx index e33cbf3c..d4a087ac 100644 --- a/src/pages/open-forge-app/open-forge-app.tsx +++ b/src/pages/open-forge-app/open-forge-app.tsx @@ -40,7 +40,7 @@ export class OpenForgeApp { - + From 956e24102fb3accb6dba464d7109a4c72d343854 Mon Sep 17 00:00:00 2001 From: Fdom92 Date: Fri, 3 Jan 2020 12:21:14 +0100 Subject: [PATCH 2/7] fix(opportunities): fix feedback from pr --- src/assets/i18n/en.ts | 13 +- .../content-graphic/content-graphic.scss | 45 ++- .../content-graphic/content-graphic.tsx | 7 +- .../app-opportunities/app-opportunities.scss | 49 ++- .../app-opportunities/app-opportunities.tsx | 342 +++++++++--------- 5 files changed, 273 insertions(+), 183 deletions(-) diff --git a/src/assets/i18n/en.ts b/src/assets/i18n/en.ts index c69414c6..5f5c880a 100644 --- a/src/assets/i18n/en.ts +++ b/src/assets/i18n/en.ts @@ -129,8 +129,9 @@ export const translations = { fullName: 'Full Name*', company: 'Company', email: 'E-mail*', - phone: 'Phone', - github: 'GitHub URL', + phone: 'Phone*', + github: 'GitHub URL*', + designProfile: 'Link to your profile*', whatAreYouWorkingOn: 'What are you working on?', appDevelopment: 'App Development', webDevelopment: 'Web Development', @@ -156,6 +157,9 @@ export const translations = { email: 'example@gmail.com', phone: 'Your Phone Number', message: 'Briefly describe your project', + fullName: 'Your Name Here', + github: 'Your Github account', + designProfile: 'Your profile account', }, }, }, @@ -415,10 +419,11 @@ export const translations = { resume: 'Resume/CV', unique: { title: 'What makes you unique?', - text: 'In 150 characters or fewer, tell us what makes you unique. Try to be creative and say something that will catch our eye!', + text: 'In 200 characters or less, tell us what makes you unique.', }, submit: 'Submit Application', - submitted: 'Application Submitted', + submitted: 'Application Submitted!', + thanks_interest: 'Thank you for your interest in OpenForge.', thanks: { title: 'Thank you!', text: 'If your resume is a match, someone will be in touch to deliver the necessary materials to complete the challenge.', diff --git a/src/components/content-graphic/content-graphic.scss b/src/components/content-graphic/content-graphic.scss index aedee0bd..222ce3cb 100644 --- a/src/components/content-graphic/content-graphic.scss +++ b/src/components/content-graphic/content-graphic.scss @@ -7,6 +7,10 @@ } app-img { + @include media-breakpoint-down(sm) { + order: 2; + } + img { max-height: 400px; @include media-breakpoint-down(sm) { @@ -34,6 +38,16 @@ &.thin { font-weight: 400; } + + &.margin-bottom { + margin-bottom: 2rem; + @include media-breakpoint-down(lg) { + margin-bottom: 1rem; + } + @include media-breakpoint-down(sm) { + margin-bottom: 0; + } + } } p { @@ -51,12 +65,39 @@ } } - .align-left { - text-align: left !important; + li { + @include media-breakpoint-down(sm) { + text-align: left; + } + } + + .auto-align { + text-align: left; + + @include media-breakpoint-down(md) { + text-align: right; + } + + @include media-breakpoint-down(sm) { + text-align: center; + } } .footer-btn { display: flex; justify-content: flex-start; + margin-top: 2rem; + + @include media-breakpoint-down(sm) { + margin-bottom: 2rem; + margin-top: 0; + } + } + + .content-container { + @include media-breakpoint-down(sm) { + display: flex; + flex-direction: column; + } } } diff --git a/src/components/content-graphic/content-graphic.tsx b/src/components/content-graphic/content-graphic.tsx index bc9ce8db..c81a120a 100644 --- a/src/components/content-graphic/content-graphic.tsx +++ b/src/components/content-graphic/content-graphic.tsx @@ -9,6 +9,8 @@ export class ContentGraphic { @Prop() reverse: boolean = false; @Prop() preLoadImg: boolean = false; @Prop() alt: string; + @Prop() wider: boolean; + @Prop() inverseOrder: boolean; render() { return ( @@ -23,6 +25,7 @@ export class ContentGraphic { >
diff --git a/src/pages/app-opportunities/app-opportunities.scss b/src/pages/app-opportunities/app-opportunities.scss index 46d157db..ae7253ed 100644 --- a/src/pages/app-opportunities/app-opportunities.scss +++ b/src/pages/app-opportunities/app-opportunities.scss @@ -4,7 +4,7 @@ background-size: contain; background-repeat: no-repeat; height: calc(100vh - 76px); - margin-top: 76px; + padding-top: 76px; &.header-animated { background-image: url('/assets/opportunities/opportunities-header-animated.svg'); @@ -338,19 +338,39 @@ letter-spacing: 0.1rem; line-height: 1.4rem; margin-bottom: 0; - width: 20%; - @include media-breakpoint-down(sm) { - width: 100%; + width: 100%; + + &.resume { + width: initial; + } + + &.resume-filename { + width: initial; + margin-left: 16px; + } + + &.resume-btn { + background-color: #0095aa; + border: 0.75px solid #ffffff; + border-radius: 16px; + -webkit-box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5); + box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5); + width: initial; + padding: 5px 10px; + text-align: center; + color: white; + margin-left: 16px; } } - .form-control, - input[type='file'] { + .form-control { display: inline-block; - width: 80%; - @include media-breakpoint-down(sm) { - width: 100%; - } + width: 100%; + } + + input[type='file'] { + visibility: hidden; + display: none; } } .error { @@ -382,4 +402,13 @@ margin: 0; border: 1.5px solid rgba(23, 23, 25, 0.1); } + + .submitted-text { + margin-top: 2rem; + + p { + margin-bottom: 0; + text-align: center; + } + } } diff --git a/src/pages/app-opportunities/app-opportunities.tsx b/src/pages/app-opportunities/app-opportunities.tsx index 36e62028..b47fa278 100644 --- a/src/pages/app-opportunities/app-opportunities.tsx +++ b/src/pages/app-opportunities/app-opportunities.tsx @@ -19,10 +19,10 @@ export class AppOpportunities { css: number; sketch: number; + photoshop: number; + illustrator: number; adobe: number; - interactive: number; - ux: number; - presentation: number; + prototyping: number; file: string; name: string; @@ -43,6 +43,7 @@ export class AppOpportunities { }; @State() fileError: any; + @State() fileName: any; @State() nameError: string; @State() emailError: string; @State() phoneError: string; @@ -133,20 +134,20 @@ export class AppOpportunities { name: 'sketch', }, second: { - label: 'Adobe CC', - name: 'adobe', + label: 'Photoshop CC', + name: 'photoshop', }, third: { - label: 'Interactive Prototyping', - name: 'interactive', + label: 'Illustrator CC', + name: 'illustrator', }, fourth: { - label: 'User Experience Design', - name: 'ux', + label: 'Adobe XD CC', + name: 'adobe', }, fifth: { - label: 'Presentation Design', - name: 'presentation', + label: 'Prototyping', + name: 'prototyping', }, }, metatags: { @@ -207,7 +208,7 @@ export class AppOpportunities { } if (this.opporunityTypeCurrent === 'design') { - if (this.formValues.sketch > 70 && this.formValues.adobe > 70 && this.formValues.interactive > 70 && this.formValues.ux > 70 && this.formValues.presentation > 70) { + if (this.formValues.sketch > 70 && this.formValues.photoshop > 70 && this.formValues.illustrator > 70 && this.formValues.adobe > 70 && this.formValues.prototyping > 70) { this.interviewButtonDisabled = false; } else { this.interviewButtonDisabled = true; @@ -271,16 +272,15 @@ export class AppOpportunities { handleSliders(e) { e.preventDefault(); this.canRequestInterview = true; - document.getElementById('apply').scrollIntoView({ block: 'start' }); + document.getElementById('hero').scrollIntoView({ block: 'start', behavior: 'smooth' }); } handleFile(e) { const files = e.target.files; const file = files[0]; - this.formData = new FormData(); this.formData.append('files', files[0]); - + this.fileName = file.name; this.formValues.formErrors.fileValid = e.target.checkValidity(); if (file && file.size > this.maxFileSize) { this.fileSizeErrorShown = true; @@ -321,7 +321,7 @@ export class AppOpportunities { this.formSubmitted = true; this.fileSizeErrorShown = false; - document.getElementById('apply').scrollIntoView({ block: 'start' }); + document.getElementById('thanks').scrollIntoView({ block: 'start' }); } catch (error) { console.log('Error', error); } @@ -333,6 +333,11 @@ export class AppOpportunities { form.scrollIntoView({ block: 'start', behavior: 'smooth' }); } + scrollToApply() { + const form = document.getElementById('applyForm'); + form.scrollIntoView({ block: 'start', behavior: 'smooth' }); + } + changeMetadata() { if (this.texts[this.opporunityTypeCurrent]) { // Change meta tags dynamically d @@ -360,6 +365,7 @@ export class AppOpportunities { {!this.canRequestInterview ? ( // Header for initial state
-

+

-

+

-
@@ -434,16 +440,16 @@ export class AppOpportunities {
-

+

-

+

-

+

@@ -482,10 +488,10 @@ export class AppOpportunities {

-

+

-

+

@@ -504,11 +510,11 @@ export class AppOpportunities { // Content section for the state after click on apply
- -

+ +

-
    +
      • @@ -528,11 +534,11 @@ export class AppOpportunities { ) : null}
    - -

    + +

    -
      +
        • @@ -570,151 +576,155 @@ export class AppOpportunities { {this.opporunityTypeCurrent ? [
        - {!this.formSubmitted ? ( -
        - {!this.canRequestInterview ? ( - // First form with sliders -
        -

        - -

        +
        + {!this.canRequestInterview ? ( + // First form with sliders + +

        + +

        +

        + +

        + +

        - +

        +

        + +

        +
        -
        -

        - -

        -

        - -

        -
        - - - - - - + + + + + - {!this.interviewButtonDisabled ? ( -

        - -

        - ) : ( -

        - -

        - )} - - - - ) : ( - // Second form to submit the resume -
        + {!this.interviewButtonDisabled ? (

        - Want to know exactly what you're getting yourself into? Check out our - - Google Document - - to see the ins and outs of what this epic adventure will include! +

        -

        - -

        - -
        - - -
        -

        - -