2384 lines
92 KiB
Plaintext
2384 lines
92 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
|
|
<div>
|
|
<div
|
|
class="profile-page"
|
|
>
|
|
<div>
|
|
<div
|
|
class="d-flex justify-content-center align-items-center flex-column height-50vh"
|
|
>
|
|
<div
|
|
class="spinner-border text-primary"
|
|
role="status"
|
|
>
|
|
<span
|
|
class="sr-only"
|
|
>
|
|
Profile loading...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`<ProfilePage /> Renders correctly in various states successfully redirected to not found page 1`] = `
|
|
<div>
|
|
<div
|
|
class="profile-page"
|
|
>
|
|
<div
|
|
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
|
>
|
|
<div
|
|
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
|
>
|
|
<div
|
|
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
|
>
|
|
<div
|
|
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
|
>
|
|
<div
|
|
class="profile-avatar-wrap position-relative"
|
|
>
|
|
<div
|
|
class="profile-avatar rounded-circle bg-light"
|
|
>
|
|
<div
|
|
aria-hidden="true"
|
|
class="text-muted"
|
|
data-testid="IconMock"
|
|
focusable="false"
|
|
role="img"
|
|
viewbox="0 0 24 24"
|
|
/>
|
|
</div>
|
|
<form
|
|
enctype="multipart/form-data"
|
|
>
|
|
<input
|
|
accept=".jpg, .jpeg, .png"
|
|
class="d-none form-control-file"
|
|
id="photo-file"
|
|
name="file"
|
|
type="file"
|
|
/>
|
|
</form>
|
|
</div>
|
|
<div
|
|
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
|
>
|
|
<p
|
|
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
|
>
|
|
staffTest
|
|
</p>
|
|
<div
|
|
class="row pt-2 m-0 g-1rem"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="p-0 col-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ml-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
|
>
|
|
<div
|
|
class="w-100 p-0"
|
|
>
|
|
<div
|
|
class="col justify-content-start align-items-start p-0"
|
|
>
|
|
<div
|
|
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
|
>
|
|
<p
|
|
class="font-weight-bold text-primary-500 m-0 h2"
|
|
>
|
|
Profile information
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
|
>
|
|
<div
|
|
class="col p-0 col-6"
|
|
>
|
|
<div
|
|
class="m-0"
|
|
>
|
|
<div
|
|
class="row m-0 pb-1.5 align-items-center"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0"
|
|
data-hj-suppress="true"
|
|
>
|
|
Username
|
|
</p>
|
|
<svg
|
|
class="m-0 info-icon"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
staffTest
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col m-0 pr-0 pl-40px col-6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`<ProfilePage /> Renders correctly in various states viewing other profile with all fields 1`] = `
|
|
<div>
|
|
<div
|
|
class="profile-page"
|
|
>
|
|
<div
|
|
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
|
>
|
|
<div
|
|
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
|
>
|
|
<div
|
|
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
|
>
|
|
<div
|
|
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
|
>
|
|
<div
|
|
class="profile-avatar-wrap position-relative"
|
|
>
|
|
<div
|
|
class="profile-avatar rounded-circle bg-light"
|
|
>
|
|
<div
|
|
aria-hidden="true"
|
|
class="text-muted"
|
|
data-testid="IconMock"
|
|
focusable="false"
|
|
role="img"
|
|
viewbox="0 0 24 24"
|
|
/>
|
|
</div>
|
|
<form
|
|
enctype="multipart/form-data"
|
|
>
|
|
<input
|
|
accept=".jpg, .jpeg, .png"
|
|
class="d-none form-control-file"
|
|
id="photo-file"
|
|
name="file"
|
|
type="file"
|
|
/>
|
|
</form>
|
|
</div>
|
|
<div
|
|
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
|
>
|
|
<p
|
|
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
|
>
|
|
verified
|
|
</p>
|
|
<p
|
|
class="row pt-2 text-gray-800 font-weight-normal m-0 p"
|
|
>
|
|
Verified User
|
|
</p>
|
|
<div
|
|
class="row pt-2 m-0 g-1rem"
|
|
>
|
|
<span
|
|
class="small mb-0 text-gray-800"
|
|
>
|
|
Member since
|
|
<span
|
|
class="font-weight-bold"
|
|
>
|
|
|
|
2017
|
|
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="p-0 col-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ml-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
|
>
|
|
<div
|
|
class="w-100 p-0"
|
|
>
|
|
<div
|
|
class="col justify-content-start align-items-start p-0"
|
|
>
|
|
<div
|
|
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
|
>
|
|
<p
|
|
class="font-weight-bold text-primary-500 m-0 h2"
|
|
>
|
|
Profile information
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
|
>
|
|
<div
|
|
class="col p-0 col-6"
|
|
>
|
|
<div
|
|
class="m-0"
|
|
>
|
|
<div
|
|
class="row m-0 pb-1.5 align-items-center"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0"
|
|
data-hj-suppress="true"
|
|
>
|
|
Username
|
|
</p>
|
|
<svg
|
|
class="m-0 info-icon"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
verified
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<div
|
|
class="row m-0 pb-1.5 align-items-center"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0"
|
|
data-hj-suppress="true"
|
|
>
|
|
Full name
|
|
</p>
|
|
<svg
|
|
class="m-0 info-icon"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
Verified User
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Country
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
United States of America
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Primary language spoken
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
English
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Education
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
Other education
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col m-0 pr-0 pl-40px col-6"
|
|
>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-0"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Bio
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
About me
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative p-0"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<div>
|
|
<div>
|
|
<div
|
|
class="pt-40px"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
X
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
https://twitter.com/user
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`<ProfilePage /> Renders correctly in various states viewing own profile 1`] = `
|
|
<div>
|
|
<div
|
|
class="profile-page"
|
|
>
|
|
<div
|
|
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
|
>
|
|
<div
|
|
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
|
>
|
|
<div
|
|
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
|
>
|
|
<div
|
|
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
|
>
|
|
<div
|
|
class="profile-avatar-wrap position-relative"
|
|
>
|
|
<div
|
|
class="profile-avatar rounded-circle bg-light"
|
|
>
|
|
<img
|
|
alt="profile avatar"
|
|
class="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
|
|
data-hj-suppress="true"
|
|
src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="profile-avatar-button"
|
|
>
|
|
<div
|
|
class="pgn__dropdown pgn__dropdown-light dropdown"
|
|
data-testid="dropdown"
|
|
>
|
|
<button
|
|
aria-expanded="false"
|
|
aria-haspopup="true"
|
|
class="btn-icon btn-icon-inverse-primary btn-icon-md btn-icon-inverse-primary-active shadow-sm pgn__dropdown-toggle-iconbutton"
|
|
id="dropdown-toggle-with-iconbutton"
|
|
type="button"
|
|
>
|
|
<span
|
|
class="btn-icon__icon-container"
|
|
>
|
|
<span
|
|
class="pgn__icon btn-icon__icon"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="none"
|
|
focusable="false"
|
|
height="24"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M9 2 7.17 4H2v16h20V4h-5.17L15 2H9Zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form
|
|
enctype="multipart/form-data"
|
|
>
|
|
<input
|
|
accept=".jpg, .jpeg, .png"
|
|
class="d-none form-control-file"
|
|
id="photo-file"
|
|
name="file"
|
|
type="file"
|
|
/>
|
|
</form>
|
|
</div>
|
|
<div
|
|
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
|
>
|
|
<p
|
|
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
|
>
|
|
staff
|
|
</p>
|
|
<p
|
|
class="row pt-2 text-gray-800 font-weight-normal m-0 p"
|
|
>
|
|
Lemon Seltzer
|
|
</p>
|
|
<div
|
|
class="row pt-2 m-0 g-1rem"
|
|
>
|
|
<span
|
|
class="small mb-0 text-gray-800"
|
|
>
|
|
Member since
|
|
<span
|
|
class="font-weight-bold"
|
|
>
|
|
|
|
2017
|
|
|
|
</span>
|
|
</span>
|
|
<span
|
|
class="small m-0 text-gray-800"
|
|
>
|
|
<span
|
|
class="font-weight-bold"
|
|
>
|
|
1
|
|
</span>
|
|
certifications
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="p-0 col-auto"
|
|
>
|
|
<a
|
|
class="pgn__hyperlink default-link standalone-link btn btn-brand bg-brand-500 btn-rounded font-weight-normal px-4 py-10px text-nowrap"
|
|
href="http://localhost:18150/records"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
View My Records
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ml-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
|
>
|
|
<div
|
|
class="w-100 p-0"
|
|
>
|
|
<div
|
|
class="col justify-content-start align-items-start p-0"
|
|
>
|
|
<div
|
|
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
|
>
|
|
<p
|
|
class="font-weight-bold text-primary-500 m-0 h2"
|
|
>
|
|
Profile information
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
|
>
|
|
<div
|
|
class="col p-0 col-6"
|
|
>
|
|
<div
|
|
class="m-0"
|
|
>
|
|
<div
|
|
class="row m-0 pb-1.5 align-items-center"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0"
|
|
data-hj-suppress="true"
|
|
>
|
|
Username
|
|
</p>
|
|
<svg
|
|
class="m-0 info-icon"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
staff
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<div
|
|
class="row m-0 pb-1.5 align-items-center"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0"
|
|
data-hj-suppress="true"
|
|
>
|
|
Full name
|
|
</p>
|
|
<svg
|
|
class="m-0 info-icon"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
Lemon Seltzer
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye-slash "
|
|
data-icon="eye-slash"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 640 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Just me
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Country
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
Montenegro
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye "
|
|
data-icon="eye"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 576 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Everyone on localhost
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Primary language spoken
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
Yoruba
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye "
|
|
data-icon="eye"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 576 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Everyone on localhost
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Education
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
Elementary/primary school
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye-slash "
|
|
data-icon="eye-slash"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 640 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Just me
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col m-0 pr-0 pl-40px col-6"
|
|
>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-0"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Bio
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
This is my bio
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye "
|
|
data-icon="eye"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 576 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Everyone on localhost
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative p-0"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<div>
|
|
<div>
|
|
<div
|
|
class="pt-40px"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
X
|
|
</p>
|
|
<div
|
|
class="w-100 overflowWrap-breakWord"
|
|
>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
https://www.twitter.com/ALOHA
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye "
|
|
data-icon="eye"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 576 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Everyone on localhost
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pt-40px"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Facebook
|
|
</p>
|
|
<div
|
|
class="w-100 overflowWrap-breakWord"
|
|
>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
https://www.facebook.com/aloha
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye "
|
|
data-icon="eye"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 576 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Everyone on localhost
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pt-40px"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
LinkedIn
|
|
</p>
|
|
<div
|
|
class="p-0 m-0"
|
|
>
|
|
<button
|
|
class="p-0 text-left btn btn-link lh-36px"
|
|
tabindex="0"
|
|
type="button"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-plus fa-xs mr-1"
|
|
data-icon="plus"
|
|
data-prefix="fas"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 448 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
Add
|
|
LinkedIn
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
|
>
|
|
<div>
|
|
<div
|
|
class="col justify-content-start align-items-start g-5rem p-0"
|
|
>
|
|
<div
|
|
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
|
>
|
|
<p
|
|
class="font-weight-bold text-primary-500 m-0 h2"
|
|
>
|
|
Your certificates
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="col justify-content-start align-items-start pt-2 p-0"
|
|
>
|
|
<p
|
|
class="font-weight-normal text-gray-800 m-0 p-0 p"
|
|
>
|
|
Your learner records information is only visible to you. Only your username and profile image are visible to others on localhost.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col"
|
|
>
|
|
<div
|
|
class="row align-items-center pt-5 g-3rem"
|
|
>
|
|
<div
|
|
class="col-auto d-flex align-items-center p-0"
|
|
>
|
|
<div
|
|
class="col certificate p-4 border-light-400 bg-light-200 w-100 h-100"
|
|
>
|
|
<div
|
|
class="certificate-type-illustration"
|
|
style="background-image: url(icon/mock/path);"
|
|
/>
|
|
<div
|
|
class="d-flex flex-column position-relative p-0 width-314px"
|
|
>
|
|
<div
|
|
class="w-100 color-black"
|
|
>
|
|
<p
|
|
class="mb-0 font-weight-normal small"
|
|
>
|
|
Verified Certificate
|
|
</p>
|
|
<p
|
|
class="m-0 color-black h4"
|
|
>
|
|
edX Demonstration Course
|
|
</p>
|
|
<p
|
|
class="mb-0 small"
|
|
>
|
|
From
|
|
</p>
|
|
<h5
|
|
class="mb-0 color-black"
|
|
>
|
|
edX
|
|
</h5>
|
|
<p
|
|
class="mb-0 small"
|
|
>
|
|
Completed on
|
|
3/4/2019
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="pt-3"
|
|
>
|
|
<a
|
|
class="pgn__hyperlink default-link standalone-link btn btn-primary btn-rounded font-weight-normal px-4 py-10px"
|
|
href="http://www.example.com/"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
View Certificate
|
|
</a>
|
|
</div>
|
|
<p
|
|
class="mb-0 pt-3 small"
|
|
>
|
|
Credential ID
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`<ProfilePage /> Renders correctly in various states without credentials service 1`] = `
|
|
<div>
|
|
<div
|
|
class="profile-page"
|
|
>
|
|
<div
|
|
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
|
>
|
|
<div
|
|
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
|
>
|
|
<div
|
|
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
|
>
|
|
<div
|
|
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
|
>
|
|
<div
|
|
class="profile-avatar-wrap position-relative"
|
|
>
|
|
<div
|
|
class="profile-avatar rounded-circle bg-light"
|
|
>
|
|
<img
|
|
alt="profile avatar"
|
|
class="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
|
|
data-hj-suppress="true"
|
|
src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="profile-avatar-button"
|
|
>
|
|
<div
|
|
class="pgn__dropdown pgn__dropdown-light dropdown"
|
|
data-testid="dropdown"
|
|
>
|
|
<button
|
|
aria-expanded="false"
|
|
aria-haspopup="true"
|
|
class="btn-icon btn-icon-inverse-primary btn-icon-md btn-icon-inverse-primary-active shadow-sm pgn__dropdown-toggle-iconbutton"
|
|
id="dropdown-toggle-with-iconbutton"
|
|
type="button"
|
|
>
|
|
<span
|
|
class="btn-icon__icon-container"
|
|
>
|
|
<span
|
|
class="pgn__icon btn-icon__icon"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="none"
|
|
focusable="false"
|
|
height="24"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M9 2 7.17 4H2v16h20V4h-5.17L15 2H9Zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form
|
|
enctype="multipart/form-data"
|
|
>
|
|
<input
|
|
accept=".jpg, .jpeg, .png"
|
|
class="d-none form-control-file"
|
|
id="photo-file"
|
|
name="file"
|
|
type="file"
|
|
/>
|
|
</form>
|
|
</div>
|
|
<div
|
|
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
|
>
|
|
<p
|
|
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
|
>
|
|
staff
|
|
</p>
|
|
<p
|
|
class="row pt-2 text-gray-800 font-weight-normal m-0 p"
|
|
>
|
|
Lemon Seltzer
|
|
</p>
|
|
<div
|
|
class="row pt-2 m-0 g-1rem"
|
|
>
|
|
<span
|
|
class="small mb-0 text-gray-800"
|
|
>
|
|
Member since
|
|
<span
|
|
class="font-weight-bold"
|
|
>
|
|
|
|
2017
|
|
|
|
</span>
|
|
</span>
|
|
<span
|
|
class="small m-0 text-gray-800"
|
|
>
|
|
<span
|
|
class="font-weight-bold"
|
|
>
|
|
1
|
|
</span>
|
|
certifications
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="p-0 col-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ml-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
|
>
|
|
<div
|
|
class="w-100 p-0"
|
|
>
|
|
<div
|
|
class="col justify-content-start align-items-start p-0"
|
|
>
|
|
<div
|
|
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
|
>
|
|
<p
|
|
class="font-weight-bold text-primary-500 m-0 h2"
|
|
>
|
|
Profile information
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
|
>
|
|
<div
|
|
class="col p-0 col-6"
|
|
>
|
|
<div
|
|
class="m-0"
|
|
>
|
|
<div
|
|
class="row m-0 pb-1.5 align-items-center"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0"
|
|
data-hj-suppress="true"
|
|
>
|
|
Username
|
|
</p>
|
|
<svg
|
|
class="m-0 info-icon"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
staff
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<div
|
|
class="row m-0 pb-1.5 align-items-center"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0"
|
|
data-hj-suppress="true"
|
|
>
|
|
Full name
|
|
</p>
|
|
<svg
|
|
class="m-0 info-icon"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
Lemon Seltzer
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye-slash "
|
|
data-icon="eye-slash"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 640 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Just me
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Country
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
Montenegro
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye "
|
|
data-icon="eye"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 576 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Everyone on localhost
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Primary language spoken
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
Yoruba
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye "
|
|
data-icon="eye"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 576 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Everyone on localhost
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-40px"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Education
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
Elementary/primary school
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye-slash "
|
|
data-icon="eye-slash"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 640 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Just me
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col m-0 pr-0 pl-40px col-6"
|
|
>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative pt-0"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Bio
|
|
</p>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
This is my bio
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye "
|
|
data-icon="eye"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 576 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Everyone on localhost
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pgn-transition-replace-group position-relative p-0"
|
|
>
|
|
<div
|
|
style="padding: .1px 0px;"
|
|
>
|
|
<div>
|
|
<div>
|
|
<div
|
|
class="pt-40px"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
X
|
|
</p>
|
|
<div
|
|
class="w-100 overflowWrap-breakWord"
|
|
>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
https://www.twitter.com/ALOHA
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye "
|
|
data-icon="eye"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 576 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Everyone on localhost
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pt-40px"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
Facebook
|
|
</p>
|
|
<div
|
|
class="w-100 overflowWrap-breakWord"
|
|
>
|
|
<div
|
|
class="row m-0 p-0 d-flex flex-nowrap align-items-center"
|
|
>
|
|
<div
|
|
class="m-0 p-0 col-auto"
|
|
>
|
|
<h4
|
|
class="edit-section-header text-gray-700"
|
|
>
|
|
https://www.facebook.com/aloha
|
|
</h4>
|
|
</div>
|
|
<div
|
|
class="col-auto m-0 p-0 d-flex align-items-center col-auto"
|
|
>
|
|
<button
|
|
class="p-1.5 btn btn-link btn-sm"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="text-gray-700"
|
|
fill="none"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row m-0 p-0"
|
|
>
|
|
<p
|
|
class="mb-0"
|
|
>
|
|
<span
|
|
class="ml-auto small text-muted"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-eye "
|
|
data-icon="eye"
|
|
data-prefix="far"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 576 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
Everyone on localhost
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pt-40px"
|
|
>
|
|
<p
|
|
class="h5 font-weight-bold m-0 pb-1.5"
|
|
data-hj-suppress="true"
|
|
>
|
|
LinkedIn
|
|
</p>
|
|
<div
|
|
class="p-0 m-0"
|
|
>
|
|
<button
|
|
class="p-0 text-left btn btn-link lh-36px"
|
|
tabindex="0"
|
|
type="button"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="svg-inline--fa fa-plus fa-xs mr-1"
|
|
data-icon="plus"
|
|
data-prefix="fas"
|
|
focusable="false"
|
|
role="img"
|
|
viewBox="0 0 448 512"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
Add
|
|
LinkedIn
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
|
>
|
|
<div>
|
|
<div
|
|
class="col justify-content-start align-items-start g-5rem p-0"
|
|
>
|
|
<div
|
|
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
|
>
|
|
<p
|
|
class="font-weight-bold text-primary-500 m-0 h2"
|
|
>
|
|
Your certificates
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="col justify-content-start align-items-start pt-2 p-0"
|
|
>
|
|
<p
|
|
class="font-weight-normal text-gray-800 m-0 p-0 p"
|
|
>
|
|
Your learner records information is only visible to you. Only your username and profile image are visible to others on localhost.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col"
|
|
>
|
|
<div
|
|
class="row align-items-center pt-5 g-3rem"
|
|
>
|
|
<div
|
|
class="col-auto d-flex align-items-center p-0"
|
|
>
|
|
<div
|
|
class="col certificate p-4 border-light-400 bg-light-200 w-100 h-100"
|
|
>
|
|
<div
|
|
class="certificate-type-illustration"
|
|
style="background-image: url(icon/mock/path);"
|
|
/>
|
|
<div
|
|
class="d-flex flex-column position-relative p-0 width-314px"
|
|
>
|
|
<div
|
|
class="w-100 color-black"
|
|
>
|
|
<p
|
|
class="mb-0 font-weight-normal small"
|
|
>
|
|
Verified Certificate
|
|
</p>
|
|
<p
|
|
class="m-0 color-black h4"
|
|
>
|
|
edX Demonstration Course
|
|
</p>
|
|
<p
|
|
class="mb-0 small"
|
|
>
|
|
From
|
|
</p>
|
|
<h5
|
|
class="mb-0 color-black"
|
|
>
|
|
edX
|
|
</h5>
|
|
<p
|
|
class="mb-0 small"
|
|
>
|
|
Completed on
|
|
3/4/2019
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="pt-3"
|
|
>
|
|
<a
|
|
class="pgn__hyperlink default-link standalone-link btn btn-primary btn-rounded font-weight-normal px-4 py-10px"
|
|
href="http://www.example.com/"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
View Certificate
|
|
</a>
|
|
</div>
|
|
<p
|
|
class="mb-0 pt-3 small"
|
|
>
|
|
Credential ID
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|