tracker
This commit is contained in:
parent
6d113852c4
commit
8dbeb5bba5
BIN
src/images/AvatarTest .png
Normal file
BIN
src/images/AvatarTest .png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/images/Kek.png
Normal file
BIN
src/images/Kek.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
6
src/images/commentsBoard.svg
Normal file
6
src/images/commentsBoard.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.00001 15.2066C7.54001 15.2066 7.10668 14.9733 6.80001 14.5666L5.80001 13.2333C5.78001 13.2066 5.70001 13.1733 5.66668 13.1666H5.33334C2.55334 13.1666 0.833344 12.4133 0.833344 8.66665V5.33331C0.833344 2.38665 2.38668 0.833313 5.33334 0.833313H10.6667C13.6133 0.833313 15.1667 2.38665 15.1667 5.33331V8.66665C15.1667 11.6133 13.6133 13.1666 10.6667 13.1666H10.3333C10.28 13.1666 10.2333 13.1933 10.2 13.2333L9.20001 14.5666C8.89334 14.9733 8.46001 15.2066 8.00001 15.2066ZM5.33334 1.83331C2.94668 1.83331 1.83334 2.94665 1.83334 5.33331V8.66665C1.83334 11.68 2.86668 12.1666 5.33334 12.1666H5.66668C6.00668 12.1666 6.39334 12.36 6.60001 12.6333L7.60001 13.9666C7.83334 14.2733 8.16668 14.2733 8.40001 13.9666L9.40001 12.6333C9.62001 12.34 9.96668 12.1666 10.3333 12.1666H10.6667C13.0533 12.1666 14.1667 11.0533 14.1667 8.66665V5.33331C14.1667 2.94665 13.0533 1.83331 10.6667 1.83331H5.33334Z" fill="#787486"/>
|
||||||
|
<path d="M8.00001 8.00002C7.62668 8.00002 7.33334 7.70002 7.33334 7.33335C7.33334 6.96669 7.63334 6.66669 8.00001 6.66669C8.36668 6.66669 8.66668 6.96669 8.66668 7.33335C8.66668 7.70002 8.37334 8.00002 8.00001 8.00002Z" fill="#787486"/>
|
||||||
|
<path d="M10.6667 8.00002C10.2933 8.00002 10 7.70002 10 7.33335C10 6.96669 10.3 6.66669 10.6667 6.66669C11.0333 6.66669 11.3333 6.96669 11.3333 7.33335C11.3333 7.70002 11.04 8.00002 10.6667 8.00002Z" fill="#787486"/>
|
||||||
|
<path d="M5.33332 8.00002C4.95999 8.00002 4.66666 7.70002 4.66666 7.33335C4.66666 6.96669 4.96666 6.66669 5.33332 6.66669C5.69999 6.66669 5.99999 6.96669 5.99999 7.33335C5.99999 7.70002 5.70666 8.00002 5.33332 8.00002Z" fill="#787486"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
5
src/images/filesBoard.svg
Normal file
5
src/images/filesBoard.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M14.3334 7.33331V11.3333C14.3334 14 13.6667 14.6666 11.0001 14.6666H4.33341C1.66674 14.6666 1.00008 14 1.00008 11.3333V4.66665C1.00008 1.99998 1.66674 1.33331 4.33341 1.33331H5.33341C6.33341 1.33331 6.55341 1.62665 6.93341 2.13331L7.93341 3.46665C8.18674 3.79998 8.33341 3.99998 9.00008 3.99998H11.0001C13.6667 3.99998 14.3334 4.66665 14.3334 7.33331Z" stroke="#787486" stroke-miterlimit="10"/>
|
||||||
|
<path d="M5.33333 1.33331H11.3333C12.6667 1.33331 13.3333 1.99998 13.3333 3.33331V4.25331" stroke="#787486" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M9.33333 10H6" stroke="#787486" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 800 B |
3
src/images/select.svg
Normal file
3
src/images/select.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M1 0.5L5 4.5L9 0.5" stroke="#5B6871"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 149 B |
@ -6,6 +6,10 @@ import {Footer} from '../../components/Footer/Footer'
|
|||||||
import project from '../../images/trackerProject.svg'
|
import project from '../../images/trackerProject.svg'
|
||||||
import tasks from '../../images/trackerTasks.svg'
|
import tasks from '../../images/trackerTasks.svg'
|
||||||
import archive from '../../images/archiveTracker.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'
|
import './tracker.scss'
|
||||||
|
|
||||||
@ -26,6 +30,92 @@ export const Tracker = () => {
|
|||||||
count: 4
|
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) => {
|
const toggleTabs = (index) => {
|
||||||
setToggleTab(index)
|
setToggleTab(index)
|
||||||
@ -66,6 +156,70 @@ export const Tracker = () => {
|
|||||||
}
|
}
|
||||||
<button><span>+</span>Создать проект</button>
|
<button><span>+</span>Создать проект</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div className={toggleTab === 2 ? 'tracker__tabs__content__tasks tasks active__content' : 'tracker__tabs__content__projects'}>
|
||||||
|
<div className='tasks__head'>
|
||||||
|
<h4>Проект : Разработка трекера</h4>
|
||||||
|
<span className='tasks__head__add'>+</span>
|
||||||
|
<div className='tasks__head__persons'>
|
||||||
|
<img src={avatarTest} alt='avatar' />
|
||||||
|
<img src={avatarTest} alt='avatar' />
|
||||||
|
<img src={avatarTest} alt='avatar' />
|
||||||
|
<img src={avatarTest} alt='avatar' />
|
||||||
|
<span>+9</span>
|
||||||
|
</div>
|
||||||
|
<div className='tasks__head__select'>
|
||||||
|
<span>Учавствую</span>
|
||||||
|
<img src={selectArrow} alt='arrow' />
|
||||||
|
</div>
|
||||||
|
<div className='tasks__head__select'>
|
||||||
|
<span>Мои</span>
|
||||||
|
<img src={selectArrow} alt='arrow' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='tasks__container'>
|
||||||
|
{tabTaskMok.map((section, index) => {
|
||||||
|
return <div key={index} className={section.tasks.length >= 3 ? 'tasks__board tasks__board__more' : 'tasks__board'}>
|
||||||
|
<div className='board__head'>
|
||||||
|
<span>{section.name}</span>
|
||||||
|
<div>
|
||||||
|
<span className='add'>+</span>
|
||||||
|
<span className='more'>...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{section.tasks.map((task, index) => {
|
||||||
|
return <div key={index} className='tasks__board__item'>
|
||||||
|
<div className='tasks__board__item__title'>
|
||||||
|
<p>{task.task}</p>
|
||||||
|
<span>...</span>
|
||||||
|
</div>
|
||||||
|
<p className='tasks__board__item__description'>
|
||||||
|
{task.description}
|
||||||
|
</p>
|
||||||
|
<div className='tasks__board__item__info'>
|
||||||
|
<div className='tasks__board__item__info__more'>
|
||||||
|
<img src={commentsBoard} alt='commentsImg' />
|
||||||
|
<span>{task.comments} коментариев</span>
|
||||||
|
</div>
|
||||||
|
<div className='tasks__board__item__info__more'>
|
||||||
|
<img src={filesBoard} alt='filesImg' />
|
||||||
|
<span>{task.files} файлов</span>
|
||||||
|
</div>
|
||||||
|
<div className='tasks__board__item__info__avatars'>
|
||||||
|
<img src={task.avatarCreated} alt='avatar' />
|
||||||
|
<img src={task.avatarDo} alt='avatar' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
{section.tasks.length >= 3 &&
|
||||||
|
<span className='moreItems'>+</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,6 +19,10 @@
|
|||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-top: 70px;
|
margin-top: 70px;
|
||||||
|
|
||||||
|
.row {
|
||||||
|
margin-right: 0px
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
@ -55,7 +59,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
width: 100%;
|
width: calc(132% - 150px);
|
||||||
|
|
||||||
|
@media (max-width: 1890px) {
|
||||||
|
width: calc(100% - 150px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
&__projects {
|
&__projects {
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
@ -119,10 +128,10 @@
|
|||||||
&:after {
|
&:after {
|
||||||
content: '...';
|
content: '...';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 17px;
|
font-size: 21px;
|
||||||
color: #6F6F6F;
|
color: #6F6F6F;
|
||||||
right: 0;
|
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 {
|
.active__content {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user