From 8fc0de3868eb11c86023eaff9042bd14b2a14d9c Mon Sep 17 00:00:00 2001
From: Ben Warzeski <bwarzeski@edx.org>
Date: Fri, 16 Sep 2022 15:41:57 -0400
Subject: [PATCH] fix: coures card and filter controls responsiveness

---
 src/containers/CourseCard/CourseCard.scss     |  2 -
 .../__snapshots__/index.test.jsx.snap         | 10 ++-
 src/containers/CourseCard/index.jsx           | 12 +--
 .../CourseFilterControls.jsx                  | 80 +++++++++++++------
 .../CourseFilterControls/index.scss           |  9 +++
 5 files changed, 76 insertions(+), 37 deletions(-)

diff --git a/src/containers/CourseCard/CourseCard.scss b/src/containers/CourseCard/CourseCard.scss
index 48d232d..8074c9a 100644
--- a/src/containers/CourseCard/CourseCard.scss
+++ b/src/containers/CourseCard/CourseCard.scss
@@ -2,8 +2,6 @@
 
 .course-card {
   .card {
-    overflow: hidden;
-
     .pgn__card-image-cap {
       border-bottom-left-radius: 0 !important;
     }
diff --git a/src/containers/CourseCard/__snapshots__/index.test.jsx.snap b/src/containers/CourseCard/__snapshots__/index.test.jsx.snap
index 6a900cb..d8bb5b1 100644
--- a/src/containers/CourseCard/__snapshots__/index.test.jsx.snap
+++ b/src/containers/CourseCard/__snapshots__/index.test.jsx.snap
@@ -11,10 +11,12 @@ exports[`CourseCard component snapshot: collapsed 1`] = `
     <div
       className="d-flex flex-column w-100"
     >
-      <CourseCardContent
-        cardId="test-card-id"
-        orientation="vertical"
-      />
+      <div>
+        <CourseCardContent
+          cardId="test-card-id"
+          orientation="vertical"
+        />
+      </div>
       <div
         className="course-card-banners"
         data-testid="CourseCardBanners"
diff --git a/src/containers/CourseCard/index.jsx b/src/containers/CourseCard/index.jsx
index c6c5ee2..2ea9e44 100644
--- a/src/containers/CourseCard/index.jsx
+++ b/src/containers/CourseCard/index.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 // import PropTypes from 'prop-types';
@@ -19,14 +20,9 @@ export const CourseCard = ({
     <div className="mb-4.5 course-card" data-testid="CourseCard">
       <Card orientation={orientation}>
         <div className="d-flex flex-column w-100">
-          {isCollapsed
-            ? (
-              <CourseCardContent cardId={cardId} orientation={orientation} />
-            ) : (
-              <div className="d-flex">
-                <CourseCardContent cardId={cardId} orientation={orientation} />
-              </div>
-            )}
+          <div {...(!isCollapsed && { className: 'd-flex' })}>
+            <CourseCardContent cardId={cardId} orientation={orientation} />
+          </div>
           <div className="course-card-banners" data-testid="CourseCardBanners">
             <CourseCardBanners cardId={cardId} />
           </div>
diff --git a/src/containers/CourseFilterControls/CourseFilterControls.jsx b/src/containers/CourseFilterControls/CourseFilterControls.jsx
index fe1185a..59d00cd 100644
--- a/src/containers/CourseFilterControls/CourseFilterControls.jsx
+++ b/src/containers/CourseFilterControls/CourseFilterControls.jsx
@@ -3,11 +3,16 @@ import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import {
-  Form,
   Button,
+  Form,
+  Icon,
   ModalPopup,
+  Sheet,
+  breakpoints,
+  useWindowSize,
+  ModalCloseButton,
 } from '@edx/paragon';
-import { Tune } from '@edx/paragon/icons';
+import { Close, Tune } from '@edx/paragon/icons';
 
 import FilterForm from './components/FilterForm';
 import SortForm from './components/SortForm';
@@ -35,6 +40,9 @@ export const CourseFilterControls = ({
     setFilters,
     setSortBy,
   });
+  const { width } = useWindowSize();
+  const isMobile = width < breakpoints.small.minWidth;
+
   return (
     <div id="course-filter-controls">
       <Button
@@ -45,27 +53,53 @@ export const CourseFilterControls = ({
       >
         {formatMessage(messages.refine)}
       </Button>
-      <ModalPopup
-        positionRef={target}
-        isOpen={isOpen}
-        onClose={close}
-        placement="bottom-end"
-      >
-        <Form>
-          <div
-            id="course-filter-controls-card"
-            className="bg-white p-3 rounded shadow d-flex flex-row"
-          >
-            <div className="filter-form-col">
-              <FilterForm {...{ filters, handleFilterChange }} />
-            </div>
-            <hr className="h-100 bg-primary-200 m-1" />
-            <div className="filter-form-col text-left m-1">
-              <SortForm {...{ sortBy, handleSortChange }} />
-            </div>
-          </div>
-        </Form>
-      </ModalPopup>
+      <Form>
+        {isMobile
+          ? (
+            <Sheet
+              className="w-75"
+              position="left"
+              show={isOpen}
+              onClose={close}
+            >
+              <div className="p-1 mr-3">
+                <b>Refine</b>
+              </div>
+              <hr />
+              <div className="filter-form-row">
+                <FilterForm {...{ filters, handleFilterChange }} />
+              </div>
+              <div className="filter-form-row text-left m-1">
+                <SortForm {...{ sortBy, handleSortChange }} />
+              </div>
+              <div className="pgn__modal-close-container">
+                <ModalCloseButton variant="tertiary" onClick={close}>
+                  <Icon src={Close} />
+                </ModalCloseButton>
+              </div>
+            </Sheet>
+          ) : (
+            <ModalPopup
+              positionRef={target}
+              isOpen={isOpen}
+              onClose={close}
+              placement="bottom-end"
+            >
+              <div
+                id="course-filter-controls-card"
+                className="bg-white p-3 rounded shadow d-flex flex-row"
+              >
+                <div className="filter-form-col">
+                  <FilterForm {...{ filters, handleFilterChange }} />
+                </div>
+                <hr className="h-100 bg-primary-200 m-1" />
+                <div className="filter-form-col text-left m-1">
+                  <SortForm {...{ sortBy, handleSortChange }} />
+                </div>
+              </div>
+            </ModalPopup>
+          )}
+      </Form>
     </div>
   );
 };
diff --git a/src/containers/CourseFilterControls/index.scss b/src/containers/CourseFilterControls/index.scss
index 8da93f9..59264aa 100644
--- a/src/containers/CourseFilterControls/index.scss
+++ b/src/containers/CourseFilterControls/index.scss
@@ -1,3 +1,12 @@
+.pgn__sheet-component {
+  max-width: 75% !important;
+  width: 75% !important;
+
+  .filter-form-heading {
+    font-weight: bold;
+    font-size: 18px;
+  }
+}
 #course-filter-controls-card {
   width: 512px;
   height: 288px;