fix adaptive

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

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

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 {

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;

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;

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;

View File

@ -97,6 +97,7 @@ const TrackerCardTask = forwardRef(
}, [projectBoard]); }, [projectBoard]);
return ( return (
<>
<div <div
ref={ref} ref={ref}
key={task.id} key={task.id}
@ -179,12 +180,13 @@ const TrackerCardTask = forwardRef(
</div> </div>
</div> </div>
</div> </div>
</div>
<TrackerSelectColumn <TrackerSelectColumn
columns={projectBoard.columns.filter((item) => item.id !== column.id)} columns={projectBoard.columns.filter((item) => item.id !== column.id)}
currentColumn={column} currentColumn={column}
task={task} task={task}
/> />
</div> </>
); );
} }
); );

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 {

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 {