Skip to content

Commit

Permalink
Merge pull request #70 from bulbajackel/master
Browse files Browse the repository at this point in the history 
Suggested Solution to Apply with LinkedIn hiding Submit and Cancel Buttons
  • Loading branch information
@krsween
krsween authored Aug 15, 2016
2 parents a97a1b5 + c541a95 commit 8a4c09e
Show file tree
Hide file tree
Showing 6 changed files with 135 additions and 112 deletions.
28 changes: 28 additions & 0 deletions src/app/detail/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,39 @@
<span class="card-separator" data-ng-show="::((detail.job.address.city || detail.job.address.state) && detail.job.employmentType)">|</span>
<!-- JOB TYPE -->
<span class="card-type">{{::detail.job.employmentType}}</span>
<!-- APPLY WITH LINKED IN || EMAIL JOB -->
<section data-ng-show="modal.showForm">
<!-- LINKED IN INTEGRATION (IF ACTIVATED) -->
<div data-ng-if="modal.isLinkedInActive">
<!-- LINKED IN APPLY BUTTON -->
<button class="btn-li-lg" data-ng-click="modal.applyWithLinkedIn()" data-ng-if="!modal.hasAttemptedLIApply && !detail.alreadyApplied" >
<i class="bhi-linkedin-o"></i>
<span>{{ 'modal.applyWithLI' | i18n }}</span>
</button>
<!-- LINKED IN ALERT INFO -->
<div class="alert info" data-ng-if="modal.hasAttemptedLIApply && !modal.LinkedInService.isUserLoaded()">
<strong>{{ 'modal.headsUp' | i18n }}</strong> {{ 'modal.linkedInWarning' | i18n }}
<a data-ng-click="modal.applyWithLinkedIn()">{{ 'modal.here' | i18n }}</a> {{ 'modal.retry' | i18n }}
</div>
<!-- OR BREAK -->
<span class="break" data-ng-show="!modal.hasAttemptedLIApply && !detail.alreadyApplied">
<span>Or</span>
</span>
<!-- PROMOTE EMAIL UX -->
<p data-ng-if="modal.isIOS && !modal.hasAttemptedLIApply"><strong>{{ 'modal.noLI' | i18n }}</strong> {{ 'modal.emailYourself' | i18n }}</p>
</div>
<!-- EMAIL JOB -->
<div data-ng-show="modal.isIOS && !modal.hasAttemptedLIApply">
<input class="email" type="email" data-ng-model="modal.email" id="email" name="email" data-i18n-attr="{ placeholder: 'common.emailPlaceholder' }">
</div>
</section>
<!-- APPLY BUTTON -->
<button class="apply" data-ng-click="detail.applyModal()" data-ng-disabled="detail.alreadyApplied" data-ng-class="{ 'disabled': detail.alreadyApplied }">
<span data-ng-if="!detail.alreadyApplied">{{'detail.applyButton' | i18n}}</span>
<span data-ng-if="detail.alreadyApplied">{{'detail.alreadyApplied' | i18n}}</span>
</button>


