Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fixed responsiveness issues on mobile view #1133

Open
wants to merge 3 commits into
base: 2u-main
Choose a base branch
from

Conversation

eemaanamir
Copy link

Ticket: INF-1708

Fixed responsiveness issues on mobile and tablet views.

Laptop View 1440px:

localhost_1995_u_edx (1)

Laptop View 1024px:

localhost_1995_u_edx (2)

Tablet View 768px:

localhost_1995_u_edx (3)

Mobile View 425px:

localhost_1995_u_edx (4)

Mobile View 375px:

localhost_1995_u_edx (5)

Mobile View 320px:

localhost_1995_u_edx (6)

@eemaanamir eemaanamir requested a review from a team as a code owner November 21, 2024 08:51
@eemaanamir eemaanamir changed the title fix: fixed reponsiveness issues on mobile view fix: fixed responsiveness issues on mobile view Nov 21, 2024
Copy link

codecov bot commented Nov 21, 2024

Codecov Report

Attention: Patch coverage is 92.30769% with 3 lines in your changes missing coverage. Please review.

Project coverage is 69.25%. Comparing base (cd73616) to head (43b0382).
Report is 2 commits behind head on 2u-main.

Files with missing lines Patch % Lines
src/profile-v2/ProfilePage.jsx 76.92% 2 Missing and 1 partial ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           2u-main    #1133      +/-   ##
===========================================
+ Coverage    67.12%   69.25%   +2.12%     
===========================================
  Files           51       72      +21     
  Lines          864     1210     +346     
  Branches       177      272      +95     
===========================================
+ Hits           580      838     +258     
- Misses         274      357      +83     
- Partials        10       15       +5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.


🚨 Try these New Features:

src/profile-v2/CertificateCard.jsx Show resolved Hide resolved
Comment on lines +61 to +65
<p className={classNames([
'm-0 color-black',
isMobileView ? 'h5' : 'h4',
])}
>
Copy link
Contributor

@sundasnoreen12 sundasnoreen12 Nov 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use this <p className={classNames('m-0 color-black', {
'h5': isMobileView,
'h4': !isMobileView,
})}>

src/profile-v2/CertificateCard.jsx Show resolved Hide resolved
Comment on lines +79 to +83
<p className={classNames([
'mb-0',
isMobileView ? 'x-small' : 'small',
])}
>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above

src/profile-v2/CertificateCard.jsx Outdated Show resolved Hide resolved
Comment on lines +19 to +22
<p className={classNames([
'font-weight-bold text-primary-500 m-0',
isMobileView ? 'h3' : 'h2',
])}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

follow above pattern for classNames and change wherever used

src/profile-v2/Certificates.jsx Outdated Show resolved Hide resolved
src/profile-v2/ProfilePage.jsx Outdated Show resolved Hide resolved
src/profile-v2/ProfilePage.jsx Outdated Show resolved Hide resolved
</p>
);
const UsernameDescription = () => {
const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reuse created hook

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants