diff --git a/src/components/Calendar/Calendar.js b/src/components/Calendar/Calendar.js index 4ac9b32f..375a2a3c 100644 --- a/src/components/Calendar/Calendar.js +++ b/src/components/Calendar/Calendar.js @@ -1,11 +1,18 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import style from './Calendar.module.css'; import calendarMale from '../../images/medium_male.png'; import rectangle from '../../images/rectangle_secondPage.png'; import CalendarComponent from './CalendarComponent'; +import { currentMonth } from './calendarHelper'; const Calendar = () => { + const [month, setMonth] = useState(''); + + useEffect(() => { + setMonth(currentMonth); + }, [month]); + return (
@@ -36,7 +43,7 @@ const Calendar = () => {

- Июнь : 60 часов + {month} : 60 часов

diff --git a/src/components/Calendar/CalendarComponent.js b/src/components/Calendar/CalendarComponent.js index 4def5f12..c75844f2 100644 --- a/src/components/Calendar/CalendarComponent.js +++ b/src/components/Calendar/CalendarComponent.js @@ -5,7 +5,7 @@ import rectangle from '../../images/rectangle__calendar.png'; import calendarIcon from '../../images/calendar_icon.png'; import moment from 'moment'; import 'moment/locale/ru'; -import calendarHelper from './calendarHelper'; +import { calendarHelper, currentMonthAndDay } from './calendarHelper'; const CalendarComponent = () => { const [value, setValue] = useState(moment()); @@ -30,10 +30,6 @@ const CalendarComponent = () => { return ''; } - function currentMonth(day) { - return day.format('D MMMM'); - } - function prevMonth() { return value.clone().subtract(1, 'month'); } @@ -82,7 +78,7 @@ const CalendarComponent = () => { id="btn" > - {currentMonth(day)} + {currentMonthAndDay()} )) )} diff --git a/src/components/Calendar/calendarHelper.js b/src/components/Calendar/calendarHelper.js index 77b6c734..50f4624a 100644 --- a/src/components/Calendar/calendarHelper.js +++ b/src/components/Calendar/calendarHelper.js @@ -1,4 +1,7 @@ -export default function calendarHelper(value) { +import moment from 'moment'; +import 'moment/locale/ru'; + +export function calendarHelper(value) { const startDay = value.clone().startOf('month').startOf('week').startOf('day'); const endDay = value.clone().endOf('month').endOf('week'); @@ -16,3 +19,17 @@ export default function calendarHelper(value) { return calendar; } + +export function currentMonth() { + const currentMonth = moment().format('MMMM'); + + return currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1); +} + +// export function currentMonthAndDay(day) { +// return day.format('D MMMM'); +// } + +export function currentMonthAndDay() { + return moment().format('D MMMM'); +} diff --git a/src/components/Candidate/sections/Section.module.css b/src/components/Candidate/sections/Section.module.css index e59381ac..292a7706 100644 --- a/src/components/Candidate/sections/Section.module.css +++ b/src/components/Candidate/sections/Section.module.css @@ -114,7 +114,6 @@ font-family: 'Muller'; font-size: 1.3em; letter-spacing: normal; - line-height: 56.7px; text-align: left; border: none; text-align: center; diff --git a/src/components/Description/Description.module.css b/src/components/Description/Description.module.css index 70833d11..f7c2bffb 100644 --- a/src/components/Description/Description.module.css +++ b/src/components/Description/Description.module.css @@ -86,7 +86,6 @@ @media (max-width: 575.98px) { .description__text { - /* text-align: center; */ margin-left: 20px; font-size: 1.6em; } @@ -151,7 +150,7 @@ @media (max-width: 575.98px) { .description__sp { - font-size: 1.6em; + font-size: 1.5em; text-align: center; margin-bottom: 120px; } diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 96935289..608caaec 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -65,7 +65,9 @@ const Home = ({ onTestFunc }) => { fetch('https://guild.craft-group.xyz/api/skills/skills-on-main-page') .then((response) => response.json()) .then((res) => { + console.log('RES', res); const keys = Object.keys(res); + const values = Object.values(res); const tempTags = values.map((item, index) => diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index 0b11bf46..5f12cfa8 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/src/components/ReportForm/ReportForm.js @@ -1,22 +1,35 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import style from './ReportForm.module.css'; import calendarIcon from '../../images/calendar_icon.png'; import ellipse from '../../images/ellipse.png'; +import remove from '../../images/remove.png'; +import addIcon from '../../images/addIcon.png'; +import { currentMonthAndDay } from '../Calendar/calendarHelper'; const ReportForm = () => { + let count = 1; + + const [formId, setFormId] = useState([count]); + + console.log('CCCCCCCCCC', count); + + const addId = () => { + count++; + }; + return (
-
-
+
+

Добавить отчет

Дата заполнения отчета:

-
+
- 15 июня + {currentMonthAndDay()}
@@ -25,6 +38,73 @@ const ReportForm = () => {
+ +
+
+
+

Краткое описание задачи

+

Количество часов

+
+ + {formId.map((id) => ( +
+ {id}. +
+ +
+
+ +
+ +
+ ))} + {/*
+ 1. +
+ +
+
+ +
+ +
*/} + +
+ addId()} src={addIcon} alt="" /> + Добавить еще +
+
+
+
+ +
+
+
+
+ + Какие сложности возникли? +
+ +
+ + Что планируется сделать завтра? +
+ +
+
+
+
+
+
+ +

+ Всего за день : 60 часов +

+
+
+
); diff --git a/src/components/ReportForm/ReportForm.module.css b/src/components/ReportForm/ReportForm.module.css index 3e0f28e5..9e058644 100644 --- a/src/components/ReportForm/ReportForm.module.css +++ b/src/components/ReportForm/ReportForm.module.css @@ -1,8 +1,8 @@ -.reportForm__headerTitle { +.reportForm__blockTitle { margin-top: 76px; } -.reportForm__headerTitle > h2 { +.reportForm__blockTitle > h2 { color: #282828; font-family: 'GT Eesti Pro Display'; font-size: 3.3em; @@ -13,7 +13,7 @@ text-align: left; } -.reportForm__headerTitle > h3 { +.reportForm__blockTitle > h3 { font-family: 'GT Eesti Pro Display'; font-size: 2.1em; font-weight: 400; @@ -25,7 +25,7 @@ margin-bottom: 35px; } -.reportForm__headerImg { +.reportForm__blockImg { width: 280px; height: 42px; box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); @@ -43,7 +43,7 @@ text-align: left; } -.reportForm__headerImg > img { +.reportForm__blockImg > img { margin-left: 20px; margin-right: 20px; } @@ -71,3 +71,169 @@ line-height: 16.81px; text-align: left; } + +.reportForm__text { + display: flex; + justify-content: space-between; + margin-top: 40px; +} + +.reportForm__text > p { + font-family: 'GT Eesti Pro Display'; + font-size: 1.3em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: normal; + text-align: left; + margin-bottom: 26px; +} + +.text1 { + margin-left: 20px; +} + +.text2 { + margin-right: 86px; +} + +.reportForm__form { + position: relative; + display: flex; + justify-content: space-between; + margin-left: 14px; + margin-bottom: 28px; +} + +.reportForm__form > span { + font-family: 'GT Eesti Pro Display'; + font-size: 2em; + font-weight: 700; + font-style: normal; + letter-spacing: normal; + text-align: left; + position: absolute; + left: 0; + bottom: 7px; +} + +.input__text, +.input__number { + display: flex; + flex-direction: column; + margin-left: 20px; +} + +/* .input__text > label, +.input__number > label { + font-family: 'GT Eesti Pro Display'; + font-size: 1.3em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: normal; + text-align: left; + margin-bottom: 26px; +} */ + +/* .input__text > label { + margin-left: -13px; +} */ + +.input__text > input { + width: 460px; + height: 42px; + box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); + border-radius: 5px; + border: 1px solid #c4c4c4; + background-color: #ffffff; + outline: none; + font-size: 1.8em; +} + +.input__number > input { + width: 141px; + height: 42px; + box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); + border-radius: 5px; + border: 1px solid #c4c4c4; + background-color: #ffffff; + outline: none; + font-size: 1.8em; +} + +.reportForm__form > img { + margin-top: 5px; + width: 23px; + height: 23px; +} + +.reportForm__formAdd { + margin-left: 28px; +} + +.reportForm__formAdd > span { + font-family: 'GT Eesti Pro Display'; + font-size: 1.3em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: normal; + text-align: left; + margin-left: 20px; +} + +.reportForm__inptuBox > input { + margin-left: 10px; + margin-top: 30px; + margin-bottom: 40px; + width: 460px; + height: 42px; + box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); + border-radius: 5px; + border: 1px solid #c4c4c4; + background-color: #ffffff; +} + +.reportForm__footer { + display: flex; + align-items: center; +} + +.reportForm__footer__btn { + width: 166px; + height: 62px; + box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21); + border-radius: 31px; + background-color: #ffffff; + background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), + linear-gradient( + 36deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.16) 47%, + rgba(255, 255, 255, 0.17) 50%, + rgba(255, 255, 255, 0) 100% + ); + color: #ffffff; + font-family: 'Muller'; + font-size: 1.6em; + letter-spacing: normal; + text-align: center; + border: none; +} + +.reportForm__footer__text { + font-family: 'GT Eesti Pro Display'; + font-size: 1.9em; + font-weight: 600; + font-style: normal; + letter-spacing: normal; + line-height: 22.38px; + text-align: left; + margin-left: 40px; + margin-bottom: 0; +} + +.reportForm__footer__text > span { + font-weight: 100; +} diff --git a/src/images/addIcon.png b/src/images/addIcon.png new file mode 100644 index 00000000..21e75d9e Binary files /dev/null and b/src/images/addIcon.png differ diff --git a/src/images/remove.png b/src/images/remove.png new file mode 100644 index 00000000..add364b7 Binary files /dev/null and b/src/images/remove.png differ