From a08d4d3cdf64c33efda1eaba9e695217ace00182 Mon Sep 17 00:00:00 2001 From: "Vsevo;od" <96574851+vsevolod22@users.noreply.github.com> Date: Sat, 23 Dec 2023 19:58:18 +0300 Subject: [PATCH] modal --- index.html | 2 +- src/App.jsx | 6 +- src/Components/Card/index.jsx | 2 +- src/Components/HomePage/index.jsx | 2 +- src/Components/MeetAuthPage/index.jsx | 164 +++++++++++-- src/Components/MeetAuthPage/style.module.scss | 226 +++++++++++++++++- src/Components/MeetPage/index.jsx | 42 ++-- src/Components/modal/index.jsx | 43 ++++ src/img/MeetPage/Facebook.png | Bin 0 -> 710 bytes 9 files changed, 435 insertions(+), 52 deletions(-) create mode 100644 src/Components/modal/index.jsx create mode 100644 src/img/MeetPage/Facebook.png diff --git a/index.html b/index.html index 15091b1..e98f7dd 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + diff --git a/src/App.jsx b/src/App.jsx index 8d46a0d..55ef91e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,10 @@ import './App.css' -import FetchUtils from './components/utils/FetchUtils.jsx' + +// import FetchUtils from './components/utils/FetchUtils.jsx' + +// import FetchUtils from './components/fetchUtils/FetchUtils.jsx' + // import TableMeets from './components/fetchUtils/TableMeets.jsx' import { BrowserRouter, Routes, Route } from "react-router-dom"; import BeingPage from "./Components/BeingPage/index.jsx"; diff --git a/src/Components/Card/index.jsx b/src/Components/Card/index.jsx index 8511f62..ad27f63 100644 --- a/src/Components/Card/index.jsx +++ b/src/Components/Card/index.jsx @@ -1,7 +1,7 @@ import './style.module.scss'; -import { HttpApiMethods } from '../fetchUtils/FetchUtils'; +import { HttpApiMethods } from '../utils/FetchUtils'; const httpApiMethods = new HttpApiMethods() function extractDateTime(dateString) { diff --git a/src/Components/HomePage/index.jsx b/src/Components/HomePage/index.jsx index 88956f6..dd951bf 100644 --- a/src/Components/HomePage/index.jsx +++ b/src/Components/HomePage/index.jsx @@ -2,7 +2,7 @@ import Header from "../Header"; import styles from "./style.module.scss"; import TableMeets from '../TableMeets/TableMeets' import Home from "../Home/Home"; -import FetchUtils from "../utils/FetchUtils"; +// import FetchUtils from "../utils/FetchUtils"; import EditForm from "../edit/EditForm"; import PostForm from "../post/PostForm"; diff --git a/src/Components/MeetAuthPage/index.jsx b/src/Components/MeetAuthPage/index.jsx index 42e61d5..1046961 100644 --- a/src/Components/MeetAuthPage/index.jsx +++ b/src/Components/MeetAuthPage/index.jsx @@ -3,34 +3,43 @@ import styles from './style.module.scss'; import clock from '../../img/MeetPage/Clock.png'; import globe from '../../img/MeetPage/Globe.png'; import avatar from '../../img/MeetPage/avatar.png'; - +import like from '../../img/MeetPage/Facebook.png'; import Card from "../Card"; import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; -import { useState, CSSProperties, useEffect, useRef } from "react"; +// import { useState, CSSProperties, useEffect, useRef } from "react"; import newAvatar from '../../img/MeetPage/newAvatar.png'; import vk from '../../img/MeetPage/Vk.png'; import tg from '../../img/MeetPage/Telegram.png'; import book from '../../img/MeetPage/Book.png'; +import { useState } from "react"; +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import Modal from '@mui/material/Modal'; + +const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: "56%", + height: "80vh", + bgcolor: 'background.paper', + borderRadius: '25px', + boxShadow: 24, + p: 4, +}; const MeetPage = () => { - // const textAreaRef = useRef(null); - // const [text, setText] = useState(""); - // const [textAreaHeight, setTextAreaHeight] = useState("auto"); - // const [parentHeight, setParentHeight] = useState("auto"); - - // const parentStyle= { - // minHeight: parentHeight, - // }; - - // const textAreaStyle= { - // height: textAreaHeight, - // }; - + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); return ( <> +
@@ -41,7 +50,7 @@ const MeetPage = () => {
globe 22 декабря, с 10:00 до 22:00 по Московскому времени
- +
@@ -51,9 +60,9 @@ const MeetPage = () => { Ссылка на мероприятие СКАЧАТЬ ВИДЕО
-
- Отзывы - Оставьте первый отзыв +
+ Оставить вопрос + Оставьте вопрос первым
@@ -96,13 +105,7 @@ const MeetPage = () => {
avatar -
-
@@ -121,6 +124,78 @@ const MeetPage = () => {
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
@@ -145,6 +220,43 @@ const MeetPage = () => { +
+ + + +
Вопросы
+
+
+
+
Всего 1
+
+
+
+
avatar Дмитрий Кирсанов
+
Задача организации, в особенности же начало повседневной работы по формированию позиции обеспечивает актуальность приоретизации разума над эмоциями.
+
+
4 мая 1990, 00:00
+
like 0
+
+ +
+
+
+
avatar Дмитрий Кирсанов
+ +
+ + +
+
+
+ + +
) diff --git a/src/Components/MeetAuthPage/style.module.scss b/src/Components/MeetAuthPage/style.module.scss index 4a24905..c8b8b37 100644 --- a/src/Components/MeetAuthPage/style.module.scss +++ b/src/Components/MeetAuthPage/style.module.scss @@ -327,6 +327,7 @@ &__number { margin-left: 3px; } + &__input { border-radius: 10px; border: 1px solid var(--gray_stroke, #D0D2D8); @@ -338,6 +339,15 @@ align-items: start; padding-left: 20px; text-align: start; + display: flex; + justify-content: start; + padding-left: 30px; + font-family: Montserrat; + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: normal; + padding-top: 30px; &_img { height: 60px; width: 60px; @@ -368,4 +378,218 @@ font-weight: 400; line-height: normal; } -} \ No newline at end of file + &__button { + border-radius: 5.833px; + background: var(--yellow, #FD0); + width: 200px; + height: 45px; + margin-top: 35px; + &_container { + display: flex; + justify-content: flex-end; + } + } + &__all_container { + display: flex; + flex-direction: column; + height: 500px; + margin-top: 50px; + overflow-x: hidden; + } + +} + +.oneComment { + + &__container { + display: flex; + margin-top: 70px; + } + &__img { + margin-right: 50px; + } + &__descr { + color: #000; + font-family: Montserrat; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-top: 20px; + &_title { + color: #000; + font-family: Montserrat; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-right: 12px; + &_container { + display: flex; + + } + } + &_time { + color: var(--gray_text, #888); + font-family: Montserrat; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + } +} +.modal { + background-color: #fff; + position: absolute; + height: 400px; + width: 300px; + &__container { + position: absolute; + top: 0px; + height: 5000px; + width: 100%; + background-color: rgba(0, 0, 0, 0.40); + } + &__title { + color: #000; + font-family: Montserrat; + font-size: 48px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + &__line { + height: 1px; + width: 100%; + stroke-width: 1px; + background-color: #D0D2D8; + width: 100%; + margin-top: 40px; + } + &__close { + cursor: pointer; + transform: rotate(-45deg); + position: absolute; + height: 96px; + height: 45px; + color: #000; + font-family: Montserrat; + font-size: 58.625px; + font-style: normal; + font-weight: 200; + line-height: normal; + top: 0px; + right: 50px; + } + &__question { + &_number { + margin-top: 50px; + color: #000; + font-family: Montserrat; + font-size: 32px; + font-style: normal; + font-weight: 600; + line-height: normal; + span { + color: #000; + font-family: Montserrat; + font-size: 32px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + } + &_container { + margin-top: 60px; + display: flex; + justify-content: space-between; + } + &_containerSecond { + width: 48%; + height: 250px; + display: flex; + flex-direction: column; + position: relative; + } + &_user { + &_img { + margin-right: 25px; + &_container { + display: flex; + align-items:center; + color: #000; + font-family: Montserrat; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + } + &_descr { + color: #000; + font-family: Montserrat; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-top: 25px; + } + } + &_time { + display: flex; + justify-content: center; + align-items: center; + &_container { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 20px; + } + } + &_like { + display: flex; + justify-content: center; + align-items: center; + margin: 5px 0 0 10px; + &_container { + display: flex; + justify-content: center; + align-items: center; + + } + } + &_input { + margin-top: 40px; + border-radius: 10px; + border: 1px solid var(--gray_stroke, #D0D2D8); + width: 100%; + height: 235px; + padding-top: 20px; + padding-left: 10px; + } + &_containerThird { + margin-right: 3%; + } + &_button { + &_container { + display: flex; + justify-content: center; + align-items: center; + } + } + } +} +.yellow { + border-radius: 10px; + background-color: #FD0; + width: 190px; + height: 50px; + margin-right: 30px; +} +.gray { + border-radius: 10px; + background: var(--gray_stroke, #D0D2D8); + width: 140px; + height: 40px; +} diff --git a/src/Components/MeetPage/index.jsx b/src/Components/MeetPage/index.jsx index a3ba221..0f8c48d 100644 --- a/src/Components/MeetPage/index.jsx +++ b/src/Components/MeetPage/index.jsx @@ -3,7 +3,7 @@ import styles from './style.module.scss'; import clock from '../../img/MeetPage/Clock.png'; import globe from '../../img/MeetPage/Globe.png'; import avatar from '../../img/MeetPage/avatar.png'; -import { HttpApiMethods } from '../fetchUtils/FetchUtils'; +// import { HttpApiMethods } from '../utils/FetchUtils.jsx'; import {useState} from 'react' import { style } from "@mui/system"; import Card from "../Card"; @@ -11,28 +11,28 @@ import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; -const httpApiMethods = new HttpApiMethods() -const meets = await httpApiMethods.GetMeetings() +// const httpApiMethods = new HttpApiMethods() +// const meets = await httpApiMethods.GetMeetings() const MeetPage = () => { - const filterMeet = meets.filter( (item, index) => index <= 3 ) - console.log(filterMeet) - const id = 5 - console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage) - const meetPng = (id) => { - console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage) - return httpApiMethods.APIURL_FILES + meets[id].speackerImage + // const filterMeet = meets.filter( (item, index) => index <= 3 ) + // console.log(filterMeet) + // const id = 0 + // console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage) + // const meetPng = (id) => { + // console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage) + // return httpApiMethods.APIURL_FILES + meets[id].speackerImage - } - console.log(meetPng(id)) - function extractDateTime(dateString) { - const dateTime = new Date(dateString); - const date = dateTime.toLocaleDateString(); - const time = dateTime.toLocaleTimeString(); + // } + // console.log(meetPng(id)) + // function extractDateTime(dateString) { + // const dateTime = new Date(dateString); + // const date = dateTime.toLocaleDateString(); + // const time = dateTime.toLocaleTimeString(); - return { date, time }; - } + // return { date, time }; + // } return ( <> @@ -45,7 +45,7 @@ const MeetPage = () => {
clock Онлайн
globe 22 декабря, с 10:00 до 22:00 по Московскому времени
-
+ {/*
*/}
@@ -73,7 +73,7 @@ const MeetPage = () => {
Еще мероприятия
- + {/* {Array.isArray(meets) ? ( filterMeet.map((item, index) => ( @@ -97,7 +97,7 @@ const MeetPage = () => {

Неверный тип данных с сервера!

)} - + */}
diff --git a/src/Components/modal/index.jsx b/src/Components/modal/index.jsx new file mode 100644 index 0000000..3f32a46 --- /dev/null +++ b/src/Components/modal/index.jsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import Modal from '@mui/material/Modal'; + +const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 400, + bgcolor: 'background.paper', + border: '2px solid #000', + boxShadow: 24, + p: 4, +}; + +export default function BasicModal(open, close) { + + + + return ( +
+ + + + + Text in a modal + + + Duis mollis, est non commodo luctus, nisi erat porttitor ligula. + + + +
+ ); +} \ No newline at end of file diff --git a/src/img/MeetPage/Facebook.png b/src/img/MeetPage/Facebook.png new file mode 100644 index 0000000000000000000000000000000000000000..c99134bc24cc2487f37346b264900d2f2372a65f GIT binary patch literal 710 zcmV;%0y+JOP)Zl2!US-fexSeUn2qJo%d{Gsz#Hi6KIe^{rPK5Q zB4#gbf#$!@6FNdqARsyR`N?jQjyhUT57I9Q=N>{AW&_qortKg7MWCqf8E57Ie@8tWHTXCZKPj zADMBH-h_2f7l7RK06mKI0W=~!`Lvt1*>gW81|YrtB%(t)<|A4Qt)Ou~09l!{^c13F zjy6Fv?h?(DK{w}8LIWdNLsBcsH}Hc#wr4$sw(pfGSb(mB0z}6P zQ=U2N2K{E#3!R&&n52K8i}AV}^z&X)M6w{)k1$I}laf+>71~cKll|zvMVV*cZ_uxH zVGLTV!ZHZ0q_Xgy`zQP