NikoM1k
GitHub
commit
c43170bf58
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 |
3
src/images/archiveTracker.svg
Normal file
3
src/images/archiveTracker.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 13.7475L6.94961 13.7181L1.32757 10.4386L7 13.7475ZM7 13.7475L7.05039 13.7181L12.6725 10.4385C12.8214 10.3517 12.9987 10.3276 13.1654 10.3714C13.3321 10.4153 13.4746 10.5236 13.5614 10.6725C13.6045 10.7462 13.6325 10.8277 13.644 10.9123C13.6556 10.9968 13.6503 11.0829 13.6286 11.1654C13.6069 11.248 13.5691 11.3254 13.5174 11.3934C13.4658 11.4613 13.4012 11.5184 13.3275 11.5614L7.32751 15.0614L7.37521 15.1432M7 13.7475L7.37521 15.1432M7.37521 15.1432L7.32751 15.0614C7.2281 15.1194 7.11508 15.15 7 15.15C6.88492 15.15 6.7719 15.1194 6.67249 15.0614L6.62466 15.1434M7.37521 15.1432L6.62466 15.1434M6.62466 15.1434L6.67249 15.0614L0.672541 11.5615M6.62466 15.1434L0.672541 11.5615M7 10.7475L6.94961 10.7181L1.32757 7.43858L7 10.7475ZM7 10.7475L7.05039 10.7181M7 10.7475L7.05039 10.7181M7.05039 10.7181L12.6725 7.43855L12.6221 7.35217M7.05039 10.7181L12.6221 7.35217M12.6221 7.35217L12.6725 7.43852C12.7463 7.39545 12.8278 7.36732 12.9124 7.35576C12.997 7.3442 13.083 7.34942 13.1656 7.37112C13.2482 7.39283 13.3257 7.43059 13.3937 7.48226C13.4617 7.53393 13.5188 7.59849 13.5618 7.67225C13.6049 7.74601 13.6329 7.82753 13.6445 7.91214C13.656 7.99675 13.6507 8.0828 13.6289 8.16538C13.6072 8.24795 13.5694 8.32543 13.5177 8.39338C13.4659 8.46134 13.4014 8.51843 13.3276 8.56142L13.3275 8.56145L7.32751 12.0614L7.3779 12.1478L7.32751 12.0614C7.2281 12.1194 7.11508 12.15 7 12.15C6.88492 12.15 6.7719 12.1194 6.67249 12.0614L6.62466 12.1434L6.67249 12.0614L0.672541 8.56148L12.6221 7.35217ZM0.672541 11.5615L0.672488 11.5614C0.523724 11.4745 0.415556 11.3321 0.371759 11.1655C0.327956 10.9988 0.352125 10.8216 0.438951 10.6727C0.525778 10.5239 0.668156 10.4156 0.834788 10.3717C1.0014 10.3278 1.17862 10.3518 1.32751 10.4385L0.672541 11.5615ZM0.672482 4.43855L0.672488 4.43855L6.67249 0.938551L6.67249 0.938549C6.7719 0.880558 6.88492 0.85 7 0.85C7.11508 0.85 7.2281 0.880558 7.32751 0.938549L7.32751 0.938551L13.3275 4.43855L13.3765 4.35454L13.3275 4.43855C13.4256 4.49579 13.5071 4.57775 13.5636 4.67626C13.6202 4.77477 13.65 4.88639 13.65 5C13.65 5.1136 13.6202 5.22522 13.5636 5.32373C13.5071 5.42225 13.4256 5.50421 13.3275 5.56145L13.3752 5.64321L13.3275 5.56145L7.32751 9.06145L7.3779 9.14782L7.32751 9.06145C7.2281 9.11944 7.11508 9.15 7 9.15C6.88492 9.15 6.7719 9.11944 6.67249 9.06145L6.62734 9.13884L6.67249 9.06145L0.672488 5.56145L0.672482 5.56144C0.574349 5.50421 0.492933 5.42225 0.436351 5.32374C0.379768 5.22523 0.349995 5.11361 0.35 5L0.25 5L0.35 4.99999C0.349995 4.88639 0.379768 4.77477 0.436351 4.67626C0.492933 4.57775 0.574349 4.49579 0.672482 4.43855ZM2.43808 4.91362L2.29 5L2.43808 5.08638L6.94961 7.71809L7 7.74748L7.05039 7.71809L11.5619 5.08638L11.71 5L11.5619 4.91362L7.05039 2.28191L7 2.25252L6.94961 2.28191L2.43808 4.91362ZM0.834788 7.37169C1.0014 7.32779 1.17862 7.35184 1.32751 7.43855L0.672488 8.56145C0.523724 8.47452 0.415556 8.33209 0.371759 8.16545C0.327956 7.9988 0.352125 7.82156 0.438951 7.67272C0.525778 7.52387 0.668156 7.4156 0.834788 7.37169Z" fill="#787486" stroke="white" stroke-width="0.2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 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 |
5
src/images/trackerProject.svg
Normal file
5
src/images/trackerProject.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.5774 0.722229H0.422689C0.189009 0.722229 0 0.911336 0 1.14492V2.85501C0 3.08859 0.189009 3.27775 0.422689 3.27775H11.5774C11.811 3.27775 12 3.08859 12 2.85501V1.14492C12 0.911336 11.811 0.722229 11.5774 0.722229Z" fill="#787486"/>
|
||||
<path d="M11.5774 4.72229H0.422689C0.189009 4.72229 0 4.91135 0 5.14493V6.85508C0 7.08871 0.189009 7.27776 0.422689 7.27776H11.5774C11.811 7.27776 12 7.08871 12 6.85508V5.14493C12 4.91135 11.811 4.72229 11.5774 4.72229Z" fill="#787486"/>
|
||||
<path d="M5.5773 8.72229H0.422689C0.189009 8.72229 0 8.91137 0 9.14493V10.8551C0 11.0887 0.189009 11.2778 0.422689 11.2778H5.5773C5.81098 11.2778 5.99999 11.0887 5.99999 10.8551V9.14493C6.00001 8.91137 5.811 8.72229 5.5773 8.72229Z" fill="#787486"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 835 B |
3
src/images/trackerTasks.svg
Normal file
3
src/images/trackerTasks.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.1676 1C12.3229 1 13.2671 1.90421 13.3308 3.04365L13.3343 3.1666L13.3339 11.1691C13.3337 12.3657 12.3637 13.3358 11.1671 13.3358H3.1667C2.01134 13.3358 1.06717 12.4315 1.00343 11.2921L1 11.1692L1.0004 3.16661C1.00054 1.97006 1.97055 1 3.1671 1H11.1676ZM6.66667 5.66667L2 5.66733L2.00007 11.1691L2.00485 11.2763C2.05892 11.8704 2.55844 12.3358 3.16667 12.3358L6.66667 12.3353V5.66667ZM12.3333 9.66667L7.66667 9.66733V12.3353L11.1671 12.3358C11.8114 12.3358 12.3338 11.8134 12.3339 11.1691L12.3333 9.66667ZM11.1676 2L7.66667 1.99933V8.66733L12.3333 8.66667L12.3342 3.16665L12.3294 3.05949C12.2753 2.46537 11.7758 2 11.1676 2ZM6.66667 1.99933L3.16715 2L3.07149 2.00387C2.4719 2.05259 2.00047 2.5546 2.0004 3.16669L2 4.66733L6.66667 4.66667V1.99933Z" fill="#787486" stroke="#787486" stroke-width="0.3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 915 B |
@ -1,11 +1,230 @@
|
||||
import React from 'react';
|
||||
import React, {useState} from 'react';
|
||||
|
||||
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
|
||||
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'
|
||||
|
||||
export const Tracker = () => {
|
||||
|
||||
const [toggleTab, setToggleTab] = useState(1)
|
||||
const [projects] = useState([
|
||||
{
|
||||
name: 'Разработка трекера',
|
||||
count: 4
|
||||
},
|
||||
{
|
||||
name: 'Кинотеатр',
|
||||
count: 4
|
||||
},
|
||||
{
|
||||
name: 'Проект страхование',
|
||||
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)
|
||||
}
|
||||
return (
|
||||
<div className='tacker'>
|
||||
<div className='tracker'>
|
||||
<ProfileHeader />
|
||||
<div className='container'>
|
||||
<div className='tracker__content'>
|
||||
<h2 className='tracker__title'>Трекер</h2>
|
||||
<div className='tracker__tabs'>
|
||||
<div className='tracker__tabs__head'>
|
||||
<div className={toggleTab === 1 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(1)}>
|
||||
<img src={project} alt='img' />
|
||||
<p>Проекты </p>
|
||||
</div>
|
||||
<div className={toggleTab === 2 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(2)}>
|
||||
<img src={tasks} alt='img' />
|
||||
<p>Задачи</p>
|
||||
</div>
|
||||
<div className={toggleTab === 3 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(3)}>
|
||||
<img src={archive} alt='img' />
|
||||
<p>Архив</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='tracker__tabs__content'>
|
||||
<div className={toggleTab === 1 ? 'tracker__tabs__content__projects active__content' : 'tracker__tabs__content__projects'}>
|
||||
{projects.map((project, index) => {
|
||||
return <div className='project'>
|
||||
<h3>{project.name}</h3>
|
||||
<div className='project__info'>
|
||||
<p>Открытые задачи</p>
|
||||
<span className='count'>{project.count}</span>
|
||||
<span className='add'>+</span>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
<button><span>+</span>Создать проект</button>
|
||||
</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>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
424
src/pages/Tracker/tracker.scss
Normal file
424
src/pages/Tracker/tracker.scss
Normal file
@ -0,0 +1,424 @@
|
||||
.tracker {
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
|
||||
.container {
|
||||
max-width: 1160px;
|
||||
padding: 0 10px;
|
||||
|
||||
@media (max-width: 570px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 70px;
|
||||
|
||||
.row {
|
||||
margin-right: 0px
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
|
||||
&__head {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
padding: 12px 40px 15px 19px;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
margin: 0 0 0 15px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.active-tab {
|
||||
background: white;
|
||||
border-radius: 15px 0 0 15px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: calc(132% - 150px);
|
||||
|
||||
@media (max-width: 1890px) {
|
||||
width: calc(100% - 150px);
|
||||
}
|
||||
|
||||
|
||||
&__projects {
|
||||
background: #FFFFFF;
|
||||
border-radius: 0 12px 12px 12px;
|
||||
padding: 26px 24px 40px;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 34px;
|
||||
row-gap: 30px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
|
||||
.project {
|
||||
width: 48%;
|
||||
background: #F1F1F1;
|
||||
border-radius: 12px;
|
||||
padding: 17px 26px 16px;
|
||||
cursor: pointer;
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
color: #111112;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
color: #6F6F6F;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.count {
|
||||
margin-left: 8px;
|
||||
width: 21px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #DDDDDD;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #6F6F6F;
|
||||
}
|
||||
|
||||
.add {
|
||||
color: #6F6F6F;
|
||||
font-size: 17px;
|
||||
margin: 0 25px 0 auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '...';
|
||||
position: absolute;
|
||||
font-size: 21px;
|
||||
color: #6F6F6F;
|
||||
right: 0;
|
||||
top: -35%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background: #52B709;
|
||||
border-radius: 44px;
|
||||
max-width: 150px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
margin-right: 9px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user