<!-- CONDITIONAL DIVIDER -->
<hr data-ng-if="detail.relatedJobs.length !== 0"/>
<!-- RELATED JOBS -->
Expand Down
95 changes: 94 additions & 1 deletion src/app/detail/detail.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,99 @@ section.job-detail {
height: 100%;
order: 2;
}
// Linked In Integration
$linked-in-blue: #0077B5;
//Linked In Alert
div.alert {
$info-blue-font: #245C7E;
$info-blue-bg: #D0E8F6;

color: $info-blue-font;
padding: 1em;
margin: 1.5em 0 0;
border-radius: .5em;
margin-bottom: 1.5em;

&.info {
border: solid thin darken($info-blue-bg, 10%);
background-color: $info-blue-bg;
}
}
//Or Break
span.break {
position: relative;
border-bottom: solid lightgray thin;
display: block;
//height: 2em;
margin: 2em 0;
> span {
position: absolute;
top: -.5em;
text-align: center;
width: 6%;
color: grey;
left: 46%;
background-color: white;
display: block;
}
}
// Linked In Button
button.btn-li-lg {
display: block;
width: 99%;
border: none;
border-radius: .25em;
padding: 0;

margin: auto;
margin-top: 1.5em;

overflow: hidden;

background: $linked-in-blue;
color: white;

text-align: left;

-webkit-transition: background-color 250ms;
-moz-transition: background-color 250ms;
-ms-transition: background-color 250ms;
-o-transition: background-color 250ms;
transition: background-color 250ms;

&:hover,
&:active,
&:focus {
background-color: darken($linked-in-blue, 5%);
}

&.done,
&.loading {
background-color: transparentize($linked-in-blue, .25);
color: rgba(255, 255, 255, .75);
> i {
border-right-color: lighten($linked-in-blue, 10%);
}
}

> i {
font-size: 2.5em;
padding: .15em .25em;
margin: 0 .25em 0 0;
display: inline-block;
height: 100%;
border-right: solid thin darken($linked-in-blue, 7%);
}

> span {
position: relative;
top: -.4em;
font-size: 1.1em;
font-weight: 600;
padding: 0 1.5em 0 0;
}

}

