fix adaptive layout in project list

This commit is contained in:
Victor Batischev 2024-02-05 16:44:03 +03:00
parent 4a81441d35
commit 3cc306bbc3
8 changed files with 29 additions and 49 deletions

View File

@ -167,12 +167,8 @@
top: -20px;
@media (max-width: 900px) {
order: 1;
position: inherit;
right: inherit;
top: inherit;
top: 100px;
max-width: 115px;
margin-bottom: 35px;
}
}
}

View File

@ -133,7 +133,7 @@
.edit-project,
.add-worker,
.edit-column {
background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%);
// background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%);
.title-project {
margin-top: 20px;
}

View File

@ -1,8 +1,8 @@
.error-login {
position: relative;
padding: 54px 76px;
padding: 30px;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 40px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
@ -15,9 +15,7 @@
}
p {
font-size: 12px;
line-height: 14px;
width: 176px;
font-size: 15px;
text-align: center;
font-weight: 300;
margin-bottom: 30px;

View File

@ -75,8 +75,6 @@ export const ProjectTicket = ({ project, index }) => {
setModalDelete(false);
}
function linkProject() {}
return (
<div className={`project project-${project.id}`} key={index}>
<Link

View File

@ -2,13 +2,11 @@
display: flex;
flex-direction: column;
position: relative;
width: 322px;
width: 300px;
background: #f1f1f1;
border-radius: 12px;
cursor: pointer;
max-width: 440px;
transition: 0.4s;
&:hover {
@ -26,15 +24,12 @@
&__link {
font-weight: 700;
width: 194px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 18px;
line-height: 32px;
color: #111112;
margin-bottom: 22px;
max-width: 380px;
margin-bottom: 10px;
&:hover {
color: black;
@ -45,7 +40,7 @@
display: flex;
align-items: center;
position: relative;
margin-bottom: 45px;
margin-bottom: 30px;
p {
color: #6f6f6f;
@ -53,7 +48,6 @@
font-size: 12px;
font-weight: 500;
line-height: 17px;
width: 60px;
}
.count {
@ -97,13 +91,13 @@
}
&__open-tracker {
padding: 17px 26px 16px;
padding: 10px 15px;
}
&__statistics {
position: absolute;
bottom: 18px;
left: 26px;
bottom: 13px;
left: 15px;
color: #0042b4;
text-decoration: underline;
font-size: 14px;

View File

@ -201,7 +201,7 @@ export const Tracker = () => {
)) &&
!loader && (
<div className="no-projects">
<div className="no-projects__createNew">
<div className="no-projects__create-new">
<div>
<img src={noProjects} alt="noProjectImg" />
<p>Создайте свой первый проект</p>
@ -251,7 +251,7 @@ export const Tracker = () => {
<p>
{25} - {35}
</p>
<h2>Сентября,</h2>
<h3>Сентября,</h3>
<h3>2023</h3>
</div>

View File

@ -145,10 +145,10 @@
row-gap: 30px;
display: none;
align-items: center;
justify-content: center;
@media (max-width: 785px) {
row-gap: 25px;
justify-content: center;
padding: 0 15px 20px;
}
@ -158,7 +158,7 @@
padding: 20px;
width: 100%;
&__createNew {
&__create-new {
display: flex;
div {
display: flex;
@ -177,14 +177,11 @@
}
.create-project-btn {
max-width: 322px;
width: 322px;
height: 166px;
width: 300px;
height: 113px;
border-radius: 12px;
background: #ecf8e5;
color: #000000;
font-weight: 400;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
@ -192,10 +189,9 @@
&__text {
text-align: left;
font-size: 14px;
font-weight: 250;
width: 190px;
margin-left: 25px;
font-weight: 400;
font-size: 18px;
margin-left: 15px;
}
&:hover {
@ -203,10 +199,13 @@
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
}
@media (max-width: 650px) {
height: 40px;
font-size: 12px;
height: 166px;
@media (max-width: 1068px) {
width: 47%;
}
@media (max-width: 785px) {
max-width: 394px;
width: 100%;
}
}
}

View File

@ -94,13 +94,8 @@
top: -100px;
right: 58px;
@media (max-width: 1000px) {
position: inherit;
order: 1;
top: inherit;
right: inherit;
max-width: 115px;
margin-bottom: 25px;
@media (max-width: 900px) {
display: none;
}
}
}