task-17-lct/frontend
1
0
Fork 0
mirror of https://github.com/task-17-lct/frontend.git synced 2024-11-22 03:26: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 ( return (
<div className="favoriteCard"> <div className="favoriteCard">
<div> <div className="img-cnt">
<img className="imageFavoriteCard" src={props.imageURL}></img> <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>
<div className="titleFavoriteCard">{props.title}</div>
<div className="locationFavoriteCard">{props.location}</div>
</div> </div>
); );
} }

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

@ -1,20 +1,14 @@
.favoriteCard{ .favoriteCard{
display: flex; display: block;
flex-direction: column;
gap:5px;
margin-left: -35px;
} }
.imageFavoriteCard{ .imageFavoriteCard{
border-radius: 30px; border-radius: 30px;
} }
.likeButton{ .likeButton{
position: relative;
right: 50px;
bottom: 10px;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s;
transform: translateY(-60px) translateX(10px);
} }
.likeButton:hover{ .likeButton:hover{
transform: scale(1.1); transform: scale(1.1);
@ -27,3 +21,10 @@
.locationFavoriteCard{ .locationFavoriteCard{
font-size: 16px; 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 = () =>{ export const RusPassHeader:React.FC = () =>{
return( return(
<div className="headerWrapper"> <div className="padding">
<div className="iconWrapper"> <div className="headerWrapper">
<img className="headerIcon" src='logo.svg'></img> <div className="iconWrapper">
<img className="headerIcon" src='menu.svg'></img> <img className="headerIcon" src='logo.svg'></img>
<img className="headerIcon" src='bonus.svg'></img> <img className="headerIcon" src='menu.svg'></img>
<img className="headerIcon" src='search.svg'></img> <img className="headerIcon" src='bonus.svg'></img>
<img className="headerIcon" src='search.svg'></img>
</div> </div>
<div className="iconWrapper"> <div className="iconWrapper">
<img className="headerIcon" src='language.svg'></img> <img className="headerIcon" src='language.svg'></img>
<img className="headerIcon" src='support.svg'></img> <img className="headerIcon" src='support.svg'></img>
<img className="headerIcon" src='favorites.svg'></img> <img className="headerIcon" src='favorites.svg'></img>
<img className="headerIcon" src='profile.svg'></img> <img className="headerIcon" src='profile.svg'></img>
</div>
</div> </div>
</div> </div>
); );
} }

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

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

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

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

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

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