Merge course popovers

site/src/App.scss

@@ -43,6 +43,63 @@ button {
   }
 }
 
+.ppc-popover {
+  border-radius: 8px;
+  padding: 0px;
+  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;
+    padding: 16px;
+  }
+
+  .arrow {
+    z-index: -1;
+  }
+
+  .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);
+  }
+}
+
+.ppc-popover.open-left {
+  margin-right: 16px;
+
+  .arrow::after,
+  .arrow::before {
+    left: -1px;
+  }
+}
+
+.ppc-popover.open-bottom {
+  margin-top: 40px;
+  .arrow::after,
+  .arrow::before {
+    top: -12px;
+    left: 7px;
+  }
+}
+
 .ppc-modal {
   font-size: 18px;
 

site/src/component/CoursePopover/CoursePopover.scss

@@ -0,0 +1,62 @@
+.course-popover {
+  line-height: normal;
+
+  .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;
+    line-height: 17px;
+  }
+
+  .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);
+  }
+}

site/src/component/CoursePopover/CoursePopover.tsx

@@ -0,0 +1,68 @@
+import { FC } from 'react';
+import './CoursePopover.scss';
+import { ExclamationTriangle } from 'react-bootstrap-icons';
+import Popover from 'react-bootstrap/Popover';
+
+interface CoursePopoverProps {
+  department: string;
+  courseNumber: string;
+  title: string;
+  minUnits: number;
+  maxUnits: number;
+  description: string;
+  prerequisiteText: string;
+  corequisites: string;
+  requiredCourses?: string[];
+}
+
+const CoursePopover: FC<CoursePopoverProps> = (props) => {
+  const {
+    department,
+    courseNumber,
+    title,
+    minUnits,
+    maxUnits,
+    description,
+    prerequisiteText,
+    corequisites,
+    requiredCourses,
+  } = props;
+
+  return (
+    <Popover.Content className="course-popover">
+      <div className="popover-name">
+        {department + ' ' + courseNumber + ' '}
+        <span className="popover-units">({minUnits === maxUnits ? minUnits : `${minUnits}-${maxUnits}`} units)</span>
+      </div>
+      <div className="popover-description">
+        <span className="popover-subtitle">{title + ':'}</span>
+        <br />
+        {description}
+      </div>
+      {prerequisiteText && (
+        <div className="popover-detail">
+          <span className="popover-detail-prefix">Prerequisites:</span> {prerequisiteText}
+        </div>
+      )}
+      {corequisites && (
+        <div className="popover-detail">
+          <span className="popover-detail-prefix">Corequisites:</span> {corequisites}
+        </div>
+      )}
+      {requiredCourses && (
+        <div className="popover-detail">
+          <div className="popover-detail-warning">
+            <ExclamationTriangle className="popover-detail-warning-icon" />
+            Prerequisite{requiredCourses?.length > 1 ? 's' : ''} Not Met: {requiredCourses?.join(', ')}
+          </div>
+          <div className="popover-detail-italics">
+            Already completed? Click "Transfer Credits" at the top of the roadmap viewer to add{' '}
+            {requiredCourses?.length > 1 ? 'these prerequisites' : 'this prerequisite'}.
+          </div>
+        </div>
+      )}
+    </Popover.Content>
+  );
+};
+
+export default CoursePopover;

site/src/pages/RoadmapPage/Course.scss

@@ -59,35 +59,6 @@
   color: red;
 }
 
