Andal.LND/frontend-app-profile
6
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add MicroMasters illustration in background of all certificates

Browse Source
This commit is contained in:
Adam Butterworth
2019-02-28 15:16:33 -05:00
committed by Adam Butterworth
parent 129e32f7b5
commit 35385ae99e
4 changed files with 44 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/micro-masters.svg Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="110px" height="100px" viewBox="0 0 110 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
<title>micro-masters</title>
<desc>Created with Sketch.</desc>
<g id="micro-masters" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Fill-14" fill="#005585" points="1.00481933 99 1 96.14832 108.995272 96 109 98.85168"></polygon>
<polygon id="Fill-16" fill="#005585" points="1.00481933 54 1 51.14832 108.995272 51 109 53.85168"></polygon>
<polygon id="Fill-18" fill="#005585" points="24.9998189 88 4.22751315 66.9102771 4.22751315 87.0451102 1 87.0451102 1 59 24.9998189 83.3666894 49 59 49 87.0451102 45.7724869 87.0451102 45.7724869 66.9102771"></polygon>
<polygon id="Fill-20" fill="#005585" points="83.0003622 88 62.2275375 66.9102771 62.2275375 87.0451102 59 87.0451102 59 59 83.0003622 83.3666894 107 59 107 87.0451102 103.772372 87.0451102 103.772372 66.9102771"></polygon>
<path d="M46.8337141,5.73372796 C40.9959838,9.0009662 32.7599012,14.7887333 26.6032377,23.8303431 C22.1430738,22.980271 18.7577893,22.0941759 16.6724707,21.4890245 C24.4296997,13.0587208 35.0333668,7.38581116 46.8337141,5.73372796 L46.8337141,5.73372796 Z M52.9498983,26.3252576 C44.0609738,26.2888724 36.3049246,25.4607944 30.1183101,24.4518768 C37.8086485,13.8504137 48.4460785,8.26376038 52.9498983,6.25307565 L52.9498983,26.3252576 Z M56.1856092,6.53148511 C60.9824046,8.72165163 70.9689895,14.1856636 78.3079931,24.2371866 C70.4533778,25.5777336 63.0182586,26.1827945 56.1856092,26.3036256 L56.1856092,6.53148511 Z M91.2530147,21.4114572 C88.0536989,22.2655118 84.9019418,22.9909512 81.8101774,23.5971888 C75.749448,14.7672824 67.7047798,9.0930151 61.9038076,5.84261176 C73.3677956,7.61959908 83.6636931,13.2007313 91.2530147,21.4114572 L91.2530147,21.4114572 Z M5.35796556,42 C7.1655563,35.3542865 10.2683027,29.3264862 14.378947,24.1676747 C16.125002,24.7123653 19.7105047,25.7399279 24.7732291,26.7529184 C22.2125965,31.1374149 20.1687556,36.1942214 19.0530339,42 L22.3555447,42 C23.5090228,36.4059248 25.5817257,31.5545765 28.1556093,27.3837747 C34.7214222,28.5242036 43.1689773,29.5005374 52.9498983,29.5419006 L52.9498983,42 L56.1856092,42 L56.1856092,29.5223504 C63.6041191,29.395636 71.7140444,28.7101116 80.2902074,27.16121 C82.9053872,31.3760904 85.0043199,36.3025621 86.1572534,42 L89.460218,42 C88.3437702,36.0858806 86.2630805,30.9538601 83.6533464,26.5180443 C86.9031251,25.8529752 90.216981,25.0530458 93.5773971,24.1181656 C97.7090979,29.2882909 100.82809,35.3331976 102.641853,42 L106,42 C100.00834,18.4385583 78.6589648,2 53.9991832,2 C29.3299624,2 7.9913882,18.4352094 2,42 L5.35796556,42 Z" id="Fill-22" fill="#005585"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

15
src/components/ProfilePage/Certificates.jsx
View File

@@ -11,6 +11,9 @@ import FormControls from './elements/FormControls';
import EditableItemHeader from './elements/EditableItemHeader';
import SwitchContent from './elements/SwitchContent';
// Assets
import microMastersSVG from '../../../assets/micro-masters.svg';
// Selectors
import { certificatesSelector } from '../../selectors/ProfilePageSelector';
@@ -45,9 +48,15 @@ class Certificates extends React.Component {
renderCertificate({
certificateType, courseDisplayName, courseOrganization, downloadUrl,
}) {
const { intl } = this.props;
return (
<Col key={downloadUrl} sm={6}>
<Card className="mb-4 certificate">
<div
className="certificate-type-illustration"
style={{ backgroundImage: `url(${microMastersSVG})` }}
/>
<CardBody>
<CardTitle>
<p className="small mb-0">{certificateType}</p>
@@ -62,11 +71,7 @@ class Certificates extends React.Component {
<h6 className="mb-4">{courseOrganization}</h6>
<div>
<Button outline color="primary" href={downloadUrl} target="blank">
<FormattedMessage
id="profile.view.certificate"
defaultMessage="View Certificate"
description="view certificate button label"
/>
{intl.formatMessage(messages['profile.certificates.view.certificate'])}
</Button>
</div>
</CardBody>

5
src/components/ProfilePage/Certificates.messages.jsx
View File

@@ -6,6 +6,11 @@ const messages = defineMessages({
defaultMessage: 'My Certificates',
description: 'A section of a user profile',
},
'profile.certificates.view.certificate': {
id: 'profile.certificates.view.certificate',
defaultMessage: 'View Certificate',
description: 'A call to action to view a certificate',
},
});
export default messages;

16
src/index.scss
View File

@@ -114,10 +114,26 @@ $fa-font-path: "~font-awesome/fonts";
}
.certificate {
position: relative;
.certificate-title {
font-family: $font-family-serif;
font-weight: 400;
}
.certificate-type-illustration {
position: absolute;
top: 0;
left: 50%;
right: 1rem;
bottom: 0;
// z-index: -1;
opacity: .06;
background-size: 90%;
background-repeat: no-repeat;
background-position: right center;
}
.card-body {
position: relative;
}
}
}