Skip to content

Commit

Permalink
fix: fixed reponsiveness issues on mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@eemaanamir
eemaanamir committed Nov 21, 2024
1 parent c025310 commit c24af09
Show file tree
Hide file tree
Showing 5 changed files with 186 additions and 70 deletions.
53 changes: 44 additions & 9 deletions src/profile-v2/CertificateCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import { Hyperlink } from '@openedx/paragon';
import { breakpoints, Hyperlink, useWindowSize } from '@openedx/paragon';
import get from 'lodash.get';

import classNames from 'classnames';
import professionalCertificateSVG from './assets/professional-certificate.svg';
import verifiedCertificateSVG from './assets/verified-certificate.svg';
import messages from './Certificates.messages';
Expand All @@ -27,6 +28,8 @@ const CertificateCard = ({
audit: null,
}[certificateType] || null;

const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;

return (
<div
key={`${modifiedDate}-${courseId}`}
Expand All @@ -37,24 +40,47 @@ const CertificateCard = ({
className="certificate-type-illustration"
style={{ backgroundImage: `url(${certificateIllustration})` }}
/>
<div className="d-flex flex-column position-relative p-0 width-19625rem">
<div className={classNames(
'd-flex flex-column position-relative p-0',
{ 'max-width-19rem': isMobileView },
{ 'width-19625rem': !isMobileView },
)}
>
<div className="w-100 color-black">
<p className="small mb-0 font-weight-normal">
<p className={classNames([
'mb-0 font-weight-normal',
isMobileView ? 'x-small' : 'small',
])}
>
{intl.formatMessage(get(
messages,
`profile.certificates.types.${certificateType}`,
messages['profile.certificates.types.unknown'],
))}
</p>
<h4 className="m-0 color-black">{courseDisplayName}</h4>
<p className="small mb-0">
<p className={classNames([
'm-0 color-black',
isMobileView ? 'h5' : 'h4',
])}
>
{courseDisplayName}
</p>
<p className={classNames([
'mb-0',
isMobileView ? 'x-small' : 'small',
])}
>
<FormattedMessage
id="profile.certificate.organization.label"
defaultMessage="From"
/>
</p>
<h5 className="mb-0 color-black">{courseOrganization}</h5>
<p className="small mb-0">
<p className={classNames([
'mb-0',
isMobileView ? 'x-small' : 'small',
])}
>
<FormattedMessage
id="profile.certificate.completion.date.label"
defaultMessage="Completed on {date}"
Expand All @@ -69,12 +95,20 @@ const CertificateCard = ({
destination={downloadUrl}
target="_blank"
showLaunchIcon={false}
className="btn btn-primary btn-rounded font-weight-normal px-4 py-0625rem"
className={classNames(
'btn btn-primary btn-rounded font-weight-normal px-4 py-0625rem',
{ 'btn-sm': isMobileView },
)}
>
{intl.formatMessage(messages['profile.certificates.view.certificate'])}
</Hyperlink>
</div>
<p className="small mb-0 pt-3">
<p
className={classNames([
'mb-0 pt-3',
isMobileView ? 'x-small' : 'small',
])}
>
<FormattedMessage
id="profile.certificate.uuid"
defaultMessage="Credential ID {certificate_uuid}"
Expand All @@ -91,7 +125,8 @@ const CertificateCard = ({

CertificateCard.propTypes = {
certificateType: PropTypes.string,
courseDisplayName: PropTypes.string,
courseDisplayName:
PropTypes.string,
courseOrganization: PropTypes.string,
modifiedDate: PropTypes.string,
downloadUrl: PropTypes.string,
Expand Down
98 changes: 58 additions & 40 deletions src/profile-v2/Certificates.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,53 +4,71 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { connect } from 'react-redux';
import { getConfig } from '@edx/frontend-platform';

import classNames from 'classnames';
import { breakpoints, useWindowSize } from '@openedx/paragon';
import CertificateCard from './CertificateCard';
import { certificatesSelector } from './data/selectors';

const Certificates = ({ certificates }) => (
<div>
<div className="col justify-content-start align-items-start g-5rem p-0">
<div className="col align-self-stretch height-2625rem justify-content-start align-items-start p-0">
<h2 className="font-weight-bold text-primary-500 m-0">
<FormattedMessage
id="profile.your.certificates"
defaultMessage="Your certificates"
description="heading for the certificates section"
/>
</h2>
const Certificates = ({ certificates }) => {
const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
const isTabletView = useWindowSize().width <= breakpoints.medium.minWidth;
return (
<div>
<div className="col justify-content-start align-items-start g-5rem p-0">
<div className="col align-self-stretch height-2625rem justify-content-start align-items-start p-0">
<p className={classNames([
'font-weight-bold text-primary-500 m-0',
isMobileView ? 'h3' : 'h2',
])}
>
<FormattedMessage
id="profile.your.certificates"
defaultMessage="Your certificates"
description="heading for the certificates section"
/>
</p>
</div>
<div className="col justify-content-start align-items-start pt-2 p-0">
<p className={classNames([
'font-weight-normal text-gray-800 m-0 p-0',
isMobileView ? 'h5' : 'p',
])}
>
<FormattedMessage
id="profile.certificates.description"
defaultMessage="Your learner records information is only visible to you. Only your username is visible to others on {siteName}."
description="description of the certificates section"
values={{
siteName: getConfig().SITE_NAME,
}}
/>
</p>
</div>
</div>
<div className="col justify-content-start align-items-start pt-2 p-0">
<p className="font-weight-normal text-gray-800 m-0 p-0">
{certificates?.length > 0 ? (
<div className="col">
<div className={classNames(
'row align-items-center pt-5 g-3rem',
{ 'justify-content-center': isTabletView },
)}
>
{certificates.map(certificate => (
<CertificateCard key={certificate.courseId} {...certificate} />
))}
</div>
</div>
) : (
<div className="pt-5">
<FormattedMessage
id="profile.certificates.description"
defaultMessage="Your learner records information is only visible to you. Only your username is visible to others on {siteName}."
description="description of the certificates section"
values={{
siteName: getConfig().SITE_NAME,
}}
id="profile.no.certificates"
defaultMessage="You don't have any certificates yet."
description="displays when user has no course completion certificates"
/>
</p>
</div>
</div>
{certificates?.length > 0 ? (
<div className="col">
<div className="row align-items-center pt-5 g-3rem">
{certificates.map(certificate => (
<CertificateCard key={certificate.courseId} {...certificate} />
))}
</div>
</div>
) : (
<div className="pt-5">
<FormattedMessage
id="profile.no.certificates"
defaultMessage="You don't have any certificates yet."
description="displays when user has no course completion certificates"
/>
</div>
)}
</div>
);
)}
</div>
);
};

Certificates.propTypes = {
certificates: PropTypes.arrayOf(PropTypes.shape({
Expand Down
69 changes: 60 additions & 9 deletions src/profile-v2/ProfilePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
import { ensureConfig, getConfig } from '@edx/frontend-platform';
import { AppContext } from '@edx/frontend-platform/react';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Alert, Hyperlink } from '@openedx/paragon';
import {
Alert,
Hyperlink,
breakpoints,
useWindowSize,
} from '@openedx/paragon';
import classNames from 'classnames';
import {
fetchProfile,
saveProfilePhoto,
Expand Down Expand Up @@ -42,6 +48,8 @@ const ProfilePage = ({ params }) => {
} = useSelector(profilePageSelector);

const [viewMyRecordsUrl, setViewMyRecordsUrl] = useState(null);
const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
const isTabletView = useWindowSize().width <= breakpoints.medium.minWidth;

useEffect(() => {
const { CREDENTIALS_BASE_URL } = context.config;
Expand Down Expand Up @@ -81,7 +89,10 @@ const ProfilePage = ({ params }) => {

return (
<Hyperlink
className="btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap"
className={classNames(
'btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap',
{ 'btn-sm': isMobileView },
)}
target="_blank"
showLaunchIcon={false}
destination={viewMyRecordsUrl}
Expand Down Expand Up @@ -109,10 +120,21 @@ const ProfilePage = ({ params }) => {
<PageLoading srMessage={intl.formatMessage(messages['profile.loading'])} />
) : (
<>
<div className="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100">
<div
className={classNames(
'profile-page-bg-banner bg-primary d-md-block align-items-center py-4rem h-100 w-100',
{ 'px-4.5': isMobileView },
{ 'px-75rem': !isMobileView },
)}
>
<div className="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75">
<div className="col h-100 w-100 py-4 px-0 justify-content-start g-15rem">
<div className="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem">
<div
className={classNames([
'row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem',
isMobileView || isTabletView ? 'flex-column' : 'flex-row',
])}
>
<ProfileAvatar
className="col p-0"
src={profileImage.src}
Expand All @@ -122,17 +144,46 @@ const ProfilePage = ({ params }) => {
savePhotoState={savePhotoState}
isEditable={isAuthenticatedUserProfile() && !requiresParentalConsent}
/>
<div className="col justify-content-start align-items-start h-100 w-100 m-0 p-0">
<h1 className="row h3 m-0 font-weight-bold text-truncate text-primary-500">{params.username}</h1>
<div
className={classNames([
'col h-100 w-100 m-0 p-0',
isMobileView || isTabletView
? 'd-flex flex-column justify-content-center align-items-center'
: 'justify-content-start align-items-start',
])}
>
<p className={classNames([
'row m-0 font-weight-bold text-truncate text-primary-500',
isMobileView ? 'h4' : 'h3',
])}
>
{params.username}
</p>
{isBlockVisible(name) && (
<p className="row pt-2 text-gray-800 font-weight-normal m-0">{name}</p>
<p className={classNames([
'row pt-2 text-gray-800 font-weight-normal m-0',
isMobileView ? 'h5' : 'p',
])}
>
{name}
</p>
)}
<div className={classNames(
'row pt-2 m-0',
isMobileView
? 'd-flex justify-content-center align-items-center flex-column'
: 'g-1rem',
)}
<div className="row pt-2 m-0 g-1rem">
>
<DateJoined date={dateJoined} />
<UserCertificateSummary count={courseCertificates.length} />
</div>
</div>
<div className="col-auto p-0">
<div className={classNames([
'p-0 ',
isMobileView || isTabletView ? 'col d-flex justify-content-center' : 'col-auto',
])}
>
{renderViewMyRecordsButton()}
</div>
</div>
Expand Down
33 changes: 21 additions & 12 deletions src/profile-v2/UsernameDescription.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
import React from 'react';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import classNames from 'classnames';
import { breakpoints, useWindowSize } from '@openedx/paragon';

const UsernameDescription = () => (
<p className="text-gray-800 font-weight-normal m-0">
<FormattedMessage
id="profile.username.description"
defaultMessage="Your learner records information is only visible to you. Only your username is visible to others on {siteName}."
description="A description of the username field"
values={{
siteName: getConfig().SITE_NAME,
}}
/>
</p>
);
const UsernameDescription = () => {
const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
return (
<p className={classNames([
'text-gray-800 font-weight-normal m-0',
isMobileView ? 'h5' : 'p',
])}
>
<FormattedMessage
id="profile.username.description"
defaultMessage="Your learner records information is only visible to you. Only your username is visible to others on {siteName}."
description="A description of the username field"
values={{
siteName: getConfig().SITE_NAME,
}}
/>
</p>
);
};

export default UsernameDescription;
3 changes: 3 additions & 0 deletions src/profile-v2/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,9 @@
max-width: 32em;
}

.max-width-19rem{
max-width: 19rem;
}
.width-75rem {
width: 75rem;
}
Expand Down

0 comments on commit c24af09

Please sign in to comment.