From 6a045534f16348febee3a833061f8cf9ae4fe332 Mon Sep 17 00:00:00 2001 From: Hope87 Date: Tue, 22 Jun 2021 18:00:52 +0300 Subject: [PATCH] add counter --- src/components/Calendar/Calendar.js | 11 +- src/components/Calendar/CalendarComponent.js | 8 +- src/components/Calendar/calendarHelper.js | 19 +- .../Candidate/sections/Section.module.css | 1 - .../Description/Description.module.css | 3 +- src/components/Home/Home.js | 2 + src/components/ReportForm/ReportForm.js | 90 ++++++++- .../ReportForm/ReportForm.module.css | 176 +++++++++++++++++- src/images/addIcon.png | Bin 0 -> 742 bytes src/images/remove.png | Bin 0 -> 1140 bytes 10 files changed, 288 insertions(+), 22 deletions(-) create mode 100644 src/images/addIcon.png create mode 100644 src/images/remove.png 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 0000000000000000000000000000000000000000..21e75d9e566445ef07e730a7d9ee67327a01d2cc GIT binary patch literal 742 zcmeAS@N?(olHy`uVBq!ia0vp^Y9P$P3?%12mYf5m7>k44ofvPP)Tsw@z6JP%xB}__ z|Np;u@#6XO=Rgt}ynOi*C-n;>Fk!7Dec>?4DWr5-lDWEw(E<_E4@$A_%2>0@X z%W+#1ebxs6#b3XE4HR5|s%E?nLa`txp~r+d0v4!6%d<*@ue%j3e1@4V?1#=XjN zi?tQkg4>fmdKI;Vst08;(9d;kCd literal 0 HcmV?d00001 diff --git a/src/images/remove.png b/src/images/remove.png new file mode 100644 index 0000000000000000000000000000000000000000..add364b7b83302774e48cf3121362d6e3d2550b8 GIT binary patch literal 1140 zcmYjP3rtg27`~kod5%R8P|SR_QlLU<@1rlE_eG1a!YcDQBa6+33BhTdvh2lhW6mXu zW4I}ZlUO52hDK(xOp>v<8E^$>Cgdkf3mfw9GtbIf;AS;6k$|IMwi?n}XvzRt8=%z)Ek>YGKpKapOu*;_ zMia1Tpcxk@Cq(ZcNJ)Z)IUqF|5Gi8cozToQUO253rPaDk=(O9DbEjz9TZk^sKZ z7b^pq>qO7((98@#J?PWX8U36=V6>=PK&6U9-Z@DU`#m5V54yX=$0N{~G5>d#47$5# zB`JjJWM=|J!lEpNxxQEoGDIlgpPie9g=SwQhF$@UJor;*@YYR;bVJ3p@?f6_@+Lqk zfqFeUvcTv7ONbAL#gT_VpYDso#QTHd#5mNUmPn*(pg#q)8t~2Isv!{|i~DmmkRu>N z`7Ig&nKkd`zvdDGOZqvTs}F@(nWd^+8!VXL9QHIeQ6pb`83>hx0kQr1H$((kd)(<7)|9$-~dt!W^AH_xAMM zhzaX>C;Zj-WOPN+^UD)Hi1_sQfelLzL>#-~il@>}d?}0gR{_ZXL|kVUCJFhcMRRT?=@nA-jJocj_p%y zqmD$y7G>@~vSv^2+DExn>(t?nwu(2bW!o#cGDlrv*9)U%HAz?Epz7$}vBzT_am$4t z=j1hxV?%cPUC)?C({5ioTwWtrf3v^wi{!+_uM*2!mW@wn( zoT8QNTT4%TcD3cu