Skip to content

Commit 3abd1c3

Browse files
Johnwz123sayomakiRichDom2185
authored
Fix components extending beyond screen dimensions on mobile view (#2792)
* Update styles for ConfirmDialog and PromptDialog components to fix the issue of extending beyond mobile screen dimensions * Update styles for SICP search bar to fix the issue of extending beyond mobile screen dimensions * Update Assessment OverviewCard mobile view * Fix formatting * Fix style formatting * Retain right margin for assessment button icon for smaller screens * Update test snapshots for Assessment * Fix CSS classname implementation * Use classnames for conditional styling * Replace unnecessary template literal with strings * Added class to SICP search bar component. Updated styling to reference new class. * Removed styling. * Update test snapshots --------- Co-authored-by: sayomaki <sayomayomaki@gmail.com> Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
1 parent 36e6352 commit 3abd1c3

File tree

7 files changed

+49
-54
lines changed

7 files changed

+49
-54
lines changed

‎src/commons/assessment/Assessment.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
} from '@blueprintjs/core';
1919
import { IconNames } from '@blueprintjs/icons';
2020
import { Tooltip2 } from '@blueprintjs/popover2';
21+
import classNames from 'classnames';
2122
import { sortBy } from 'lodash';
2223
import React, { useMemo, useState } from 'react';
2324
import { useDispatch } from 'react-redux';
@@ -91,7 +92,7 @@ const Assessment: React.FC<AssessmentProps> = props => {
9192
// tslint:disable-next-line:jsx-no-lambda
9293
onClick={() => setBetchaAssessment(overview)}
9394
>
94-
<span className="custom-hidden-xxxs">Finalize</span>
95+
<span>Finalize</span>
9596
<span className="custom-hidden-xxs"> Submission</span>
9697
</Button>
9798
);
@@ -140,10 +141,8 @@ const Assessment: React.FC<AssessmentProps> = props => {
140141
dispatch(acknowledgeNotifications(filterNotificationsByAssessment(overview.id)))
141142
}
142143
>
143-
<span className="custom-hidden-xxxs" data-testid="Assessment-Attempt-Button">
144-
{label}
145-
</span>
146-
<span className="custom-hidden-xxs">{optionalLabel}</span>
144+
<span data-testid="Assessment-Attempt-Button">{label}</span>
145+
<span className="custom-hidden-xxxs">{optionalLabel}</span>
147146
</Button>
148147
</NavLink>
149148
);
@@ -166,11 +165,10 @@ const Assessment: React.FC<AssessmentProps> = props => {
166165
) => {
167166
const showGrade =
168167
overview.gradingStatus === 'graded' || !props.assessmentConfiguration.isManuallyGraded;
169-
const ratio = isMobileBreakpoint ? 5 : 3;
170168
return (
171169
<div key={index}>
172170
<Card className="row listing" elevation={Elevation.ONE}>
173-
<div className={`col-xs-${String(ratio)} listing-picture`}>
171+
<div className={classNames('listing-picture', !isMobileBreakpoint && 'col-xs-3')}>
174172
<NotificationBadge
175173
className="badge"
176174
notificationFilter={filterNotificationsByAssessment(overview.id)}
@@ -182,7 +180,7 @@ const Assessment: React.FC<AssessmentProps> = props => {
182180
src={overview.coverImage ? overview.coverImage : defaultCoverImage}
183181
/>
184182
</div>
185-
<div className={`col-xs-${String(12 - ratio)} listing-text`}>
183+
<div className={classNames('listing-text', !isMobileBreakpoint && 'col-xs-9')}>
186184
{makeOverviewCardTitle(overview, index, renderGradingStatus)}
187185
<div className="listing-xp">
188186
<H6>

‎src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap‎

Lines changed: 23 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
139139
className="row listing bp5-card bp5-elevation-1"
140140
>
141141
<div
142-
className="col-xs-3 listing-picture"
142+
className="listing-picture col-xs-3"
143143
>
144144
<img
145145
alt="Assessment"
@@ -148,7 +148,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
148148
/>
149149
</div>
150150
<div
151-
className="col-xs-9 listing-text"
151+
className="listing-text col-xs-9"
152152
>
153153
<div
154154
className="listing-header"
@@ -194,9 +194,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
194194
<span
195195
className="bp5-button-text"
196196
>
197-
<span
198-
className="custom-hidden-xxxs"
199-
>
197+
<span>
200198
Finalize
201199
</span>
202200
<span
@@ -321,7 +319,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
321319
className="row listing bp5-card bp5-elevation-1"
322320
>
323321
<div
324-
className="col-xs-3 listing-picture"
322+
className="listing-picture col-xs-3"
325323
>
326324
<img
327325
alt="Assessment"
@@ -330,7 +328,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
330328
/>
331329
</div>
332330
<div
333-
className="col-xs-9 listing-text"
331+
className="listing-text col-xs-9"
334332
>
335333
<div
336334
className="listing-header"
@@ -376,9 +374,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
376374
<span
377375
className="bp5-button-text"
378376
>
379-
<span
380-
className="custom-hidden-xxxs"
381-
>
377+
<span>
382378
Finalize
383379
</span>
384380
<span
@@ -498,13 +494,12 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
498494
className="bp5-button-text"
499495
>
500496
<span
501-
className="custom-hidden-xxxs"
502497
data-testid="Assessment-Attempt-Button"
503498
>
504499
Continue
505500
</span>
506501
<span
507-
className="custom-hidden-xxs"
502+
className="custom-hidden-xxxs"
508503
>
509504
Attempt
510505
</span>
@@ -521,7 +516,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
521516
className="row listing bp5-card bp5-elevation-1"
522517
>
523518
<div
524-
className="col-xs-3 listing-picture"
519+
className="listing-picture col-xs-3"
525520
>
526521
<img
527522
alt="Assessment"
@@ -530,7 +525,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
530525
/>
531526
</div>
532527
<div
533-
className="col-xs-9 listing-text"
528+
className="listing-text col-xs-9"
534529
>
535530
<div
536531
className="listing-header"
@@ -576,9 +571,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
576571
<span
577572
className="bp5-button-text"
578573
>
579-
<span
580-
className="custom-hidden-xxxs"
581-
>
574+
<span>
582575
Finalize
583576
</span>
584577
<span
@@ -705,13 +698,12 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
705698
className="bp5-button-text"
706699
>
707700
<span
708-
className="custom-hidden-xxxs"
709701
data-testid="Assessment-Attempt-Button"
710702
>
711703
Review
712704
</span>
713705
<span
714-
className="custom-hidden-xxs"
706+
className="custom-hidden-xxxs"
715707
>
716708
Attempt
717709
</span>
@@ -888,7 +880,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
888880
className="row listing bp5-card bp5-elevation-1"
889881
>
890882
<div
891-
className="col-xs-3 listing-picture"
883+
className="listing-picture col-xs-3"
892884
>
893885
<img
894886
alt="Assessment"
@@ -897,7 +889,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
897889
/>
898890
</div>
899891
<div
900-
className="col-xs-9 listing-text"
892+
className="listing-text col-xs-9"
901893
>
902894
<div
903895
className="listing-header"
@@ -931,9 +923,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
931923
<span
932924
className="bp5-button-text"
933925
>
934-
<span
935-
className="custom-hidden-xxxs"
936-
>
926+
<span>
937927
Finalize
938928
</span>
939929
<span
@@ -1007,13 +997,12 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
1007997
className="bp5-button-text"
1008998
>
1009999
<span
1010-
className="custom-hidden-xxxs"
10111000
data-testid="Assessment-Attempt-Button"
10121001
>
10131002
Attempt
10141003
</span>
10151004
<span
1016-
className="custom-hidden-xxs"
1005+
className="custom-hidden-xxxs"
10171006
/>
10181007
</span>
10191008
</button>
@@ -1069,7 +1058,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
10691058
className="row listing bp5-card bp5-elevation-1"
10701059
>
10711060
<div
1072-
className="col-xs-3 listing-picture"
1061+
className="listing-picture col-xs-3"
10731062
>
10741063
<img
10751064
alt="Assessment"
@@ -1078,7 +1067,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
10781067
/>
10791068
</div>
10801069
<div
1081-
className="col-xs-9 listing-text"
1070+
className="listing-text col-xs-9"
10821071
>
10831072
<div
10841073
className="listing-header"
@@ -1112,9 +1101,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
11121101
<span
11131102
className="bp5-button-text"
11141103
>
1115-
<span
1116-
className="custom-hidden-xxxs"
1117-
>
1104+
<span>
11181105
Finalize
11191106
</span>
11201107
<span
@@ -1198,13 +1185,12 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
11981185
className="bp5-button-text"
11991186
>
12001187
<span
1201-
className="custom-hidden-xxxs"
12021188
data-testid="Assessment-Attempt-Button"
12031189
>
12041190
Continue
12051191
</span>
12061192
<span
1207-
className="custom-hidden-xxs"
1193+
className="custom-hidden-xxxs"
12081194
>
12091195
Attempt
12101196
</span>
@@ -1221,7 +1207,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
12211207
className="row listing bp5-card bp5-elevation-1"
12221208
>
12231209
<div
1224-
className="col-xs-3 listing-picture"
1210+
className="listing-picture col-xs-3"
12251211
>
12261212
<img
12271213
alt="Assessment"
@@ -1230,7 +1216,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
12301216
/>
12311217
</div>
12321218
<div
1233-
className="col-xs-9 listing-text"
1219+
className="listing-text col-xs-9"
12341220
>
12351221
<div
12361222
className="listing-header"
@@ -1264,9 +1250,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
12641250
<span
12651251
className="bp5-button-text"
12661252
>
1267-
<span
1268-
className="custom-hidden-xxxs"
1269-
>
1253+
<span>
12701254
Finalize
12711255
</span>
12721256
<span
@@ -1357,13 +1341,12 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
13571341
className="bp5-button-text"
13581342
>
13591343
<span
1360-
className="custom-hidden-xxxs"
13611344
data-testid="Assessment-Attempt-Button"
13621345
>
13631346
Review
13641347
</span>
13651348
<span
1366-
className="custom-hidden-xxs"
1349+
className="custom-hidden-xxxs"
13671350
>
13681351
Attempt
13691352
</span>

‎src/commons/navigationBar/subcomponents/SicpNavigationBar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,7 @@ const SicpNavigationBar: React.FC = () => {
369369
return (
370370
<>
371371
<Omnibar
372+
className="sicp-search-bar"
372373
isOpen={isOmnibarOpen}
373374
inputProps={{
374375
disabled: omnibarMode === 'submenu',

‎src/commons/navigationBar/subcomponents/__tests__/__snapshots__/SicpNavigationBar.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
exports[`Navbar renders correctly 1`] = `
44
<React.Fragment>
55
<Blueprint5.Omnibar
6+
className="sicp-search-bar"
67
inputProps={
78
Object {
89
"disabled": false,

‎src/styles/ConfirmDialog.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,10 @@
22
.large-button:not(:first-of-type) {
33
margin-top: 0.5em;
44
}
5+
6+
@media only screen and (max-width: 500px) {
7+
// Set width to 98% when screen width is less than 500px
8+
// 500px is the default width of the component
9+
width: 98%;
10+
}
511
}

‎src/styles/_academy.scss‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
.custom-hidden-xxxs {
33
display: none;
44
}
5-
6-
.listing-button .#{$ns}-button .#{$ns}-icon {
7-
margin-right: 0px;
8-
}
95
}
106

117
@media only screen and (max-width: 768px) {
@@ -98,17 +94,20 @@
9894
}
9995

10096
.listing {
101-
height: 160px;
97+
height: 300px;
10298
}
10399

104100
.listing-picture {
105-
height: 100%;
101+
height: 50%;
102+
width: 100%;
106103
padding: 0;
107104
}
108105

109106
.listing-text {
110107
padding: 0 0 0 0.5rem;
111108
justify-content: space-between;
109+
height: 50%;
110+
width: 100%;
112111

113112
.#{$ns}-heading {
114113
margin: 0;

‎src/styles/_sicp.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -353,3 +353,10 @@ $sicp-content-lr-padding: 6em;
353353
width: 70% !important;
354354
}
355355
}
356+
357+
.sicp-search-bar {
358+
@media only screen and (max-width: 768px) {
359+
left: 1%;
360+
width: 98%;
361+
}
362+
}

0 commit comments

Comments
 (0)