task-17-lct/frontend
1
0
Fork 0
mirror of https://github.com/task-17-lct/frontend.git synced 2024-11-21 21:36:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix layout problems

Browse Source
This commit is contained in:
ilia 2023-05-20 13:29:32 +03:00
parent 65a8da3ce3
commit bb58d6413f
6 changed files with 50 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/elements/FavoriteCard/index.tsx
View File

@ -12,12 +12,15 @@ export const FavoriteCard:React.FC<FavoriteCardIE> = (props) =>{
return (
<div className="favoriteCard">
<div>
<div className="img-cnt">
<img className="imageFavoriteCard" src={props.imageURL}></img>
<img onClick={()=>setLiked(!liked)} className="likeButton" src={liked? 'likeButtonActive.svg':'likeButton.svg'}></img>
<img width={40} onClick={()=>setLiked(!liked)} className="likeButton" src={liked? 'likeButtonActive.svg':'likeButton.svg'}></img>
</div>
<div className="tr-cnt">
<span className="titleFavoriteCard">{props.title}</span>
<br />
<span className="locationFavoriteCard">{props.location}</span>
</div>
<div className="titleFavoriteCard">{props.title}</div>
<div className="locationFavoriteCard">{props.location}</div>
</div>
);
}

17
src/elements/FavoriteCard/style.css
View File

@ -1,20 +1,14 @@
.favoriteCard{
display: flex;
flex-direction: column;
gap:5px;
margin-left: -35px;
display: block;
}
.imageFavoriteCard{
border-radius: 30px;
}
.likeButton{
position: relative;
right: 50px;
bottom: 10px;
cursor: pointer;
transition: 0.3s;
transform: translateY(-60px) translateX(10px);
}
.likeButton:hover{
transform: scale(1.1);
@ -27,3 +21,10 @@
.locationFavoriteCard{
font-size: 16px;
}
.img-cnt{
display: flex;
flex-direction: column;
}
.tr-cnt{
transform: translateY(-40px);
}

27
src/elements/Header/index.tsx
View File

@ -3,20 +3,23 @@ import './style.css'
export const RusPassHeader:React.FC = () =>{
return(
<div className="headerWrapper">
<div className="iconWrapper">
<img className="headerIcon" src='logo.svg'></img>
<img className="headerIcon" src='menu.svg'></img>
<img className="headerIcon" src='bonus.svg'></img>
<img className="headerIcon" src='search.svg'></img>
<div className="padding">
<div className="headerWrapper">
<div className="iconWrapper">
<img className="headerIcon" src='logo.svg'></img>
<img className="headerIcon" src='menu.svg'></img>
<img className="headerIcon" src='bonus.svg'></img>
<img className="headerIcon" src='search.svg'></img>
</div>
<div className="iconWrapper">
<img className="headerIcon" src='language.svg'></img>
<img className="headerIcon" src='support.svg'></img>
<img className="headerIcon" src='favorites.svg'></img>
<img className="headerIcon" src='profile.svg'></img>
</div>
<div className="iconWrapper">
<img className="headerIcon" src='language.svg'></img>
<img className="headerIcon" src='support.svg'></img>
<img className="headerIcon" src='favorites.svg'></img>
<img className="headerIcon" src='profile.svg'></img>
</div>
</div>
</div>
);
}

7
src/elements/Header/style.css
View File

@ -1,10 +1,13 @@
.headerWrapper{
height: 100px;
padding: 10px 50px;
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100%-100px);
}
.padding{
padding-left: 50px;
padding-right: 50px;
width: calc(100% - 100px);
}
.iconWrapper{

2
src/pages/Main/index.tsx
View File

@ -52,7 +52,7 @@ export const Main: react.FC = () => {
</div>
<div className='mainCard'>
<h2>Добавьте в избранное</h2>
<div className='cardWrapper' style={{gap:'10px'}}>
<div className='fav-wrapper'>
<FavoriteCard {...favoriteCardProps}></FavoriteCard>
<FavoriteCard {...favoriteCardProps}></FavoriteCard>
<FavoriteCard {...favoriteCardProps}></FavoriteCard>

14
src/pages/Main/style.css
View File

@ -7,16 +7,28 @@
gap:25px;
border-radius: 48px;
padding: 50px;
width: calc(100% - 200px);
}
.mainCard>h2{
display: inline-block;
width: 400px;
}
.cardWrapper{
display: flex;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
gap:25px;
justify-content: center;
}
.fav-wrapper{
display: flex;
justify-content: space-between;
gap: 25px;
flex-wrap: wrap;
}
.grey{
font-size: 12px;
color:#1D1D1D