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

fix adaptive

Browse Source
This commit is contained in:
Никита Губарь
2024-08-02 13:48:08 +03:00
parent a76725edf5
commit b02eff466f
8 changed files with 114 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Calendar/calendarComponent.scss
View File

@@ -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%;
} }

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

@@ -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 {

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

@@ -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;

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

@@ -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;

6
src/components/ProfileCalendar/profileCalendar.scss
View File

@@ -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;

152
src/components/TrackerCardTask/TrackerCardTask.jsx
View File

@@ -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> </>
); );
} }
); );

7
src/components/TrackerCardTask/trackerCardTask.scss
View File

@@ -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 {

9
src/components/TrackerSelectColumn/trackerSelectColumn.scss
View File

@@ -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 {