update 5 files

master
mahdi 2 years ago
parent 7da0fddd88
commit 3c4708278a
  1. 2
      src/Views/Home/Main/index.js
  2. 4
      src/Views/Home/Sidebar/index.js
  3. 88
      src/components/CourseList/index.js
  4. 2
      src/index.scss

@ -8,7 +8,7 @@ function Main({ activeComponent }) {
return ( return (
<div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200 "> <div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200 ">
<header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"></header> <header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"></header>
<section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col bg-[#f5f5f5]"> <section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col bg-[#f5f5f5] overflow-y-auto scrollYDesign">
<h1 className="font-sansbold text-3xl text-left"> <h1 className="font-sansbold text-3xl text-left">
{activeComponent?.content?.name} {activeComponent?.content?.name}
</h1> </h1>

@ -4,7 +4,7 @@ import { components } from "../../../redux/actions";
function Sidebar({ list, setActive }) { function Sidebar({ list, setActive }) {
return ( return (
<div className="lg:flex lg:flex-col lg:w-1/6 lg:h-full ltr bg-[#f5f5f5]"> <div className="lg:flex lg:flex-col lg:w-1/6 lg:h-full ltr bg-[#f5f5f5] overflow-y-auto scrollYDesign">
<header className="w-full h-16 flex flex-row items-center p-4 bg-gray-600"> <header className="w-full h-16 flex flex-row items-center p-4 bg-gray-600">
<img <img
src={"https://barnamenegar.ir/static/media/white logo 2.7ffbddbc.svg"} src={"https://barnamenegar.ir/static/media/white logo 2.7ffbddbc.svg"}
@ -12,7 +12,7 @@ function Sidebar({ list, setActive }) {
className="w-full" className="w-full"
/> />
</header> </header>
<ul className="w-full max-h-full flex-1 p-0 m-0 border-r border-gray-600 divided divide-y divide-gray-900 overflow-y-scroll list-none"> <ul className="w-full max-h-full flex-1 p-0 m-0 border-r border-gray-600 divided divide-y divide-gray-900 list-none">
{list {list
.sort((a, b) => (a.name > b.name ? 1 : -1)) .sort((a, b) => (a.name > b.name ? 1 : -1))
.map((material, index) => ( .map((material, index) => (

@ -4,7 +4,7 @@ const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
const [selectedLesson, setSelectedLesson] = useState(null); const [selectedLesson, setSelectedLesson] = useState(null);
return ( return (
<div className="relative p-4 bg-[#196EC033] rounded"> <div className="max-h-[444px] relative p-4 bg-[#196EC033] rounded overflow-y-auto scrollYDesign">
{/* top */} {/* top */}
<div className="flex flex-row items-center justify-between"> <div className="flex flex-row items-center justify-between">
<h2 className="text-blue-800 text-base">{courseTitle}</h2> <h2 className="text-blue-800 text-base">{courseTitle}</h2>
@ -17,7 +17,7 @@ const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
<div className="border-b border-blue-300 my-5"></div> <div className="border-b border-blue-300 my-5"></div>
{/* course title */} {/* course title */}
{chapters.map((chapter, index) => ( {chapters.map((chapter, index) => (
<div className="flex flex-col" key={index}> <div className="flex flex-col mt-4" key={index}>
<div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between"> <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
<p className="text-sm text-white">{chapter.title}</p> <p className="text-sm text-white">{chapter.title}</p>
<span className="text-sm text-white">{chapter.duration}</span> <span className="text-sm text-white">{chapter.duration}</span>
@ -128,5 +128,89 @@ CourseChapter.defaultProps = {
}, },
], ],
}, },
{
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
duration: "2:30:13",
lessons: [
{
title: "آیا گوگل از ما دزدی میکند؟",
duration: "14:30",
play: "پخش",
passed: true,
},
{
title: "چگونگی ساخت نیروگاه های برقی",
duration: "22:31",
play: "در حال پخش",
passed: true,
},
{
title: "آیا از اینترنت می توان درآمد داشت؟",
duration: "10:09",
play: "نمایش",
passed: false,
},
{
title: "زمین سبز و آسمان آبی",
duration: "56:09",
play: "نمایش",
passed: false,
},
],
},
{
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
duration: "2:30:13",
lessons: [
{
title: "آیا گوگل از ما دزدی میکند؟",
duration: "14:30",
play: "پخش",
passed: true,
},
{
title: "چگونگی ساخت نیروگاه های برقی",
duration: "22:31",
play: "در حال پخش",
passed: true,
},
{
title: "آیا از اینترنت می توان درآمد داشت؟",
duration: "10:09",
play: "نمایش",
passed: true,
},
{
title: "زمین سبز و آسمان آبی",
duration: "56:09",
play: "نمایش",
passed: true,
},
{
title: "آیا گوگل از ما دزدی میکند؟",
duration: "14:30",
play: "پخش",
passed: true,
},
{
title: "چگونگی ساخت نیروگاه های برقی",
duration: "22:31",
play: "در حال پخش",
passed: true,
},
{
title: "آیا از اینترنت می توان درآمد داشت؟",
duration: "10:09",
play: "نمایش",
passed: true,
},
{
title: "زمین سبز و آسمان آبی",
duration: "56:09",
play: "نمایش",
passed: false,
},
],
},
], ],
}; };

@ -473,7 +473,7 @@ $red: #e92424;
.scrollYDesign::-webkit-scrollbar-thumb { .scrollYDesign::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
background-color: #b9d1f3; background-color: #80b2f7;
} }
.scrollYDesign::-webkit-scrollbar-track { .scrollYDesign::-webkit-scrollbar-track {

Loading…
Cancel
Save