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