Skip to content

Commit

Permalink
Merge pull request #117 from MinorityProgrammers/lesson-page
Browse files Browse the repository at this point in the history 
Lesson page
  • Loading branch information
@pextech
pextech authored Feb 18, 2022
2 parents a0760f2 + a2c1353 commit 6c3e5c8
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 47 deletions.
4 changes: 2 additions & 2 deletions components/learn/CourseCategories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,11 +283,11 @@ const CourseCategories = ({
>
<div className="modal-dialog activity-modal" role="document">
<div className="modal-content course-specific-info">
<div className="d-flex flex-column justify-content-center align-items-center">
<div className="d-flex flex-column justify-content-center align-items-center courseModal">
<h5
className="mt-4 pb-1"
id="exampleModalLabel"
style={{ fontSize: '25px', fontWeight: '600' }}
style={{ fontSize: '25px', fontWeight: '600', color: '#fff' }}
>
{singleCourse.name}
</h5>
Expand Down
115 changes: 81 additions & 34 deletions components/learn/courseDetails/ActivityDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,25 +133,38 @@ const ActivityDetails = ({
return (
<div className="banner-bg activity-pad">
<div
className="row activity-styles"
style={{ backgroundColor: '#474BFF' }}
className="activity-styles d-flex flex-column justify-content-start align-items-center w-100"
style={{ backgroundColor: '#1C1D37' }}
>
<div className="col-12 col-md-3 pr-0 scroll-sidebar">
{/* <div className="col-12 col-md-3 pr-0 scroll-sidebar">
<CourseSidebar
course={course}
courseId={courseId}
modules={modules}
userModules={userModules}
/>
</div>
<div className="col-12 col-md-9 pl-0">
<div className="banner-bg">
<div className="player-wrapper">
</div> */}

<div className="d-flex flex-column justify-content-center align-items-center mb-4 mt-4" style={{ width: '80%' }}>
<div className="d-flex flew-row mb-2 align-items-center justify-content-start" style={{ height: '48px', textAlign: 'center', width: '100%' }}>
<button className="ml-3 mr-3" type="button" onClick={() => router.back()}>
{/* return button */}
<FontAwesomeIcon icon={faArrowLeft} style={{ fontSize: '40px', color: 'white' }} className="icon" />
</button>
<h3 className="tw-text-white text-center" style={{ fontSize: '28px', lineHeight: '48px', weight: '600' }}>
{moduleInfo.name}
</h3>

</div>
{/* youtube player */}
<div className="banner-bg d-flex justify-content-center" style={{ borderRadius: '30px', width: '100%' }}>
<div className="player-wrapper" style={{ width: '95%' }}>
<ReactPlayer
url={moduleInfo.url}
width="100%"
style={{ height: '420px' }}
controls
width="100%"
height="700px"
style={{ height: '100%', maxWidth: '100%', overflowX: 'hidden' }}
onStart={onStart}
onEnded={handleWatch}
/>
Expand Down Expand Up @@ -180,9 +193,7 @@ const ActivityDetails = ({
<div className="pt-4">
<div className="menu-items">
<div className="d-flex justify-content-between mx-5 nextPrev-icons">
<button type="button" onClick={() => router.back()}>
<FontAwesomeIcon icon={faArrowLeft} className="icon" />
</button>

{moduleInfo.elementKey !== specificModules.length - 1 && (
<>
{completed === false ? (
Expand All @@ -206,39 +217,75 @@ const ActivityDetails = ({
</>
)}
</div>

<div className="px-md-5 mx-md-5 tw-py-5">
<div className="course-weeks px-3 mb-4 mx-2 activityDetails">
<div className="pt-3">
{/* Body description */}
<div className="w-100 mb-3">
<div className="course-weeks p-4 activityDetails">
<div className="d-flex flex-row justify-content-between">
<div className="duration mt-3" style={{ color: 'white', fontSize: '17px' }}>
<span>
<FontAwesomeIcon icon={faClock} />
</span>
<span className="ml-2">{moduleInfo.duration}</span>
</div>
<p
className={
completionStatus === 'completed'
? 'green-activityStatus ml-auto'
: 'red-activityStatus ml-auto'
? 'green-activityStatus d-flex justify-content-center align-items-center'
: 'red-activityStatus d-flex justify-content-center align-items-center'
}
style={
{
textAlign: 'center',
fontSize: '17px',
width: 'auto',
paddingLeft: '10px',
paddingRight: '10px'
}
}
>
<span>{completionStatus}</span>
</p>
</div>
<div className="ml-4 text-white activity-details">
<div className="d-pb-1">
<h3 className="mt-3 mb-2 tw-text-white">
{moduleInfo.name}
</h3>
</div>
<div className="duration mt-3">
<span>
<FontAwesomeIcon icon={faClock} />
</span>
<span className="ml-2">{moduleInfo.duration}</span>
</div>
<div className="mt-5">
<h4 className="pb-2 tw-text-white">Header</h4>
<p>{moduleInfo.description}</p>
<div className="text-white activity-details">
<div className="mt-3">
<p style={{ fontSize: '21px' }}>{moduleInfo.description}</p>
</div>
</div>
</div>
</div>
{/* Buttons */}
<div className="d-flex flex-row justify-content-between mb-4">
<button className="lesson-button d-flex flex-row justify-content-center align-items-center p-3" style={{ lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px' }}>
<FontAwesomeIcon icon={faArrowLeft} style={{ fontSize: '17px', color: 'white' }} className="icon mr-2" />
<p style={{ fontSize: '17px', color: 'white' }}>
Previous Lesson
</p>
</button>
<div className="d-flex flex-row">
<button
type="button"
onClick={() => { (setWatched(true), setIsOpen(true)) }}
className="quiz-button p-3" style={{ lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px', background: '#6938EF' }}>
<p style={{ fontSize: '17px', color: 'white' }}>
Take Quiz
</p>
</button>
<button
type="button"
onClick={forwardInfo}
data-dismiss="modal"
aria-label="Close"
className="lesson-button d-flex flex-row justify-content-center p-3 ml-5 align-items-center" style={{ lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px' }}>
<p className="mr-2" style={{ fontSize: '17px', color: 'white' }}>
Next Lesson
</p>
<FontAwesomeIcon icon={faArrowRight} style={{ fontSize: '17px', color: 'white' }} className="icon" />
</button>
</div>
</div>
<div className="w-100 mb-3 d-flex flex-column mb-3">
<p style={{ fontSize: '28px', color: 'white' }}>Addtional Resources</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -327,7 +374,7 @@ const ActivityDetails = ({
</div>
</div>
</div>
</div>
</div >
);
};

Expand Down
14 changes: 9 additions & 5 deletions components/learn/courseDetails/coursesDetails.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,13 @@
border: 1px solid rgb(223, 222, 222);
color: rgb(61, 61, 61) !important;
}
.lesson-button:hover{
background: #6938EF;
}
.quiz-button:hover{
background: white;
color: #6938EF;
}

/* User Banner */
.user-bannerBG {
Expand Down Expand Up @@ -158,15 +165,12 @@
color: rgb(204, 203, 203);
}
.course-weeks {
background: linear-gradient(
116.82deg,
#21175f 32.9%,
rgba(36, 14, 98, 0) 148.54%
);
background: #1C1D37;
box-shadow: inset -7px -7px 24px rgba(255, 255, 255, 0.04),
inset 7px 7px 14px rgba(255, 255, 255, 0.09);
border-radius: 16px;
cursor: pointer;
border: 3px solid #6938EF;
padding: 20px 0;
}
.course-weeks .progress {
Expand Down
10 changes: 4 additions & 6 deletions components/learn/learn-css/CourseCategories.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,12 +139,6 @@
}

.course-specific-info .user-enroll {
background-image: linear-gradient(
to top right,
#ffc700 2.65%,
#ff975b 51.83%,
#ff655b 100%
);
border-radius: 10px;
color: white;
font-weight: bold;
Expand All @@ -161,6 +155,10 @@
.course-specific-info .modal-center:hover {
color: #545353;
}

.courseModal {
background-color: #13152A;
}
.search-items .search-input {
font-size: 15px !important;
padding: 18px !important;
Expand Down

0 comments on commit 6c3e5c8

Please sign in to comment.