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.

Sign up for GitHub

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 components extending beyond screen dimensions on mobile view #2792

Merged
merged 20 commits into from
Feb 26, 2024
Merged

Fix components extending beyond screen dimensions on mobile view #2792

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
7bc8928
Update styles for ConfirmDialog and PromptDialog components to fix th…
Johnwz123 Feb 19, 2024
0fd2628
Update styles for SICP search bar to fix the issue of extending beyon…
Johnwz123 Feb 19, 2024
25763df
Update Assessment OverviewCard mobile view
Johnwz123 Feb 19, 2024
af81415
Merge branch 'master' of https://github.com/Johnwz123/source-academy-…
Johnwz123 Feb 19, 2024
9d4b785
Fix formatting
Johnwz123 Feb 19, 2024
a18900b
Fix style formatting
sayomaki Feb 19, 2024
1bdc230
Retain right margin for assessment button icon for smaller screens
sayomaki Feb 19, 2024
25542a4
Update test snapshots for Assessment
sayomaki Feb 19, 2024
c53a833
Fix CSS classname implementation
RichDom2185 Feb 19, 2024
9d6ee63
Merge branch 'source-academy:master' into master
Johnwz123 Feb 20, 2024
c688cfe
Added class to SICP search bar component. Updated styling to referenc…
Johnwz123 Feb 20, 2024
036c79c
Removed styling.
Johnwz123 Feb 20, 2024
a34e9bb
Merge branch 'master' into master
RichDom2185 Feb 21, 2024
a511e0c
Merge branch 'master' into master
sayomaki Feb 21, 2024
e95cf55
Merge branch 'master' into master
RichDom2185 Feb 23, 2024
3174a1e
Merge branch 'master' into master
RichDom2185 Feb 23, 2024
4b1896f
Merge branch 'master' into master
RichDom2185 Feb 24, 2024
f9bc4e4
Merge branch 'source-academy:master' into master
Johnwz123 Feb 24, 2024
f353fad
Update test snapshots
Johnwz123 Feb 25, 2024
91f976d
Merge branch 'master' into master
RichDom2185 Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions src/commons/assessment/Assessment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
} from '@blueprintjs/core';
import { IconNames } from '@blueprintjs/icons';
import { Tooltip2 } from '@blueprintjs/popover2';
import classNames from 'classnames';
import { sortBy } from 'lodash';
import * as React from 'react';
import { useDispatch } from 'react-redux';
Expand Down Expand Up @@ -100,7 +101,7 @@ const Assessment: React.FC<AssessmentProps> = props => {
// tslint:disable-next-line:jsx-no-lambda
onClick={() => setBetchaAssessment(overview)}
>
<span className="custom-hidden-xxxs">Finalize</span>
<span>Finalize</span>
<span className="custom-hidden-xxs"> Submission</span>
</Button>
);
Expand Down Expand Up @@ -149,10 +150,8 @@ const Assessment: React.FC<AssessmentProps> = props => {
dispatch(acknowledgeNotifications(filterNotificationsByAssessment(overview.id)))
}
>
<span className="custom-hidden-xxxs" data-testid="Assessment-Attempt-Button">
{label}
</span>
<span className="custom-hidden-xxs">{optionalLabel}</span>
<span data-testid="Assessment-Attempt-Button">{label}</span>
<span className="custom-hidden-xxxs">{optionalLabel}</span>
</Button>
</NavLink>
);
Expand All @@ -175,11 +174,10 @@ const Assessment: React.FC<AssessmentProps> = props => {
) => {
const showGrade =
overview.gradingStatus === 'graded' || !props.assessmentConfiguration.isManuallyGraded;
const ratio = isMobileBreakpoint ? 5 : 3;
return (
<div key={index}>
<Card className="row listing" elevation={Elevation.ONE}>
<div className={`col-xs-${String(ratio)} listing-picture`}>
<div className={classNames('listing-picture', !isMobileBreakpoint && 'col-xs-3')}>
<NotificationBadge
className="badge"
notificationFilter={filterNotificationsByAssessment(overview.id)}
Expand All @@ -191,7 +189,7 @@ const Assessment: React.FC<AssessmentProps> = props => {
src={overview.coverImage ? overview.coverImage : defaultCoverImage}
/>
</div>
<div className={`col-xs-${String(12 - ratio)} listing-text`}>
<div className={classNames('listing-text', !isMobileBreakpoint && 'col-xs-9')}>
{makeOverviewCardTitle(overview, index, renderGradingStatus)}
<div className="listing-xp">
<H6>
Expand Down
39 changes: 11 additions & 28 deletions src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,9 +194,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
<span
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
>
<span>
Finalize
</span>
<span
Expand Down Expand Up @@ -376,9 +374,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
<span
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
>
<span>
Finalize
</span>
<span
Expand Down Expand Up @@ -498,13 +494,12 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
data-testid="Assessment-Attempt-Button"
>
Continue
</span>
<span
className="custom-hidden-xxs"
className="custom-hidden-xxxs"
>
Attempt
</span>
Expand Down Expand Up @@ -576,9 +571,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
<span
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
>
<span>
Finalize
</span>
<span
Expand Down Expand Up @@ -705,13 +698,12 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
data-testid="Assessment-Attempt-Button"
>
Review
</span>
<span
className="custom-hidden-xxs"
className="custom-hidden-xxxs"
>
Attempt
</span>
Expand Down Expand Up @@ -931,9 +923,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
<span
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
>
<span>
Finalize
</span>
<span
Expand Down Expand Up @@ -1007,13 +997,12 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
data-testid="Assessment-Attempt-Button"
>
Attempt
</span>
<span
className="custom-hidden-xxs"
className="custom-hidden-xxxs"
/>
</span>
</button>
Expand Down Expand Up @@ -1112,9 +1101,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
<span
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
>
<span>
Finalize
</span>
<span
Expand Down Expand Up @@ -1198,13 +1185,12 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
data-testid="Assessment-Attempt-Button"
>
Continue
</span>
<span
className="custom-hidden-xxs"
className="custom-hidden-xxxs"
>
Attempt
</span>
Expand Down Expand Up @@ -1264,9 +1250,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
<span
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
>
<span>
Finalize
</span>
<span
Expand Down Expand Up @@ -1357,13 +1341,12 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
className="bp5-button-text"
>
<span
className="custom-hidden-xxxs"
data-testid="Assessment-Attempt-Button"
>
Review
</span>
<span
className="custom-hidden-xxs"
className="custom-hidden-xxxs"
>
Attempt
</span>
Expand Down
1 change: 1 addition & 0 deletions src/commons/navigationBar/subcomponents/SicpNavigationBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,7 @@ const SicpNavigationBar: React.FC = () => {
return (
<>
<Omnibar
className="sicp-search-bar"
isOpen={isOmnibarOpen}
inputProps={{
disabled: omnibarMode === 'submenu',
Expand Down
6 changes: 6 additions & 0 deletions src/styles/ConfirmDialog.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,10 @@
.large-button:not(:first-of-type) {
margin-top: 0.5em;
}

@media only screen and (max-width: 500px) {
// Set width to 98% when screen width is less than 500px
// 500px is the default width of the component
width: 98%;
}
}
11 changes: 5 additions & 6 deletions src/styles/_academy.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
.custom-hidden-xxxs {
display: none;
}

.listing-button .#{$ns}-button .#{$ns}-icon {
margin-right: 0px;
}
}

@media only screen and (max-width: 768px) {
Expand Down Expand Up @@ -98,17 +94,20 @@
}

.listing {
height: 160px;
height: 300px;
}

.listing-picture {
height: 100%;
height: 50%;
width: 100%;
padding: 0;
}

.listing-text {
padding: 0 0 0 0.5rem;
justify-content: space-between;
height: 50%;
width: 100%;

.#{$ns}-heading {
margin: 0;
Expand Down
7 changes: 7 additions & 0 deletions src/styles/_sicp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,3 +353,10 @@ $sicp-content-lr-padding: 6em;
width: 70% !important;
}
}

.sicp-search-bar {
@media only screen and (max-width: 768px) {
left: 1%;
width: 98%;
}
}