diff --git a/src/images/AvatarTest .png b/src/images/AvatarTest .png new file mode 100644 index 00000000..f9757a92 Binary files /dev/null and b/src/images/AvatarTest .png differ diff --git a/src/images/Kek.png b/src/images/Kek.png new file mode 100644 index 00000000..c823e359 Binary files /dev/null and b/src/images/Kek.png differ diff --git a/src/images/commentsBoard.svg b/src/images/commentsBoard.svg new file mode 100644 index 00000000..e4258ade --- /dev/null +++ b/src/images/commentsBoard.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/filesBoard.svg b/src/images/filesBoard.svg new file mode 100644 index 00000000..af08c53a --- /dev/null +++ b/src/images/filesBoard.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/select.svg b/src/images/select.svg new file mode 100644 index 00000000..d14729ba --- /dev/null +++ b/src/images/select.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 9294da2b..64aac06f 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -6,6 +6,10 @@ import {Footer} from '../../components/Footer/Footer' import project from '../../images/trackerProject.svg' import tasks from '../../images/trackerTasks.svg' import archive from '../../images/archiveTracker.svg' +import avatarTest from '../../images/AvatarTest .png' +import selectArrow from '../../images/select.svg' +import commentsBoard from '../../images/commentsBoard.svg' +import filesBoard from '../../images/filesBoard.svg' import './tracker.scss' @@ -26,6 +30,92 @@ export const Tracker = () => { count: 4 } ]) + const [tabTaskMok] = useState([ + { + name: 'Открытые', + tasks: [ + { + task: 'PR - 2245', + description: 'Сверстать часть таблицы. Сверстать часть таблицы', + comments: 12, + files: 0, + avatarCreated: avatarTest, + avatarDo: avatarTest + }, + { + task: 'PR - 2245', + description: 'Сверстать часть таблицы. Сверстать часть таблицы', + comments: 12, + files: 0, + avatarCreated: avatarTest, + avatarDo: avatarTest + } + ] + }, + { + name: 'В процессе', + tasks: [ + { + task: 'PR - 2245', + description: 'Сверстать часть таблицы. Сверстать часть таблицы', + comments: 12, + files: 0, + avatarCreated: avatarTest, + avatarDo: avatarTest + } + ] + }, + { + name: 'На проверке', + tasks: [ + { + task: 'PR - 2245', + description: 'Сверстать часть таблицы. Сверстать часть таблицы', + comments: 12, + files: 0, + avatarCreated: avatarTest, + avatarDo: avatarTest + }, + { + task: 'PR - 2245', + description: 'Сверстать часть таблицы. Сверстать часть таблицы', + comments: 12, + files: 0, + avatarCreated: avatarTest, + avatarDo: avatarTest + }, + { + task: 'PR - 2245', + description: 'Сверстать часть таблицы. Сверстать часть таблицы', + comments: 12, + files: 0, + avatarCreated: avatarTest, + avatarDo: avatarTest + } + ] + }, + { + name: 'Готово', + tasks: [ + { + task: 'PR - 2245', + description: 'Сверстать часть таблицы. Сверстать часть таблицы', + comments: 12, + files: 0, + avatarCreated: avatarTest, + avatarDo: avatarTest + }, + { + task: 'PR - 2245', + description: 'Сверстать часть таблицы. Сверстать часть таблицы', + comments: 12, + files: 0, + avatarCreated: avatarTest, + avatarDo: avatarTest + } + ] + } + ]) const toggleTabs = (index) => { setToggleTab(index) @@ -66,6 +156,70 @@ export const Tracker = () => { } +
+
+

Проект : Разработка трекера

+ + +
+ avatar + avatar + avatar + avatar + +9 +
+
+ Учавствую + arrow +
+
+ Мои + arrow +
+
+
+ {tabTaskMok.map((section, index) => { + return
= 3 ? 'tasks__board tasks__board__more' : 'tasks__board'}> +
+ {section.name} +
+ + + ... +
+
+ {section.tasks.map((task, index) => { + return
+
+

{task.task}

+ ... +
+

+ {task.description} +

+
+
+ commentsImg + {task.comments} коментариев +
+
+ filesImg + {task.files} файлов +
+
+ avatar + avatar +
+
+
+ }) + } + {section.tasks.length >= 3 && + + + } +
+ }) + } +
+
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 6a9943d0..d4c058f8 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -19,6 +19,10 @@ footer { margin-top: 70px; + + .row { + margin-right: 0px + } } &__title { @@ -55,7 +59,12 @@ } &__content { - width: 100%; + width: calc(132% - 150px); + + @media (max-width: 1890px) { + width: calc(100% - 150px); + } + &__projects { background: #FFFFFF; @@ -119,10 +128,10 @@ &:after { content: '...'; position: absolute; - font-size: 17px; + font-size: 21px; color: #6F6F6F; right: 0; - top: -15%; + top: -35%; } } } @@ -150,6 +159,263 @@ } } + &__tasks { + display: none; + background: #FFFFFF; + border-radius: 12px; + padding: 13px 23px 65px; + flex-direction: column; + overflow-x: scroll; + + &::-webkit-scrollbar { + width: 2px; + border-radius: 10px; + height: 8px; + } + + &::-webkit-scrollbar-track { + background: #d9e1e9; + } + + &::-webkit-scrollbar-thumb { + background: #d6d3d3; + border-radius: 40px; + } + } + + .tasks { + + &__head { + display: flex; + border-bottom: 1px solid #DDE2E4; + padding: 0 25px 15px; + align-items: center; + width: 1525px; + + h4 { + color: #111112; + font-weight: 700; + font-size: 16px; + line-height: 32px; + margin-bottom: 0; + } + + &__add { + width: 33px; + height: 33px; + background: #52B709; + border-radius: 44px; + color: whitesmoke; + cursor: pointer; + font-size: 15px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 100px 0 55px; + } + + &__persons { + position: relative; + display: flex; + cursor: pointer; + margin-right: 57px; + + img { + position: relative; + width: 32px; + height: 32px; + } + + img:nth-child(1) { + right: -32px; + } + + img:nth-child(2) { + right: -24px; + } + + img:nth-child(3) { + right: -16px; + } + + img:nth-child(4) { + right: -8px; + } + + span { + color: #252C32; + font-weight: 500; + font-size: 12px; + line-height: 16px; + display: flex; + width: 32px; + height: 32px; + border: 1px solid #DDE2E4; + border-radius: 50px; + align-items: center; + justify-content: center; + } + } + + &__select { + cursor: pointer; + margin-right: 40px; + + img { + margin-left: 18px; + } + span { + color: #252C32; + font-weight: 400; + font-size: 14px; + line-height: 24px; + } + } + } + + &__container { + padding: 30px 25px 0; + display: flex; + column-gap: 25px; + width: 1525px; + } + + &__board { + background: #F5F7F9; + box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.04), 0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06); + border-radius: 8px; + padding: 16px 14px 16px 8px; + width: 350px; + display: flex; + flex-direction: column; + row-gap: 16px; + height: fit-content; + position: relative; + + &__item { + padding: 16px; + position: relative; + box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02); + border-radius: 6px; + background: #FFFFFF; + cursor: grabbing; + + &__title { + display: flex; + justify-content: space-between; + p { + color: #1A1919; + font-weight: 500; + font-size: 16px; + line-height: 24px; + margin-bottom: 0; + } + + span { + cursor: pointer; + display: flex; + border-radius: 6px; + align-items: center; + justify-content: center; + font-size: 20px; + padding-bottom: 13px; + width: 24px; + height: 24px; + border: 1px solid #DDDDDD; + } + } + + &__description { + margin: 8px 0 15px; + color: #5C6165; + font-weight: 400; + font-size: 14px; + line-height: 140%; + } + + &__info { + display: flex; + justify-content: space-between; + align-items: center; + + &__more { + cursor: pointer; + span { + font-weight: 500; + font-size: 12px; + line-height: 15px; + color: #6E7C87; + margin-left: 5px; + } + } + + &__avatars { + position: relative; + img { + position: relative; + } + img:first-child { + right: -15px; + z-index: 2; + } + } + } + } + + .moreItems { + cursor: pointer; + background: #8BCC60; + border-radius: 44px; + width: 33px; + height: 33px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: -15px; + color: white; + font-size: 20px; + left: 165px; + } + + &__more { + padding-bottom: 50px; + } + } + + .board { + &__head { + position: relative; + display: flex; + justify-content: space-between; + span { + color: #6F6F6F; + font-weight: 500; + font-size: 16px; + line-height: 24px; + cursor: pointer; + } + + .add { + color: #6F6F6F; + font-size: 19px; + } + + .more { + margin-left: 22px; + position: relative; + bottom: 4px; + font-size: 20px; + } + + .done { + color: #406128; + font-weight: 700; + } + } + } + } + .active__content { display: flex; }