fix adaptive
This commit is contained in:
parent
a76725edf5
commit
b02eff466f
@ -173,7 +173,7 @@
|
|||||||
|
|
||||||
.form-date {
|
.form-date {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px 0 0 15px;
|
padding: 5px 0 0 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -119,6 +119,10 @@
|
|||||||
.create-ticket-project {
|
.create-ticket-project {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: white;
|
background: white;
|
||||||
|
|
||||||
|
@media (max-width: 770px) {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ck-editor {
|
.ck-editor {
|
||||||
|
|||||||
@ -30,10 +30,6 @@
|
|||||||
max-height: 700px;
|
max-height: 700px;
|
||||||
max-width: 915px;
|
max-width: 915px;
|
||||||
|
|
||||||
@media (max-width: 990px) {
|
|
||||||
width: 96%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 880px) {
|
@media (max-width: 880px) {
|
||||||
max-height: none;
|
max-height: none;
|
||||||
overflow-y: inherit;
|
overflow-y: inherit;
|
||||||
@ -590,10 +586,6 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 880px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.members {
|
.members {
|
||||||
@ -613,6 +605,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
border-left: 1px solid #f1f1f1;
|
border-left: 1px solid #f1f1f1;
|
||||||
width: 32%;
|
width: 32%;
|
||||||
|
padding: 0 10px 10px 0;
|
||||||
|
|
||||||
.exit {
|
.exit {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@ -31,6 +31,12 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 700px;
|
||||||
|
|
||||||
|
@media (max-width: 770px) {
|
||||||
|
min-width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.select-priority {
|
.select-priority {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
@ -338,8 +344,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.create-task-body {
|
.create-task-body {
|
||||||
|
width: 100%;
|
||||||
padding: 15px 30px;
|
padding: 15px 30px;
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-columns: 55% 45%;
|
||||||
column-gap: 20px;
|
column-gap: 20px;
|
||||||
|
|
||||||
&__left {
|
&__left {
|
||||||
@ -356,7 +364,7 @@
|
|||||||
.input-container {
|
.input-container {
|
||||||
background: #f1f1f1;
|
background: #f1f1f1;
|
||||||
margin: 0 0 17px;
|
margin: 0 0 17px;
|
||||||
width: 393px;
|
width: 100%;
|
||||||
height: 47px;
|
height: 47px;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@ -407,10 +415,11 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.tags {
|
.tags {
|
||||||
&__selected {
|
&__selected {
|
||||||
width: 250px;
|
width: 100%;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
@ -538,10 +547,10 @@
|
|||||||
|
|
||||||
.select__priority {
|
.select__priority {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
&__name {
|
&__name {
|
||||||
color: #000;
|
color: #000;
|
||||||
width: 250px;
|
|
||||||
height: 47px;
|
height: 47px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -589,7 +598,7 @@
|
|||||||
|
|
||||||
.select__executor {
|
.select__executor {
|
||||||
background: #f1f1f1;
|
background: #f1f1f1;
|
||||||
width: 250px;
|
width: 100%;
|
||||||
height: 47px;
|
height: 47px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
|||||||
@ -41,6 +41,12 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
column-gap: 10px;
|
column-gap: 10px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
@media (max-width: 425px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@ -97,85 +97,87 @@ const TrackerCardTask = forwardRef(
|
|||||||
}, [projectBoard]);
|
}, [projectBoard]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<>
|
||||||
ref={ref}
|
<div
|
||||||
key={task.id}
|
ref={ref}
|
||||||
className={`tasks__board__item ${
|
key={task.id}
|
||||||
taskHover[task.id] ? "task__hover" : ""
|
className={`tasks__board__item ${
|
||||||
}`}
|
taskHover[task.id] ? "task__hover" : ""
|
||||||
draggable={true}
|
}`}
|
||||||
onDragStart={(e) => dragStartHandler(e, task, column.id)}
|
draggable={true}
|
||||||
onDragOver={(e) => dragOverTaskHandler(e, task)}
|
onDragStart={(e) => dragStartHandler(e, task, column.id)}
|
||||||
onDragLeave={(e) => dragLeaveTaskHandler(e)}
|
onDragOver={(e) => dragOverTaskHandler(e, task)}
|
||||||
onDragEnd={() => dragEndTaskHandler()}
|
onDragLeave={(e) => dragLeaveTaskHandler(e)}
|
||||||
onDrop={(e) => dragDropTaskHandler(e, task, column)}
|
onDragEnd={() => dragEndTaskHandler()}
|
||||||
onClick={() => openTicket(task)}
|
onDrop={(e) => dragDropTaskHandler(e, task, column)}
|
||||||
>
|
onClick={() => openTicket(task)}
|
||||||
<div className="tasks__board__item__title">
|
>
|
||||||
<p className="task__board__item__title">{task.title}</p>
|
<div className="tasks__board__item__title">
|
||||||
</div>
|
<p className="task__board__item__title">{task.title}</p>
|
||||||
<p
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: task.description
|
|
||||||
}}
|
|
||||||
className="tasks__board__item__description"
|
|
||||||
></p>
|
|
||||||
{Boolean(task.mark.length) && (
|
|
||||||
<div className="tasks__board__item__tags">
|
|
||||||
{task.mark.map((tag) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="tag-item"
|
|
||||||
key={tag.id}
|
|
||||||
style={{ background: tag.color }}
|
|
||||||
>
|
|
||||||
<p>{tag.slug}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
<p
|
||||||
<div className="tasks__board__item__container">
|
dangerouslySetInnerHTML={{
|
||||||
{typeof task.execution_priority === "number" && (
|
__html: task.description
|
||||||
<div className="tasks__board__item__priority">
|
}}
|
||||||
<p>⚡</p>
|
className="tasks__board__item__description"
|
||||||
<span className={priorityClass[task.execution_priority]}>
|
></p>
|
||||||
{priority[task.execution_priority]}
|
{Boolean(task.mark.length) && (
|
||||||
</span>
|
<div className="tasks__board__item__tags">
|
||||||
|
{task.mark.map((tag) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="tag-item"
|
||||||
|
key={tag.id}
|
||||||
|
style={{ background: tag.color }}
|
||||||
|
>
|
||||||
|
<p>{tag.slug}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{task.dead_line && (
|
<div className="tasks__board__item__container">
|
||||||
<div className="tasks__board__item__dead-line">
|
{typeof task.execution_priority === "number" && (
|
||||||
<p>⌛</p>
|
<div className="tasks__board__item__priority">
|
||||||
<span style={{ color: titleColor }}>
|
<p>⚡</p>
|
||||||
{getCorrectDate(task.dead_line)}
|
<span className={priorityClass[task.execution_priority]}>
|
||||||
</span>
|
{priority[task.execution_priority]}
|
||||||
</div>
|
</span>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
{task.dead_line && (
|
||||||
|
<div className="tasks__board__item__dead-line">
|
||||||
|
<p>⌛</p>
|
||||||
|
<span style={{ color: titleColor }}>
|
||||||
|
{getCorrectDate(task.dead_line)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="tasks__board__item__info">
|
<div className="tasks__board__item__info">
|
||||||
<div className="tasks__board__item__executor">
|
<div className="tasks__board__item__executor">
|
||||||
<img
|
<img
|
||||||
src={
|
src={
|
||||||
task.executor?.avatar
|
task.executor?.avatar
|
||||||
? urlForLocal(task.executor?.avatar)
|
? urlForLocal(task.executor?.avatar)
|
||||||
: avatarMok
|
: avatarMok
|
||||||
}
|
}
|
||||||
alt="avatar"
|
alt="avatar"
|
||||||
/>
|
/>
|
||||||
<span>
|
<span>
|
||||||
{removeLast(task.executor?.fio) || "Исполнитель не назначен"}
|
{removeLast(task.executor?.fio) || "Исполнитель не назначен"}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
<div className="tasks__board__item__info__tags">
|
|
||||||
<div className="tasks__board__item__info__more">
|
|
||||||
<img src={commentsBoard} alt="commentsImg" />
|
|
||||||
<span>{task.comment_count}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="tasks__board__item__info__more">
|
<div className="tasks__board__item__info__tags">
|
||||||
<img src={filesBoard} alt="filesImg" />
|
<div className="tasks__board__item__info__more">
|
||||||
<span>{task.file_count}</span>
|
<img src={commentsBoard} alt="commentsImg" />
|
||||||
|
<span>{task.comment_count}</span>
|
||||||
|
</div>
|
||||||
|
<div className="tasks__board__item__info__more">
|
||||||
|
<img src={filesBoard} alt="filesImg" />
|
||||||
|
<span>{task.file_count}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -184,7 +186,7 @@ const TrackerCardTask = forwardRef(
|
|||||||
currentColumn={column}
|
currentColumn={column}
|
||||||
task={task}
|
task={task}
|
||||||
/>
|
/>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
@ -30,6 +30,10 @@
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
row-gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 3px;
|
width: 3px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@ -61,7 +65,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
|
box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
|
||||||
0px 5px 3px -2px rgba(0, 0, 0, 0.02);
|
0px 5px 3px -2px rgba(0, 0, 0, 0.02);
|
||||||
border-radius: 6px;
|
border-radius: 6px 6px 0 0;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -76,6 +80,7 @@
|
|||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding: 6px 10px 5px 10px;
|
||||||
max-height: none;
|
max-height: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|||||||
@ -2,15 +2,16 @@
|
|||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
|
background: #ffffff;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 10px 0;
|
margin: 0 0 15px 0;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 2px 6px;
|
padding: 0 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid #e3e2e2;
|
border-top: 1px solid #e3e2e2;
|
||||||
border-radius: 8px;
|
border-radius: 0 0 6px 6px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user