Skip to content

UI: made the course page responsive #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Anurag607 wants to merge 2 commits into
base: c4gt-community
Choose a base branch
from
Open

UI: made the course page responsive #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
573afb3
ui: made the course page responsive
Anurag607 Jul 27, 2023
c26b164
fix: removed console.logs, inline-styling, comments and added moment …
Anurag607 Aug 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 19 additions & 18 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
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
Expand All @@ -25,24 +22,28 @@ function App() {
}
}, []);

const toggleTheme = () => {
setTheme((curr) => curr === "dark" ? "light" : "dark");
}

return (
<Router>
<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> */}
<div className="App" id={theme}>
<Routes>
<Route path="/" element={<Login socket={socket} />} />
<Route path="/courses" element={<Courses mode={theme} socket={socket} />} />
<Route path="/my_courses" element={<MyCourses mode={theme} socket={socket} />} />
<Route path="/courses/:id" element={<CourseDetails mode={theme} socket={socket} />} />
<Route
path="/courses"
element={<Courses mode={theme} socket={socket} />}
/>
<Route
path="/my_courses"
element={<MyCourses mode={theme} socket={socket} />}
/>
<Route
path="/courses/:id"
element={<CourseDetails mode={theme} socket={socket} />}
/>
</Routes>
<Toaster />
</div>
</Router>
);
}

export default App;
export default App;
29 changes: 29 additions & 0 deletions src/components/BurgerMenu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from "react";
import { Menu } from "../../scripts/burgerMenu";
import Filters from "../Filters";

const Burger: React.FC<{ applyFilter: any; mode: any }> = ({
applyFilter,
mode,
}) => {
return (
<div className={"burgerCont"}>
<div className={`burgerWrapper bg-transparent`}>
<div className={`menu`} data-toggle="open" onClick={Menu}>
<div className={`menuBarCont`}>
<span className={`menu_bar1`} />
<span className={`menu_bar2`} />
<span className={`menu_bar3`} />
</div>
</div>
<div className={`sidebar`}>
<div className="burgerFilterWrapper">
<Filters applyFilter={applyFilter} mode={mode} />
</div>
</div>
</div>
</div>
);
};

