apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #120 from apuc/tracker-tasks

Browse Source 
Tracker tasks
This commit is contained in:
NikoM1k 2023-07-26 13:52:57 +03:00 committed by GitHub
commit 4c9e87eb0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 131 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Common/ModalLayout/modalLayout.scss
View File

@ -15,7 +15,7 @@
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 24px;
padding: 20px 40px 30px 40px;
padding: 35px 15px 15px 15px;
display: flex;
flex-direction: column;
align-items: center;

3
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@ -487,7 +487,7 @@ export const ModalTiсket = ({
}}
/>
) : (
<h5>{inputsValue.title}</h5>
<h5 className="taskName">{inputsValue.title}</h5>
)}
<div className="content__description">
{editOpen ? (
@ -518,6 +518,7 @@ export const ModalTiсket = ({
/>
) : (
<p
className="taskDescription"
dangerouslySetInnerHTML={{ __html: inputsValue.description }}
/>
)}

107
src/components/Modal/Tracker/ModalTicket/modalTicket.scss
View File

@ -115,6 +115,42 @@
margin-bottom: 0;
}
.taskName {
max-width: 550px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.taskDescription {
max-width: 550px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.fullName {
max-width: 800px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.fullDescription {
max-width: 800px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.comments__list {
display: flex;
flex-direction: column;
@ -318,13 +354,32 @@
.task__files {
display: flex;
flex-wrap: wrap;
gap: 10px;
column-gap: 25px;
row-gap: 20px;
margin-top: 10px;
max-height: 350px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #cbd9f9;
border-radius: 20px;
}
&::-webkit-scrollbar-track {
background: #c5c0c6;
border-radius: 20px;
}
.taskFile {
position: relative;
.imgFile {
max-width: 180px;
max-width: 170px;
max-height: 104px;
object-fit: contain;
}
@ -665,7 +720,7 @@
}
span {
font-size: 12px;
color: #000000;
color: #1458DD;
margin-left: 10px;
font-weight: 500;
}
@ -683,7 +738,8 @@
}
.react-datepicker {
border: 1px solid #398208;
border: 1px solid #e8ede4;
border-radius: 8px;
}
.react-datepicker-popper {
@ -693,25 +749,58 @@
}
.react-datepicker__current-month {
font-size: 14px;
font-size: 18px;
font-family: "LabGrotesque", sans-serif;
text-transform: capitalize;
}
.react-datepicker__navigation-icon {
width: 20px;
height: 20px;
border-radius: 50px;
border: 2px solid #cbd1d2;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: white;
}
}
.react-datepicker__navigation-icon--next::before {
border-width: 2px 2px 0 0;
top: auto;
left: 4px;
height: 6px;
width: 6px;
}
.react-datepicker__navigation-icon--previous::before {
border-width: 2px 2px 0 0;
top: auto;
left: 6px;
height: 6px;
width: 6px;
}
.react-datepicker__header {
padding: 5px 0 10px;
border-bottom: 1px solid #398208;
border-bottom: 1px solid #baacc0;
}
.react-datepicker__day {
font-size: 14px;
font-size: 16px;
width: 35px;
font-family: "LabGrotesque", sans-serif;
border-radius: 50px;
padding: 7px;
}
.react-datepicker__day-name {
font-size: 14px;
font-size: 18px;
width: 35px;
font-weight: 500;
font-family: "LabGrotesque", sans-serif;
}
@ -719,7 +808,7 @@
left: 85px !important;
&:before {
border-bottom-color: #398208 !important;
border: 1px solid #e8ede4;
}
}
}

3
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@ -626,7 +626,7 @@ export const TicketFullScreen = () => {
}}
/>
) : (
<h5>{inputsValue.title}</h5>
<h5 className="fullName">{inputsValue.title}</h5>
)}
<div className="content__description">
{editOpen ? (
@ -657,6 +657,7 @@ export const TicketFullScreen = () => {
/>
) : (
<p
className="fullDescription"
dangerouslySetInnerHTML={{
__html: inputsValue.description,
}}

6
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
View File

@ -30,7 +30,8 @@
display: flex;
align-items: center;
flex-direction: column;
row-gap: 5px;
row-gap: 8px;
margin-bottom: 10px;
.select-priority {
background-color: white;
@ -94,7 +95,8 @@
}
.ck-editor__editable.ck-rounded-corners {
min-height: 100px;
max-width: 390px;
min-height: 130px;
font-size: 14px;
}

4
src/pages/Tracker/Tracker.js
View File

@ -309,7 +309,9 @@ export const Tracker = () => {
return (
<div className="archive__completeTask" key={index}>
<div className="archive__completeTask__description">
<p>{task.title}</p>
<p className="completeTask__title">
{task.title}
</p>
<p
className="date"
dangerouslySetInnerHTML={{

35
src/pages/Tracker/tracker.scss
View File

@ -340,9 +340,9 @@
flex-direction: column;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 40px;
padding: 33px 24px 44px 34px;
width: 425px;
padding: 31px 128px 41px 49px;
cursor: default;
width: 650px;
&__close {
cursor: pointer;
@ -372,7 +372,7 @@
&__info {
display: flex;
margin: 13px 0 10px;
margin: 11px 0 35px;
align-items: center;
span {
@ -402,31 +402,33 @@
&__items {
display: flex;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 35px;
row-gap: 32px;
column-gap: 85px;
margin-bottom: 38px;
}
&__item {
width: 145px;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 190px;
width: 100%;
.avatar {
width: 22px;
height: 22px;
width: 38px;
height: 38px;
margin-right: 12px;
}
span {
display: block;
font-weight: 400;
font-size: 12px;
font-size: 15px;
line-height: initial;
color: #807777;
width: auto;
height: auto;
max-width: 85px;
max-width: 130px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -452,9 +454,10 @@
margin-left: 17px;
color: #000000;
font-weight: 400;
font-size: 12px;
font-size: 16px;
line-height: 32px;
position: initial;
max-width: none;
}
}
}
@ -800,6 +803,7 @@
p {
font-weight: 500;
font-size: 14px;
color: #1458DD;
}
span {
@ -1239,14 +1243,17 @@
}
p {
max-width: 250px;
max-width: 420px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 0;
color: #111112;
}
.completeTask__title {
font-weight: 700;
font-size: 16px;
font-size: 20px;
line-height: 32px;
}
@ -1256,7 +1263,7 @@
.date {
font-weight: 500;
font-size: 10px;
font-size: 16px;
line-height: 24px;
color: #6f6f6f;
}