-.course-popover {
-  padding: 5%;
-
-  .popover-name {
-    font-weight: bold;
-    color: var(--text-dark);
-    font-size: 16px;
-  }
-
-  .popover-units {
-    color: #c4c4c4;
-
-    .popover-units-value {
-      font-weight: bold;
-    }
-  }
-
-  .popover-description {
-    padding-top: 5%;
-  }
-
-  .popover-detail {
-    padding-top: 5%;
-  }
-  .popover-detail-prefix {
-    font-weight: bold;
-  }
-}
-
 .course-footer {
   height: auto;
   display: flex;

site/src/pages/RoadmapPage/Course.tsx

@@ -3,8 +3,10 @@ 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';
+import { useIsMobile } from '../../helpers/util';
 
 import { CourseGQLData } from '../../types/types';
 import ThemeContext from '../../style/theme-context';
@@ -16,6 +18,7 @@ interface CourseProps extends CourseGQLData {
   onAddToBag?: () => void;
   isInBag?: boolean;
   removeFromBag?: () => void;
+  openPopoverLeft?: boolean;
 }
 
 const Course: FC<CourseProps> = (props) => {
@@ -35,46 +38,11 @@ const Course: FC<CourseProps> = (props) => {
     onAddToBag,
     isInBag,
     removeFromBag,
+    openPopoverLeft,
   } = props;
-  const CoursePopover = (
-    <Popover id={'course-popover-' + id}>
-      <Popover.Content>
-        <div className="course-popover">
-          <div className="popover-name">
-            {department + ' ' + courseNumber} {title}
-          </div>
-          <div className="popover-units">
-            <span className="popover-units-value">{minUnits === maxUnits ? minUnits : `${minUnits}-${maxUnits}`}</span>{' '}
-            units
-          </div>
-          <div className="popover-description">{description}</div>
-          {prerequisiteText && (
-            <div className="popover-detail">
-              <span className="popover-detail-prefix">Prerequisites:</span> {prerequisiteText}
-            </div>
-          )}
-          {corequisites && (
-            <div className="popover-detail">
-              <span className="popover-detail-prefix">Corequisites:</span> {corequisites}
-            </div>
-          )}
-        </div>
-      </Popover.Content>
-    </Popover>
-  );
-
-  const WarningPopover = (
-    <Popover id={'warning-popover-' + id}>
-      <Popover.Content>
-        Prerequisite(s) not met! Missing: {requiredCourses?.join(', ')}
-        <br />
-        Already completed prerequisite(s) at another institution? Click 'Transfer Credits' at the top of the planner to
-        clear the prerequisite(s).
-      </Popover.Content>
-    </Popover>
-  );
 
   const courseRoute = '/course/' + props.department.replace(/\s+/g, '') + props.courseNumber.replace(/\s+/g, '');
+  const isMobile = useIsMobile();
 
   return (
     <div className={`course ${requiredCourses ? 'invalid' : ''}`}>
@@ -86,14 +54,29 @@ const Course: FC<CourseProps> = (props) => {
             </a>
             <span className="units">, {minUnits === maxUnits ? minUnits : `${minUnits}-${maxUnits}`} units</span>
           </span>
-          <OverlayTrigger trigger={['hover', 'focus']} placement="auto" overlay={CoursePopover} delay={100}>
-            <InfoCircle />
+          <OverlayTrigger
+            trigger={['hover', 'focus']}
+            placement={isMobile ? 'bottom' : openPopoverLeft ? 'left-start' : 'right-start'}
+            overlay=<Popover
+              className={'ppc-popover' + (isMobile ? ' open-bottom' : openPopoverLeft ? ' open-left' : '')}
+              id={'course-popover-' + id}
+            >
+              <CoursePopover
+                department={department}
+                courseNumber={courseNumber}
+                title={title}
+                minUnits={minUnits}
+                maxUnits={maxUnits}
+                description={description}
+                prerequisiteText={prerequisiteText}
+                corequisites={corequisites}
+                requiredCourses={requiredCourses}
+              />
+            </Popover>
+            delay={100}
+          >
+            {requiredCourses ? <ExclamationTriangle /> : <InfoCircle />}
           </OverlayTrigger>
-          {requiredCourses && (
-            <OverlayTrigger trigger={['hover', 'focus']} placement="right" overlay={WarningPopover} delay={100}>
-              <ExclamationTriangle />
-            </OverlayTrigger>
-          )}
         </div>
         {onDelete ? (
           <ThemeContext.Consumer>

site/src/pages/RoadmapPage/CourseBag.tsx

@@ -29,6 +29,7 @@ const CourseBag = () => {
                     onDelete={() => {
                       removeCourseFromBag(course);
                     }}
+                    openPopoverLeft={true}
                   />
                 </div>
               )}

site/src/pages/RoadmapPage/CourseHitItem.tsx

@@ -73,7 +73,13 @@ const CourseHitItem: FC<CourseHitItemProps> = (props: CourseHitItemProps) => {
                 ...provided.draggableProps.style,
               }}
             >
-              <Course {...props} onAddToBag={onAddToBag} isInBag={isInBag} removeFromBag={removeFromBag} />
+              <Course
+                {...props}
+                onAddToBag={onAddToBag}
+                isInBag={isInBag}
+                removeFromBag={removeFromBag}
+                openPopoverLeft={true}
+              />
             </div>
           );
         }}

site/src/style/theme.scss

@@ -112,6 +112,9 @@
   }
 }
 
+.popover {
+  background-color: var(--overlay1);
+}
 .popover-body {
   background-color: var(--overlay1);
   color: var(--text);