diff --git a/my-app/index.html b/my-app/index.html index 1f0db4cb..ff9b13cf 100644 --- a/my-app/index.html +++ b/my-app/index.html @@ -8,8 +8,7 @@ - - Find my course + Find my course
diff --git a/my-app/package-lock.json b/my-app/package-lock.json index 43ca33fe..44300fe8 100644 --- a/my-app/package-lock.json +++ b/my-app/package-lock.json @@ -23,6 +23,7 @@ "mobx-react-lite": "^4.1.0", "pdfjs-dist": "^5.1.91", "react": "^18.3.1", + "react-burger-menu": "^3.1.0", "react-dom": "^18.3.1", "react-infinite-scroll-component": "^6.1.0", "react-router-dom": "^7.4.0", @@ -3200,6 +3201,16 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/amdefine": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", + "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==", + "license": "BSD-3-Clause OR MIT", + "optional": true, + "engines": { + "node": ">=0.4.2" + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -3231,6 +3242,26 @@ "dev": true, "license": "Python-2.0" }, + "node_modules/ast-transform": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/ast-transform/-/ast-transform-0.0.0.tgz", + "integrity": "sha512-e/JfLiSoakfmL4wmTGPjv0HpTICVmxwXgYOB8x+mzozHL8v+dSfCbrJ8J8hJ0YBP0XcYu1aLZ6b/3TnxNK3P2A==", + "license": "MIT", + "dependencies": { + "escodegen": "~1.2.0", + "esprima": "~1.0.4", + "through": "~2.3.4" + } + }, + "node_modules/ast-types": { + "version": "0.7.8", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.7.8.tgz", + "integrity": "sha512-RIOpVnVlltB6PcBJ5BMLx+H+6JJ/zjDGU0t7f0L6c2M1dqcK92VQopLBlPQ9R80AVXelfqYgjcPLtHtDbNFg0Q==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/autoprefixer": { "version": "10.4.21", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", @@ -3287,6 +3318,26 @@ "concat-map": "0.0.1" } }, + "node_modules/browser-resolve": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz", + "integrity": "sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==", + "license": "MIT", + "dependencies": { + "resolve": "1.1.7" + } + }, + "node_modules/browserify-optional": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/browserify-optional/-/browserify-optional-1.0.1.tgz", + "integrity": "sha512-VrhjbZ+Ba5mDiSYEuPelekQMfTbhcA2DhLk2VQWqdcCROWeFqlTcXZ7yfRkXCIl8E+g4gINJYJiRB7WEtfomAQ==", + "license": "MIT", + "dependencies": { + "ast-transform": "0.0.0", + "ast-types": "^0.7.0", + "browser-resolve": "^1.8.1" + } + }, "node_modules/browserslist": { "version": "4.24.4", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz", @@ -3374,6 +3425,12 @@ "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==", "license": "MIT" }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "license": "MIT" + }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -3687,6 +3744,42 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/escodegen": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.2.0.tgz", + "integrity": "sha512-yLy3Cc+zAC0WSmoT2fig3J87TpQ8UaZGx8ahCAs9FL8qNbyV7CVyPKS74DG4bsHiL5ew9sxdYx131OkBQMFnvA==", + "dependencies": { + "esprima": "~1.0.4", + "estraverse": "~1.5.0", + "esutils": "~1.0.0" + }, + "bin": { + "escodegen": "bin/escodegen.js", + "esgenerate": "bin/esgenerate.js" + }, + "engines": { + "node": ">=0.4.0" + }, + "optionalDependencies": { + "source-map": "~0.1.30" + } + }, + "node_modules/escodegen/node_modules/estraverse": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.5.1.tgz", + "integrity": "sha512-FpCjJDfmo3vsc/1zKSeqR5k42tcIhxFIlvq+h9j0fO2q/h2uLKyweq7rYJ+0CoVvrGQOxIS5wyBrW/+vF58BUQ==", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/escodegen/node_modules/esutils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.0.0.tgz", + "integrity": "sha512-x/iYH53X3quDwfHRz4y8rn4XcEwwCJeWsul9pF1zldMbGtgOtMNBEOuYWwB1EQlK2LRa1fev3YAgym/RElp5Cg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/eslint": { "version": "9.24.0", "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.24.0.tgz", @@ -3819,6 +3912,18 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/esprima": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz", + "integrity": "sha512-rp5dMKN8zEs9dfi9g0X1ClLmV//WRyk/R15mppFNICIFRG5P92VP7Z04p8pk++gABo9W2tY+kHyu6P1mEHgmTA==", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/esquery": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz", @@ -3865,6 +3970,12 @@ "node": ">=0.10.0" } }, + "node_modules/eve": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/eve/-/eve-0.5.4.tgz", + "integrity": "sha512-aqprQ9MAOh1t66PrHxDFmMXPlgNO6Uv1uqvxmwjprQV50jaQ2RqO7O1neY4PJwC+hMnkyMDphu2AQPOPZdjQog==", + "license": "Apache-2.0" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -4684,6 +4795,15 @@ "node": ">=0.10.0" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/optionator": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", @@ -4842,6 +4962,17 @@ "node": ">= 0.8.0" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/protobufjs": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.0.tgz", @@ -4888,6 +5019,26 @@ "node": ">=0.10.0" } }, + "node_modules/react-burger-menu": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-burger-menu/-/react-burger-menu-3.1.0.tgz", + "integrity": "sha512-jLkYUdVu4K8hXD1YUWMDDc+fFUohKoerUnjfyE2PXR0wxEIEM2gZuQGBgLrdRzNsoMbP1G8uHXda0hbjaW3Enw==", + "license": "MIT", + "dependencies": { + "browserify-optional": "^1.0.0", + "classnames": "^2.2.6", + "eve": "~0.5.1", + "prop-types": "^15.7.2", + "snapsvg-cjs": "0.0.6" + }, + "engines": { + "node": ">=4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0", + "react-dom": ">=0.14.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -4913,6 +5064,12 @@ "react": ">=16.0.0" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", @@ -4989,6 +5146,12 @@ "node": ">=0.10.0" } }, + "node_modules/resolve": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", + "integrity": "sha512-9znBF0vBcaSN3W2j7wKvdERPwqTxSpCq+if5C0WoTCyV9n24rua28jeuQ2pL/HOf+yUe/Mef+H/5p60K0Id3bg==", + "license": "MIT" + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -5106,6 +5269,39 @@ "node": ">=8" } }, + "node_modules/snapsvg": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/snapsvg/-/snapsvg-0.5.1.tgz", + "integrity": "sha512-CjwWYsL7+CCk1vCk9BBKGYS4WJVDfJAOMWU+Zhzf8wf6pAm/xT34wnpaMPAgcgCNkxuU6OkQPPd8wGuRCY9aNw==", + "license": "Apache-2.0", + "dependencies": { + "eve": "~0.5.1" + } + }, + "node_modules/snapsvg-cjs": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/snapsvg-cjs/-/snapsvg-cjs-0.0.6.tgz", + "integrity": "sha512-7NNvoGrc3BQvWz5rWK1DsD5/Vni4STswz5B3JrBADboQWcN8OBVGjYVJFPT5JkUXb2iVnEflZANhufEpEcTHXw==", + "license": "MIT", + "dependencies": { + "snapsvg": "0.5.1" + }, + "peerDependencies": { + "eve": "~0.5.1" + } + }, + "node_modules/source-map": { + "version": "0.1.43", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz", + "integrity": "sha512-VtCvB9SIQhk3aF6h+N85EaqIaBFIAfZ9Cu+NJHHVvc8BbEcnvDcFw6sqQ2dQrT6SlOrZq3tIvyD9+EGq/lJryQ==", + "optional": true, + "dependencies": { + "amdefine": ">=0.0.4" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -5197,6 +5393,12 @@ "node": ">=8" } }, + "node_modules/through": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==", + "license": "MIT" + }, "node_modules/tinyglobby": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz", diff --git a/my-app/package.json b/my-app/package.json index 05512cb0..082aef4c 100644 --- a/my-app/package.json +++ b/my-app/package.json @@ -25,6 +25,7 @@ "mobx-react-lite": "^4.1.0", "pdfjs-dist": "^5.1.91", "react": "^18.3.1", + "react-burger-menu": "^3.1.0", "react-dom": "^18.3.1", "react-infinite-scroll-component": "^6.1.0", "react-router-dom": "^7.4.0", diff --git a/my-app/src/pages/App.jsx b/my-app/src/pages/App.jsx index 0beae15d..576104a9 100644 --- a/my-app/src/pages/App.jsx +++ b/my-app/src/pages/App.jsx @@ -1,29 +1,69 @@ -import React from 'react'; +import React, { useState } from 'react'; import { SidebarPresenter } from '../presenters/SidebarPresenter.jsx'; import { SearchbarPresenter } from '../presenters/SearchbarPresenter.jsx'; import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx'; import { FilterPresenter } from "../presenters/FilterPresenter.jsx"; import { Routes, Route } from 'react-router-dom'; import SharedView from '../pages/SharedView.jsx'; -import { model } from '/src/model.js'; +import { slide as Menu } from 'react-burger-menu'; function MainAppLayout({ model }) { + const [sidebarIsOpen, setSidebarIsOpen] = useState(true); + + const toggleSidebar = () => { + setSidebarIsOpen(!sidebarIsOpen); + } + + return ( -
-
- + /* The sidebar styling(under the menu)*/ +
+ { /* If sidebar is open, set length to 400px, else it should not be visible */} +
+ setSidebarIsOpen(state.isOpen)} + className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] z-0 h-screen" // The menu styling + noOverlay + styles={{ + bmMenuWrap: { + zIndex: '10' + } + }} + > + {/* The menu contents */} + +
-
+ +
+
- +
+ {/* The button to open the menu */} + + +
+ +
- + +
-
- ); +
) } function App({ model }) { diff --git a/my-app/src/presenters/PrerequisitePresenter.jsx b/my-app/src/presenters/PrerequisitePresenter.jsx index 2219fa41..90b9b213 100644 --- a/my-app/src/presenters/PrerequisitePresenter.jsx +++ b/my-app/src/presenters/PrerequisitePresenter.jsx @@ -459,7 +459,8 @@ export const PrerequisitePresenter = observer((props) => { let key = Object.keys(prereqs); if (prereqs[key] === true) { return true; - } else { + } + else { return false; } diff --git a/my-app/src/styles.css b/my-app/src/styles.css index 0b707bad..3f3106ad 100644 --- a/my-app/src/styles.css +++ b/my-app/src/styles.css @@ -21,4 +21,12 @@ .react-flow__node.no-handles .react-flow__handle { display: none; - } \ No newline at end of file + } + +.bm-burger-button { + position: absolute; + width: 36px; + height: 36px; + left: 36px; + top: 36px; +} \ No newline at end of file diff --git a/my-app/src/views/Components/CoursePagePopup.jsx b/my-app/src/views/Components/CoursePagePopup.jsx index 98232c50..8785d5ea 100644 --- a/my-app/src/views/Components/CoursePagePopup.jsx +++ b/my-app/src/views/Components/CoursePagePopup.jsx @@ -13,7 +13,7 @@ function CoursePagePopup({ }) { const treeRef = useRef(null); - const [showOverlay, setShowOverlay] = useState(true); + const [showOverlay, setShowOverlay] = useState(false); const [averageRating, setAverageRating] = useState(null); @@ -59,10 +59,10 @@ function CoursePagePopup({
{ e.stopPropagation(); setShowOverlay(true); @@ -82,7 +82,16 @@ function CoursePagePopup({ {course.code} {' '}- {' '} {course.name} + + + + ({course.credits} Credits) diff --git a/my-app/src/views/ListView.jsx b/my-app/src/views/ListView.jsx index 8617d228..ccf9d0bd 100644 --- a/my-app/src/views/ListView.jsx +++ b/my-app/src/views/ListView.jsx @@ -151,11 +151,13 @@ function ListView(props) { className="text-gray-600" dangerouslySetInnerHTML={{ __html: readMore[course.code] + ? course?.description : (course?.description?.slice(0, 200)+"..."), }} /> {course?.description?.length > 150 && ( + { @@ -184,9 +186,9 @@ function ListView(props) { transition-all duration-300 ease-in-out font-semibold text-sm shadow-sm ${props.favouriteCourses.some((fav) => fav.code === course.code) - ? 'bg-yellow-400 /90 hover:bg-yellow-500/90 border-2 border-yellow-600 hover:border-yellow-700 text-yellow-900' - : 'bg-yellow-200/90 hover:bg-yellow-300 border-2 border-yellow-400 hover:border-yellow-500 text-yellow-600 hover:text-yellow-700' - }`} + ? 'bg-yellow-400 /90 hover:bg-yellow-500/90 border-2 border-yellow-600 hover:border-yellow-700 text-yellow-900' + : 'bg-yellow-200/90 hover:bg-yellow-300 border-2 border-yellow-400 hover:border-yellow-500 text-yellow-600 hover:text-yellow-700' + }`} onClick={(e) => { e.stopPropagation(); handleFavouriteClick(course); @@ -194,15 +196,21 @@ function ListView(props) { > {props.favouriteCourses.some((fav) => fav.code === course.code) ? ( <> - - + + Remove from Favourites ) : ( <> - - + + Add to Favourites @@ -216,9 +224,9 @@ function ListView(props) {
)} {props.popup} - {!isLoading && props.targetScroll > 1000 &&( -
- {showFavourites && ( e.stopPropagation()} /> )} diff --git a/my-app/src/views/SidebarView.jsx b/my-app/src/views/SidebarView.jsx index 447e93ff..b3e1f9fa 100644 --- a/my-app/src/views/SidebarView.jsx +++ b/my-app/src/views/SidebarView.jsx @@ -8,6 +8,7 @@ import { UploadTranscriptPresenter } from '../presenters/UploadTranscriptPresent import CollapsibleCheckboxes from './Components/SideBarComponents/CollapsibleCheckboxes.jsx'; + function SidebarView(props) { return (