From 64495185e6dcf2453f7afdfc40527df9b657ce4a Mon Sep 17 00:00:00 2001 From: Mike Davidson <41908054+Ardiea@users.noreply.github.com> Date: Thu, 22 Aug 2024 10:16:08 -0400 Subject: [PATCH 1/5] Renaming the s3 buckets used for storing the app. (#1455) --- .github/workflows/production.yml | 2 +- .github/workflows/release-candidate.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml index 5b71da7f0d..389deea711 100644 --- a/.github/workflows/production.yml +++ b/.github/workflows/production.yml @@ -66,7 +66,7 @@ jobs: with: args: --acl public-read --follow-symlinks env: - AWS_S3_BUCKET: ol-mitopen-app-storage-production + AWS_S3_BUCKET: ol-mitlearn-app-storage-production AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID_PROD }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_PROD }} SOURCE_DIR: "frontends/mit-learn/build" # optional: defaults to entire repository diff --git a/.github/workflows/release-candidate.yml b/.github/workflows/release-candidate.yml index cc03a8ba0d..952b188479 100644 --- a/.github/workflows/release-candidate.yml +++ b/.github/workflows/release-candidate.yml @@ -66,7 +66,7 @@ jobs: with: args: --acl public-read --follow-symlinks env: - AWS_S3_BUCKET: ol-mitopen-app-storage-rc + AWS_S3_BUCKET: ol-mitlearn-app-storage-rc AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID_RC }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_RC }} SOURCE_DIR: "frontends/mit-learn/build" # optional: defaults to entire repository From 7feecaaf32d9ae869902c5533707ed3dfe06ef32 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Thu, 22 Aug 2024 13:10:20 -0400 Subject: [PATCH 2/5] Fix departments and schools fixtures (#1453) * fix the fixtures * fix fixture autoloading * log and readme --- README.md | 5 +- learning_resources/fixtures/departments.json | 148 ++++++++++++++----- learning_resources/fixtures/schools.json | 24 ++- scripts/run-django-dev.sh | 7 +- 4 files changed, 136 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 265c83ddcf..eb923c7b8f 100644 --- a/README.md +++ b/README.md @@ -120,9 +120,12 @@ any emails sent from the app will be delivered to you. ### Loading fixture files -Run the following to load platforms, departments, and offers. This populates the database with the fixture files contained in [learning_resources/fixtures](learning_resources/fixtures). Note that you will first need to run the Django models to schema migrations detailed in the [Handbook Initial Setup](https://mitodl.github.io/handbook/how-to/common-web-app-guide.html#3-create-database-tables-from-the-django-models) step. This is already done for you when bringing up your local (development) environment. +Run the following to load platforms, departments, and offers. This populates the database with the fixture files contained in [learning_resources/fixtures](learning_resources/fixtures). Note that you will first need to run the Django models to schema migrations detailed in the [Handbook Initial Setup](https://mitodl.github.io/handbook/how-to/common-web-app-guide.html#3-create-database-tables-from-the-django-models) step. ```bash +# Note! +# This is already done for you when bringing up your local (development) +# environment. docker compose run --rm web python manage.py loaddata platforms departments offered_by ``` diff --git a/learning_resources/fixtures/departments.json b/learning_resources/fixtures/departments.json index bed4d0d7f9..bdc7721ed8 100644 --- a/learning_resources/fixtures/departments.json +++ b/learning_resources/fixtures/departments.json @@ -4,7 +4,9 @@ "fields": { "department_id": "1", "name": "Civil and Environmental Engineering", - "school_id": 2 + "school_id": 2, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -12,7 +14,9 @@ "fields": { "department_id": "2", "name": "Mechanical Engineering", - "school_id": 2 + "school_id": 2, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -20,7 +24,9 @@ "fields": { "department_id": "3", "name": "Materials Science and Engineering", - "school_id": 2 + "school_id": 2, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -28,7 +34,9 @@ "fields": { "department_id": "4", "name": "Architecture", - "school_id": 1 + "school_id": 1, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -36,7 +44,9 @@ "fields": { "department_id": "5", "name": "Chemistry", - "school_id": 5 + "school_id": 5, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -44,7 +54,9 @@ "fields": { "department_id": "6", "name": "Electrical Engineering and Computer Science", - "school_id": 2 + "school_id": 2, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -52,7 +64,9 @@ "fields": { "department_id": "7", "name": "Biology", - "school_id": 5 + "school_id": 5, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -60,7 +74,9 @@ "fields": { "department_id": "8", "name": "Physics", - "school_id": 5 + "school_id": 5, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -68,7 +84,9 @@ "fields": { "department_id": "9", "name": "Brain and Cognitive Sciences", - "school_id": 5 + "school_id": 5, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -76,7 +94,9 @@ "fields": { "department_id": "10", "name": "Chemical Engineering", - "school_id": 2 + "school_id": 2, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -84,7 +104,9 @@ "fields": { "department_id": "11", "name": "Urban Studies and Planning", - "school_id": 1 + "school_id": 1, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -92,7 +114,9 @@ "fields": { "department_id": "12", "name": "Earth, Atmospheric, and Planetary Sciences", - "school_id": 5 + "school_id": 5, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -100,7 +124,9 @@ "fields": { "department_id": "14", "name": "Economics", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -108,7 +134,9 @@ "fields": { "department_id": "15", "name": "Management", - "school_id": 4 + "school_id": 4, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -116,7 +144,9 @@ "fields": { "department_id": "16", "name": "Aeronautics and Astronautics", - "school_id": 2 + "school_id": 2, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -124,7 +154,9 @@ "fields": { "department_id": "17", "name": "Political Science", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -132,7 +164,9 @@ "fields": { "department_id": "18", "name": "Mathematics", - "school_id": 5 + "school_id": 5, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -140,7 +174,9 @@ "fields": { "department_id": "20", "name": "Biological Engineering", - "school_id": 2 + "school_id": 2, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -148,7 +184,9 @@ "fields": { "department_id": "21A", "name": "Anthropology", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -156,7 +194,9 @@ "fields": { "department_id": "21G", "name": "Global Languages", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -164,7 +204,9 @@ "fields": { "department_id": "21H", "name": "History", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -172,7 +214,9 @@ "fields": { "department_id": "21L", "name": "Literature", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -180,7 +224,9 @@ "fields": { "department_id": "21M", "name": "Music and Theater Arts", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -188,7 +234,9 @@ "fields": { "department_id": "22", "name": "Nuclear Science and Engineering", - "school_id": 2 + "school_id": 2, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -196,7 +244,9 @@ "fields": { "department_id": "24", "name": "Linguistics and Philosophy", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -204,7 +254,9 @@ "fields": { "department_id": "CC", "name": "Concourse", - "school_id": null + "school_id": null, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -212,7 +264,9 @@ "fields": { "department_id": "CMS-W", "name": "Comparative Media Studies/Writing", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -220,7 +274,9 @@ "fields": { "department_id": "EC", "name": "Edgerton Center", - "school_id": null + "school_id": null, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -228,7 +284,9 @@ "fields": { "department_id": "ES", "name": "Experimental Study Group", - "school_id": null + "school_id": null, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -236,7 +294,9 @@ "fields": { "department_id": "ESD", "name": "Engineering Systems Division", - "school_id": null + "school_id": null, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -244,7 +304,9 @@ "fields": { "department_id": "HST", "name": "Medical Engineering and Science", - "school_id": 2 + "school_id": 2, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -252,7 +314,9 @@ "fields": { "department_id": "IDS", "name": "Data, Systems, and Society", - "school_id": 6 + "school_id": 6, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -260,7 +324,9 @@ "fields": { "department_id": "MAS", "name": "Media Arts and Sciences", - "school_id": 1 + "school_id": 1, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -268,7 +334,9 @@ "fields": { "department_id": "PE", "name": "Athletics, Physical Education and Recreation", - "school_id": null + "school_id": null, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -276,7 +344,9 @@ "fields": { "department_id": "STS", "name": "Science, Technology, and Society", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -284,7 +354,9 @@ "fields": { "department_id": "WGS", "name": "Women's and Gender Studies", - "school_id": 3 + "school_id": 3, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -292,7 +364,9 @@ "fields": { "department_id": "SP", "name": "Special Programs", - "school_id": null + "school_id": null, + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } } ] diff --git a/learning_resources/fixtures/schools.json b/learning_resources/fixtures/schools.json index ed399ffeff..57a7e44557 100644 --- a/learning_resources/fixtures/schools.json +++ b/learning_resources/fixtures/schools.json @@ -4,7 +4,9 @@ "fields": { "id": 1, "name": "School of Architecture and Planning", - "url": "https://sap.mit.edu/" + "url": "https://sap.mit.edu/", + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -12,7 +14,9 @@ "fields": { "id": 2, "name": "School of Engineering", - "url": "https://engineering.mit.edu/" + "url": "https://engineering.mit.edu/", + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -20,7 +24,9 @@ "fields": { "id": 3, "name": "School of Humanities, Arts, and Social Sciences", - "url": "https://shass.mit.edu/" + "url": "https://shass.mit.edu/", + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -28,7 +34,9 @@ "fields": { "id": 4, "name": "Sloan School of Management", - "url": "http://mitsloan.mit.edu/" + "url": "http://mitsloan.mit.edu/", + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -36,7 +44,9 @@ "fields": { "id": 5, "name": "School of Science", - "url": "https://science.mit.edu/" + "url": "https://science.mit.edu/", + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } }, { @@ -44,7 +54,9 @@ "fields": { "id": 6, "name": "MIT Schwarzman College of Computing", - "url": "https://computing.mit.edu/" + "url": "https://computing.mit.edu/", + "created_on": "2024-04-17T00:00:00.000000+00:00", + "updated_on": "2024-04-17T00:00:00.000000+00:00" } } ] diff --git a/scripts/run-django-dev.sh b/scripts/run-django-dev.sh index 7d39395220..8f3c3600a9 100755 --- a/scripts/run-django-dev.sh +++ b/scripts/run-django-dev.sh @@ -6,9 +6,8 @@ python3 manage.py collectstatic --noinput --clear python3 manage.py migrate --noinput RUN_DATA_MIGRATIONS=true python3 manage.py migrate --noinput -if [[ $NODE_ENV == "development" ]]; then - # load required fixtures on development by default - python3 manage.py loaddata platforms schools departments offered_by -fi +# load required fixtures on development by default +echo "Loading fixtures!" +python3 manage.py loaddata platforms schools departments offered_by uwsgi uwsgi.ini --honour-stdin From 3145ad571cb43778c19e1f4e7605a4e3a35c8a89 Mon Sep 17 00:00:00 2001 From: Carey P Gumaer Date: Thu, 22 Aug 2024 13:40:18 -0400 Subject: [PATCH 3/5] homepage hero search updates (#1454) * Apply new home page search box styles * desktop changes * update search box placeholder text * fix layout shift on focus * always underline browse by topic link * turn off flex shrink on adornment buttons * mobile styles * increase mobile font size of placeholder text for hero size inputs * fix chip styles * use negative margin implementation to fix focus border issue * add outline color to mui-error * set border radius to 6px * remove extraneous padding thing left over from the old border expansion technique * remove unnecessary styled div * get rid of unnecessary ternary expression * browse by topic text body3 on mobile * actually use a div --- .../src/pages/HomePage/HeroSearch.tsx | 150 ++++++++---------- .../src/pages/HomePage/HomePage.test.tsx | 4 +- .../src/pages/HomePage/SearchInput.tsx | 68 +++++--- .../src/components/Input/Input.tsx | 35 ++-- 4 files changed, 133 insertions(+), 124 deletions(-) diff --git a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx index 5f02038a95..15aaf4d412 100644 --- a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx +++ b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx @@ -5,34 +5,58 @@ import type { ChipLinkProps } from "ol-components" import { SearchInput, SearchInputProps } from "./SearchInput" import { ABOUT } from "@/common/urls" import { NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER } from "../AboutPage/AboutPage" +import { + RiAddBoxLine, + RiAwardLine, + RiSearch2Line, + RiThumbUpLine, + RiTimeLine, + RiVerifiedBadgeLine, +} from "@remixicon/react" type SearchChip = { label: string href: string variant?: ChipLinkProps["variant"] + icon?: React.ReactElement } const SEARCH_CHIPS: SearchChip[] = [ { - label: "New", + label: "Recently Added", href: "/search?sortby=new", - variant: "outlined", + variant: "outlinedWhite", + icon: , }, { label: "Popular", href: "/search?sortby=-views", + variant: "outlinedWhite", + icon: , }, { label: "Upcoming", href: "/search?sortby=upcoming", + variant: "outlinedWhite", + icon: , }, { label: "Free", href: "/search?free=true", + variant: "outlinedWhite", + icon: , }, { label: "With Certificate", href: "/search?certification=true", + variant: "outlinedWhite", + icon: , + }, + { + label: "Explore All", + href: "/search/", + variant: "gray", + icon: , }, ] @@ -70,29 +94,6 @@ const ImageContainer = styled.div(({ theme }) => ({ }, })) -const SquaredChip = styled(ChipLink, { - shouldForwardProp: (propName) => !["noBorder", "grow"].includes(propName), -})<{ noBorder?: boolean; grow?: boolean }>(({ noBorder, theme, grow }) => [ - { - borderRadius: "4px", - [theme.breakpoints.down("sm")]: { - ...theme.typography.body4, - padding: "4px 0px", - }, - }, - grow && { - [theme.breakpoints.down("sm")]: { - flex: 1, - height: "32px", - }, - }, - noBorder && { - "&:not(:hover)": { - borderColor: "white", - }, - }, -]) - const ControlsContainer = styled.div(({ theme }) => ({ marginTop: "24px", display: "flex", @@ -100,14 +101,9 @@ const ControlsContainer = styled.div(({ theme }) => ({ flexDirection: "column", alignItems: "flex-start", justifyContent: "center", - gap: "20px", - padding: "24px", - backgroundColor: theme.custom.colors.white, - borderRadius: "8px", - boxShadow: - "0px 2px 4px 0px rgba(37, 38, 43, 0.10), 0px 2px 4px 0px rgba(37, 38, 43, 0.10)", [theme.breakpoints.down("sm")]: { - padding: "12px", + marginTop: "12px", + padding: "0", gap: "16px", }, [theme.breakpoints.up("sm")]: { @@ -116,35 +112,41 @@ const ControlsContainer = styled.div(({ theme }) => ({ }, }, })) -const LinksContainer = styled.div(({ theme }) => ({ - width: "100%", - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - gap: "12px", - justifyContent: "space-between", + +const BrowseByTopicContainer = styled.div(({ theme }) => ({ + marginTop: "16px", + marginBottom: "24px", [theme.breakpoints.down("sm")]: { - flexDirection: "column", + marginTop: "0", }, })) -const TrenderingContainer = styled.div(({ theme }) => ({ - display: "flex", - flexDirection: "row", - alignItems: "center", - flexWrap: "wrap", + +const BrowseByTopicText = styled(Typography)(({ theme }) => ({ + color: theme.custom.colors.silverGrayDark, + ...theme.typography.body2, [theme.breakpoints.down("sm")]: { - gap: "8px", + ...theme.typography.body3, }, })) -const BrowseContainer = styled.div(({ theme }) => ({ + +const TopicLink = styled(Link)({ + textDecoration: "underline", +}) + +const StyledChipLink = styled(ChipLink)(({ theme, variant }) => [ + variant === "outlinedWhite" ?? { + borderColor: theme.custom.colors.lightGray2, + color: theme.custom.colors.silverGrayDark, + }, +]) + +const TrendingContainer = styled.div({ display: "flex", flexDirection: "row", + alignItems: "center", + flexWrap: "wrap", gap: "8px", - - [theme.breakpoints.down("sm")]: { - flex: 1, - }, -})) +}) const BoldLink = styled(Link)(({ theme }) => ({ ...theme.typography.subtitle1, @@ -185,7 +187,7 @@ const HeroSearch: React.FC = () => { { onClear={onSearchClear} onSubmit={onSearchSubmit} /> - - - - Trending - +
+ + + or browse by{" "} + + Topic + + + + {SEARCH_CHIPS.map((chip) => ( - ))} - - - - - - + +
diff --git a/frontends/mit-learn/src/pages/HomePage/HomePage.test.tsx b/frontends/mit-learn/src/pages/HomePage/HomePage.test.tsx index 2c4e7e4651..b18c61301c 100644 --- a/frontends/mit-learn/src/pages/HomePage/HomePage.test.tsx +++ b/frontends/mit-learn/src/pages/HomePage/HomePage.test.tsx @@ -116,12 +116,12 @@ describe("Home Page Hero", () => { setupAPIs() renderWithProviders() const expected = [ - { label: "New", href: "/search?sortby=new" }, + { label: "Topic", href: "/topics/" }, + { label: "Recently Added", href: "/search?sortby=new" }, { label: "Popular", href: "/search?sortby=-views" }, { label: "Upcoming", href: "/search?sortby=upcoming" }, { label: "Free", href: "/search?free=true" }, { label: "With Certificate", href: "/search?certification=true" }, - { label: "Browse by Topic", href: "/topics/" }, { label: "Explore All", href: "/search/" }, ] expected.forEach(({ label, href }) => { diff --git a/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx b/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx index aa1f415778..30042a18aa 100644 --- a/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx +++ b/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx @@ -1,8 +1,38 @@ import React, { useCallback } from "react" import { RiSearch2Line, RiCloseLine } from "@remixicon/react" -import { Input, AdornmentButton } from "ol-components" +import { Input, AdornmentButton, styled, pxToRem } from "ol-components" import type { InputProps } from "ol-components" +const StyledInput = styled(Input)(({ theme }) => ({ + height: "72px", + borderRadius: "6px", + "&.MuiInputBase-adornedEnd": { + paddingRight: "0 !important", + }, + [theme.breakpoints.down("sm")]: { + height: "56px", + gap: "8px", + }, +})) + +const StyledAdornmentButton = styled(AdornmentButton)(({ theme }) => ({ + ".MuiInputBase-sizeHero &": { + width: "72px", + height: "100%", + flexShrink: 0, + ".MuiSvgIcon-root": { + fontSize: pxToRem(24), + }, + [theme.breakpoints.down("sm")]: { + width: "37px", + height: "100%", + ".MuiSvgIcon-root": { + fontSize: pxToRem(16), + }, + }, + }, +})) + export interface SearchSubmissionEvent { target: { value: string @@ -50,7 +80,7 @@ const SearchInput: React.FC = (props) => { ) return ( - = (props) => { value={props.value} onChange={props.onChange} onKeyDown={onInputKeyDown} - startAdornment={ - - - - } endAdornment={ - props.value && ( - + {props.value && ( + + + + )} + - - - ) + + + } /> ) diff --git a/frontends/ol-components/src/components/Input/Input.tsx b/frontends/ol-components/src/components/Input/Input.tsx index 539f9ef009..cf03ade4f7 100644 --- a/frontends/ol-components/src/components/Input/Input.tsx +++ b/frontends/ol-components/src/components/Input/Input.tsx @@ -28,16 +28,25 @@ const baseInputStyles = (theme: Theme) => ({ "&.Mui-disabled": { backgroundColor: theme.custom.colors.lightGray1, }, - "&:hover:not(.Mui-disabled)": { + "&:hover:not(.Mui-disabled):not(.Mui-focused)": { borderColor: theme.custom.colors.darkGray2, }, "&.Mui-focused": { - borderWidth: "2px", + /** + * When change border width, it affects either the elements outside of it or + * inside based on the border-box setting. + * + * Instead of changing the border width, we hide the border and change width + * using outline. + */ + borderColor: "transparent", + outline: "2px solid currentcolor", + outlineOffset: "-2px", color: theme.custom.colors.darkGray2, - borderColor: "currentcolor", }, "&.Mui-error": { borderColor: theme.custom.colors.red, + outlineColor: theme.custom.colors.red, }, "& input::placeholder": { color: theme.custom.colors.silverGrayDark, @@ -72,15 +81,9 @@ const Input = styled(InputBase)(({ borderRadius: "4px", "&.MuiInputBase-adornedStart": { paddingLeft: `${12 - buttonPadding.medium}px`, - "&.Mui-focused": { - paddingLeft: `${11 - buttonPadding.medium}px`, - }, }, "&.MuiInputBase-adornedEnd": { paddingRight: `${12 - buttonPadding.medium}px`, - "&.Mui-focused": { - paddingRight: `${11 - buttonPadding.medium}px`, - }, }, }, size === "medium" && @@ -96,31 +99,19 @@ const Input = styled(InputBase)(({ borderRadius: "8px", "&.MuiInputBase-adornedStart": { paddingLeft: `${16 - buttonPadding.hero}px`, - "&.Mui-focused": { - paddingLeft: `${15 - buttonPadding.hero}px`, - }, }, "&.MuiInputBase-adornedEnd": { paddingRight: `${16 - buttonPadding.hero}px`, - "&.Mui-focused": { - paddingRight: `${15 - buttonPadding.hero}px`, - }, }, [theme.breakpoints.down("sm")]: { "& .MuiInputBase-input": { - ...theme.typography.body4, + ...theme.typography.body3, }, "&.MuiInputBase-adornedStart": { paddingLeft: `${12 - buttonPadding.heroMobile}px`, - "&.Mui-focused": { - paddingLeft: `${11 - buttonPadding.heroMobile}px`, - }, }, "&.MuiInputBase-adornedEnd": { paddingRight: `${12 - buttonPadding.heroMobile}px`, - "&.Mui-focused": { - paddingRight: `${11 - buttonPadding.heroMobile}px`, - }, }, }, }, From 192ad2375d1a84cad4f8bdcf8cb44a970eda04e2 Mon Sep 17 00:00:00 2001 From: Carey P Gumaer Date: Thu, 22 Aug 2024 13:59:59 -0400 Subject: [PATCH 4/5] search box adornment buttons should be 56px wide on mobile (#1457) --- frontends/mit-learn/src/pages/HomePage/SearchInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx b/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx index 30042a18aa..75645c7c37 100644 --- a/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx +++ b/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx @@ -24,7 +24,7 @@ const StyledAdornmentButton = styled(AdornmentButton)(({ theme }) => ({ fontSize: pxToRem(24), }, [theme.breakpoints.down("sm")]: { - width: "37px", + width: "56px", height: "100%", ".MuiSvgIcon-root": { fontSize: pxToRem(16), From fc59879f4918d9a082f82d375ad2290f9f53e0db Mon Sep 17 00:00:00 2001 From: Doof Date: Thu, 22 Aug 2024 18:00:30 +0000 Subject: [PATCH 5/5] Release 0.17.8 --- RELEASE.rst | 8 ++++++++ main/settings.py | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/RELEASE.rst b/RELEASE.rst index 71280dadbe..2613a1bcd9 100644 --- a/RELEASE.rst +++ b/RELEASE.rst @@ -1,6 +1,14 @@ Release Notes ============= +Version 0.17.8 +-------------- + +- search box adornment buttons should be 56px wide on mobile (#1457) +- homepage hero search updates (#1454) +- Fix departments and schools fixtures (#1453) +- Renaming the s3 buckets used for storing the app. (#1455) + Version 0.17.7 (Released August 21, 2024) -------------- diff --git a/main/settings.py b/main/settings.py index c7e2659ab0..764b38d795 100644 --- a/main/settings.py +++ b/main/settings.py @@ -33,7 +33,7 @@ from main.settings_pluggy import * # noqa: F403 from openapi.settings_spectacular import open_spectacular_settings -VERSION = "0.17.7" +VERSION = "0.17.8" log = logging.getLogger()