export default Burger;
142 changes: 87 additions & 55 deletions src/components/CourseCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}) => {
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,
Expand All @@ -25,25 +41,20 @@ console.log("mnop:",{course})
[normalisedTags]
);
return (
<LinkContainer
to={`/courses/${course?.id}`}
style={{ cursor: "pointer", marginBottom: "10px" }}
>
<Card className="p-2">
<Row>
<LinkContainer to={`/courses/${course?.id}`}>
<Card className="p-2 courseCard">
<Row className="cardContent">
<Col>
<Row>
<Col xs={3}>
<Card.Img src={imageUrl} />
<Row className="courseTitle">
<Col>
<img src={imageUrl} className="courseImage" />
</Col>
<Col xs={7}>
<Col>
<Row>
<h6>{offeringInstitue}</h6>
</Row>
<Row>
<strong>
{course?.descriptor?.name}
</strong>
<strong>{course?.descriptor?.name}</strong>
</Row>
<Row>
<Rating value={4} size={1} />
Expand All @@ -58,44 +69,65 @@ console.log("mnop:",{course})
cupiditate officia sapiente in magni?
</Col>
</Row>
{isMyCourse ? (<Row className="mt-2">
<Col>

<Button variant="outline-danger" size="sm" style={{borderTopRightRadius:'20px',borderTopLeftRadius:'20px',borderBottomRightRadius:'20px',borderBottomLeftRadius:'20px',marginRight:'15px'}}> Svayam - NCERT</Button>
<Button variant="outline-success" size="sm" style={{borderTopRightRadius:'20px',borderTopLeftRadius:'20px',borderBottomRightRadius:'20px',borderBottomLeftRadius:'20px',marginRight:'15px'}}> 0 INR</Button>
<Button variant="outline-primary" size="sm" style={{borderTopRightRadius:'20px',borderTopLeftRadius:'20px',borderBottomRightRadius:'20px',borderBottomLeftRadius:'20px',marginRight:'15px'}}> Start Course</Button>

</Col>
</Row>):(
<Row className="mt-2">
<Col>
<FaBookmark color="blue" style={{fontSize:'23px',marginRight:'15px'}}/>
<Button variant="outline-secondary" size="sm" style={{marginRight:'15px'}}> <BiListPlus style={{fontSize:'23px'}}/> Add to List</Button>
<Button variant="outline-secondary" size="sm"><FaEye style={{fontSize:'18px'}}/> Quick View</Button>
</Col>
</Row>
{isMyCourse ? (
<Row className="mt-2">
<Col>
<Button
variant="outline-danger"
size="sm"
className={"courseCardButtons"}
>
{" "}
Svayam - NCERT
Copy link
Member

@techsavvyash techsavvyash Aug 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we remove this hardcoding?

</Button>
<Button
variant="outline-success"
size="sm"
className={"courseCardButtons"}
>
{" "}
0 INR
Copy link
Member

@techsavvyash techsavvyash Aug 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we remove this hard coding?

</Button>
<Button
variant="outline-primary"
size="sm"
className={"courseCardButtons"}
>
{" "}
Start Course
</Button>
</Col>
</Row>
) : (
<div className="courseCardActions">
<FaBookmark color="blue" className={"courseCardFaIconsSize"} />
<Button variant="outline-secondary" size="sm">
<BiListPlus className={"courseCardFaIconsSize"} /> Add to List
</Button>
<Button variant="outline-secondary" size="sm">
<FaEye className={"courseCardFaIconsSize"} /> Quick View
</Button>
</div>
)}

</Col>

<Col
xs={3}
style={{ borderLeft: "1px solid lightgray" }}
className="p-2 container-fluid"
>
<div
style={{ borderBottom: "1px solid lightgray" }}
className="py-1"
>
<FaCreditCard /> <span style={{fontSize:'12px',color:'gray'}}> Credits :{credits}</span>
</div>
<div style={{ borderBottom: "1px solid lightgray" }} className="py-2">
<FaCalendar /> <span style={{fontSize:'12px',color:'gray'}}> {moment(course?.time?.range?.start).format('Do MMM, YYYY')}</span>
</div>
<div>
<FaUser /> <span style={{fontSize:'12px',color:'gray'}}>{instructors}</span>
</div>


<Col className="p-2 courseCardMeta">
<div>
<FaCreditCard />
<span> Credits: {credits}</span>
</div>
<div>
<FaCalendar />
<span>
{moment(course?.time?.range?.start ?? Date.now()).format(
"Do MMM, YYYY"
)}
</span>
</div>
<div>
<FaUser />
<span>{instructors}</span>
</div>
</Col>
</Row>
</Card>
Expand Down
63 changes: 37 additions & 26 deletions src/components/CourseDetails/CourseAbout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -26,35 +33,39 @@ const CourseAbout: FC<{ course: CourseType }> = ({ course }) => {
{/* <DetailsHeader course={course} /> */}
<Row className="mt-4">
<Col>
<Card.Img src={imageUrl} className="rounded"/>
<Card.Img src={imageUrl} className="rounded" />
</Col>
</Row>
<Container className="mt-3">
<Row>
<span style={{fontSize:'15px',color:'darkgray'}}>{offeringInstitue}</span>
</Row>
<Row>
<strong>{course?.descriptor?.name}</strong>
</Row>
<Row>
<strong>By: {instructors}</strong>
</Row>
<Row>
<Rating value={4} size={1} />
</Row>
<Row className="mt-3">
<Col>
<p style={{fontWeight:'500',fontSize:'14px',color:'#606060'}}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nam ipsum in est nostrum sunt impedit atque laborum officia quaerat?
</p>
<p className="mt-3" style={{fontWeight:'500',fontSize:'14px',color:'#606060'}}>
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.
</p>
</Col>
</Row>
<Row>
<span className="courseAboutText">{offeringInstitue}</span>
</Row>
<Row>
<strong>{course?.descriptor?.name}</strong>
</Row>
<Row>
<strong>By: {instructors}</strong>
</Row>
<Row>
<Rating value={4} size={1} />
</Row>
<Row className="mt-3">
<Col>
<p className="courseAboutText">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nam
ipsum in est nostrum sunt impedit atque laborum officia quaerat?
</p>
<p className="mt-3 courseAboutText">
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.
</p>
</Col>
</Row>
</Container>


</Container>
);
};
Expand Down
Loading