UI: made the course page responsive by Anurag607 · Pull Request #11 · Samagra-Development/dsep-ui

Anurag607 · 2023-07-27T13:24:21Z

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

techsavvyash · 2023-08-02T03:57:41Z

src/components/BurgerMenu/index.tsx

+          </div>
+        </div>
+        <div className={`sidebar`}>
+          {/* {NavItemsData.map((el: any, i: number) => {


why have we commented these?

added updates as per the review, PTAL.

techsavvyash · 2023-08-02T03:59:36Z

src/components/CourseCard.tsx

    >
-      <Card className="p-2">
-        <Row>
+      <Card className="p-2" style={{ cursor: "pointer", position: "relative" }}>


can we move the contents of style={{}} in a dedicated css file?

Please make sure to do this for all inline style={{}} attributes

added updates as per the review, PTAL.

techsavvyash · 2023-08-02T04:00:55Z

src/components/CourseCard.tsx

+                    }}
+                  >
+                    {" "}
+                    Svayam - NCERT


can we remove this hardcoding?

techsavvyash · 2023-08-02T04:01:05Z

src/components/CourseCard.tsx

+                    }}
+                  >
+                    {" "}
+                    0 INR


Can we remove this hard coding?

techsavvyash · 2023-08-02T04:04:11Z

src/components/NewHeader.tsx

-            {/* <Nav.Link href="/my_courses" className="text-white"><FaGratipay /> My Courses</Nav.Link> */}
-
-          </Nav>
+          {/* <Nav className="me-auto">


delete comments if not required.

added updates as per the review, PTAL.

techsavvyash · 2023-08-02T04:05:29Z

src/scripts/burgerMenu.ts

+    ".sidebarel"
+  ) as NodeListOf<HTMLDivElement>;
+
+  const closeSidebar = () => {


Can we move these to a dedicated .css file?

added updates as per the review, PTAL.

geeky-abhishek · 2023-08-02T05:29:56Z

src/App.tsx

    <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> */}


can you remove this commented code?

added updates as per the review, PTAL.

geeky-abhishek · 2023-08-02T05:30:49Z

src/components/CourseCard.tsx

+  course,
+  isMyCourse,
+}) => {
+  console.log("mnop:", { course });


remove console

added updates as per the review, PTAL.

geeky-abhishek · 2023-08-02T05:32:06Z

src/components/CourseCard.tsx

+            <div>
+              <FaCalendar />
+              <span>
+                {moment(course?.time?.range?.start).format("Do MMM, YYYY")}


pass some fallback time to it

do the same for all values

added updates as per the review, PTAL.

geeky-abhishek · 2023-08-02T05:32:59Z

src/components/CourseFilters.tsx

-            {cFilter.label}
-          </div> */}
+        <div className="filterEl">
          {cFilter.component && (


use proper naming conventions

added updates as per the review, PTAL.

geeky-abhishek · 2023-08-02T05:34:38Z

src/scripts/burgerMenu.ts

@@ -0,0 +1,61 @@
+const Menu = () => {
+  const menu = document.querySelector(".menu") as HTMLDivElement;


why are we doing it like this ? can't we use some package or UI library for this ?

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.

…fallbacks

ui: made the course page responsive

573afb3

techsavvyash requested a review from geeky-abhishek August 2, 2023 03:50

techsavvyash requested changes Aug 2, 2023

View reviewed changes

techsavvyash changed the base branch from feat/minor-ui to c4gt-community August 2, 2023 04:06

geeky-abhishek reviewed Aug 2, 2023

View reviewed changes

fix: removed console.logs, inline-styling, comments and added moment …

c26b164

…fallbacks

+                                  }}
+                                >
+                                  {" "}
+INR

		@@ -0,0 +1,61 @@
		const Menu = () => {
		const menu = document.querySelector(".menu") as HTMLDivElement;

Comments

Conversation

Anurag607 commented Jul 27, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants