diff --git a/package.json b/package.json index 320ecca..cbcdf83 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,16 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "@types/node": "^14.10.1", + "@types/react": "^16.9.49", + "@types/react-dom": "^16.9.8", + "@types/react-router-dom": "^5.1.5", "framer-motion": "2.3.0", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-scripts": "3.4.3" + "react-router-dom": "^5.2.0", + "react-scripts": "3.4.3", + "typescript": "^4.0.2" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.jsx b/src/App.jsx deleted file mode 100644 index aa6d39f..0000000 --- a/src/App.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; -import "./App.css"; -import Navbar from "./Navbar"; - -function App() { - return ( -
- -
- ); -} - -export default App; diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..254510f --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import { Switch, Route, useLocation } from "react-router-dom"; + +import "./App.css"; +import Home from "./Home"; +import Navbar from "./Navbar"; +import SubjectList from "./SubjectList"; + +const genName = (path: string, search?: string): string => { + if (path === "/list" && search) { + search = decodeURI(search); + let query: any = {}; + search + .split("?") + .slice(1) + .map((param) => (query[param.split("=")[0]] = param.split("=")[1])); + + let result = ""; + + if (query.clas) { + result = result + query.clas + " класс"; + } + + if (query.subject) { + result = result + ", " + query.subject; + } + + if (query.teacher) { + result = result + ", " + query.teacher; + } + + return result; + } + + if (path === "/") { + return "Банк семинаров"; + } + + return ""; +}; + +function App() { + const location = useLocation(); + + return ( +
+
+

{genName(location.pathname, location.search)}

+
+ + + + + + + + + +

404

+ + +
+ ); +} + +export default App; diff --git a/src/Card/index.jsx b/src/Card/index.jsx new file mode 100644 index 0000000..059d68f --- /dev/null +++ b/src/Card/index.jsx @@ -0,0 +1,12 @@ +import React from "react"; + +import './main.css' + +const Card = (props) => ( + +

{props.data.title}

+
{props.data.teacher}
+ +); + +export default Card; diff --git a/src/Card/main.css b/src/Card/main.css new file mode 100644 index 0000000..d6c6ebe --- /dev/null +++ b/src/Card/main.css @@ -0,0 +1,19 @@ +.card { + padding: 1.5vh; + box-shadow: 0 1px 6px 0 rgba(255, 109, 109, .16); + border-radius: 0.75vh; + min-width: 35vw; + background-color: rgb(255, 109, 109); + color: #ffffff; + white-space: nowrap; + text-decoration: none; +} + +.carousel .card { + max-width: 50vw; +} + +.card h4 { + text-overflow: ellipsis; + overflow: hidden; +} \ No newline at end of file diff --git a/src/Home/index.jsx b/src/Home/index.jsx new file mode 100644 index 0000000..68b96dd --- /dev/null +++ b/src/Home/index.jsx @@ -0,0 +1,187 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import Card from "../Card"; +import "./main.css"; + +const data = [ + { + title: "Семинар 10", + type_num: "Семинары", + class_num: "1", + post_date: "2020-09-15", + predmet_type: "Математика", + teacher: "Ню В.В", + image: + "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + slug: "card-3-11-2020-09-15", + card_id: 3, + }, + { + title: "Семинар 10", + type_num: "Семинары", + class_num: "1", + post_date: "2020-09-15", + predmet_type: "Физика", + teacher: "Ню В.В", + image: + "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + slug: "card-3-11-2020-09-15", + card_id: 3, + }, + { + title: "Семинар 10", + type_num: "Семинары", + class_num: "1", + post_date: "2020-09-15", + predmet_type: "Математика", + teacher: "Ню В.В", + image: + "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + slug: "card-3-11-2020-09-15", + card_id: 1, + }, + { + title: "Very long text, too long to show it full", + type_num: "Семинары", + class_num: "2", + post_date: "2020-09-15", + predmet_type: "Математика", + teacher: "Ню В.В", + image: + "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + slug: "card-3-11-2020-09-15", + card_id: 2, + }, + { + title: "Семинар 10", + type_num: "Семинары", + class_num: "2", + post_date: "2020-09-15", + predmet_type: "Математика", + teacher: "Ню В.В", + image: + "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + slug: "card-3-11-2020-09-15", + card_id: 3, + }, + { + title: "Семинар 10", + type_num: "Семинары", + class_num: "3", + post_date: "2020-09-15", + predmet_type: "Математика", + teacher: "Ню В.В", + image: + "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + slug: "card-3-11-2020-09-15", + card_id: 1, + }, + { + title: "Very long text, too long to show it full", + type_num: "Семинары", + class_num: "3", + post_date: "2020-09-15", + predmet_type: "Математика", + teacher: "Ню В.В", + image: + "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + slug: "card-3-11-2020-09-15", + card_id: 2, + }, + { + title: "Семинар 10", + type_num: "Семинары", + class_num: "11", + post_date: "2020-09-15", + predmet_type: "Математика", + teacher: "Ню В.В", + image: + "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + slug: "card-3-11-2020-09-15", + card_id: 3, + }, + { + title: "Семинар 10", + type_num: "Семинары", + class_num: "10", + post_date: "2020-09-15", + predmet_type: "Математика", + teacher: "Ню В.В", + image: + "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + slug: "card-3-11-2020-09-15", + card_id: 1, + }, + { + title: "Very long text, too long to show it full", + type_num: "Семинары", + class_num: "11", + post_date: "2020-09-15", + predmet_type: "Математика", + teacher: "Ню В.В", + image: + "/code/media/card_img/bxd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd0xb0xd1x80_10_xd0xa1xd0xb5xd0xbcxd0xb8xd0xbdxd_lN2D1k2.jpg", + slug: "card-3-11-2020-09-15", + card_id: 2, + }, +]; + +const Home = () => { + const classes = [ + ...new Set(data.map((el) => parseInt(el.class_num)).sort()), + ]; + const subjects = [...new Set(data.map((el) => el.predmet_type).sort())]; + + return ( +
+ {classes.map((class_num, index) => ( +
+

{class_num} класс

+ {subjects.map((subject, jndex) => + data.filter( + (el) => + parseInt(el.class_num) === class_num && + el.predmet_type === subject + ).length ? ( +
+

{subject}

+
+
+ {data + .filter( + (el) => + parseInt(el.class_num) === + class_num && + el.predmet_type === subject + ) + .map((el, kndex) => ( + + ))} +
+
+
+
+ ))} +
+ ); +}; + +export default Home; diff --git a/src/Home/main.css b/src/Home/main.css new file mode 100644 index 0000000..a17689e --- /dev/null +++ b/src/Home/main.css @@ -0,0 +1,83 @@ +.classContainer { + padding: 2vh; + padding-top: calc(20px + 2vh); + margin-top: -20px; + position: relative; +} + +.subjectContainer { + z-index: 11; + position: relative; + margin-bottom: max(1.5vh, 20px); +} + +.subjectContainer>h2 { + margin-bottom: min(10px, 0.75vh); +} + +.classContainer:last-child { + margin-bottom: 0; +} + +.curve { + border-radius: 0 0 20px 20px; + display: block; + position: absolute; + bottom: 0; + height: 40px; + width: 100vw; + z-index: 1; + margin-left: -2vh; +} + +.classContainer:nth-child(odd), +.classContainer:nth-child(odd) .curve { + background-color: #f4f4f4; +} + +.classContainer:nth-child(even), +.classContainer:nth-child(even) .curve { + background-color: #ffffff; +} + +.carousel { + overflow: hidden; + position: relative; + width: calc(100vw - 5vh); +} + +.carouselInner { + display: flex; + flex-direction: row; + gap: 1.5vh; +} + +.showMore { + position: absolute; + right: 0; + top: 0; + height: 100%; + /* background: linear-gradient(to right, rgba(244, 244, 244, 0) 25%, rgb(244, 244, 244) 70%); */ + min-width: 40vw; + display: flex; + align-items: center; + justify-content: right; +} + +.classContainer:nth-child(odd) .showMore { + background: linear-gradient(to right, rgba(244, 244, 244, 0) 25%, rgb(244, 244, 244) 70%); +} + +.classContainer:nth-child(even) .showMore { + background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, rgb(255, 255, 255) 70%); +} + + +/* .showMore:hover { + background-image: linear-gradient(to right, rgba(244, 244, 244, 0) 25%, rgb(244, 244, 244) 50%); +} */ + +.showMore a { + color: rgb(54, 54, 69); + text-decoration: none; +} \ No newline at end of file diff --git a/src/Navbar/index.jsx b/src/Navbar/index.jsx index b74d739..f0deb40 100644 --- a/src/Navbar/index.jsx +++ b/src/Navbar/index.jsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; - import { motion } from "framer-motion"; +import { Link } from "react-router-dom"; import "./main.css"; @@ -14,11 +14,11 @@ const Navbar = (props) => { const searchVariants = { open: { - width: "calc(100vw - 5vh)", + width: "calc(100vw - 4vh)", display: "block", }, closed: { - width: "7vh", + width: "6vh", transitionEnd: { display: "none", }, @@ -32,7 +32,7 @@ const Navbar = (props) => { borderTopRightRadius: 0, }, closed: { - height: "12vh", + height: "10vh", borderTopLeftRadius: "20px", borderTopRightRadius: "20px", }, @@ -41,7 +41,7 @@ const Navbar = (props) => { const filtersVariants = { open: { height: "100vh", - padding: "2.5vh", + padding: "2vh", }, closed: { height: 0, @@ -62,9 +62,9 @@ const Navbar = (props) => { animate={filtersCollapsed ? "closed" : "open"} >