<article class="efl-learner-profile">
<section aria-expanded="true" class="efl-learner-profile__section" data-behavior="efl-learner-profile-about-me">
<div class="efl-learner-profile__section--header">
<h3 class="about-me">About Me</h3>
<button aria-label="edit about me" class="efl-learner-profile__section--edit"></button>
</div>
<p class="read-only-section">Write a short introduction about yourself, relevant experience and a touch of your personality</p>
<div class="efl-profile-left-popup about-me" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup">
<button class="efl-profile-left-popup__close" aria-label="close about me popup window"></button>
<div class="efl-learner-profile__section--header">
<h3 class="about-me">About Me</h3>
</div>
<div class="efl-profile-left-popup--inner">
<p>Keen on coaching or raring to ref? It's time to introduce yourself.</p>
<textarea id="about-me" maxlength="500" placeholder="Let people know who you are and why you're here..."></textarea>
<div class="options">
<p><span class="character-count">0</span>/500 characters</p>
<div class="clear-text" role="button" aria-label="clear text about me" tabindex="0">Clear Text</div>
</div>
<button class="cta cta--efl " id="about-me-save-button" aria-label="save about me" aria-disabled="true">
<span>Save</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
</div>
<div class="efl-profile-left-popup__toast-notification" tabindex="-1" aria-label=""><canvas id="rive" width="36" height="36"></canvas>About Me Saved</div>
<div class="efl-profile-left-popup__alert-modal" role="dialog" aria-modal="true" aria-live="polite" data-unsaved-changes-header="You have unsaved changes" data-unsaved-changes-copy="Continue editing to save your changes." data-fill-all-fields-header="you must fill in all fields" data-fill-all-fields-copy="Continue editing to save your changes." data-make-bio-public-header="Time to make your bio public?" data-make-bio-public-copy="Publishing your bio allows others to view your information. This is a great way to connect with clubs, coaches and the football community." data-innapropriate-content-header="Innapropriate content" data-innapropriate-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-iwf-error-content-header="Error" data-iwf-error-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<h5 class="efl-category-title">This Image is Not Appropriate</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies, nibh sit amet varius faucibus, est ipsum commodo mi, a rutrum urna mauris ut.</p>
<button class="cta cta--efl " id="about-me-continue-editing-button" aria-label="Continue Editing">Continue Editing</button>
<button class="cta cta--secondary " id="about-me-lose-my-changes-button" aria-label="Lose My Changes">Lose My Changes</button>
<button class="cta cta--efl " id="about-me-make-bio-public-button" aria-label="Make Bio Public">Make Bio Public</button>
<button class="cta cta--secondary " id="about-me-keep-bio-private-button" aria-label="Keep Bio Private">Keep Bio Private</button>
<button class="cta cta--efl " id="efl-learner-profile-edit-about-me-button" aria-label="Edit About Me">Edit About Me</button>
<button class="cta cta--efl " id="efl-learner-profile-error-about-me-button" aria-label="Try again">Try again</button>
</div>
</div>
</section>
<section class="efl-learner-profile__section my-qualifications" data-behavior="efl-learner-profile-my-qualifications">
<div class="efl-learner-profile__section--header">
<h3 class="my-qualifications">My qualifications</h3>
<button aria-label="edit my qualification" class="efl-learner-profile__section--edit"></button>
</div>
<h4 class="efl-learner-profile__section--subheading">England Football Learning Qualifications</h4>
<p class="paragraph my-placeholder-text">Our records show that you haven't completed any qualification with England Football Learning, the FA or Bootroom </br>
Not to panic though! If you believe this is incorrect, please write to us <a href="https://help.thefa.com/support/home" target="_blank" aria-label="write to us link open in new window">here</a> </p>
<div class="efl-learner-profile__section__qualification--container">
<a href="#" class="efl-learner-profile__section__qualification myqualification" id="efl-learner-profile-qualification-0">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a href="#" class="efl-learner-profile__section__qualification myqualification" id="efl-learner-profile-qualification-1">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a href="#" class="efl-learner-profile__section__qualification myqualification" id="efl-learner-profile-qualification-2">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a href="#" class="efl-learner-profile__section__qualification myqualification" id="efl-learner-profile-qualification-3">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<button class="cta cta--secondary" id="show-more-button" aria-label="show more my qualifications">Show More</button>
<button class="cta cta--secondary" id="show-less-button" aria-label="show less my qualifications">Show Less</button>
</div>
<h4 class="efl-learner-profile__section--subheading">Other Qualifications</h4>
<p class="paragraph other-placeholder-text">Courses completed outside of England Football Learning, the FA or
Bootroom need to be added manually and cannot be verified</p>
<div class="efl-learner-profile__section__qualification--container other" id="efl-learner-profile-other-qualification-page-list">
<div class="efl-learner-profile-other-qualification-page-list--item">
<div class="efl-learner-profile__section__qualification other" data-qualification-detail='{
"name": "Grade one name of other qualification 1" ,
"description" : "Bit of descriptive text about their experience. Limited to 100 characters",
"dateCompleted" : "2023/02/25"}' data-edit-id="0">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Aug 2014</div>
<h5>Grade one name of other qualification 1</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
</div>
<div class="efl-learner-profile__section__qualification other" data-qualification-detail='{
"name": "Grade one name of other qualification 2" ,
"description" : "Bit of descriptive text about their experience. Limited to 100 characters",
"dateCompleted" : "2013/07/25"}' data-edit-id="1">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jul 2013</div>
<h5>Grade one name of other qualification 2</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
</div>
<div class="efl-learner-profile__section__qualification other" data-qualification-detail='{
"name": "Grade One name of other qualification 3" ,
"description" : "Bit of descriptive text about their experience. Limited to 100 characters",
"dateCompleted" : "2012/06/25"}' data-edit-id="2">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2012</div>
<h5>Grade One name of other qualification 3</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
</div>
</div>
<button class="cta cta--secondary" id="show-more-button" aria-label="show more other qualifications">Show More</button>
<button class="cta cta--secondary" id="show-less-button" aria-label="show less other qualifications">Show Less</button>
</div>
<div class="efl-profile-left-popup my-qualifications" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup">
<button class="efl-profile-left-popup__close" aria-label="close my qualifications popup window"></button>
<div class="efl-learner-profile__section--header">
<h3 class="my-qualifications">My Qualifications</h3>
</div>
<div id="my-qualifications-editable" class="efl-profile-left-popup--inner">
<h4 class="efl-learner-profile__section--subheading"><strong>England Football Learning qualifications</strong></h4>
<p class="paragraph">Any courses that you have completed via England Football Learning, FA or Bootrom will appear automatically</p>
<div class="efl-learner-profile__section__qualification--container">
<a class="efl-learner-profile__section__qualification myqualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a class="efl-learner-profile__section__qualification myqualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a class="efl-learner-profile__section__qualification myqualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a class="efl-learner-profile__section__qualification myqualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<button class="cta cta--secondary" id="show-more-button" aria-label="show more my qualifications">Show More</button>
<button class="cta cta--secondary" id="show-less-button" aria-label="show less my qualifications">Show Less</button>
<p class="missing-something">Missing something? <a href="">Let us know</a>.</p>
</div>
<h4 class="efl-learner-profile__section--subheading"><strong>Other qualifications</strong></h4>
<p class="paragraph other-placeholder-text">Courses completed outside of England Football Learning, the FA or
Bootroom need to be added manually and cannot be verified</p>
<div class="efl-learner-profile__section__qualification--container other" id="efl-learner-profile-other-qualification-popup-list">
<div class="efl-learner-profile-other-qualification-popup-list--item">
<div class="efl-learner-profile__section__qualification other" data-end-date="2023/02/25" data-edit-id="0">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Aug 2014</div>
<h5>Grade one name of other qualification 1</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
<button aria-label="edit Grade one name of other qualification 1 qualification" class="efl-learner-profile__section__qualification--edit"></button>
</div>
<div class="efl-learner-profile__section__qualification other" data-end-date="2013/07/25" data-edit-id="1">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jul 2013</div>
<h5>Grade one name of other qualification 2</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
<button aria-label="edit Grade one name of other qualification 2 qualification" class="efl-learner-profile__section__qualification--edit"></button>
</div>
<div class="efl-learner-profile__section__qualification other" data-end-date="2012/06/25" data-edit-id="2">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2012</div>
<h5>Grade One name of other qualification 3</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
<button aria-label="edit Grade One name of other qualification 3 qualification" class="efl-learner-profile__section__qualification--edit"></button>
</div>
</div>
<button class="cta cta--secondary" id="show-more-button" aria-label="show more other qualifications">Show More</button>
<button class="cta cta--secondary" id="show-less-button" aria-label="show less other qualifications">Show Less</button>
</div>
<button class="cta cta--secondary " id="add-qualification-button" aria-label="add a qualification">Add a Qualification</button>
</div>
<div id="my-qualifications-form" class="efl-profile-left-popup--inner hidden" data-unsaved="false" data-public="false">
<button class="efl-profile-left-popup__back" aria-label="back to my qualifications">Back</button>
<h4 class="efl-learner-profile__section--subheading" data-form-title-add="Add Qualifications" data-form-title-edit="Edit Qualifications"><strong>Add Qualifications</strong></h4>
<form>
<label for="my-qualifications-form--name">Name of the Qualification</label>
<input type="text" name="qualification name" autocomplete="off" id="my-qualifications-form--name" />
<p><span class="character-count__name">0</span>/100 characters</p>
<label for="my-qualifications-form--date">Month that the qualification was Completed</label>
<div class="my-qualifications-form--date-container">
<input autocomplete="off" type="text" name="month of qualification" id="my-qualifications-form--date" />
</div>
<label for="my-qualifications-form--desc">Description of what the course involved</label>
<textarea rows="3" cols="30" maxlength="500" name="description of course" id="my-qualifications-form--desc"></textarea>
<p><span class="character-count__textarea">0</span>/500 characters</p>
</form>
<button class="cta cta--efl " id="my-qualifications-save-form-button" aria-label="save changes qualification" aria-disabled="true">
<span>Save</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--secondary" id="delete-qualification-button" aria-label="delete qualification">Delete Qualification</button>
</div>
<div class="efl-profile-left-popup__toast-notification" data-toast-update-text="Qualification Saved" data-toast-delete-text="Qualification Deleted" tabindex="-1" aria-label="">
<canvas id="rive" width="36" height="36"></canvas>
Qualification Saved
</div>
<div class="efl-profile-left-popup__alert-modal" role="dialog" aria-modal="true" aria-live="polite" data-unsaved-changes-header="You have unsaved changes" data-unsaved-changes-copy="Continue editing to save your changes." data-fill-all-fields-header="you must fill in all fields" data-fill-all-fields-copy="Continue editing to save your changes." data-make-bio-public-header="Time to make your bio public?" data-make-bio-public-copy="Publishing your bio allows others to view your information. This is a great way to connect with clubs, coaches and the football community." data-innapropriate-content-header="Innapropriate content" data-innapropriate-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-iwf-error-content-header="Error" data-iwf-error-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-invalid-data-content-header="Error" data-invalid-data-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<h5 class="efl-category-title">This Image is Not Appropriate</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies, nibh sit amet varius faucibus, est ipsum commodo mi, a rutrum urna mauris ut.</p>
<button class="cta cta--efl " id="my-qualifications-continue-editing-button" aria-label="Continue Editing">Continue Editing</button>
<button class="cta cta--secondary " id="my-qualifications-lose-my-changes-button" aria-label="Lose My Changes">Lose My Changes</button>
<button class="cta cta--efl " id="my-qualifications-make-bio-public-button" aria-label="Make Bio Public">Make Bio Public</button>
<button class="cta cta--secondary " id="my-qualifications-keep-bio-private-button" aria-label="Keep Bio Private">Keep Bio Private</button>
<button class="cta cta--efl " id="efl-learner-profile-edit-qualification-button" aria-label="Edit Qualification">Edit Qualification</button>
<button class="cta cta--efl " id="efl-learner-profile-error-qualification-button" aria-label="Try again">Try again</button>
</div>
</div>
</section>
<section class="efl-learner-profile__section previous-experience" data-behavior="efl-learner-profile-previous-experience">
<div class="efl-learner-profile__section--header">
<h3 class="previous-experience">My previous experience</h3>
<button aria-label="edit my previous experience" class="efl-learner-profile__section--edit"></button>
</div>
<p class="paragraph placeholder-text">Share past experience within football or any sport</p>
<div class="efl-learner-profile__section__experience--container">
<div class="efl-learner-profile__section__experience--pagelist">
<div class="efl-learner-profile__section__experience" data-experience-detail='{
"name": "Name of team / experience 1" ,
"role" : "Name of role taken",
"description" : "Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.",
"dateStarted" : "2012/07/25",
"dateCompleted" : "2012/08/25"}' data-edit-id="0">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">Jul 2012 - Aug 2012</div>
<h5>Name of team / experience 1</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
</div>
<div class="efl-learner-profile__section__experience" data-experience-detail='{
"name": "Name of team / experience 2" ,
"role" : "Name of role taken",
"description" : "Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.",
"dateStarted" : "2011/03/25",
"dateCompleted" : "2011/04/25"}' data-edit-id="1">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">Mar 2011 - Apr 2011</div>
<h5>Name of team / experience 2</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
</div>
<div class="efl-learner-profile__section__experience" data-experience-detail='{
"name": "Name of team / experience 3" ,
"role" : "Name of role taken",
"description" : "Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.",
"dateStarted" : "2010/05/25",
"dateCompleted" : "2010/06/25"}' data-edit-id="2">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">May 2010 - Jun 2010</div>
<h5>Name of team / experience 3</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
</div>
</div>
<button class="cta cta--secondary" id="show-all-button" aria-label="show all 3 experiences">Show All 3 Experiences</button>
<button class="cta cta--secondary" id="show-less-cta" aria-label="show less previous experiences">Show Less</button>
</div>
<div class="efl-profile-left-popup previous-experience" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup">
<button class="efl-profile-left-popup__close" aria-label="close previous experience popup window"></button>
<div class="efl-learner-profile__section--header">
<h3 class="previous-experience">My previous experience</h3>
</div>
<div id="previous-experience-main" class="efl-profile-left-popup--inner">
<p class="paragraph">Coach? Medic? Referee? If you're already involved in football, share your previous experience below.</p>
<div class="efl-learner-profile__section__experience--container">
<div class="efl-learner-profile__section__experience--list">
<div class="efl-learner-profile__section__experience" data-start-date="2012/07/25" data-end-date="2012/08/25" data-edit-id="0">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">Jul 2012 - Aug 2012</div>
<h5>Name of team / experience 1</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
<button aria-label="edit Name of team / experience 1 experience" class="efl-learner-profile__section__qualification--edit"></button>
</div>
<div class="efl-learner-profile__section__experience" data-start-date="2011/03/25" data-end-date="2011/04/25" data-edit-id="1">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">Mar 2011 - Apr 2011</div>
<h5>Name of team / experience 2</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
<button aria-label="edit Name of team / experience 2 experience" class="efl-learner-profile__section__qualification--edit"></button>
</div>
<div class="efl-learner-profile__section__experience" data-start-date="2010/05/25" data-end-date="2010/06/25" data-edit-id="2">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">May 2010 - Jun 2010</div>
<h5>Name of team / experience 3</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
<button aria-label="edit Name of team / experience 3 experience" class="efl-learner-profile__section__qualification--edit"></button>
</div>
</div>
<button class="cta cta--secondary" id="show-all-button" aria-label="show all 3 experiences">Show All 3 Experiences</button>
<button class="cta cta--secondary" id="show-less-cta" aria-label="show less previous experiences">Show Less</button>
</div>
<button class="cta cta--secondary" id="previous-experience-add-button" aria-label="add experience">Add Experience</button>
</div>
<div id="previous-experience-form" class="efl-profile-left-popup--inner hidden">
<button class="efl-profile-left-popup__back" aria-label="back to previous experiences">Back</button>
<h4 class="efl-learner-profile__section--subheading" data-form-title-add="Add Experience" data-form-title-edit="Edit Experience"><strong>Add Experience</strong></h4>
<form>
<label for="previous-experience-form--title">Title of experience</label>
<input type="text" name="experience title" autocomplete="off" id="previous-experience-form--title" maxlength="100" />
<p><span class="character-count__name">0</span>/100 characters</p>
<label for="previous-experience-form--role">Your role</label>
<input type="text" name="experience role" autocomplete="off" id="previous-experience-form--role" maxlength="100" />
<p><span class="character-count__role">0</span>/100 characters</p>
<label>Date of Experience</label>
<div class="previous-experience-form--date-range">
<input autocomplete="off" type="text" placeholder="Date from" name="start date of experience" id="previous-experience-form--date-start" />
<input autocomplete="off" type="text" placeholder="Date to" name="end date of experience" id="previous-experience-form--date-end" />
</div>
<label for="previous-experience-form--desc">Description of experience</label>
<textarea rows="3" cols="30" maxlength="500" name="description of experience" id="previous-experience-form--desc" maxlength="500"></textarea>
<p><span class="character-count__textarea">0</span>/500 characters</p>
</form>
<button class="cta cta--efl " id="previous-experience-save-experience-button" aria-label="save experience" aria-disabled="true">
<span>Save Experience</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--secondary" id="delete-experience-button" aria-label="delete experience">Delete Experience</button>
</div>
<div class="efl-profile-left-popup__toast-notification" tabindex="-1" aria-label="" data-toast-update-text="Previous Experience Saved!" data-toast-delete-text="Previous Experience Deleted!">
Previous Experience Saved!
</div>
<div class="efl-profile-left-popup__alert-modal" role="dialog" aria-modal="true" aria-live="polite" data-unsaved-changes-header="You have unsaved changes" data-unsaved-changes-copy="Continue editing to save your changes." data-fill-all-fields-header="you must fill in all fields" data-fill-all-fields-copy="Continue editing to save your changes." data-make-bio-public-header="Time to make your bio public?" data-make-bio-public-copy="Publishing your bio allows others to view your information. This is a great way to connect with clubs, coaches and the football community." data-innapropriate-content-header="Innapropriate content" data-innapropriate-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-iwf-error-content-header="Error" data-iwf-error-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-invalid-data-content-header="Error" data-invalid-data-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<h5 class="efl-category-title">This Image is Not Appropriate</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies, nibh sit amet varius faucibus, est
ipsum commodo mi, a rutrum urna mauris ut.</p>
<button class="cta cta--efl " id="previous-experience-continue-editing-button" aria-label="Continue Editing">Continue Editing</button>
<button class="cta cta--secondary " id="previous-experience-lose-changes-button" aria-label="Lose My Changes">Lose My Changes</button>
<button class="cta cta--efl " id="previous-experience-make-bio-public-button" aria-label="Make Bio Public">Make Bio Public</button>
<button class="cta cta--secondary " id="previous-experience-keep-bio-private-button" aria-label="Keep Bio Private">Keep Bio Private</button>
<button class="cta cta--efl " id="efl-learner-profile-edit-previous-experience-button" aria-label="Edit Experience">Edit Experience</button>
<button class="cta cta--efl " id="efl-learner-profile-error-previous-experience-button" aria-label="Try again">Try again</button>
</div>
</div>
</section>
</article>
No notes defined.
{
"qualifications": [
{
"title": "Introduction to Coaching Disabled Football",
"date": "Jun 2020",
"image": "../../assets/example-content/efl-qualification.svg"
},
{
"title": "Introduction to Coaching Disabled Football",
"date": "Jun 2020",
"image": "../../assets/example-content/efl-qualification.svg"
},
{
"title": "Introduction to Coaching Disabled Football",
"date": "Jun 2020",
"image": "../../assets/example-content/efl-qualification.svg"
}
]
}
import { Rive, Fit, Layout } from '@rive-app/canvas';
// eslint-disable-next-line import/prefer-default-export
export const updatePlayerProfile =
// eslint-disable-next-line complexity
async () => {
const { fanid } = document.querySelector(
'.efl-profile-hero-banner__content--profile__picture--dp'
).dataset;
const fullName = document.querySelector(
'.efl-profile-hero-banner__content--profile__name h1 '
).innerText;
const aboutmeBlock = document.querySelector(
'[data-behavior="efl-learner-profile-about-me"]'
);
let isAboutMeExist = false;
let aboutMe = '';
if (aboutmeBlock) {
aboutMe = aboutmeBlock.querySelector('#about-me').value;
if (aboutMe) {
isAboutMeExist = true;
}
}
const privacy = document.querySelector('#learner-profile-privacy-check');
const availability = document.querySelector(
'#learner-profile-availability-check'
);
const learnerRole = document.querySelector(
'.efl-learner-profile-settings__select--select'
);
const locationPrivacy = document.querySelector('#learner-profile-location');
const learnerLocation = document.querySelector('.learner-profile-place');
let isPuplic = false;
let isAvailability = false;
let isLocationPublic = false;
let learnerLocationVal = '';
let learnerRoleVal = '';
let isPreviousExperienceExist = false;
// bio setting - privacy update
if (privacy) {
isPuplic = privacy.checked;
}
// bio settings - availability update
if (availability) {
isAvailability = availability.checked;
}
if (learnerRole) {
learnerRoleVal = learnerRole.value;
}
if (locationPrivacy) {
isLocationPublic = locationPrivacy.checked;
}
// bio settings - location update
if (learnerLocation) {
learnerLocationVal = learnerLocation.value;
}
// previous Experience update
const previousExpPage = document.querySelector(
'[data-behavior="efl-learner-profile-previous-experience"]'
);
const experienceJson = [];
if (previousExpPage) {
const experienceListPageDiv = previousExpPage.querySelector(
'.efl-learner-profile__section__experience--pagelist'
);
const experienceList = experienceListPageDiv.querySelectorAll(
'.efl-learner-profile__section__experience'
);
const experienceFormSection = document.querySelector(
'#previous-experience-form'
);
const editExperience = experienceFormSection.getAttribute('data-editing');
const experienceTitleInput = experienceFormSection.querySelector(
'#previous-experience-form--title'
);
const experienceRoleInput = experienceFormSection.querySelector(
'#previous-experience-form--role'
);
const experienceDateStartInput = experienceFormSection.querySelector(
'#previous-experience-form--date-start'
);
const experienceDateEndInput = experienceFormSection.querySelector(
'#previous-experience-form--date-end'
);
const experienceTextareaInput = experienceFormSection.querySelector(
'#previous-experience-form--desc'
);
const experienceLength = experienceList.length;
let editExperienceId;
experienceList.forEach((experience, index) => {
const { experienceDetail } = experience.dataset;
experienceJson[index] = JSON.parse(experienceDetail);
});
if (editExperience !== null) {
editExperienceId = editExperience;
} else {
editExperienceId = experienceLength;
}
if (
experienceTitleInput.value &&
experienceRoleInput.value &&
experienceTextareaInput.value &&
experienceDateStartInput.value &&
experienceDateEndInput.value
) {
const updateExperienceJson = `{
"name": "${experienceTitleInput.value}" ,
"role" : "${experienceRoleInput.value}",
"description" : "${experienceTextareaInput.value}",
"dateStarted" : "${experienceDateStartInput.value}",
"dateCompleted" : "${experienceDateEndInput.value}"}`;
experienceJson[editExperienceId] = JSON.parse(updateExperienceJson);
}
if (experienceJson.length) {
isPreviousExperienceExist = true;
}
}
// Other Qualification update
const otherQualificationPage = document.querySelector(
'#efl-learner-profile-other-qualification-page-list'
);
const qualificationJson = [];
if (otherQualificationPage) {
const qualificationList = otherQualificationPage.querySelectorAll(
'.efl-learner-profile__section__qualification.other'
);
const qualificationFormSection = document.querySelector(
'#my-qualifications-form'
);
const editQualification = qualificationFormSection.getAttribute(
'data-editing'
);
const qualificationNameInput = qualificationFormSection.querySelector(
'#my-qualifications-form--name'
);
const qualificationDateInput = qualificationFormSection.querySelector(
'#my-qualifications-form--date'
);
const qualificationTextareaInput = qualificationFormSection.querySelector(
'#my-qualifications-form--desc'
);
const qualificationLength = qualificationList.length;
let editQualificationId;
qualificationList.forEach((qualification, index) => {
const { qualificationDetail } = qualification.dataset;
qualificationJson[index] = JSON.parse(qualificationDetail);
});
if (editQualification !== null) {
editQualificationId = editQualification;
} else {
editQualificationId = qualificationLength;
}
if (
qualificationNameInput.value &&
qualificationTextareaInput.value &&
qualificationDateInput.value
) {
const updateQualificationJson = `{
"name": "${qualificationNameInput.value}" ,
"description" : "${qualificationTextareaInput.value}",
"dateCompleted" : "${qualificationDateInput.value}"}`;
qualificationJson[editQualificationId] = JSON.parse(
updateQualificationJson
);
}
}
const playerData = `{
"Id": "${fanid}",
"fullName": "${fullName}",
"ispublic": ${isPuplic},
"islocationpublic": ${isLocationPublic},
"availability": ${isAvailability},
"selectedRole": "${learnerRoleVal}",
"headline": "UAFA A Qualified Coach",
"location": "${learnerLocationVal}",
"aboutMe": "${aboutMe}",
"isAboutMeExist": ${isAboutMeExist},
"isPreviousExperienceExist": ${isPreviousExperienceExist},
"qualifications": ${JSON.stringify(qualificationJson)},
"experience": ${JSON.stringify(experienceJson)}
}`;
const url = `/Personalise/UpdatePlayerProfile`;
// eslint-disable-next-line compat/compat
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache',
Pragma: 'no-cache',
Expires: '0',
},
body: playerData,
});
return response.json();
};
export const updateProfileCompletion = elementCount => {
const notificationEle = document.querySelector(
'.efl-global-notifications__completion'
);
const riveCanvas = document.querySelector('canvas.rive-priority-3');
if (notificationEle && riveCanvas) {
const profileImgNotification = notificationEle.querySelector(
`.efl-global-notifications__completion--info > .status:nth-child(${elementCount})`
);
if (
profileImgNotification &&
!profileImgNotification.classList.contains('completed')
) {
const percentage = notificationEle.getAttribute(
'data-profile-completion'
);
const lyout = new Layout({
fit: Fit.Cover,
});
const riveAnimation = new Rive({
src: '/assets/example-content/global_notification-profile.riv',
canvas: riveCanvas,
layout: lyout,
onLoad: () => {
riveAnimation.resizeDrawingSurfaceToCanvas();
},
});
const updatedIcon = profileImgNotification.querySelector('img');
const { completedImg } = updatedIcon.dataset;
// eslint-disable-next-line compat/compat
updatedIcon.src = completedImg;
profileImgNotification.classList.add('completed');
if (percentage === '0%') {
notificationEle.setAttribute('data-profile-completion', '50%');
riveAnimation.play('50%');
} else if (percentage === '50%') {
notificationEle.setAttribute('data-profile-completion', '90%');
riveAnimation.play('90%');
} else if (percentage === '90%') {
notificationEle.closest('.efl-global-notifications').remove();
}
if (profileImgNotification.querySelector('a')) {
profileImgNotification.querySelector('a').remove();
}
}
}
};
import { Dialog } from '../lightbox-overlay/lightbox-overlay';
export default parentElement => {
let currentIndex = 0;
const subPages = parentElement.querySelectorAll('.efl-page-content-subpage');
const socialLinksArray = parentElement.querySelectorAll(
'.efl-learner-profile__social-links__list'
);
const MOBILE_BREAKPOINT = 820;
let DEFAULT_WIDTH;
const profileBanner = document.querySelector(
'[data-behavior="efl-profile-hero-banner"]'
);
const DIALOG_ID = 'learner-youth-check-dialog';
if (profileBanner) {
const { learnerProfileYouth } = profileBanner.dataset;
// query param
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
if (
learnerProfileYouth === 'true' &&
params.popup &&
params.popup === 'true'
) {
const removeLightBox = () => {
if (document.getElementById(DIALOG_ID)) {
document.getElementById(DIALOG_ID).remove();
}
};
const generateLightBox = () => {
const popupDiv = document.querySelector(
'.efl-learner-profile-age-check'
);
let html = popupDiv.outerHTML;
html = html.replace(
'efl-learner-profile-age-check hidden',
'efl-learner-profile-age-check'
);
return `
<div role="dialog" id="${DIALOG_ID}" aria-labelledby="" aria-modal="true" class="lightbox-overlay">
<div class="efl-learner-profile">
${html}
</div>
</div>`;
};
const openLightbox = () => {
// Create the lightbox
const lightboxContainer = document.createElement('div');
if (document.getElementById(DIALOG_ID)) {
return;
}
lightboxContainer.innerHTML = generateLightBox();
document.body.appendChild(lightboxContainer);
// eslint-disable-next-line no-new
new Dialog({
dialogId: DIALOG_ID,
focusAfterClosed: parentElement,
closeCallBack: () => removeLightBox(),
});
const ageCheck = lightboxContainer.querySelector('.profile-age-check');
if (ageCheck) {
ageCheck.addEventListener('click', e => {
e.preventDefault();
removeLightBox();
});
}
};
openLightbox();
}
}
// Edit Button Popups
const eflProfileLayout = document.querySelector('.efl-profile-layout');
const editButtonArray = parentElement.querySelectorAll(
'.efl-learner-profile__section--edit'
);
// console.log(editButtonArray[2]);
editButtonArray.forEach(editButton => {
const section = editButton.closest('.efl-learner-profile__section');
const popup = section.querySelector(
'[data-behavior="efl-profile-left-popup"]'
);
const closebtn = popup.querySelector('.efl-profile-left-popup__close');
// console.log(section);
if (popup) {
editButton.addEventListener('click', e => {
e.preventDefault();
// Need to remove z-index for popup to work
eflProfileLayout.style.zIndex = 'unset';
popup.classList.add('add-animation');
document.body.classList.add('efl-profile-dark-overlay');
setTimeout(() => {
closebtn.focus();
}, 50);
});
}
});
// Tabs
const profileTabs = document.querySelectorAll(
'.efl-learner-profile-tab li a'
);
const togglePage = (element, state) => {
if (state === 'show') {
element.setAttribute('aria-hidden', 'false');
element.setAttribute('tabindex', '0');
element.classList.remove('hidden');
} else if (state === 'hide') {
element.setAttribute('aria-hidden', 'true');
element.setAttribute('tabindex', '-1');
element.classList.add('hidden');
}
};
const selectPage = tab => {
subPages.forEach(subpage => {
if (tab.id === subpage.dataset.page) {
togglePage(subpage, 'show');
} else {
togglePage(subpage, 'hide');
}
});
};
profileTabs.forEach((tab, index) => {
const selectTab = () => {
// Cancel action is tab is already clicked
if (index === currentIndex) {
return;
}
// Set tab to current index
tab.setAttribute('aria-selected', 'true');
currentIndex = index;
// switch page using tab
selectPage(tab);
// Unselect all other tabs
profileTabs.forEach((otherTab, otherTabIndex) => {
if (otherTabIndex !== currentIndex) {
otherTab.setAttribute('aria-selected', 'false');
}
});
};
tab.addEventListener('click', selectTab);
tab.addEventListener('keydown', e => {
if (e.keyCode === 32) {
e.preventDefault();
selectTab(tab);
if (tab.nextElementSibling) {
tab.nextElementSibling.focus();
}
}
});
});
const setDefaultPage = () => {
subPages.forEach((subpage, index) => {
if (index === currentIndex) {
togglePage(subpage, 'show');
} else {
togglePage(subpage, 'hide');
}
});
};
setDefaultPage();
// Social Links
const setSocialLinksWidth = () => {
if (
window.innerWidth !== DEFAULT_WIDTH &&
MOBILE_BREAKPOINT > document.body.clientWidth
) {
socialLinksArray.forEach(socialLinks => {
// eslint-disable-next-line no-param-reassign
socialLinks.style.width = `${document.body.clientWidth}px`;
});
DEFAULT_WIDTH = document.body.clientWidth;
} else if (MOBILE_BREAKPOINT <= document.body.clientWidth) {
socialLinksArray.forEach(socialLinks => {
// eslint-disable-next-line no-param-reassign
socialLinks.style.width = null;
});
}
};
setSocialLinksWidth();
window.addEventListener('resize', setSocialLinksWidth);
};
/* stylelint-disable no-descending-specificity */
.efl-learner-profile {
@include rte();
display: flex;
flex-direction: column;
gap: 3.2rem;
width: 100%;
padding: 3.2rem 1.6rem;
&.bookmark-back {
padding-top: 0;
}
.cta {
text-decoration: none;
max-width: unset;
&.cancel-bookmark-delete,
&.cancel-remove-bookmark {
margin-top: 0.8rem;
}
&[id='show-more-button'],
&[id='show-less-button'],
&[id='show-all-button'],
&[id='show-less-cta'],
&.show-more-courses,
&.show-less-courses,
&.cancel-create-bookmark,
&.view-bookmark-list,
&.cancel-bookmark-delete,
&.cancel-remove-bookmark {
min-width: 100%;
color: $blue;
text-decoration: none;
border-color: $light-blue;
background-color: $white;
border-width: 2px;
&:hover {
border: none;
color: $blue;
background-color: $light-blue;
}
}
&.my-learning-find-course,
&.create-new-bookmark-list,
&.create-new-bookmark,
&.edit-bookmark-name,
&.edit-bookmark-list,
&.delete-bookmark-list,
&.remove-bookmark-item,
&.error-bookmark-name,
&.server-error-bookmark,
&.profile-age-check {
background-color: $red;
border-color: transparent;
color: $white;
text-decoration: none;
margin-top: 1.2rem;
max-width: 100%;
min-width: 100%;
&:hover {
border-color: $red;
color: $red;
background-color: $white;
}
svg {
display: none;
}
&.loading-bar {
span {
display: none;
}
svg {
display: flex;
}
&[aria-disabled='true'] {
background-color: $red !important;
color: $white !important;
}
}
}
}
.cta--secondary {
color: $blue;
border-color: $light-blue;
&:hover {
background-color: $light-blue;
}
}
&__section {
background-color: $white;
border-radius: 0.8rem;
padding: 2.4rem;
width: 100%;
p {
font-size: 1.8rem;
line-height: 2.4rem;
letter-spacing: 0.02em;
overflow-wrap: break-word;
}
.my-placeholder-text:nth-of-type(2) {
margin-top: 2.4rem;
a {
color: $blue;
font-weight: 500;
text-decoration: underline;
}
}
&--header {
display: flex;
justify-content: space-between;
> h3 {
display: flex;
align-items: center;
margin-bottom: 1.6rem;
}
.about-me::before {
content: '';
background-image: url('./assets/images/profile-icons/about-me.svg');
width: 2.5rem;
height: 2.4rem;
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
margin-right: 0.8rem;
}
.my-qualifications::before,
.completed-courses::before,
.expired-courses::before {
content: '';
background-image: url('./assets/images/profile-icons/my-qualifications.svg');
width: 2.5rem;
height: 2.4rem;
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
margin-right: 0.8rem;
}
.previous-experience::before {
content: '';
background-image: url('./assets/images/profile-icons/previous-experience.svg');
width: 2.1rem;
height: 2.4rem;
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
margin-right: 0.8rem;
}
.active-courses::before {
content: '';
background-image: url('./assets/images/profile-icons/active-course.svg');
width: 1.5rem;
height: 1.8rem;
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
margin-right: 0.8rem;
}
.expired-courses::before {
content: '';
background: url('./assets/images/profile-icons/alert.svg') no-repeat
center;
width: 1.8rem;
height: 1.8rem;
background-repeat: no-repeat;
display: inline-block;
margin-right: 0.8rem;
}
.no-active-courses {
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 700;
margin-bottom: 0.8rem;
&::before {
content: '';
background: url('./assets/images/profile-icons/alert.svg') no-repeat
center;
width: 1.8rem;
height: 1.8rem;
background-repeat: no-repeat;
display: inline-block;
margin-right: 0.8rem;
}
}
.create-bookmark-list::before {
content: '';
background-image: url('./assets/images/profile-icons/plus-icon-red.svg');
width: 1.8rem;
height: 1.8rem;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
margin-right: 0.8rem;
}
.bookmark-list::before {
content: '';
background-image: url('./assets/images/profile-icons/bookmark-list.svg');
width: 1.2rem;
height: 1.7rem;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
margin-right: 0.8rem;
}
.bundles-list::before {
content: '';
background-image: url('./assets/images/profile-icons/bundle.svg');
width: 1.6rem;
height: 1.8rem;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
margin-right: 0.8rem;
}
}
&--nocourse-copy {
@extend .efl-p-medium;
&::before {
content: '';
border-top: 1px solid $grey-light;
width: 100%;
display: flex;
margin-bottom: 0.8rem;
}
}
&--edit,
&__qualification--edit {
border-radius: 100%;
width: 3.4rem;
height: 3.4rem;
transform: translate(25%, -25%);
cursor: pointer;
border: none;
background: none;
padding: 0;
&::before {
content: '';
background-image: url('./assets/images/edit-button.svg');
width: 3.4rem;
height: 3.4rem;
background-size: cover;
background-repeat: no-repeat;
display: block;
}
&:hover::before {
background-image: url('./assets/images/edit-button-blue.svg');
}
}
&__experience {
display: flex;
align-items: flex-start;
padding: 1.6rem 0;
gap: 1.7rem;
border-radius: 0.4rem;
border-top: 0.1rem solid $grey-light;
.efl-learner-profile__section__qualification--edit {
margin-top: 1.6rem;
}
.efl-category-title {
font-size: 1.2rem;
line-height: 1.2rem;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
&:first-child {
border-top: none;
margin-top: 0;
padding-top: 0;
.efl-category-title {
padding-top: 0;
}
}
&__content {
width: 100%;
}
.cta[id='show-all-button'] {
border: 0.2rem solid $light-blue;
max-width: unset;
}
h5 {
margin-bottom: 0.8rem;
overflow-wrap: break-word;
}
.role {
strong {
font-size: 1.8rem;
line-height: 2.4rem;
color: $color-interface-light;
&::after {
display: none !important;
}
}
margin-bottom: 0.8rem;
}
}
&.expired-courses {
.efl-category-title {
color: $red;
}
}
&__qualification {
display: flex;
align-items: center;
padding: 1.2rem 2.4rem;
gap: 1.7rem;
background-color: $grey-light;
border-radius: 0.4rem;
margin-bottom: 0.8rem;
&__content {
width: 100%;
}
.efl-category-title {
font-size: 1.2rem;
line-height: 1.2rem;
font-weight: 400;
text-transform: uppercase;
}
h4,
h5 {
font-weight: 700;
line-height: 2.2rem;
margin-bottom: 0.8rem;
overflow-wrap: break-word;
}
&--container {
margin-bottom: 3.2rem;
&.other {
margin-bottom: 0;
}
}
&.other {
flex-direction: row;
background-color: transparent;
padding: 0;
border-top: 0.1rem solid $grey-light;
margin-bottom: 1.6rem;
gap: 0;
.efl-category-title {
padding-top: 1.6rem;
padding-bottom: 0.4rem;
}
&:first-child {
border-top: none;
margin-top: 0;
.efl-category-title {
padding-top: 0;
}
}
h4 {
font-size: 2rem;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 0.8rem;
}
p {
font-size: 1.8rem;
overflow-wrap: break-word;
}
}
&--badge {
position: relative;
&::after {
content: '';
background-image: url('./assets/images/profile-icons/verified.svg');
position: absolute;
right: 0;
bottom: 0;
width: 2rem;
height: 1.8rem;
background-size: cover;
background-repeat: no-repeat;
display: block;
}
img {
width: 5.8rem;
height: 5.8rem;
max-width: unset;
}
}
}
// Components
&.my-qualifications,
&.previous-experience {
a {
text-decoration: none;
color: $color-interface-light;
}
.efl-learner-profile__section--subheading {
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 700;
margin-bottom: 1.6rem;
width: fit-content;
&::after {
content: '';
display: block;
border-bottom: 0.1rem solid $light-blue;
}
}
}
}
&__social-links {
@include rte();
min-height: 35.1rem;
max-width: 100%;
background-size: cover;
background-color: $blue-accent3;
background-image: url('./assets/images/share-backround-image-mobile.png');
color: white;
padding: 4.8rem 2.4rem;
overflow: hidden;
h3 {
display: flex;
align-items: center;
color: $white;
&::before {
content: '';
display: block;
width: 1.8rem;
height: 1.9rem;
margin-right: 0.8rem;
background-repeat: no-repeat;
background-image: url('./assets/images/profile-icons/social.svg');
}
}
p {
font-size: 1.8rem;
line-height: 2.4rem;
letter-spacing: 0.36px;
}
&__list {
display: flex;
overflow-x: auto;
gap: 2rem;
margin-top: 1.6rem;
padding-top: 0.3rem;
padding-right: 4.4rem;
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
div {
display: flex;
flex-direction: column;
gap: 0.8rem;
a,
.copy {
display: flex;
justify-content: center;
align-items: center;
width: 6.4rem;
height: 6.4rem;
white-space: nowrap;
border-radius: 100%;
background-color: $white;
position: relative;
cursor: pointer;
&.copy {
img {
width: 3.1rem;
height: 3.1rem;
}
.canvas {
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: 1.7rem;
display: flex;
padding-right: 0;
&.transparent {
opacity: 0;
}
}
}
}
p {
text-align: center;
font-size: 1.8rem;
line-height: 2.4rem;
letter-spacing: -0.01em;
overflow-wrap: break-word;
}
}
}
}
@media screen and (min-width: $mq-medium) {
padding: 3.2rem 0;
&.bookmark-back {
padding-top: 3.2rem;
}
&__section {
padding: 4rem;
&.active-courses,
&.completed-courses,
&.expired-courses,
&.no-active-courses {
padding: 4rem;
}
&--edit {
transform: translate(0, -50%);
}
&__qualification {
h4,
h5 {
font-weight: 500;
line-height: 3rem;
}
}
&.my-qualifications,
&.previous-experience {
.efl-learner-profile__section--subheading {
font-size: 1.8rem;
}
}
}
&__social-links {
padding: 5.2rem;
max-width: 70.9rem;
&__list {
width: 100%;
gap: 4rem;
margin-left: 0;
overflow-x: unset;
div {
img {
width: 3.6rem;
height: 3.6rem;
}
a,
.copy {
width: 8.4rem;
height: 8.4rem;
cursor: pointer;
.canvas {
width: 4.6rem !important;
height: 4.6rem !important;
top: 2rem !important;
}
&:hover {
background-color: $light-blue !important;
}
}
}
div:first-child,
div:last-child {
padding-left: 0;
padding-right: 0;
}
}
margin: 0 auto;
border-radius: 0.8rem;
background-repeat: no-repeat;
background-image: url('./assets/images/share-backround-image-desktop.png');
}
}
@media screen and (max-width: $mq-small) {
&__section {
&--header {
.previous-experience::before {
width: 1.6rem;
height: 1.8rem;
}
}
}
}
}
<article class="efl-learner-profile">
{{render '@efl-learner-profile-about-me'}}
{{render '@efl-learner-profile-my-qualifications'}}
{{render '@efl-learner-profile-previous-experience'}}
</article>