<section class="efl-profile-hero-banner" data-behavior="efl-profile-hero-banner" data-learner-profile-youth="false">
<div class="efl-profile-hero-banner__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/learner-profile-hero-bg-mob.png">
<source media="(min-width: 820px)" srcset="/assets/example-content/learner-profile-hero-bg-desk.png">
<img src="/assets/example-content/learner-profile-hero-bg-desk.png" alt="">
</picture>
<div class="efl-profile-hero-banner__overlay">
<div class="efl-profile-hero-banner__content">
<div class="efl-profile-hero-banner__content--profile">
<div class="efl-profile-hero-banner__content--profile__picture">
<div class="efl-profile-hero-banner__content--profile__picture--dp" data-fanid="62023850" data-individual-profile-photoid="1939807" data-public-profile-fanid="1222" data-experience-editor="false">
<button class="change-profile-pic" aria-label="change profile picture"></button>
<img src="" class="hidden">
</div>
<button class="edit-pic hidden" aria-label="edit profile picture"></button>
</div>
<div class="efl-profile-hero-banner__content--profile__name">
<h1>Chloe Kelly</h1>
</div>
<div class="efl-profile__select" role="combobox">
<div class="efl-profile__select--label" rel="button" role="combobox" tabindex="0" aria-expanded="false">
<span class="filter">Football Coach</span>
</div>
<div aria-expanded="false" role="list" class="efl-profile__select--list">
<ul>
<li tabindex="0" data-value="Football Coach">Football Coach</li>
<li tabindex="0" data-value="Futsal Coach">Futsal Coach</li>
<li tabindex="0" data-value="Goalkeeping Coach">Goalkeeping Coach</li>
<li tabindex="0" data-value="Safeguarding Officer">Safeguarding Officer</li>
<li tabindex="0" data-value="Volunteer">Volunteer</li>
</ul>
</div>
<select class="efl-profile__select--select">
<option value="Football Coach">Football Coach</option>
<option value="Futsal Coach">Futsal Coach</option>
<option value="Goalkeeping Coach">Goalkeeping Coach</option>
<option value="Safeguarding Officer">Safeguarding Officer</option>
<option value="Volunteer">Volunteer</option>
</select>
</div>
<div class="efl-profile-hero-banner__content--profile__visible">
<span>Your bio is public.</span>
<a class="learn-more" aria-label="learn more" tabindex="0" aria-describedby="efl-profile-setting-left-popup">Learn more</a>
</div>
</div>
<div class="efl-profile-hero-banner__content--settings">
<button class="profile-setting" aria-label="profile setting" aria-describedby="efl-profile-setting-left-popup"></button>
</div>
</div>
</div>
</div>
<div class="efl-profile-left-popup" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup">
<button class="efl-profile-left-popup__close" aria-label="close add a profile picture popup window"></button>
<div class="efl-learner-profile-add-photo" data-behavior="efl-learner-profile-add-photo">
<h3>Add a profile picture</h3>
<div class="">
<div id="cropme">
<p class="instructions">
Position your face in the clear circle below
</p>
<img alt="myimage" id="myImage" />
<button class="crop-button" aria-label="crop photo" id="crop-image"></button>
</div>
<div data-camera="false" id="preview">
<p class="instructions retake">
Happy? Hit 'use this photo'. To try again, select 'retake photo'.
</p>
<p class="instructions another-photo">
Happy? Hit 'use this photo'. To try again, select 'Upload Another Photo'.
</p>
<img alt="preview image" id="preview-image" />
<button class="cta cta--efl " id="use-photo" aria-label="use this photo!">
<span>Use This Photo!</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="retake-photo" aria-label="retake photo">Retake Photo</button>
<div class="efl-profile-upload-another-photo">
<label for="efl-profile-upload-another-photo">Upload Another Photo</label>
<input type="file" id="efl-profile-upload-another-photo" role="button" aria-label="upload another photo">
</div>
<div class="upload-error hidden">
<div class="upload-error--alert" role="dialog" aria-modal="true" aria-atomic="true">
<h5>Error</h5>
<p></p>
<button class="cta cta--efl " id="upload-error-alert" aria-label="ok Upload error">Ok</button>
</div>
</div>
</div>
<div id="camera">
<div class="camera">
<video id="video">Video stream not available.</video>
</div>
<button class="cta cta--efl efl-profile-capture-photo" id="efl-profile-capture-photo" aria-label="capture photo">Capture photo</button>
<canvas id="cropme-canvas"></canvas>
</div>
<div id="default" class="active">
<p class="instructions">
Select from the options below.
</p>
<button class="cta cta--efl efl-profile-take-photo" id="efl-profile-take-photo" aria-label="take photo">Take photo</button>
<div class="efl-profile-add-photo">
<label for="efl-profile-upload-photo">Upload Photo</label>
<input type="file" id="efl-profile-upload-photo" tabindex="0" role="button" aria-label="upload photo">
</div>
</div>
</div>
<div class="efl-profile-left-popup__alert-modal" role="dialog" aria-modal="true">
<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="please-take-a-new-photo" aria-label="please take a new photo">Please Take a New Photo</button>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropme@latest/dist/cropme.min.css">
</div>
<div class="efl-profile-left-popup" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup" id="efl-profile-setting-left-popup">
<div class="efl-learner-profile__section--header">
<h3>Bio settings</h3>
</div>
<button class="efl-profile-left-popup__close" aria-label="close profile settings popup window"></button>
<div class="efl-profile-left-popup--inner">
<div class="efl-learner-profile-settings" data-behavior="efl-learner-profile-settings">
<section>
<h4 class="lock">Privacy</h4>
<div class="efl-learner-profile-settings--inner">
<p data-privacy-on-text="Your profile is set to public and can be viewed by others." data-privacy-off-text="Your profile is set to private and can't be viewed by others.">Your profile is set to private and can't be viewed by others.</p>
<label class="switch" for="learner-profile-privacy-check">
<input tabindex="0" type="checkbox" id="learner-profile-privacy-check" aria-label="privacy">
<span class="slider round"></span>
</label>
</div>
</section>
<section>
<h4 class="hand">Availability</h4>
<div class="efl-learner-profile-settings--inner">
<p data-availability-on-text="Your profile is marked as available. This means clubs can contact you about potential roles." data-availability-off-text="Your profile is marked as unavailable. This means clubs can't contact you about potential roles.">Your profile is currently marked as unavailable. Clubs cannot contact you to ask about your availability for volunteering roles</p>
<label class="switch" for="learner-profile-availability-check">
<input tabindex="0" type="checkbox" id="learner-profile-availability-check" aria-label="availability">
<span class="slider round"></span>
</label>
</div>
<div class="efl-learner-profile-settings__select hidden" role="combobox">
<div class="efl-learner-profile-settings__select--label" rel="button" role="combobox" tabindex="0" aria-expanded="false">
<span class="filter">Football Coach</span>
</div>
<div aria-expanded="false" role="list" class="efl-learner-profile-settings__select--list">
<ul>
<li tabindex="0" data-value="Football Coach">Football Coach</li>
<li tabindex="0" data-value="Futsal Coach">Futsal Coach</li>
<li tabindex="0" data-value="Goalkeeping Coach">Goalkeeping Coach</li>
<li tabindex="0" data-value="Safeguarding Officer">Safeguarding Officer</li>
<li tabindex="0" data-value="Volunteer">Volunteer</li>
</ul>
</div>
<select class="efl-learner-profile-settings__select--select">
<option value="Football Coach">Football Coach</option>
<option value="Futsal Coach">Futsal Coach</option>
<option value="Goalkeeping Coach">Goalkeeping Coach</option>
<option value="Safeguarding Officer">Safeguarding Officer</option>
<option value="Volunteer">Volunteer</option>
</select>
</div>
</section>
<section>
<h4 class="location">Location</h4>
<div class="efl-learner-profile-settings--inner">
<p data-location-on-text="Your profile location is switched on. We'll never share your precise location." data-location-off-text="Your profile location is switched off. ">Your profile location is switched off. </p>
<label class="switch" for="learner-profile-location">
<input tabindex="0" type="checkbox" id="learner-profile-location" aria-label="location">
<span class="slider round"></span>
</label>
</div>
<div class="efl-learner-profile-settings--enter-location hidden">
<div id="bioSettingLocationContainer">
<input type="text" name="location" placeholder="Enter-Location" class="bioSettingLocation" id="bioSettingLocation" autocomplete="off">
</input>
</div>
<input type="hidden" class="learner-profile-place" value="" />
</div>
</section>
<section>
<h4 class="share">Share my profile</h4>
<p>Copy your profile URL to share with others</p>
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copied-text="Link Copied!" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link to share my profile" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
<p>copy link</p>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
<p>Facebook</p>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
<p>Twitter</p>
</div>
<div>
<a class="linkedin" href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
<p>Linkedin</p>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
<p>Whatsapp</p>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
No notes defined.
{
"smallimage": "/assets/example-content/learner-profile-hero-bg-mob.png",
"bigimage": "/assets/example-content/learner-profile-hero-bg-desk.png",
"edit-profile": true,
"default-dp": true
}
// eslint-disable-next-line complexity
export default parentElement => {
const dropdownDiv = parentElement.querySelector(
'.efl-profile__select--label'
);
const dropdown = parentElement.querySelector('.efl-profile__select--list');
const select = parentElement.querySelector('.efl-profile__select--select');
let dropdownListItems;
if (dropdown) {
dropdownListItems = dropdown.querySelectorAll('li');
}
const MOBILE_BREAKPOINT = 820;
const editPic = parentElement.querySelector('.edit-pic');
const defaultPic = parentElement.querySelector('.change-profile-pic');
const profileSettingsButton = parentElement.querySelector('.profile-setting');
const learnMoreLink = parentElement.querySelector('.learn-more');
const roleSelect = document.querySelector(
'.efl-learner-profile-settings__select'
);
// under 18 bio tab hide
const { learnerProfileYouth } = parentElement.dataset;
const learnerProfileTab = document.querySelector('.efl-learner-profile-tab');
if (learnerProfileYouth === 'true' && learnerProfileTab) {
const bioTab = learnerProfileTab.querySelector('a[id="bio"]');
const bioTabPanel = document.querySelector('div[data-page="bio"]');
bioTab.closest('li').classList.add('hidetab');
bioTabPanel.classList.add('hidetab');
}
const setSelectedListItem = e => {
const { target } = e;
const distDiv = target.closest('.efl-profile__select');
const selectDiv = distDiv.querySelector(
'.efl-profile__select--label span.filter'
);
selectDiv.innerText = target.innerText;
select.value = target.getAttribute('data-value');
select.dispatchEvent(new Event('change'));
if (roleSelect) {
const biodropdownDiv = roleSelect.querySelector(
'.efl-learner-profile-settings__select--label span.filter'
);
const bioSelect = roleSelect.querySelector(
'.efl-learner-profile-settings__select--select'
);
biodropdownDiv.innerText = target.innerText;
bioSelect.value = target.getAttribute('data-value');
bioSelect.dispatchEvent(new Event('change'));
}
};
const closeList = event => {
const { target } = event;
const distDiv = target.closest('.efl-profile__select');
const selectDiv = distDiv.querySelector('.efl-profile__select--label');
selectDiv.classList.remove('active');
selectDiv.setAttribute('aria-expanded', 'false');
dropdown.setAttribute('aria-expanded', 'false');
};
if (dropdownDiv) {
dropdownDiv.addEventListener('click', e => {
const { target } = e;
const distDiv = target.closest('.efl-profile__select');
const selectDiv = distDiv.querySelector('.efl-profile__select--label');
if (window.innerWidth >= MOBILE_BREAKPOINT) {
const isExpanded = dropdown.getAttribute('aria-expanded') === 'true';
if (!isExpanded) {
dropdown.setAttribute('aria-expanded', 'true');
selectDiv.setAttribute('aria-expanded', 'true');
selectDiv.classList.add('active');
} else {
dropdown.setAttribute('aria-expanded', 'false');
selectDiv.setAttribute('aria-expanded', 'false');
selectDiv.classList.remove('active');
}
}
});
dropdownDiv.addEventListener('keydown', event => {
if (event.keyCode === 13) {
event.preventDefault();
dropdownDiv.click();
} else if (event.keyCode === 40) {
dropdownListItems[0].focus();
}
});
}
if (dropdownListItems) {
dropdownListItems.forEach((item, index) => {
item.addEventListener('click', e => {
setSelectedListItem(e);
closeList(e);
});
item.addEventListener('keydown', e => {
if (e.keyCode === 40) {
if (dropdownListItems[index + 1]) {
dropdownListItems[index + 1].focus();
}
} else if (e.keyCode === 38) {
if (dropdownListItems[index - 1]) {
dropdownListItems[index - 1].focus();
}
} else if (e.keyCode === 13) {
item.click();
} else if (e.keyCode === 27) {
dropdownDiv.click();
dropdownDiv.focus();
}
});
});
}
if (select) {
select.addEventListener('change', event => {
const { target } = event;
const distDiv = target.closest('.efl-profile__select');
const selectDiv = distDiv.querySelector(
'.efl-profile__select--label span.filter'
);
const selectDivParent = distDiv.querySelector(
'.efl-profile__select--label'
);
setTimeout(() => {
target.classList.remove('active');
selectDiv.innerText = target.options[target.selectedIndex].innerText;
if (roleSelect) {
const biodropdownDiv = roleSelect.querySelector(
'.efl-learner-profile-settings__select--label span.filter'
);
const bioSelect = roleSelect.querySelector(
'.efl-learner-profile-settings__select--select'
);
biodropdownDiv.innerText =
target.options[target.selectedIndex].innerText;
bioSelect.value = target.value;
bioSelect.dispatchEvent(new Event('change'));
}
if (selectDivParent) {
selectDivParent.focus();
}
}, 100);
});
select.addEventListener('click', event => {
const { target } = event;
const distDiv = target.closest('.efl-profile__select');
const selectDiv = distDiv.querySelector(
'.efl-profile__select--label span.filter'
);
if (select.classList.contains('active')) {
selectDiv.setAttribute('aria-expanded', 'false');
selectDiv.classList.remove('active');
target.classList.remove('active');
} else {
selectDiv.setAttribute('aria-expanded', 'true');
selectDiv.classList.add('active');
target.classList.add('active');
}
});
}
if (editPic) {
editPic.addEventListener('click', event => {
event.preventDefault();
const addPhoto = document.querySelector('.efl-learner-profile-add-photo');
const popUp = addPhoto.closest('.efl-profile-left-popup');
const closeBtn = popUp.querySelector('.efl-profile-left-popup__close');
popUp.classList.add('add-animation');
document.body.classList.add('efl-profile-dark-overlay');
setTimeout(() => {
closeBtn.focus();
}, 50);
});
editPic.addEventListener('keydown', event => {
if (event.keyCode === 13) {
event.preventDefault();
editPic.click();
}
});
const addPhoto = document.querySelector('.efl-learner-profile-add-photo');
if (!addPhoto) {
return;
}
const popup = addPhoto.closest('.efl-profile-left-popup');
const closeBtn = popup.querySelector('.efl-profile-left-popup__close');
if (closeBtn) {
closeBtn.addEventListener('click', () => {
setTimeout(() => {
editPic.focus();
}, 50);
});
closeBtn.addEventListener('keydown', event => {
if (event.shiftKey && event.keyCode === 9) {
event.preventDefault();
} else if (event.keyCode === 13) {
closeBtn.click();
}
});
}
}
if (defaultPic) {
defaultPic.addEventListener('click', event => {
event.preventDefault();
const addPhoto = document.querySelector('.efl-learner-profile-add-photo');
const popUp = addPhoto.closest('.efl-profile-left-popup');
const closeBtn = popUp.querySelector('.efl-profile-left-popup__close');
popUp.classList.add('add-animation');
document.body.classList.add('efl-profile-dark-overlay');
setTimeout(() => {
closeBtn.focus();
}, 50);
});
defaultPic.addEventListener('keydown', event => {
if (event.keyCode === 13) {
event.preventDefault();
defaultPic.click();
}
});
const addPhoto = document.querySelector('.efl-learner-profile-add-photo');
if (!addPhoto) {
return;
}
const popup = addPhoto.closest('.efl-profile-left-popup');
const closeBtn = popup.querySelector('.efl-profile-left-popup__close');
if (closeBtn) {
closeBtn.addEventListener('click', () => {
setTimeout(() => {
defaultPic.focus();
}, 50);
});
closeBtn.addEventListener('keydown', event => {
if (event.shiftKey && event.keyCode === 9) {
event.preventDefault();
} else if (event.keyCode === 13) {
closeBtn.click();
}
});
}
}
if (profileSettingsButton) {
profileSettingsButton.addEventListener('click', event => {
event.preventDefault();
const profileSettings = document.querySelector(
'.efl-learner-profile-settings'
);
const popup = profileSettings.closest('.efl-profile-left-popup');
const closeBtn = popup.querySelector('.efl-profile-left-popup__close');
popup.classList.add('add-animation');
document.body.classList.add('efl-profile-dark-overlay');
setTimeout(() => {
closeBtn.focus();
}, 50);
});
profileSettingsButton.addEventListener('keydown', event => {
if (event.keyCode === 13) {
profileSettingsButton.click();
}
});
const profileSettings = document.querySelector(
'.efl-learner-profile-settings'
);
if (!profileSettings) {
return;
}
const popup = profileSettings.closest('.efl-profile-left-popup');
const closeBtn = popup.querySelector('.efl-profile-left-popup__close');
if (closeBtn) {
closeBtn.addEventListener('click', () => {
setTimeout(() => {
profileSettingsButton.focus();
}, 50);
});
closeBtn.addEventListener('keydown', event => {
if (event.shiftKey && event.keyCode === 9) {
event.preventDefault();
} else if (event.keyCode === 13) {
closeBtn.click();
}
});
}
}
if (learnMoreLink) {
learnMoreLink.addEventListener('click', event => {
event.preventDefault();
const profileSettings = document.querySelector(
'.efl-learner-profile-settings'
);
const popup = profileSettings.closest('.efl-profile-left-popup');
popup.classList.add('add-animation');
document.body.classList.add('efl-profile-dark-overlay');
});
learnMoreLink.addEventListener('keydown', event => {
if (event.keyCode === 13) {
event.preventDefault();
learnMoreLink.click();
}
});
}
};
.efl-profile-hero-banner {
background-color: #004f9f;
color: $white;
position: relative;
height: 37.4rem;
&::before {
content: '';
background: url('./assets/images/efl-learner-profile-left-mob.png')
no-repeat center;
position: absolute;
display: block;
width: 100%;
height: 100%;
background-size: 100%;
background-position-y: top;
z-index: 1;
}
&__overlay {
width: 100%;
max-width: 122.7rem;
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
margin: 0 auto;
z-index: 2;
}
&__content {
display: flex;
width: 100%;
max-width: 70.6rem;
justify-content: center;
margin: 0 auto;
position: relative;
&--profile {
&__picture {
position: relative;
width: 12.1rem;
height: 12.1rem;
margin: 0 auto;
&--dp {
width: 12.1rem;
height: 12.1rem;
border-radius: 50%;
border: 3px solid $white;
background-color: #eceef3;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
margin: 0 auto;
margin-top: 5.7rem;
overflow: hidden;
& > img {
object-fit: cover;
height: 12.1rem;
}
.change-profile-pic {
background: #eceef3
url('./assets/images/learner-profile-upload.svg') no-repeat center;
background-size: 3.6rem;
width: 12.1rem;
height: 12.1rem;
border-radius: 50%;
display: flex;
cursor: pointer;
overflow: hidden;
border: none;
padding: unset;
}
.visitor-no-dp {
background: #eceef3 url('./assets/images/visitor-no-pic.svg')
no-repeat center;
background-size: 5.8rem;
width: 12.1rem;
height: 12.1rem;
border-radius: 50%;
display: flex;
}
}
.edit-pic {
cursor: pointer;
background: $white url('./assets/images/profile-pic-pen.svg')
no-repeat center;
width: 3.2rem;
height: 3.2rem;
border-radius: 50%;
position: absolute;
display: flex;
bottom: 0;
right: 0;
border: none;
padding: unset;
&:hover {
background-image: url('./assets/images/edit-button-blue.svg');
background-size: cover;
}
}
}
&__name {
h1 {
@extend .efl-heading-2;
letter-spacing: -0.01em;
margin-top: 2.5rem;
text-align: center;
}
&.readonly {
h1 {
position: relative;
padding-bottom: 0.8rem;
&::after {
content: '';
width: 3.2rem;
height: 0.2rem;
background-color: $red;
position: absolute;
bottom: 0;
left: calc(50% - 1.6rem);
}
}
}
}
&__visible {
@extend .efl-p-1;
position: relative;
margin-top: 2.4rem;
letter-spacing: 0.01em;
display: flex;
align-items: center;
justify-content: center;
span {
padding-left: 3.3rem;
background: url('./assets/images/eye-icon.svg') no-repeat left center;
}
a {
font-weight: 700;
cursor: pointer;
text-decoration: underline;
&:hover {
color: #b7b5e9;
}
}
&.private {
span {
background: url('./assets/images/eye-close-icon.svg') no-repeat left
center;
}
}
}
&__location {
@extend .efl-p-1;
font-size: 1.2rem;
line-height: 1.2rem;
text-transform: uppercase;
margin-top: 0.8rem;
color: #eceef3;
letter-spacing: 0.08rem;
text-align: center;
}
.efl-profile__select {
@extend .efl-p-1;
line-height: 1.6rem;
position: relative;
margin-top: 1.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
&--readonly {
margin: 0 auto;
position: relative;
padding-bottom: 0.8rem;
display: flex;
justify-content: center;
}
&--label {
font-weight: bold;
color: $white;
padding: 1.5rem 5.1rem 1.5rem 2.4rem;
width: 100%;
display: flex;
justify-content: center;
border-radius: 0.4rem;
border: 1px solid $white;
position: relative;
background: rgba(255, 255, 255, 0.14);
cursor: pointer;
&::after {
content: '';
background: url('./assets/images/chevron-white.svg') no-repeat
center;
width: 4rem;
position: absolute;
right: 7.5px;
height: 4rem;
top: 4.5px;
background-size: 1.4rem;
}
&.active {
&::after {
transform: rotate(180deg);
}
}
&:hover {
background: rgba(255, 255, 255, 0.3);
}
span {
min-height: 1.6rem;
}
}
&--select {
@extend .efl-p-1;
padding: 0.8rem 1.6rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
option {
padding: 0.8rem 1.6rem;
}
&.active {
opacity: 1;
}
}
&--list {
background: $white;
border: 2px solid #b7c5e9;
border-radius: 0 0 4px 4px;
padding: 1.2rem 0;
position: absolute;
width: 100%;
z-index: 1;
& > ul {
width: 100%;
& > li {
@extend .efl-p-medium;
padding: 0.7rem 3rem;
color: $blue;
cursor: pointer;
text-transform: capitalize;
&:hover {
background-color: $grey-light;
}
}
}
&[aria-expanded='false'] {
display: none;
}
}
}
}
&--settings {
position: absolute;
right: 2.4rem;
top: 2.4rem;
.profile-setting {
background: url('./assets/images/profile-settings.svg') no-repeat center;
background-color: rgba(255, 255, 255, 0.15);
background-size: cover;
width: 4rem;
height: 4rem;
cursor: pointer;
display: flex;
border-radius: 50%;
overflow: hidden;
border: none;
padding: 0;
&:hover {
background-image: url('./assets/images/profile-settings-blue.svg');
}
}
}
}
&__wrapper {
min-height: 37.4rem;
justify-content: center;
margin: 0 auto;
position: relative;
picture {
width: 100%;
img {
height: 37.4rem;
object-fit: cover;
width: 100%;
}
}
}
@media screen and (min-width: $mq-medium) {
height: 52.5rem;
& + .efl-column-layout.efl-profile-layout {
margin-top: -15.7rem;
}
&::before {
background: url('./assets/images/efl-learner-profile-left-desk.png')
no-repeat left top;
background-size: cover;
width: 51.6rem;
height: 52.5rem;
bottom: 0;
}
&::after {
content: '';
position: absolute;
display: block;
background: url('./assets/images/efl-learner-profile-right-desk.png')
no-repeat center;
background-size: cover;
width: 66.2rem;
height: 52.5rem;
bottom: 0;
right: 0;
}
&__content {
&--settings {
background-size: cover;
right: 0;
.profile-setting {
width: 6.4rem;
height: 6.4rem;
}
}
&--profile {
&__picture {
width: 16.2rem;
height: 16.2rem;
&--dp {
margin-top: 3.3rem;
width: 16.2rem;
height: 16.2rem;
> img {
height: 16.2rem;
}
.change-profile-pic {
width: 16.2rem;
height: 16.2rem;
margin-left: -3px;
margin-top: -3px;
background-size: 4.8rem;
}
.visitor-no-dp {
width: 16.2rem;
height: 16.2rem;
margin-left: -3px;
margin-top: -3px;
background-size: 7.8rem;
}
}
.edit-pic {
bottom: 1rem;
right: 1rem;
}
}
.efl-profile__select {
font-size: 2rem;
line-height: 2rem;
&--label {
padding: 1.8rem 7.9rem 1.8rem 5.2rem;
height: 5.6rem;
&::after {
right: 3rem;
top: 0.8rem;
}
}
&--select {
display: none;
}
}
}
}
&__wrapper {
picture {
img {
height: 52.5rem;
}
}
}
}
}
<section class="efl-profile-hero-banner" data-behavior="efl-profile-hero-banner" data-learner-profile-youth="false">
<div class="efl-profile-hero-banner__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="{{smallimage}}">
<source media="(min-width: 820px)" srcset="{{bigimage}}">
<img src="{{bigimage}}" alt="">
</picture>
<div class="efl-profile-hero-banner__overlay">
<div class="efl-profile-hero-banner__content">
<div class="efl-profile-hero-banner__content--profile">
<div class="efl-profile-hero-banner__content--profile__picture">
<div class="efl-profile-hero-banner__content--profile__picture--dp" data-fanid="62023850" data-individual-profile-photoid="1939807" data-public-profile-fanid="1222" data-experience-editor="false">
{{#if default-dp}}
<button class="change-profile-pic" aria-label="change profile picture"></button>
<img src="" class="hidden">
{{/if}}
{{#unless default-dp}}
{{#if visitor-no-dp}}
<div class="visitor-no-dp"></div>
{{else}}
<img src="/assets/example-content/efl-profile-pic.png" >
{{/if}}
{{/unless}}
</div>
{{#if edit-profile}}
{{#unless default-dp}}
<button class="edit-pic" aria-label="edit profile picture"></button>
{{/unless}}
{{/if}}
{{#if default-dp}}
<button class="edit-pic hidden" aria-label="edit profile picture"></button>
{{/if}}
</div>
{{#if edit-profile}}
<div class="efl-profile-hero-banner__content--profile__name">
<h1>Chloe Kelly</h1>
</div>
{{/if}}
{{#unless edit-profile}}
<div class="efl-profile-hero-banner__content--profile__name readonly">
<h1>Chloe Kelly</h1>
</div>
{{/unless}}
{{#unless edit-profile}}
<div class="efl-profile__select">
<span class="efl-profile__select--readonly">Football Coach</span>
</div>
{{/unless}}
{{#if edit-profile}}
<div class="efl-profile__select" role="combobox">
<div class="efl-profile__select--label" rel="button" role="combobox" tabindex="0" aria-expanded="false">
<span class="filter">Football Coach</span>
</div>
<div aria-expanded="false" role="list" class="efl-profile__select--list">
<ul>
<li tabindex="0" data-value="Football Coach">Football Coach</li>
<li tabindex="0" data-value="Futsal Coach">Futsal Coach</li>
<li tabindex="0" data-value="Goalkeeping Coach">Goalkeeping Coach</li>
<li tabindex="0" data-value="Safeguarding Officer">Safeguarding Officer</li>
<li tabindex="0" data-value="Volunteer">Volunteer</li>
</ul>
</div>
<select class="efl-profile__select--select">
<option value="Football Coach">Football Coach</option>
<option value="Futsal Coach">Futsal Coach</option>
<option value="Goalkeeping Coach">Goalkeeping Coach</option>
<option value="Safeguarding Officer">Safeguarding Officer</option>
<option value="Volunteer">Volunteer</option>
</select>
</div>
{{/if}}
{{#if edit-profile}}
<div class="efl-profile-hero-banner__content--profile__visible">
<span>Your bio is public.</span>
<a class="learn-more" aria-label="learn more" tabindex="0" aria-describedby="efl-profile-setting-left-popup">Learn more</a>
</div>
{{/if}}
{{#unless edit-profile}}
<div class="efl-profile-hero-banner__content--profile__location">
London Gatwick Airport, England
</div>
{{/unless}}
</div>
<div class="efl-profile-hero-banner__content--settings">
{{#if edit-profile}}
<button class="profile-setting" aria-label="profile setting" aria-describedby="efl-profile-setting-left-popup"></button>
{{/if}}
</div>
</div>
</div>
</div>
{{render '@efl-learner-profile-add-photo'}}
{{render '@efl-learner-profile-settings'}}
</section>