From 7bc892899142ed2c865f19c8e22487669dd11e5e Mon Sep 17 00:00:00 2001 From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com> Date: Mon, 19 Feb 2024 20:11:46 +0800 Subject: [PATCH 01/11] Update styles for ConfirmDialog and PromptDialog components to fix the issue of extending beyond mobile screen dimensions --- src/styles/_dialogs.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/styles/_dialogs.scss b/src/styles/_dialogs.scss index ace8b4e36f..e10a43e501 100644 --- a/src/styles/_dialogs.scss +++ b/src/styles/_dialogs.scss @@ -2,4 +2,18 @@ .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%; + } +} + +.PromptDialog { + @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%; + } } From 0fd2628da91bcbd030a4008eb6a8b98b690379de Mon Sep 17 00:00:00 2001 From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com> Date: Mon, 19 Feb 2024 20:12:57 +0800 Subject: [PATCH 02/11] Update styles for SICP search bar to fix the issue of extending beyond mobile screen dimensions --- src/styles/_sicp.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss index fad2be9a58..d458468715 100644 --- a/src/styles/_sicp.scss +++ b/src/styles/_sicp.scss @@ -353,3 +353,10 @@ $sicp-content-lr-padding: 6em; width: 70% !important; } } + +.bp4-omnibar { + @media only screen and (max-width: 768px) { + left: 1%; + width: 98%; + } +} \ No newline at end of file From 25763dfc35a4c8c9525ec80dc1942a1f641f8154 Mon Sep 17 00:00:00 2001 From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com> Date: Mon, 19 Feb 2024 20:20:27 +0800 Subject: [PATCH 03/11] Update Assessment OverviewCard mobile view --- src/commons/assessment/Assessment.tsx | 11 +++++------ src/styles/_academy.scss | 7 +++++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/commons/assessment/Assessment.tsx b/src/commons/assessment/Assessment.tsx index e125db0eca..48f003e068 100644 --- a/src/commons/assessment/Assessment.tsx +++ b/src/commons/assessment/Assessment.tsx @@ -100,7 +100,7 @@ const Assessment: React.FC = props => { // tslint:disable-next-line:jsx-no-lambda onClick={() => setBetchaAssessment(overview)} > - Finalize + Finalize Submission ); @@ -149,10 +149,10 @@ const Assessment: React.FC = props => { dispatch(acknowledgeNotifications(filterNotificationsByAssessment(overview.id))) } > - + {label} - {optionalLabel} + {optionalLabel} ); @@ -175,11 +175,10 @@ const Assessment: React.FC = props => { ) => { const showGrade = overview.gradingStatus === 'graded' || !props.assessmentConfiguration.isManuallyGraded; - const ratio = isMobileBreakpoint ? 5 : 3; return (
-
+
= props => { src={overview.coverImage ? overview.coverImage : defaultCoverImage} />
-
+
{makeOverviewCardTitle(overview, index, renderGradingStatus)}
diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss index 47038b3755..f768cda28b 100644 --- a/src/styles/_academy.scss +++ b/src/styles/_academy.scss @@ -118,17 +118,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; From 9d4b7859ea2bddca397603b61e7ec6a5ac37d344 Mon Sep 17 00:00:00 2001 From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com> Date: Mon, 19 Feb 2024 21:28:46 +0800 Subject: [PATCH 04/11] Fix formatting --- src/commons/assessment/Assessment.tsx | 8 +++----- src/styles/_academy.scss | 7 ++----- src/styles/_sicp.scss | 2 +- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/commons/assessment/Assessment.tsx b/src/commons/assessment/Assessment.tsx index 48f003e068..252d9b85af 100644 --- a/src/commons/assessment/Assessment.tsx +++ b/src/commons/assessment/Assessment.tsx @@ -149,9 +149,7 @@ const Assessment: React.FC = props => { dispatch(acknowledgeNotifications(filterNotificationsByAssessment(overview.id))) } > - - {label} - + {label} {optionalLabel} @@ -178,7 +176,7 @@ const Assessment: React.FC = props => { return (
-
+
= props => { src={overview.coverImage ? overview.coverImage : defaultCoverImage} />
-
+
{makeOverviewCardTitle(overview, index, renderGradingStatus)}
diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss index 8e52fa577d..c958869ded 100644 --- a/src/styles/_academy.scss +++ b/src/styles/_academy.scss @@ -412,11 +412,8 @@ height: 100px; background-color: #f5f5f5; border-radius: 3px; - box-shadow: - 0 0 0 0 rgb(19 124 189 / 0%), - 0 0 0 0 rgb(19 124 189 / 0%), - inset 0 0 0 1px rgb(16 22 26 / 15%), - inset 0 1px 1px rgb(16 22 26 / 20%); + box-shadow: 0 0 0 0 rgb(19 124 189 / 0%), 0 0 0 0 rgb(19 124 189 / 0%), + inset 0 0 0 1px rgb(16 22 26 / 15%), inset 0 1px 1px rgb(16 22 26 / 20%); overflow: auto; text-align: left; } diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss index a30e8bc0ca..270cef313b 100644 --- a/src/styles/_sicp.scss +++ b/src/styles/_sicp.scss @@ -359,4 +359,4 @@ $sicp-content-lr-padding: 6em; left: 1%; width: 98%; } -} \ No newline at end of file +} From a18900b495441e2eb87e4c1676ad00dc87d4e1f1 Mon Sep 17 00:00:00 2001 From: sayomaki Date: Mon, 19 Feb 2024 22:26:21 +0800 Subject: [PATCH 05/11] Fix style formatting --- src/styles/_academy.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss index c958869ded..8e52fa577d 100644 --- a/src/styles/_academy.scss +++ b/src/styles/_academy.scss @@ -412,8 +412,11 @@ height: 100px; background-color: #f5f5f5; border-radius: 3px; - box-shadow: 0 0 0 0 rgb(19 124 189 / 0%), 0 0 0 0 rgb(19 124 189 / 0%), - inset 0 0 0 1px rgb(16 22 26 / 15%), inset 0 1px 1px rgb(16 22 26 / 20%); + box-shadow: + 0 0 0 0 rgb(19 124 189 / 0%), + 0 0 0 0 rgb(19 124 189 / 0%), + inset 0 0 0 1px rgb(16 22 26 / 15%), + inset 0 1px 1px rgb(16 22 26 / 20%); overflow: auto; text-align: left; } From 1bdc230ad29e48279ab69906b5b1fff6a9f2cd23 Mon Sep 17 00:00:00 2001 From: sayomaki Date: Mon, 19 Feb 2024 22:58:03 +0800 Subject: [PATCH 06/11] Retain right margin for assessment button icon for smaller screens --- src/styles/_academy.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss index 8e52fa577d..0015ff7b19 100644 --- a/src/styles/_academy.scss +++ b/src/styles/_academy.scss @@ -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) { From 25542a490d34fe4ba9654c7c489a20c942669098 Mon Sep 17 00:00:00 2001 From: sayomaki Date: Mon, 19 Feb 2024 23:06:59 +0800 Subject: [PATCH 07/11] Update test snapshots for Assessment --- .../__snapshots__/Assessment.tsx.snap | 39 ++++++------------- 1 file changed, 11 insertions(+), 28 deletions(-) diff --git a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap index da6332ea4a..8f0ccda234 100644 --- a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap +++ b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap @@ -194,9 +194,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f - + Finalize - + Finalize Continue Attempt @@ -576,9 +571,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f - + Finalize Review Attempt @@ -931,9 +923,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = ` - + Finalize Attempt @@ -1112,9 +1101,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = ` - + Finalize Continue Attempt @@ -1264,9 +1250,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = ` - + Finalize Review Attempt From c53a833a68e89135496f8810a5217cf0bfbaec94 Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Tue, 20 Feb 2024 03:29:55 +0800 Subject: [PATCH 08/11] Fix CSS classname implementation * Use classnames for conditional styling * Replace unnecessary template literal with strings --- src/commons/assessment/Assessment.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/commons/assessment/Assessment.tsx b/src/commons/assessment/Assessment.tsx index 252d9b85af..286566cd6b 100644 --- a/src/commons/assessment/Assessment.tsx +++ b/src/commons/assessment/Assessment.tsx @@ -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'; @@ -176,7 +177,7 @@ const Assessment: React.FC = props => { return (
-
+
= props => { src={overview.coverImage ? overview.coverImage : defaultCoverImage} />
-
+
{makeOverviewCardTitle(overview, index, renderGradingStatus)}
From c688cfefb1b57ae8baf30aae83f6ccc8de9e261e Mon Sep 17 00:00:00 2001 From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com> Date: Tue, 20 Feb 2024 20:08:59 +0800 Subject: [PATCH 09/11] Added class to SICP search bar component. Updated styling to reference new class. --- src/commons/navigationBar/subcomponents/SicpNavigationBar.tsx | 1 + src/styles/_sicp.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/commons/navigationBar/subcomponents/SicpNavigationBar.tsx b/src/commons/navigationBar/subcomponents/SicpNavigationBar.tsx index adf9a47aaa..204c0a51be 100644 --- a/src/commons/navigationBar/subcomponents/SicpNavigationBar.tsx +++ b/src/commons/navigationBar/subcomponents/SicpNavigationBar.tsx @@ -369,6 +369,7 @@ const SicpNavigationBar: React.FC = () => { return ( <> Date: Tue, 20 Feb 2024 20:10:32 +0800 Subject: [PATCH 10/11] Removed styling. --- src/styles/ConfirmDialog.module.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/styles/ConfirmDialog.module.scss b/src/styles/ConfirmDialog.module.scss index e10a43e501..152e4311d3 100644 --- a/src/styles/ConfirmDialog.module.scss +++ b/src/styles/ConfirmDialog.module.scss @@ -9,11 +9,3 @@ width: 98%; } } - -.PromptDialog { - @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%; - } -} From f353fad3840d47bb10f23d68b42ea536da3ab31c Mon Sep 17 00:00:00 2001 From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com> Date: Sun, 25 Feb 2024 11:54:37 +0800 Subject: [PATCH 11/11] Update test snapshots --- .../__snapshots__/Assessment.tsx.snap | 24 +++++++++---------- .../__snapshots__/SicpNavigationBar.tsx.snap | 1 + 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap index 8f0ccda234..d766ce1df5 100644 --- a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap +++ b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap @@ -139,7 +139,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f className="row listing bp5-card bp5-elevation-1" >
Assessment
Assessment
Assessment
Assessment
Assessment
Assessment