> div.send {
margin-top: 1em;
Expand Down Expand Up @@ -238,7 +331,6 @@ section.job-detail {

> button.apply {
cursor: pointer;
margin-top: 1.5em;
width: 100%;
border: none;
background: $secondary;
Expand All @@ -259,6 +351,7 @@ section.job-detail {

&.disabled {
background-color: lightgray;
margin-top: 1em;
}
}

Expand Down
4 changes: 4 additions & 0 deletions src/app/modal/modal.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ class CareerPortalModalController {
}
applyWithLinkedIn() {
this.hasAttemptedLIApply = true;
// this.SharedData.modalState = 'open';
this.LinkedInService.getUser()
.then((linkedInUser) => {
this.ApplyService.form.firstName = linkedInUser.firstName || '';
Expand All @@ -46,6 +47,9 @@ class CareerPortalModalController {
this.ApplyService.form.phone = linkedInUser.phoneNumbers ? linkedInUser.phoneNumbers.values[0].phoneNumber : '';
this.ApplyService.form.resumeInfo = this.formatResume(linkedInUser);
});
if (this.LinkedInService.userIsLoaded === true) {
this.SharedData.modalState = 'open';
}
}

closeModal(applyForm) {
Expand Down
22 changes: 1 addition & 21 deletions src/app/modal/modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,26 +25,6 @@ <h3>{{ 'modal.successSubHeading' | i18n }}</h3>
</header>
<!-- MAIN CONTENT -->
<div class="main" data-ng-class="{'success':!modal.showForm}">
<!-- STATE 1: APPLY WITH LINKED IN || EMAIL JOB -->
<section data-ng-show="modal.showForm">
<!-- LINKED IN INTEGRATION (IF ACTIVATED) -->
<div data-ng-if="modal.isLinkedInActive && !modal.isIOSSafari">
<!-- LINKED IN APPLY BUTTON -->
<button class="btn-li-lg" data-ng-click="modal.applyWithLinkedIn()" data-ng-if="!modal.hasAttemptedLIApply">
<i class="bhi-linkedin-o"></i>
<span>{{ 'modal.applyWithLI' | i18n }}</span>
</button>
<!-- LINKED IN INFO -->
<div class="alert info" data-ng-if="modal.hasAttemptedLIApply && !modal.LinkedInService.isUserLoaded()">
<strong>{{ 'modal.headsUp' | i18n }}</strong> {{ 'modal.linkedInWarning' | i18n }}
<a data-ng-click="modal.applyWithLinkedIn()">{{ 'modal.here' | i18n }}</a> {{ 'modal.retry' | i18n }}
</div>
<!-- OR BREAK -->
<span class="break" data-ng-show="!modal.hasAttemptedLIApply">
<span>Or</span>
</span>
</div>
</section>
<!-- APPLICANT FORM -->
<section>
<form name="applyForm" class="apply-form" novalidate data-ng-show="modal.showForm">
Expand Down Expand Up @@ -92,7 +72,7 @@ <h3>{{ 'modal.successSubHeading' | i18n }}</h3>
</div>
<!-- SKILLS & EXPERTISE -->
<div class="form-field" data-ng-if="modal.hasAttemptedLIApply">
<textarea placeholder="{{ 'modal.skills' | i18n }}" name="resume-text" data-ng-model="modal.linkedInData.resume" id="resume-text" cols="30" rows="10" data-ng-minlength="number"></textarea>
<textarea placeholder="{{ 'modal.skills' | i18n }}" name="resume-text" data-ng-model="modal.linkedInData.resume" id="resume-text" cols="30" rows="5" data-ng-minlength="number"></textarea>
</div>
<!-- UPLOAD LABEL -->
<div class="upload-label" data-ng-if="!modal.hasAttemptedLIApply">
Expand Down
93 changes: 4 additions & 89 deletions src/app/modal/modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.35);
overflow: hidden;
position: relative;
pointer-events: auto;

@include tablet() {
max-width: 500px;
Expand Down Expand Up @@ -49,6 +50,7 @@
}

> section {

> h2 {
font-size: 1.8em;
margin: 0.5em 0 0.2em;
Expand Down Expand Up @@ -230,24 +232,8 @@
}
}

// Linked In Integration:
$linked-in-blue: #0077B5;


div.alert {
$info-blue-font: #245C7E;
$info-blue-bg: #D0E8F6;

color: $info-blue-font;
padding: 1em;
margin: 1.5em 0 0;
border-radius: .5em;

&.info {
border: solid thin darken($info-blue-bg, 10%);
background-color: $info-blue-bg;
}
}

// Linked In Skills and expertise:
textarea {
width: 100%;
resize: none;
Expand All @@ -268,79 +254,8 @@
}
}

span.break {
position: relative;
border-bottom: solid lightgray thin;
display: block;
//height: 2em;
margin: 2em 0;
> span {
position: absolute;
top: -.5em;
text-align: center;
width: 6%;
color: grey;
left: 44%;
background-color: white;
display: block;
}
}

button.btn-li-lg {
display: block;

border: none;
border-radius: .25em;
padding: 0;

margin: auto;

overflow: hidden;

background: $linked-in-blue;
color: white;

text-align: left;

-webkit-transition: background-color 250ms;
-moz-transition: background-color 250ms;
-ms-transition: background-color 250ms;
-o-transition: background-color 250ms;
transition: background-color 250ms;

&:hover,
&:active,
&:focus {
background-color: darken($linked-in-blue, 5%);
}

&.done,
&.loading {
background-color: transparentize($linked-in-blue, .25);
color: rgba(255, 255, 255, .75);
> i {
border-right-color: lighten($linked-in-blue, 10%);
}
}

> i {
font-size: 2.5em;
padding: .15em .25em;
margin: 0 .25em 0 0;
display: inline-block;
height: 100%;
border-right: solid thin darken($linked-in-blue, 7%);
}

> span {
position: relative;
top: -.4em;
font-size: 1.1em;
font-weight: 600;
padding: 0 1.5em 0 0;
}

}
}


Expand Down
5 changes: 4 additions & 1 deletion src/app/services/linkedin.service.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
class LinkedInService {
constructor($q, configuration, $window) {
constructor($q, configuration, $window, SharedData) {
'ngInject';
this.$q = $q;
this.$window = $window;

this.userIsLoaded = false;
this.configuration = configuration;
this.SharedData = SharedData;
}

/**
Expand All @@ -25,6 +26,8 @@ class LinkedInService {
// Set a callback function on the window for LinkedIn to call after the API is initialized
this.$window.linkedInApiOnLoadCallback = () => {
this.getUser(def);
// Opens Modal when API information is loaded.
this.SharedData.modalState = 'open';
};

if (!isAbort) {
Expand Down

0 comments on commit 8a4c09e

Please sign in to comment.