UI: made the course page responsive #11
Conversation
src/components/BurgerMenu/index.tsx
Outdated
| </div> | ||
| </div> | ||
| <div className={`sidebar`}> | ||
| {/* {NavItemsData.map((el: any, i: number) => { |
There was a problem hiding this comment.
why have we commented these?
There was a problem hiding this comment.
added updates as per the review, PTAL.
src/components/CourseCard.tsx
Outdated
| > | ||
| <Card className="p-2"> | ||
| <Row> | ||
| <Card className="p-2" style={{ cursor: "pointer", position: "relative" }}> |
There was a problem hiding this comment.
can we move the contents of style={{}} in a dedicated css file?
There was a problem hiding this comment.
Please make sure to do this for all inline style={{}} attributes
There was a problem hiding this comment.
added updates as per the review, PTAL.
| }} | ||
| > | ||
| {" "} | ||
| Svayam - NCERT |
There was a problem hiding this comment.
can we remove this hardcoding?
| }} | ||
| > | ||
| {" "} | ||
| 0 INR |
There was a problem hiding this comment.
Can we remove this hard coding?
src/components/NewHeader.tsx
Outdated
| {/* <Nav.Link href="/my_courses" className="text-white"><FaGratipay /> My Courses</Nav.Link> */} | ||
|
|
||
| </Nav> | ||
| {/* <Nav className="me-auto"> |
There was a problem hiding this comment.
delete comments if not required.
There was a problem hiding this comment.
added updates as per the review, PTAL.
| ".sidebarel" | ||
| ) as NodeListOf<HTMLDivElement>; | ||
|
|
||
| const closeSidebar = () => { |
There was a problem hiding this comment.
Can we move these to a dedicated .css file?
There was a problem hiding this comment.
added updates as per the review, PTAL.
src/App.tsx
Outdated
| <Router> | ||
| <div className="App" id={theme} style={{minHeight:'100vh'}}> | ||
| <div className="App" id={theme} style={{ minHeight: "100vh" }}> | ||
| {/* <button onClick={toggleTheme} className={`px-6 py-2.5 bg-sky-500 text-white font-medium text-xs leading-tight uppercase rounded-r-xl shadow-md mb-4 hover:bg-sky-700 hover:shadow-lg focus:bg-sky-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out fixed bottom-0`}> {theme === "dark" ? <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg> : <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>} </button> */} |
There was a problem hiding this comment.
can you remove this commented code?
There was a problem hiding this comment.
added updates as per the review, PTAL.
src/components/CourseCard.tsx
Outdated
| course, | ||
| isMyCourse, | ||
| }) => { | ||
| console.log("mnop:", { course }); |
There was a problem hiding this comment.
added updates as per the review, PTAL.
src/components/CourseCard.tsx
Outdated
| <div> | ||
| <FaCalendar /> | ||
| <span> | ||
| {moment(course?.time?.range?.start).format("Do MMM, YYYY")} |
There was a problem hiding this comment.
pass some fallback time to it
There was a problem hiding this comment.
do the same for all values
There was a problem hiding this comment.
added updates as per the review, PTAL.
src/components/CourseFilters.tsx
Outdated
| {cFilter.label} | ||
| </div> */} | ||
| <div className="filterEl"> | ||
| {cFilter.component && ( |
There was a problem hiding this comment.
use proper naming conventions
There was a problem hiding this comment.
added updates as per the review, PTAL.
| @@ -0,0 +1,61 @@ | |||
| const Menu = () => { | |||
| const menu = document.querySelector(".menu") as HTMLDivElement; | |||
There was a problem hiding this comment.
why are we doing it like this ? can't we use some package or UI library for this ?
There was a problem hiding this comment.
We could have avoided it, had the code been written using tailwind, in which case we could have used states and class names to achieve it. But bootstrap doesn't support this. Plus even we were to use a package we would still need to customize it via css to suit our needs.
3 participants
I have made the main course page responsive, also separated all the styles files into a different directory for better organization.
Demo Video:
https://github.com/Samagra-Development/dsep-ui/assets/64116092/39947717-6cbe-4322-9523-170609a15f0a