From 573afb30b70e9c07ccc2246217eaeaa1f3c241ce Mon Sep 17 00:00:00 2001 From: Anurag607 Date: Thu, 27 Jul 2023 18:46:48 +0530 Subject: [PATCH 1/2] ui: made the course page responsive --- src/App.tsx | 35 ++++--- src/components/BurgerMenu/index.tsx | 46 +++++++++ src/components/CourseCard.tsx | 153 ++++++++++++++++++---------- src/components/CourseFilters.tsx | 29 ++++-- src/components/Filters/index.tsx | 25 ++--- src/components/NewHeader.tsx | 45 ++++---- src/main.tsx | 5 +- src/pages/Courses.tsx | 44 ++++---- src/scripts/burgerMenu.ts | 61 +++++++++++ src/{ => styles}/App.css | 8 +- src/styles/burgerMenu.css | 117 +++++++++++++++++++++ src/styles/courses.css | 145 ++++++++++++++++++++++++++ src/styles/filters.css | 36 +++++++ src/{ => styles}/index.css | 46 +++++++-- 14 files changed, 646 insertions(+), 149 deletions(-) create mode 100644 src/components/BurgerMenu/index.tsx create mode 100644 src/scripts/burgerMenu.ts rename src/{ => styles}/App.css (99%) create mode 100644 src/styles/burgerMenu.css create mode 100644 src/styles/courses.css create mode 100644 src/styles/filters.css rename src/{ => styles}/index.css (74%) diff --git a/src/App.tsx b/src/App.tsx index 5450249..ff1d189 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,21 +1,19 @@ -import React, { useEffect, useState } from 'react'; -import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; -import "./index.css"; +import { useEffect, useState } from "react"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import io from "socket.io-client"; import Login from "./pages/Login"; import Courses from "./pages/Courses"; -import CourseDetails from './pages/CourseDetails'; -import MyCourses from './pages/MyCourses'; +import CourseDetails from "./pages/CourseDetails"; +import MyCourses from "./pages/MyCourses"; import { Toaster } from "react-hot-toast"; const socket = io("https://api.dsep.samagra.io"); // const socket = io("http://localhost:3000"); function App() { - const [theme, setTheme] = useState("light"); // detects browser's default darkmode setting - let mediaQueryObj = window.matchMedia('(prefers-color-scheme: dark)'); + let mediaQueryObj = window.matchMedia("(prefers-color-scheme: dark)"); let isDarkMode = mediaQueryObj.matches; // updates state to dark if default darkmode enabled in browser @@ -26,18 +24,27 @@ function App() { }, []); const toggleTheme = () => { - setTheme((curr) => curr === "dark" ? "light" : "dark"); - } + setTheme((curr) => (curr === "dark" ? "light" : "dark")); + }; return ( -
+
{/* */} } /> - } /> - } /> - } /> + } + /> + } + /> + } + />
@@ -45,4 +52,4 @@ function App() { ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/components/BurgerMenu/index.tsx b/src/components/BurgerMenu/index.tsx new file mode 100644 index 0000000..1d41e7c --- /dev/null +++ b/src/components/BurgerMenu/index.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { Menu } from "../../scripts/burgerMenu"; +import Filters from "../Filters"; + +export const NavItemsData = [ + { + name: "Home", + route: "/", + }, +]; + +const Burger: React.FC<{ applyFilter: any; mode: any }> = ({ + applyFilter, + mode, +}) => { + return ( +
+
+
+
+ + + +
+
+
+ {/* {NavItemsData.map((el: any, i: number) => { + return ( +
  • + + {el.name} + +
    • + ); + })} */} +
    + +
    +
    +
    +
    + ); +}; + +export default Burger; diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 16bfc71..70444e9 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -5,18 +5,34 @@ import { CourseType } from "../types/courses"; import Rating from "./Ratings"; import { Button, Card, Col, Row } from "react-bootstrap"; import { find, map } from "lodash"; -import { FaBookmark, FaCalendar ,FaCreditCard,FaEye,FaUser} from "react-icons/fa"; -import { BiListPlus} from "react-icons/bi"; +import { + FaBookmark, + FaCalendar, + FaCreditCard, + FaEye, + FaUser, +} from "react-icons/fa"; +import { BiListPlus } from "react-icons/bi"; import moment from "moment"; -const CourseCard: FC<{ course: CourseType;isMyCourse?:boolean }> = ({ course,isMyCourse }) => { -console.log("mnop:",{course}) +const CourseCard: FC<{ course: CourseType; isMyCourse?: boolean }> = ({ + course, + isMyCourse, +}) => { + console.log("mnop:", { course }); const imageUrl = useMemo( () => course?.descriptor?.images?.[0]?.url ?? Books, [course, Books] ); - const normalisedTags = useMemo(() => map(course?.tags[0]?.list, (tag) => ({ name: tag?.descriptor?.name, value: tag?.value })), [course]) - const [offeringInstitue,credits,instructors] = useMemo( + const normalisedTags = useMemo( + () => + map(course?.tags[0]?.list, (tag) => ({ + name: tag?.descriptor?.name, + value: tag?.value, + })), + [course] + ); + const [offeringInstitue, credits, instructors] = useMemo( () => [ find(normalisedTags, { name: "offeringInstitue" })?.value, find(normalisedTags, { name: "credits" })?.value, @@ -29,21 +45,19 @@ console.log("mnop:",{course}) to={`/courses/${course?.id}`} style={{ cursor: "pointer", marginBottom: "10px" }} > - - + + - - - + + + - +
    {offeringInstitue}
     - - {course?.descriptor?.name} - + {course?.descriptor?.name} @@ -58,44 +72,81 @@ console.log("mnop:",{course}) cupiditate officia sapiente in magni? - {isMyCourse ? ( - - - - - - - - ):( - - - - - - - + {isMyCourse ? ( + + + + + + + + ) : ( +
    + + + +
    )} - - - -
    - Credits :{credits} -
    -
    - {moment(course?.time?.range?.start).format('Do MMM, YYYY')} -
    -
    - {instructors} -
    - + + +
    + + Credits: {credits} +
    +
    + + + {moment(course?.time?.range?.start).format("Do MMM, YYYY")} + +
    +
    + + {instructors} +
    diff --git a/src/components/CourseFilters.tsx b/src/components/CourseFilters.tsx index 6fb0a97..c558ba3 100644 --- a/src/components/CourseFilters.tsx +++ b/src/components/CourseFilters.tsx @@ -1,4 +1,3 @@ - import { useMemo, FC } from "react"; import { map } from "lodash"; import NationalCodinator from "./Filters/NationalCodinator"; @@ -15,26 +14,35 @@ const CourseFilters: FC<{ applyFilter: any }> = ({ applyFilter }) => { key: "NationalCoordinator", label: "National Coordinator", value: "", - component: , + component: ( + + ), }, { key: "CourseMode", label: "Course Mode", value: "", - component: , + component: , }, { key: "CourseDuration", label: "Course Duration", value: "", - component: , + component: ( + + ), }, { key: "Course Credits", label: "Course Credits", value: "", items: [], - component: , + component: ( + + ), }, // { // key: "Status", @@ -48,7 +56,9 @@ const CourseFilters: FC<{ applyFilter: any }> = ({ applyFilter }) => { label: "Course Category", value: "", items: [], - component: , + component: ( + + ), }, ], [] @@ -57,12 +67,9 @@ const CourseFilters: FC<{ applyFilter: any }> = ({ applyFilter }) => { return ( <> {map(courseFilters, (cFilter: any) => ( -
    - {/*
    - {cFilter.label} -
    */} +
    {cFilter.component && ( -
    {cFilter.component}
    +
    {cFilter.component}
    )}
    ))} diff --git a/src/components/Filters/index.tsx b/src/components/Filters/index.tsx index 20f37e2..6d01d13 100644 --- a/src/components/Filters/index.tsx +++ b/src/components/Filters/index.tsx @@ -6,28 +6,17 @@ const Filters: FC<{ applyFilter: any; mode: any }> = ({ applyFilter, mode, }) => { - function handleFilter(){ - let filterDiv = document.getElementById('filterDiv'); - if(filterDiv?.classList.contains('hidden')){ - filterDiv.classList.remove('hidden'); - }else{ - filterDiv?.classList.add('hidden'); - } - } return ( <> - -
    -
    -   Filter By -
    - +
    +
    + + {"Filter By"} +
    +
    +
    -
    - -
    -
    ); }; diff --git a/src/components/NewHeader.tsx b/src/components/NewHeader.tsx index b629685..a5acf83 100644 --- a/src/components/NewHeader.tsx +++ b/src/components/NewHeader.tsx @@ -1,33 +1,36 @@ import { FC } from "react"; -import {Navbar,Nav,Form,Container,Button} from "react-bootstrap"; +import { Navbar, Nav, Form, Container, Button, Row } from "react-bootstrap"; import { FaGratipay, FaHome } from "react-icons/fa"; import { LinkContainer } from "react-router-bootstrap"; +import Burger from "./BurgerMenu"; const Header: FC<{ - isSearchVisible?: boolean; - handleChange?: (ev: any) => void; - }> = ({ isSearchVisible = false, handleChange }) => { - + isSearchVisible?: boolean; + handleChange?: (ev: any) => void; + applyFilter?: any; + mode?: any; +}> = ({ isSearchVisible = false, handleChange, applyFilter, mode }) => { return ( - <> - +
    + + - - - DSEP - - + DSEP - + {/* */} - +
    ); -} +}; export default Header; diff --git a/src/main.tsx b/src/main.tsx index 8b0ecc2..17e7676 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,7 +3,10 @@ import ReactDOM from "react-dom/client"; import App from "./App"; import { Provider } from "react-redux"; import store from "./store"; -import "./index.css"; +import "./styles/index.css"; +import "./styles/burgerMenu.css"; +import "./styles/filters.css"; +import "./styles/courses.css"; import "bootstrap/dist/css/bootstrap.min.css"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( diff --git a/src/pages/Courses.tsx b/src/pages/Courses.tsx index 938acca..a161c75 100644 --- a/src/pages/Courses.tsx +++ b/src/pages/Courses.tsx @@ -9,7 +9,7 @@ import NoCourseAvailable from "../components/NoCourseAvailable"; import { Row, Col, Container } from "react-bootstrap"; import { HiAdjustmentsHorizontal } from "react-icons/hi2"; import NewHeader from "../components/NewHeader"; -//@ts-ignore +// @ts-ignore import CourseShimmer from "../components/CourseShimmer"; const Courses = (props: any) => { const { socket, mode } = props; @@ -86,46 +86,40 @@ const Courses = (props: any) => { // if (!isDataAvailable) return ; return ( <> - + {searchText && (
    Search results for   "{searchText}"
    )}     -
    +
    - + {/* {isDataAvailable && ( */} {true && ( - + {!loading && ( -
    - Showing   - - {dataToDisplay?.length} courses - +
    + Showing + {dataToDisplay?.length} courses
    )} - + {dataToDisplay.length === 0 && !loading && ( )} @@ -136,11 +130,11 @@ const Courses = (props: any) => { ) : dataToDisplay.length > 0 ? ( - { map(dataToDisplay, (course: any) => ( - - ))} + {map(dataToDisplay, (course: any) => ( + + ))}{" "} + ) : null} - )} diff --git a/src/scripts/burgerMenu.ts b/src/scripts/burgerMenu.ts new file mode 100644 index 0000000..290a796 --- /dev/null +++ b/src/scripts/burgerMenu.ts @@ -0,0 +1,61 @@ +const Menu = () => { + const menu = document.querySelector(".menu") as HTMLDivElement; + const menuBar1 = document.querySelector(".menu_bar1") as HTMLDivElement; + const menuBar2 = document.querySelector(".menu_bar2") as HTMLDivElement; + const menuBar3 = document.querySelector(".menu_bar3") as HTMLDivElement; + const sidebar = document.querySelector(".sidebar") as HTMLDivElement; + const sidebarel = document.querySelectorAll( + ".sidebarel" + ) as NodeListOf; + + const closeSidebar = () => { + menu.style.backgroundColor = "transparent"; + menuBar1.style.backgroundColor = "#f6f8fe"; + menuBar2.style.backgroundColor = "#f6f8fe"; + menuBar3.style.backgroundColor = "#f6f8fe"; + sidebarel.forEach((el, i) => { + el.style.transition = "all 0.3s 0.5s 0.5s"; + el.style.opacity = "1"; + setTimeout(() => { + el.style.display = "none"; + }, 150); + }); + sidebar.style.width = "0"; + menu.dataset.toggle = "open"; + menuBar1.style.width = "50%"; + menuBar1.style.transform = "translate(-100%, -11.5px)"; + menuBar1.style.transformOrigin = "100% 0"; + menuBar2.style.width = "100%"; + menuBar2.style.transform = "translate(-50%, 0.4px)"; + menuBar3.style.width = "50%"; + menuBar3.style.transform = "translate(0, 11.5px)"; + menuBar3.style.transformOrigin = "0 100%"; + }; + + const openSidebar = () => { + menu.style.backgroundColor = "#159bfc"; + menuBar1.style.backgroundColor = "#f6f8fe"; + menuBar2.style.backgroundColor = "#f6f8fe"; + menuBar3.style.backgroundColor = "#f6f8fe"; + sidebarel.forEach((el, i) => { + el.style.display = "none"; + setTimeout(() => { + el.style.transition = "all 0.3s 0"; + el.style.display = "flex"; + el.style.opacity = "1"; + }, 100); + // el.onclick = () => closeSidebar(); + }); + sidebar.style.width = "min(350px, 100vw)"; + menu.dataset.toggle = "close"; + menuBar1.style.width = "100%"; + menuBar1.style.transform = "translate(-66%, -11.5px) rotate(-45deg)"; + menuBar2.style.width = "0"; + menuBar3.style.width = "100%"; + menuBar3.style.transform = "translate(-35%, -12.5px) rotate(45deg)"; + }; + + menu.dataset.toggle === "open" ? openSidebar() : closeSidebar(); +}; + +export { Menu }; diff --git a/src/App.css b/src/styles/App.css similarity index 99% rename from src/App.css rename to src/styles/App.css index 812010d..f867797 100644 --- a/src/App.css +++ b/src/styles/App.css @@ -8,10 +8,12 @@ ::-webkit-scrollbar { width: 10px !important; } + ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3) !important; border-radius: 10px !important; } + ::-webkit-scrollbar-thumb { background: rgb(20, 155, 252) !important; border-radius: 10px !important; @@ -22,9 +24,11 @@ padding: 1.5em; will-change: filter; } + .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } + .logo.react:hover { filter: drop-shadow(0 0 2em #61dafbaa); } @@ -33,6 +37,7 @@ from { transform: rotate(0deg); } + to { transform: rotate(360deg); } @@ -50,5 +55,4 @@ .read-the-docs { color: #888; -} - +} \ No newline at end of file diff --git a/src/styles/burgerMenu.css b/src/styles/burgerMenu.css new file mode 100644 index 0000000..f4e99c8 --- /dev/null +++ b/src/styles/burgerMenu.css @@ -0,0 +1,117 @@ +.burgerCont { + display: none; + justify-content: center; + align-items: center; + gap: 0.5rem; +} + +.burgerWrapper { + display: none; + transition: all 0.3s; + margin-left: 0.75rem; +} + +.burgerWrapper .menu { + width: 2.75rem; + height: 2.75rem; + cursor: pointer; + transition: all 0.5s; + z-index: 1100; + position: relative; + background-color: transparent; +} + +.burgerWrapper .menu .menuBarCont { + display: flex; + justify-content: center; + align-items: center; + position: relative; + width: 70%; + transition: all 0.5s; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.burgerWrapper .menu .menuBarCont .menu_bar1, +.burgerWrapper .menu .menuBarCont .menu_bar2, +.burgerWrapper .menu .menuBarCont .menu_bar3 { + position: absolute; + background-color: #f6f8fe; + width: 100%; + height: 4px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 0px; + transition: all 0.5s; + display: inline-block; +} + +.burgerWrapper .menu .menuBarCont .menu_bar1 { + width: 50%; + transform: translate(-100%, -11.5px); + transform-origin: 100% 0; +} + +.burgerWrapper .menu .menuBarCont .menu_bar2 { + width: 100%; + transform: translate(-50%, 0.4px); +} + +.burgerWrapper .menu .menuBarCont .menu_bar3 { + width: 50%; + transform: translate(0, 11.5px); + transform-origin: 0 100%; +} + +.sidebar { + width: 0px; + height: 110vh; + display: flex; + flex-direction: column; + justify-content: start; + align-self: start; + gap: 1rem; + position: absolute; + top: 0; + left: 0; + padding-top: 5.5rem; + transition: all 0.3s ease-in-out; + z-index: 1000; + background-color: white; + overflow-y: scroll; + /* translate: 2.5% 2.5%; */ +} + +.sidebarel { + display: none; + z-index: 50; + cursor: pointer; + color: #1a1a1c; + margin-left: 2rem; + text-align: left; + transition: all 300ms ease-in-out; +} + +.navl { + font-size: 1.3rem; + color: #1a1a1c; + transition: all 300ms ease-in-out; + padding: 0.5rem 0.25rem; +} + +.navl:hover { + background-color: #e8e8e8; + border-left: 0.25rem solid #159bfc; +} + +@media screen and (max-width: 900px) { + .burgerCont { + display: flex; + } + + .burgerWrapper { + display: block; + } +} \ No newline at end of file diff --git a/src/styles/courses.css b/src/styles/courses.css new file mode 100644 index 0000000..3697a58 --- /dev/null +++ b/src/styles/courses.css @@ -0,0 +1,145 @@ +.courseCont { + background-color: #f7f7f7; + min-height: 90vh; + display: flex; + align-items: center; + justify-content: center; +} + +.courseWrapper { + padding-top: 0.75rem; + height: 85vh; + position: relative; +} + +.courseCount { + width: fit-content; + font-size: 1.25rem; + font-weight: 700; + opacity: 0.8; + margin-bottom: 0.75rem; + display: flex; + align-items: center; + justify-content: start; + gap: 0.35rem; + text-transform: capitalize; +} + +.courseCount span:nth-child(2) { + opacity: 1; + color: #159bfc; +} + +.courseList { + height: 92.5%; + overflow: scroll; + padding-bottom: 2rem; +} + +.cardContent { + display: flex; + justify-content: start; + align-items: start; + height: fit-content; + position: relative; +} + +.courseTitle { + display: flex; + justify-content: start; + align-items: center; + gap: 1rem; + margin-bottom: 0.5rem; +} + +.courseImage { + height: 90px; + width: 225px; +} + +.courseCardActions { + display: flex; + align-items: center; + justify-content: start; + gap: 0.5rem; + flex-wrap: wrap-reverse; + margin-top: 0.5rem; +} + +.courseCardMeta { + display: flex; + flex-direction: column; + align-items: start; + justify-content: start; + margin-bottom: 0rem; + border-left: 1px solid lightgray; + height: 100%; +} + +.courseCardMeta div { + display: flex; + flex-direction: row; + gap: 0.5rem; + align-items: center; + justify-content: start; + height: fit-content; + margin-bottom: 1rem; + width: 100%; + text-align: left; + margin-left: 0.5rem; +} + +@media screen and (max-width: 400px) { + .courseCardActions { + gap: 0.25rem; + } +} + +@media screen and (max-width: 550px) { + .cardContent { + flex-direction: column-reverse; + align-items: flex-start; + gap: 0.75rem; + } + + .courseCardMeta { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + margin-bottom: 0.5rem; + border-left: none; + border-bottom: 1px solid lightgray; + } + + .courseCardMeta div { + display: flex; + flex-direction: column; + align-items: center; + justify-content: start; + height: 100%; + width: 33%; + text-align: center; + margin-left: 0rem; + margin-bottom: 0rem; + } +} + +@media screen and (max-width: 1000px) { + .courseTitle { + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + } + + .courseImage { + width: fit-content; + } +} + +@media screen and (max-width: 900px) { + .courseCont { + padding-left: 1.5rem; + padding-top: 0.75rem; + } +} \ No newline at end of file diff --git a/src/styles/filters.css b/src/styles/filters.css new file mode 100644 index 0000000..a407c2e --- /dev/null +++ b/src/styles/filters.css @@ -0,0 +1,36 @@ +.filterWrapper { + display: none; + padding: none !important; +} + +.filterWrapper .filterContainer { + height: 90vh; + background-color: #f7f7f7; + padding-inline: 1rem; +} + +.burgerFilterWrapper .filterContainer { + height: fit-content; + background-color: transparent; + padding-inline: 1rem; +} + +.filterHeading { + margin-block: 0.75rem; + font-weight: 700; + font-size: 1.25rem; + opacity: 0.8; +} + +.filterIcon { + font-size: 2rem; + font-weight: 900; + opacity: 1; + padding-bottom: 0.25rem; +} + +@media screen and (min-width: 900px) { + .filterWrapper { + display: flex; + } +} \ No newline at end of file diff --git a/src/index.css b/src/styles/index.css similarity index 74% rename from src/index.css rename to src/styles/index.css index 30d1c02..8840519 100644 --- a/src/index.css +++ b/src/styles/index.css @@ -1,43 +1,77 @@ - - /* Font family */ @font-face { font-family: Mulish-bold; src: url("./assets/fonts/Mulish-Bold.ttf"); font-display: swap; } + @font-face { font-family: Mulish-demi; src: url("./assets/fonts/Mulish-Demi.ttf"); font-display: swap; } + @font-face { font-family: Mulish-medium; src: url("./assets/fonts/Mulish-Medium.ttf"); font-display: swap; } + @font-face { font-family: Mulish-regular; src: url("./assets/fonts/Mulish-Regular.ttf"); font-display: swap; } +html, +body { + max-width: 100vw; + max-height: 100vh; + overflow: hidden; +} + body { /* background-image: url("./assets/images/homeScreen2.png"); background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 100vh; */ - overflow-x: hidden !important; + overflow: hidden !important; } + body #light { background-color: white; } + body #dark { /* background-color: #041d2f; */ background-color: white; } +a { + text-decoration: none !important; +} + +li { + list-style: none !important; +} + + +.navbar-cont { + width: 100vw; + height: 4rem; + background-color: #159bfc; + display: flex; + justify-content: start; + align-items: center; +} + +.dseplogo { + font-weight: 700; + font-size: 1.75em; + color: white; +} + /* .icons-styling { background-image: linear-gradient(-45deg, #b8e6f5 0%, #04befe 100%); animation-name: animationicon; @@ -63,7 +97,7 @@ body #dark { .login-form { position: absolute; - top:50%; - left:50%; - transform: translate(-50%,-50%); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } \ No newline at end of file From c26b16476d5526a9b7a46eb9d2bb744701b4cc14 Mon Sep 17 00:00:00 2001 From: Anurag607 Date: Tue, 8 Aug 2023 17:18:44 +0530 Subject: [PATCH 2/2] fix: removed console.logs, inline-styling, comments and added moment fallbacks --- src/App.tsx | 8 +-- src/components/BurgerMenu/index.tsx | 17 ----- src/components/CourseCard.tsx | 43 ++++--------- src/components/CourseDetails/CourseAbout.tsx | 63 +++++++++++-------- .../CourseDetails/CourseSummary.tsx | 49 +++++---------- src/components/CourseDetails/TabBar.tsx | 2 +- src/components/CourseFilters.tsx | 13 +--- src/components/NewHeader.tsx | 22 ++----- src/main.tsx | 1 + src/pages/CourseDetails.tsx | 25 +++----- src/pages/Courses.tsx | 4 +- src/pages/MyCourses.tsx | 36 +++++------ src/scripts/burgerMenu.ts | 1 - src/styles/burgerMenu.css | 4 +- src/styles/courses.css | 29 +++++++++ src/styles/index.css | 31 +++++++++ src/styles/search.css | 7 +++ 17 files changed, 172 insertions(+), 183 deletions(-) create mode 100644 src/styles/search.css diff --git a/src/App.tsx b/src/App.tsx index ff1d189..a5b0f74 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,6 @@ import CourseDetails from "./pages/CourseDetails"; import MyCourses from "./pages/MyCourses"; import { Toaster } from "react-hot-toast"; const socket = io("https://api.dsep.samagra.io"); -// const socket = io("http://localhost:3000"); function App() { const [theme, setTheme] = useState("light"); @@ -23,14 +22,9 @@ function App() { } }, []); - const toggleTheme = () => { - setTheme((curr) => (curr === "dark" ? "light" : "dark")); - }; - return ( -
    - {/* */} +
    } /> = ({ applyFilter, mode, @@ -25,15 +17,6 @@ const Burger: React.FC<{ applyFilter: any; mode: any }> = ({
    - {/* {NavItemsData.map((el: any, i: number) => { - return ( -
  • - - {el.name} - -
    • - ); - })} */}
    diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 70444e9..0e7d942 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -14,11 +14,11 @@ import { } from "react-icons/fa"; import { BiListPlus } from "react-icons/bi"; import moment from "moment"; + const CourseCard: FC<{ course: CourseType; isMyCourse?: boolean }> = ({ course, isMyCourse, }) => { - console.log("mnop:", { course }); const imageUrl = useMemo( () => course?.descriptor?.images?.[0]?.url ?? Books, [course, Books] @@ -41,11 +41,8 @@ const CourseCard: FC<{ course: CourseType; isMyCourse?: boolean }> = ({ [normalisedTags] ); return ( - - + + @@ -78,13 +75,7 @@ const CourseCard: FC<{ course: CourseType; isMyCourse?: boolean }> = ({
    )} @@ -140,7 +119,9 @@ const CourseCard: FC<{ course: CourseType; isMyCourse?: boolean }> = ({
    - {moment(course?.time?.range?.start).format("Do MMM, YYYY")} + {moment(course?.time?.range?.start ?? Date.now()).format( + "Do MMM, YYYY" + )}
    diff --git a/src/components/CourseDetails/CourseAbout.tsx b/src/components/CourseDetails/CourseAbout.tsx index 34add72..8cf8602 100644 --- a/src/components/CourseDetails/CourseAbout.tsx +++ b/src/components/CourseDetails/CourseAbout.tsx @@ -12,7 +12,14 @@ const CourseAbout: FC<{ course: CourseType }> = ({ course }) => { () => course?.descriptor?.images?.[0]?.url ?? Books, [course, Books] ); - const normalisedTags = useMemo(() => map(course?.tags[0]?.list, (tag) => ({ name: tag?.descriptor?.name, value: tag?.value })), [course]) + const normalisedTags = useMemo( + () => + map(course?.tags[0]?.list, (tag) => ({ + name: tag?.descriptor?.name, + value: tag?.value, + })), + [course] + ); const [offeringInstitue, instructors] = useMemo( () => [ find(normalisedTags, { name: "offeringInstitue" })?.value, @@ -26,35 +33,39 @@ const CourseAbout: FC<{ course: CourseType }> = ({ course }) => { {/* */} - + - - {offeringInstitue} - - - {course?.descriptor?.name} - - - By: {instructors} - - - - - - -

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nam ipsum in est nostrum sunt impedit atque laborum officia quaerat? -

    -

    - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod atque eos, quidem ex sed nam sunt voluptas officiis reiciendis delectus quo, assumenda veritatis deserunt possimus explicabo molestiae aut! Cumque pariatur ab enim fugit eius, quae voluptatum itaque totam vero tempora consequuntur harum modi architecto veniam voluptates. Rem quam veniam debitis. -

    - -     + + {offeringInstitue} + + + {course?.descriptor?.name} + + + By: {instructors} + + + + + + +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nam + ipsum in est nostrum sunt impedit atque laborum officia quaerat? +

    +

    + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod + atque eos, quidem ex sed nam sunt voluptas officiis reiciendis + delectus quo, assumenda veritatis deserunt possimus explicabo + molestiae aut! Cumque pariatur ab enim fugit eius, quae voluptatum + itaque totam vero tempora consequuntur harum modi architecto + veniam voluptates. Rem quam veniam debitis. +

    + +     - - ); }; diff --git a/src/components/CourseDetails/CourseSummary.tsx b/src/components/CourseDetails/CourseSummary.tsx index 3f0f1c4..294ef12 100644 --- a/src/components/CourseDetails/CourseSummary.tsx +++ b/src/components/CourseDetails/CourseSummary.tsx @@ -20,7 +20,14 @@ const CourseSummary: FC<{ course: CourseType }> = ({ course }) => { const haveVideo = useMemo(() => false, []); - const normalisedTags = useMemo(() => map(course?.tags[0]?.list, (tag) => ({ name: tag?.descriptor?.name, value: tag?.value })), [course]) + const normalisedTags = useMemo( + () => + map(course?.tags[0]?.list, (tag) => ({ + name: tag?.descriptor?.name, + value: tag?.value, + })), + [course] + ); const [courseUrl, enrollementEndDate] = useMemo( () => [ @@ -31,62 +38,40 @@ const CourseSummary: FC<{ course: CourseType }> = ({ course }) => { ); return ( - - + - {/* {haveVideo ? ( -
    - - - -
    - ) : ( -
    -
    - CourseImage -
    -
    - )} */} - - {/*
    Course Status : Upcoming
    */} - {/*
    -

    Course Type : Elective

    -
    */}

    Duration : - - {`${course?.time?.duration?.split("P")[1]}eek`} - + {`${course?.time?.duration?.split("P")[1]}eek`}

    - Start Date : - {startDate ?? "N/A"} + Start Date : {startDate ?? "N/A"}

    - End Date : - {endDate ?? "N/A"} + End Date : {endDate ?? "N/A"}

    Enrollment Ends : - - {moment(enrollementEndDate).format("DD MMMM,YYYY") ?? "N/A"} + + {moment(enrollementEndDate ?? Date.now()).format( + "DD MMMM,YYYY" + ) ?? "N/A"}

    diff --git a/src/components/CourseDetails/TabBar.tsx b/src/components/CourseDetails/TabBar.tsx index 425273c..dbe6c8f 100644 --- a/src/components/CourseDetails/TabBar.tsx +++ b/src/components/CourseDetails/TabBar.tsx @@ -5,7 +5,7 @@ const TabBar = () => {