From 129bbbef3913c8e1dd274cad971eb41bb544f956 Mon Sep 17 00:00:00 2001 From: Cadecraft Date: Sun, 29 Dec 2024 09:24:26 -0800 Subject: [PATCH 01/16] feat: merge warning into course popover --- site/src/pages/RoadmapPage/Course.scss | 18 +++++++++++++ site/src/pages/RoadmapPage/Course.tsx | 35 +++++++++++++------------- 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/site/src/pages/RoadmapPage/Course.scss b/site/src/pages/RoadmapPage/Course.scss index 831de12c..359eb336 100644 --- a/site/src/pages/RoadmapPage/Course.scss +++ b/site/src/pages/RoadmapPage/Course.scss @@ -43,6 +43,12 @@ align-items: center; } +.course-overlay-trigger-box { + display: flex; + align-items: center; + gap: 5px; +} + .course-delete-btn { padding: 0px; background-color: transparent; @@ -86,6 +92,18 @@ .popover-detail-prefix { font-weight: bold; } + + .popover-detail-warning { + font-size: 14px; + color: red; + gap: 5px; + margin-bottom: 0px; + .popover-detail-warning-icon { + margin-bottom: 4px; + margin-right: 4px; + font-size: 16px; + } + } } .course-footer { diff --git a/site/src/pages/RoadmapPage/Course.tsx b/site/src/pages/RoadmapPage/Course.tsx index 81bf12dd..d368f04d 100644 --- a/site/src/pages/RoadmapPage/Course.tsx +++ b/site/src/pages/RoadmapPage/Course.tsx @@ -58,22 +58,23 @@ const Course: FC = (props) => { Corequisites: {corequisites} )} + {requiredCourses && ( +
+ + + Prerequisite{requiredCourses?.length > 1 ? 's' : ''} Not Met: {requiredCourses?.join(', ')} + +
+ + Already completed? Click "Transfer Credits" at the top of the roadmap viewer to add this prerequisite. + +
+ )} ); - const WarningPopover = ( - - - Prerequisite(s) not met! Missing: {requiredCourses?.join(', ')} -
- Already completed prerequisite(s) at another institution? Click 'Transfer Credits' at the top of the planner to - clear the prerequisite(s). - - - ); - const courseRoute = '/course/' + props.department.replace(/\s+/g, '') + props.courseNumber.replace(/\s+/g, ''); return ( @@ -86,14 +87,12 @@ const Course: FC = (props) => { , {minUnits === maxUnits ? minUnits : `${minUnits}-${maxUnits}`} units - - + + + + {requiredCourses && } + - {requiredCourses && ( - - - - )} {onDelete ? ( From 82498db01622ed73df5455025cdb53b9c1f17e4d Mon Sep 17 00:00:00 2001 From: Cadecraft Date: Sun, 29 Dec 2024 09:37:46 -0800 Subject: [PATCH 02/16] feat: replace info icon with warning icon if issue --- site/src/pages/RoadmapPage/Course.scss | 6 ------ site/src/pages/RoadmapPage/Course.tsx | 8 +++----- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/site/src/pages/RoadmapPage/Course.scss b/site/src/pages/RoadmapPage/Course.scss index 359eb336..b9652e64 100644 --- a/site/src/pages/RoadmapPage/Course.scss +++ b/site/src/pages/RoadmapPage/Course.scss @@ -43,12 +43,6 @@ align-items: center; } -.course-overlay-trigger-box { - display: flex; - align-items: center; - gap: 5px; -} - .course-delete-btn { padding: 0px; background-color: transparent; diff --git a/site/src/pages/RoadmapPage/Course.tsx b/site/src/pages/RoadmapPage/Course.tsx index d368f04d..58de41cc 100644 --- a/site/src/pages/RoadmapPage/Course.tsx +++ b/site/src/pages/RoadmapPage/Course.tsx @@ -66,7 +66,8 @@ const Course: FC = (props) => {
- Already completed? Click "Transfer Credits" at the top of the roadmap viewer to add this prerequisite. + Already completed? Click "Transfer Credits" at the top of the roadmap viewer to add{' '} + {requiredCourses?.length > 1 ? 'these prerequisites' : 'this prerequisite'}. )} @@ -88,10 +89,7 @@ const Course: FC = (props) => { , {minUnits === maxUnits ? minUnits : `${minUnits}-${maxUnits}`} units - - - {requiredCourses && } - + {requiredCourses ? : } {onDelete ? ( From a2dd3790cecd585058e3395b6c7d0ea7ffe044dd Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Thu, 9 Jan 2025 15:15:55 -0800 Subject: [PATCH 03/16] feat: make popover styles conform more to figma --- site/src/App.scss | 12 ++++++ site/src/pages/RoadmapPage/Course.scss | 35 +++++++++++---- site/src/pages/RoadmapPage/Course.tsx | 60 +++++++++++++------------- site/src/style/theme.scss | 3 ++ 4 files changed, 70 insertions(+), 40 deletions(-) diff --git a/site/src/App.scss b/site/src/App.scss index bd2a836e..dc77a5b4 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -43,6 +43,18 @@ button { } } +.ppc-popover { + border-radius: 8px; + padding: 16px; + box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.35); + max-width: 375px; + + .popover-body { + border-radius: 8px; + padding: 0px; + } +} + .ppc-modal { font-size: 18px; diff --git a/site/src/pages/RoadmapPage/Course.scss b/site/src/pages/RoadmapPage/Course.scss index b9652e64..2ec94111 100644 --- a/site/src/pages/RoadmapPage/Course.scss +++ b/site/src/pages/RoadmapPage/Course.scss @@ -60,44 +60,61 @@ } .course-popover { - padding: 5%; - .popover-name { font-weight: bold; color: var(--text-dark); font-size: 16px; } - .popover-units { - color: #c4c4c4; + .popover-subtitle { + font-weight: bold; + } - .popover-units-value { - font-weight: bold; - } + .popover-units { + font-weight: normal; } .popover-description { + font-size: 14px; padding-top: 5%; } .popover-detail { padding-top: 5%; } + .popover-detail-prefix { font-weight: bold; } .popover-detail-warning { font-size: 14px; - color: red; + color: #ce0000; gap: 5px; - margin-bottom: 0px; + margin-bottom: 6px; + .popover-detail-warning-icon { margin-bottom: 4px; margin-right: 4px; font-size: 16px; } } + + .popover-detail-italics { + font-weight: 400; + font-size: 12px; + font-style: italic; + color: var(--petr-gray); + } +} + +[data-theme='dark'] { + .popover-detail-warning { + color: red; + } + .popover-detail-italics { + color: var(--petr-gray); + } } .course-footer { diff --git a/site/src/pages/RoadmapPage/Course.tsx b/site/src/pages/RoadmapPage/Course.tsx index 58de41cc..677f8f24 100644 --- a/site/src/pages/RoadmapPage/Course.tsx +++ b/site/src/pages/RoadmapPage/Course.tsx @@ -37,41 +37,39 @@ const Course: FC = (props) => { removeFromBag, } = props; const CoursePopover = ( - - -
-
- {department + ' ' + courseNumber} {title} + + +
+ {department + ' ' + courseNumber + ' '} + ({minUnits === maxUnits ? minUnits : `${minUnits}-${maxUnits}`} units) +
+
+ {title + ':'} +
+ {description} +
+ {prerequisiteText && ( +
+ Prerequisites: {prerequisiteText}
-
- {minUnits === maxUnits ? minUnits : `${minUnits}-${maxUnits}`}{' '} - units + )} + {corequisites && ( +
+ Corequisites: {corequisites}
-
{description}
- {prerequisiteText && ( -
- Prerequisites: {prerequisiteText} -
- )} - {corequisites && ( -
- Corequisites: {corequisites} + )} + {requiredCourses && ( +
+
+ + Prerequisite{requiredCourses?.length > 1 ? 's' : ''} Not Met: {requiredCourses?.join(', ')}
- )} - {requiredCourses && ( -
- - - Prerequisite{requiredCourses?.length > 1 ? 's' : ''} Not Met: {requiredCourses?.join(', ')} - -
- - Already completed? Click "Transfer Credits" at the top of the roadmap viewer to add{' '} - {requiredCourses?.length > 1 ? 'these prerequisites' : 'this prerequisite'}. - +
+ Already completed? Click "Transfer Credits" at the top of the roadmap viewer to add{' '} + {requiredCourses?.length > 1 ? 'these prerequisites' : 'this prerequisite'}.
- )} -
+
+ )} ); diff --git a/site/src/style/theme.scss b/site/src/style/theme.scss index def312fa..17b7fed8 100644 --- a/site/src/style/theme.scss +++ b/site/src/style/theme.scss @@ -112,6 +112,9 @@ } } +.popover { + background-color: var(--overlay1); +} .popover-body { background-color: var(--overlay1); color: var(--text); From 9cbaa9331abbca61c71b8303ca5c9e638058913c Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Thu, 9 Jan 2025 16:17:03 -0800 Subject: [PATCH 04/16] feat: increase popover arrow size --- site/src/App.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/site/src/App.scss b/site/src/App.scss index dc77a5b4..44ce0420 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -53,6 +53,14 @@ button { border-radius: 8px; padding: 0px; } + + .arrow::after, + .arrow::before { + border-width: 0.8rem 0.8rem 0.8rem; + left: -14px; + top: -4px; /*calc(-4px - 25px);*/ + pointer-events: none; + } } .ppc-modal { From a5b451eb891c3e66b680c175918d5d5ae71da6a2 Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Fri, 10 Jan 2025 09:16:44 -0800 Subject: [PATCH 05/16] fix: correct popover directions with arrows --- site/src/App.scss | 14 +++++++++++--- site/src/pages/RoadmapPage/Course.tsx | 11 +++++++++-- site/src/pages/RoadmapPage/CourseBag.tsx | 1 + site/src/pages/RoadmapPage/CourseHitItem.tsx | 8 +++++++- 4 files changed, 28 insertions(+), 6 deletions(-) diff --git a/site/src/App.scss b/site/src/App.scss index 44ce0420..7f59b0d8 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -48,6 +48,7 @@ button { padding: 16px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.35); max-width: 375px; + offset: 0px; .popover-body { border-radius: 8px; @@ -56,13 +57,20 @@ button { .arrow::after, .arrow::before { - border-width: 0.8rem 0.8rem 0.8rem; - left: -14px; - top: -4px; /*calc(-4px - 25px);*/ + border-width: 20px 20px 20px; + left: -32px; + top: -12px; pointer-events: none; } } +.ppc-popover.open-left { + .arrow::after, + .arrow::before { + left: -1px; + } +} + .ppc-modal { font-size: 18px; diff --git a/site/src/pages/RoadmapPage/Course.tsx b/site/src/pages/RoadmapPage/Course.tsx index 677f8f24..e5d83fd1 100644 --- a/site/src/pages/RoadmapPage/Course.tsx +++ b/site/src/pages/RoadmapPage/Course.tsx @@ -16,6 +16,7 @@ interface CourseProps extends CourseGQLData { onAddToBag?: () => void; isInBag?: boolean; removeFromBag?: () => void; + openPopoverLeft?: boolean; } const Course: FC = (props) => { @@ -35,9 +36,10 @@ const Course: FC = (props) => { onAddToBag, isInBag, removeFromBag, + openPopoverLeft, } = props; const CoursePopover = ( - +
{department + ' ' + courseNumber + ' '} @@ -86,7 +88,12 @@ const Course: FC = (props) => { , {minUnits === maxUnits ? minUnits : `${minUnits}-${maxUnits}`} units - + {requiredCourses ? : }
diff --git a/site/src/pages/RoadmapPage/CourseBag.tsx b/site/src/pages/RoadmapPage/CourseBag.tsx index ed5e876b..56755704 100644 --- a/site/src/pages/RoadmapPage/CourseBag.tsx +++ b/site/src/pages/RoadmapPage/CourseBag.tsx @@ -29,6 +29,7 @@ const CourseBag = () => { onDelete={() => { removeCourseFromBag(course); }} + openPopoverLeft={true} />
)} diff --git a/site/src/pages/RoadmapPage/CourseHitItem.tsx b/site/src/pages/RoadmapPage/CourseHitItem.tsx index c79d42ad..552d23e5 100644 --- a/site/src/pages/RoadmapPage/CourseHitItem.tsx +++ b/site/src/pages/RoadmapPage/CourseHitItem.tsx @@ -73,7 +73,13 @@ const CourseHitItem: FC = (props: CourseHitItemProps) => { ...provided.draggableProps.style, }} > - +
); }} From e194666f99c4276ddf606f8d8268a7c11645b985 Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Fri, 10 Jan 2025 09:43:10 -0800 Subject: [PATCH 06/16] fix: popover sizing details --- site/src/App.scss | 4 +++- site/src/pages/RoadmapPage/Course.scss | 8 +++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/site/src/App.scss b/site/src/App.scss index 7f59b0d8..d15a9790 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -48,7 +48,7 @@ button { padding: 16px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.35); max-width: 375px; - offset: 0px; + margin-left: 16px; .popover-body { border-radius: 8px; @@ -65,6 +65,8 @@ button { } .ppc-popover.open-left { + margin-right: 16px; + .arrow::after, .arrow::before { left: -1px; diff --git a/site/src/pages/RoadmapPage/Course.scss b/site/src/pages/RoadmapPage/Course.scss index 2ec94111..8370b6a4 100644 --- a/site/src/pages/RoadmapPage/Course.scss +++ b/site/src/pages/RoadmapPage/Course.scss @@ -64,6 +64,8 @@ font-weight: bold; color: var(--text-dark); font-size: 16px; + height: 21px; + margin-top: -2px; } .popover-subtitle { @@ -76,11 +78,11 @@ .popover-description { font-size: 14px; - padding-top: 5%; + padding-top: 12px; } .popover-detail { - padding-top: 5%; + padding-top: 12px; } .popover-detail-prefix { @@ -91,7 +93,6 @@ font-size: 14px; color: #ce0000; gap: 5px; - margin-bottom: 6px; .popover-detail-warning-icon { margin-bottom: 4px; @@ -101,6 +102,7 @@ } .popover-detail-italics { + padding-top: 6px; font-weight: 400; font-size: 12px; font-style: italic; From 101a0ce0ed839f3252cd1111e189a67f27ff0cc5 Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Fri, 10 Jan 2025 12:59:17 -0800 Subject: [PATCH 07/16] feat: popover arrow shadow --- site/src/App.scss | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/site/src/App.scss b/site/src/App.scss index d15a9790..04acdbbb 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -45,23 +45,40 @@ button { .ppc-popover { border-radius: 8px; - padding: 16px; + padding: 0px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.35); max-width: 375px; margin-left: 16px; .popover-body { border-radius: 8px; - padding: 0px; + padding: 16px; } - .arrow::after, - .arrow::before { + .arrow { + z-index: -1; + } + + .arrow::after { border-width: 20px 20px 20px; - left: -32px; top: -12px; + left: -32px; pointer-events: none; } + + .arrow::before { + border-width: 20px 20px 20px; + pointer-events: none; + position: relative; + top: -12px; + left: calc(100% + 2px); + border: 14px solid var(--overlay1); + width: 28px; + height: 28px; + transform-origin: 0 0; + transform: rotate(45deg); + box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.35); + } } .ppc-popover.open-left { From 07aeee9883779a0fb0dba46695eb415f4c42b493 Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Fri, 10 Jan 2025 20:01:23 -0800 Subject: [PATCH 08/16] refactor: move course popover to new component --- site/src/App.scss | 5 +- .../CoursePopover/CoursePopover.scss | 59 +++++++++++++++++ .../component/CoursePopover/CoursePopover.tsx | 63 +++++++++++++++++++ site/src/pages/RoadmapPage/Course.scss | 60 ------------------ site/src/pages/RoadmapPage/Course.tsx | 57 ++++++----------- 5 files changed, 143 insertions(+), 101 deletions(-) create mode 100644 site/src/component/CoursePopover/CoursePopover.scss create mode 100644 site/src/component/CoursePopover/CoursePopover.tsx diff --git a/site/src/App.scss b/site/src/App.scss index 04acdbbb..1401eb8e 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -49,6 +49,7 @@ button { box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.35); max-width: 375px; margin-left: 16px; + top: -26px !important; .popover-body { border-radius: 8px; @@ -61,7 +62,7 @@ button { .arrow::after { border-width: 20px 20px 20px; - top: -12px; + top: 10px; left: -32px; pointer-events: none; } @@ -70,7 +71,7 @@ button { border-width: 20px 20px 20px; pointer-events: none; position: relative; - top: -12px; + top: 10px; left: calc(100% + 2px); border: 14px solid var(--overlay1); width: 28px; diff --git a/site/src/component/CoursePopover/CoursePopover.scss b/site/src/component/CoursePopover/CoursePopover.scss new file mode 100644 index 00000000..85460563 --- /dev/null +++ b/site/src/component/CoursePopover/CoursePopover.scss @@ -0,0 +1,59 @@ +.course-popover { + .popover-name { + font-weight: bold; + color: var(--text-dark); + font-size: 16px; + height: 21px; + margin-top: -2px; + } + + .popover-subtitle { + font-weight: bold; + } + + .popover-units { + font-weight: normal; + } + + .popover-description { + font-size: 14px; + padding-top: 12px; + } + + .popover-detail { + padding-top: 12px; + } + + .popover-detail-prefix { + font-weight: bold; + } + + .popover-detail-warning { + font-size: 14px; + color: #ce0000; + gap: 5px; + + .popover-detail-warning-icon { + margin-bottom: 4px; + margin-right: 4px; + font-size: 16px; + } + } + + .popover-detail-italics { + padding-top: 6px; + font-weight: 400; + font-size: 12px; + font-style: italic; + color: var(--petr-gray); + } +} + +[data-theme='dark'] { + .popover-detail-warning { + color: red; + } + .popover-detail-italics { + color: var(--petr-gray); + } +} diff --git a/site/src/component/CoursePopover/CoursePopover.tsx b/site/src/component/CoursePopover/CoursePopover.tsx new file mode 100644 index 00000000..76f076ab --- /dev/null +++ b/site/src/component/CoursePopover/CoursePopover.tsx @@ -0,0 +1,63 @@ +import { FC } from 'react'; +import './CoursePopover.scss'; +import { ExclamationTriangle } from 'react-bootstrap-icons'; +import Popover from 'react-bootstrap/Popover'; + +import { CourseGQLData } from '../../types/types'; + +interface CoursePopoverProps extends CourseGQLData { + requiredCourses?: string[]; + openPopoverLeft?: boolean; +} + +const CoursePopover: FC = (props) => { + const { + department, + courseNumber, + title, + minUnits, + maxUnits, + description, + prerequisiteText, + corequisites, + requiredCourses, + } = props; + + return ( + +
+ {department + ' ' + courseNumber + ' '} + ({minUnits === maxUnits ? minUnits : `${minUnits}-${maxUnits}`} units) +
+
+ {title + ':'} +
+ {description} +
+ {prerequisiteText && ( +
+ Prerequisites: {prerequisiteText} +
+ )} + {corequisites && ( +
+ Corequisites: {corequisites} +
+ )} + {requiredCourses && ( +
+
+ + Prerequisite{requiredCourses?.length > 1 ? 's' : ''} Not Met: {requiredCourses?.join(', ')} +
+
+ Already completed? Click "Transfer Credits" at the top of the roadmap viewer to add{' '} + {requiredCourses?.length > 1 ? 'these prerequisites' : 'this prerequisite'}. +
+
+ )} + + ); +}; + +export default CoursePopover; diff --git a/site/src/pages/RoadmapPage/Course.scss b/site/src/pages/RoadmapPage/Course.scss index 8370b6a4..1491b515 100644 --- a/site/src/pages/RoadmapPage/Course.scss +++ b/site/src/pages/RoadmapPage/Course.scss @@ -59,66 +59,6 @@ color: red; } -.course-popover { - .popover-name { - font-weight: bold; - color: var(--text-dark); - font-size: 16px; - height: 21px; - margin-top: -2px; - } - - .popover-subtitle { - font-weight: bold; - } - - .popover-units { - font-weight: normal; - } - - .popover-description { - font-size: 14px; - padding-top: 12px; - } - - .popover-detail { - padding-top: 12px; - } - - .popover-detail-prefix { - font-weight: bold; - } - - .popover-detail-warning { - font-size: 14px; - color: #ce0000; - gap: 5px; - - .popover-detail-warning-icon { - margin-bottom: 4px; - margin-right: 4px; - font-size: 16px; - } - } - - .popover-detail-italics { - padding-top: 6px; - font-weight: 400; - font-size: 12px; - font-style: italic; - color: var(--petr-gray); - } -} - -[data-theme='dark'] { - .popover-detail-warning { - color: red; - } - .popover-detail-italics { - color: var(--petr-gray); - } -} - .course-footer { height: auto; display: flex; diff --git a/site/src/pages/RoadmapPage/Course.tsx b/site/src/pages/RoadmapPage/Course.tsx index e5d83fd1..0104ce7a 100644 --- a/site/src/pages/RoadmapPage/Course.tsx +++ b/site/src/pages/RoadmapPage/Course.tsx @@ -3,6 +3,7 @@ import './Course.scss'; import { Button } from 'react-bootstrap'; import { InfoCircle, ExclamationTriangle, Trash, BagPlus, BagFill } from 'react-bootstrap-icons'; import CourseQuarterIndicator from '../../component/QuarterTooltip/CourseQuarterIndicator'; +import CoursePopover from '../../component/CoursePopover/CoursePopover'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import Popover from 'react-bootstrap/Popover'; @@ -38,43 +39,6 @@ const Course: FC = (props) => { removeFromBag, openPopoverLeft, } = props; - const CoursePopover = ( - - -
- {department + ' ' + courseNumber + ' '} - ({minUnits === maxUnits ? minUnits : `${minUnits}-${maxUnits}`} units) -
-
- {title + ':'} -
- {description} -
- {prerequisiteText && ( -
- Prerequisites: {prerequisiteText} -
- )} - {corequisites && ( -
- Corequisites: {corequisites} -
- )} - {requiredCourses && ( -
-
- - Prerequisite{requiredCourses?.length > 1 ? 's' : ''} Not Met: {requiredCourses?.join(', ')} -
-
- Already completed? Click "Transfer Credits" at the top of the roadmap viewer to add{' '} - {requiredCourses?.length > 1 ? 'these prerequisites' : 'this prerequisite'}. -
-
- )} - - - ); const courseRoute = '/course/' + props.department.replace(/\s+/g, '') + props.courseNumber.replace(/\s+/g, ''); @@ -90,8 +54,23 @@ const Course: FC = (props) => { + + delay={100} > {requiredCourses ? : } From c32367939cdf8e5eacf86a499341e5cea10989a7 Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Fri, 10 Jan 2025 20:39:13 -0800 Subject: [PATCH 09/16] fix: course popover line heights --- site/src/component/CoursePopover/CoursePopover.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/src/component/CoursePopover/CoursePopover.scss b/site/src/component/CoursePopover/CoursePopover.scss index 85460563..292ff8fa 100644 --- a/site/src/component/CoursePopover/CoursePopover.scss +++ b/site/src/component/CoursePopover/CoursePopover.scss @@ -1,4 +1,6 @@ .course-popover { + line-height: normal; + .popover-name { font-weight: bold; color: var(--text-dark); @@ -18,6 +20,7 @@ .popover-description { font-size: 14px; padding-top: 12px; + line-height: 17px; } .popover-detail { From de9fa619baac1603cb9d23aedfc99b2f3302bbc5 Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Fri, 10 Jan 2025 22:25:15 -0800 Subject: [PATCH 10/16] fix: course popover props interface --- site/src/component/CoursePopover/CoursePopover.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/site/src/component/CoursePopover/CoursePopover.tsx b/site/src/component/CoursePopover/CoursePopover.tsx index 76f076ab..2819ae35 100644 --- a/site/src/component/CoursePopover/CoursePopover.tsx +++ b/site/src/component/CoursePopover/CoursePopover.tsx @@ -3,11 +3,16 @@ import './CoursePopover.scss'; import { ExclamationTriangle } from 'react-bootstrap-icons'; import Popover from 'react-bootstrap/Popover'; -import { CourseGQLData } from '../../types/types'; - -interface CoursePopoverProps extends CourseGQLData { +interface CoursePopoverProps { + department: string; + courseNumber: string; + title: string; + minUnits: number; + maxUnits: number; + description: string; + prerequisiteText: string; + corequisites: string; requiredCourses?: string[]; - openPopoverLeft?: boolean; } const CoursePopover: FC = (props) => { From e0e2c05e9d97f5a9078dce744f20ac187bbcc656 Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Sat, 11 Jan 2025 15:15:44 -0800 Subject: [PATCH 11/16] fix: popover position on mobile --- site/src/App.scss | 9 +++++++++ site/src/pages/RoadmapPage/Course.tsx | 6 ++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/site/src/App.scss b/site/src/App.scss index 1401eb8e..25640513 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -91,6 +91,15 @@ button { } } +.ppc-popover.open-bottom { + margin-top: 40px; + .arrow::after, + .arrow::before { + top: -12px; + left: 7px; + } +} + .ppc-modal { font-size: 18px; diff --git a/site/src/pages/RoadmapPage/Course.tsx b/site/src/pages/RoadmapPage/Course.tsx index 0104ce7a..5df9d293 100644 --- a/site/src/pages/RoadmapPage/Course.tsx +++ b/site/src/pages/RoadmapPage/Course.tsx @@ -6,6 +6,7 @@ import CourseQuarterIndicator from '../../component/QuarterTooltip/CourseQuarter import CoursePopover from '../../component/CoursePopover/CoursePopover'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import Popover from 'react-bootstrap/Popover'; +import { useIsMobile } from '../../helpers/util'; import { CourseGQLData } from '../../types/types'; import ThemeContext from '../../style/theme-context'; @@ -41,6 +42,7 @@ const Course: FC = (props) => { } = props; const courseRoute = '/course/' + props.department.replace(/\s+/g, '') + props.courseNumber.replace(/\s+/g, ''); + const isMobile = useIsMobile(); return (
@@ -54,9 +56,9 @@ const Course: FC = (props) => { Date: Mon, 13 Jan 2025 11:01:50 -0800 Subject: [PATCH 12/16] refactor: remove separate popover position classes --- site/src/App.scss | 8 ++++---- site/src/pages/RoadmapPage/Course.tsx | 5 +---- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/site/src/App.scss b/site/src/App.scss index 25640513..00690677 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -82,8 +82,8 @@ button { } } -.ppc-popover.open-left { - margin-right: 16px; +.bs-popover-left { + margin-right: 20px; .arrow::after, .arrow::before { @@ -91,8 +91,8 @@ button { } } -.ppc-popover.open-bottom { - margin-top: 40px; +.bs-popover-bottom { + margin-top: 48px; .arrow::after, .arrow::before { top: -12px; diff --git a/site/src/pages/RoadmapPage/Course.tsx b/site/src/pages/RoadmapPage/Course.tsx index 5df9d293..87cd9961 100644 --- a/site/src/pages/RoadmapPage/Course.tsx +++ b/site/src/pages/RoadmapPage/Course.tsx @@ -57,10 +57,7 @@ const Course: FC = (props) => { + overlay= Date: Mon, 13 Jan 2025 12:59:00 -0800 Subject: [PATCH 13/16] Adjust styles of tooltip --- site/src/App.scss | 39 +++++++++++++++++++-------------------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/site/src/App.scss b/site/src/App.scss index 00690677..4048e42d 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -46,10 +46,14 @@ button { .ppc-popover { border-radius: 8px; padding: 0px; - box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.35); + box-shadow: none; max-width: 375px; - margin-left: 16px; - top: -26px !important; + top: -16px !important; + + $filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.35)); + filter: $filter; + -webkit-filter: $filter; + border: none; .popover-body { border-radius: 8px; @@ -58,27 +62,22 @@ button { .arrow { z-index: -1; + &::after { + display: none; + } } - - .arrow::after { - border-width: 20px 20px 20px; - top: 10px; - left: -32px; - pointer-events: none; - } - .arrow::before { - border-width: 20px 20px 20px; pointer-events: none; position: relative; - top: 10px; - left: calc(100% + 2px); - border: 14px solid var(--overlay1); - width: 28px; - height: 28px; - transform-origin: 0 0; - transform: rotate(45deg); - box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.35); + border: 8px solid transparent; + border-width: 12px 16px; + border-left-color: var(--overlay1); + } + &[data-popper-placement='left-start'] { + .arrow::before { + top: 8px; + left: -2px; + } } } From 4ec9a233f812f4f138eb7505358158be36a5a316 Mon Sep 17 00:00:00 2001 From: Awesome-E <54484616+Awesome-E@users.noreply.github.com> Date: Mon, 13 Jan 2025 14:28:19 -0800 Subject: [PATCH 14/16] fix tooltips in other directions --- site/src/App.scss | 24 ++++++++++++++++++++--- site/src/pages/RoadmapPage/Course.tsx | 28 ++++++++++++++------------- 2 files changed, 36 insertions(+), 16 deletions(-) diff --git a/site/src/App.scss b/site/src/App.scss index 4048e42d..be9c9d09 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -68,15 +68,33 @@ button { } .arrow::before { pointer-events: none; - position: relative; + position: absolute; border: 8px solid transparent; border-width: 12px 16px; - border-left-color: var(--overlay1); + top: 8px; + left: unset; } - &[data-popper-placement='left-start'] { + &[data-popper-placement='bottom'] { + top: -24px !important; .arrow::before { + left: 0; + bottom: 0; top: 8px; + border-bottom-color: white; + transform: translate(-25%, -100%); + border-width: 16px 12px; + } + } + &[data-popper-placement='left-start'] { + .arrow::before { left: -2px; + border-left-color: var(--overlay1); + } + } + &[data-popper-placement='right-start'] { + .arrow::before { + right: -2px; + border-right-color: var(--overlay1); } } } diff --git a/site/src/pages/RoadmapPage/Course.tsx b/site/src/pages/RoadmapPage/Course.tsx index 87cd9961..d56a297f 100644 --- a/site/src/pages/RoadmapPage/Course.tsx +++ b/site/src/pages/RoadmapPage/Course.tsx @@ -57,19 +57,21 @@ const Course: FC = (props) => { - - + overlay={ + + + + } delay={100} > {requiredCourses ? : } From 4584700c43b3dda80dbbc5943fe977801d79a0a2 Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Wed, 15 Jan 2025 17:49:28 -0800 Subject: [PATCH 15/16] fix: bottom popover arrow color --- site/src/App.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/App.scss b/site/src/App.scss index 677f935e..2fbfe877 100644 --- a/site/src/App.scss +++ b/site/src/App.scss @@ -80,7 +80,7 @@ button { left: 0; bottom: 0; top: 8px; - border-bottom-color: white; + border-bottom-color: var(--overlay1); transform: translate(-25%, -100%); border-width: 16px 12px; } From 01b6cba112daa62f4e8fdac2131c2c8d62eb77fc Mon Sep 17 00:00:00 2001 From: Caden Lee Date: Sun, 19 Jan 2025 17:14:17 -0800 Subject: [PATCH 16/16] fix: course popover position issue --- site/src/pages/RoadmapPage/Course.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/RoadmapPage/Course.tsx b/site/src/pages/RoadmapPage/Course.tsx index e28744ea..06025b16 100644 --- a/site/src/pages/RoadmapPage/Course.tsx +++ b/site/src/pages/RoadmapPage/Course.tsx @@ -96,7 +96,7 @@ const Course: FC = (props) => { } delay={100} > - {requiredCourses ? : } +
{requiredCourses ? : }