Compare commits
No commits in common. "6680c2ed1c4a80c590c0846c292f4c1ae394f55e" and "632b11e42164cacf497ee8e83af867c430e6fe2b" have entirely different histories.
6680c2ed1c
...
632b11e421
@ -65,7 +65,6 @@
|
||||
}
|
||||
}
|
||||
.city {
|
||||
height: 400px;
|
||||
height: 520px;
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
@ -89,7 +88,6 @@
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
|
||||
&_option {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
import './header.scss';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
|
||||
const Header = () => {
|
||||
useEffect(() => {
|
||||
const humburger = document.querySelector('.hamburger');
|
||||
const header = document.querySelector('.header__navigation');
|
||||
console.log(humburger);
|
||||
|
||||
humburger.addEventListener('click', (e) => {
|
||||
e.currentTarget.classList.toggle('hamburger_active');
|
||||
header.classList.toggle('hide');
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return () => {
|
||||
humburger.removeEventListener('click', (e) => {
|
||||
e.currentTarget.classList.toggle('hamburger_active');
|
||||
header.classList.toggle('hide');
|
||||
});
|
||||
|
||||
};
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<header className="header" style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<div className="header__container" style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingLeft: '40px',
|
||||
height: 79,
|
||||
|
||||
backgroundColor: '#ffffff',
|
||||
}}>
|
||||
<div className="header__logo" style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<img src="./logo5121.png" alt="#" className="header__logo_img" style={{
|
||||
height: 53,
|
||||
width: 53,
|
||||
}}/>
|
||||
<span className="header__title" style={{
|
||||
color: '#F68C43',
|
||||
width: '60%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
fontWeight: 700,
|
||||
fontFamily: 'Raleway',
|
||||
fontSize: '20px',
|
||||
}}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
|
||||
</div>
|
||||
<button className="header__btn" style={{
|
||||
backgroundColor: '#fff',
|
||||
border: 'none',
|
||||
}}>
|
||||
|
||||
</button>
|
||||
<div className='hamburger'>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='header__navigation hide'>
|
||||
<a href='#' className='header__navigation_link'>Кино по пушкинской карте</a>
|
||||
<a href='#' className='header__navigation_link'>Достопримечательности</a>
|
||||
<a href='#' className='header__navigation_link'>Отели</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,78 +0,0 @@
|
||||
.hamburger {
|
||||
display: block;
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 28px;
|
||||
transform: translateX(-50%);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
span {
|
||||
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
margin-top: 5px;
|
||||
&:nth-child(1) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
&_active {
|
||||
margin-top: 6px;
|
||||
span {
|
||||
transition: ease 0.5s;
|
||||
&:nth-child(1) {
|
||||
margin-top: -2px;
|
||||
transform: translateY(4px) rotate(-45deg);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
margin-top: -3px;
|
||||
transform: translateY(4px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
|
||||
&__navigation {
|
||||
transition:ease 0.6s;
|
||||
transform: translateX(0%);
|
||||
height: 200%;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
width: 60%;
|
||||
background-color: rgba( 0, 0, 0, 0.5 );
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: left;
|
||||
padding-left: 30px;
|
||||
padding-top: 100px;
|
||||
|
||||
&_link {
|
||||
margin-top: 6px;
|
||||
z-index: 1;
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&__container {
|
||||
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
.hide {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
57
src/components/Main/Header.js
Normal file
57
src/components/Main/Header.js
Normal file
@ -0,0 +1,57 @@
|
||||
|
||||
const Header = () => {
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingLeft: '10px',
|
||||
height: 79,
|
||||
width: 390,
|
||||
backgroundColor: '#ffffff',
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<img src="./logo5121.png" alt="#" style={{
|
||||
height: 53,
|
||||
width: 53,
|
||||
}}/>
|
||||
<span style={{
|
||||
color: '#F68C43',
|
||||
width: '60%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
fontWeight: 700,
|
||||
fontFamily: 'Raleway',
|
||||
fontSize: '20px',
|
||||
}}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
|
||||
</div>
|
||||
<button style={{
|
||||
backgroundColor: '#fff',
|
||||
border: 'none',
|
||||
}}>
|
||||
<img src="./menu.png" alt="#" style={{
|
||||
height: 20,
|
||||
width: 32,
|
||||
marginRight: 10,
|
||||
}}/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import Header from "../Header/Header";
|
||||
import Card from "../Card/Card";
|
||||
import Footer from "../Footer/Footer";
|
||||
import Header from "./Header";
|
||||
import Card from "./Card";
|
||||
import Footer from "./Footer";
|
||||
|
||||
const Main = ({ userData }) => {
|
||||
|
||||
@ -50,7 +50,7 @@ const Main = ({ userData }) => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{paddingTop:'70px'}}>
|
||||
<div>
|
||||
<Header />
|
||||
<Card city={userData.selectedCity}/>
|
||||
<div style={{
|
||||
|
||||
@ -80,24 +80,6 @@
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: #fff;
|
||||
&__choise_img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
&__img {
|
||||
height: 300px;
|
||||
width: 245px;
|
||||
border-radius: 10px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
&__description_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@ -108,34 +90,8 @@
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.infoText {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.tinder__flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background: linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%);
|
||||
|
||||
}
|
||||
.btn__container_tinder {
|
||||
width: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin: 0 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btn__tinder {
|
||||
height: 69px;
|
||||
width: 69px;
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import TinderCard from 'react-tinder-card';
|
||||
import './Tinder.scss';
|
||||
import './Tinder.css';
|
||||
|
||||
const Tinder = (props) => {
|
||||
|
||||
@ -34,7 +34,14 @@ const Tinder = (props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='tinder__flex'>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100vh',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
|
||||
}}>
|
||||
<div className='tinder-container'>
|
||||
<div className='card-container'>
|
||||
{cardInfo.map((card) => (
|
||||
@ -48,31 +55,72 @@ const Tinder = (props) => {
|
||||
if(uniqueIds.length === cardInfo.length) {
|
||||
main('/main');
|
||||
setUserData(prevUserData => ({ ...prevUserData, unique: unique }));
|
||||
console.log(unique);
|
||||
console.log(props.userData);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className='card'>
|
||||
<div
|
||||
className='card-content'
|
||||
>
|
||||
<div className='card__img' style={{
|
||||
backgroundImage: `url(${card.imageURL})`
|
||||
style={{
|
||||
width: '300px',
|
||||
height: '500px',
|
||||
borderRadius: '10px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
paddingTop: '10px',
|
||||
}}>
|
||||
<div style={{
|
||||
height: '300px',
|
||||
width: '245px',
|
||||
borderRadius: '10px',
|
||||
backgroundImage: `url(${card.imageURL})`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
}}/>
|
||||
<div className='card__description_container'>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
height: '150px',
|
||||
}}>
|
||||
<h3 className="noselect text">{card.question}</h3>
|
||||
<div className='btn__container_tinder'>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginLeft: '18px',
|
||||
marginRight: '18px',
|
||||
}}>
|
||||
<button
|
||||
className="btn__tinder noselect"
|
||||
className="noselect"
|
||||
style={{
|
||||
height: '69px',
|
||||
width: '69px',
|
||||
backgroundColor: 'rgb(0,0,0,0)',
|
||||
border: 'none',
|
||||
}}
|
||||
onClick={() => handleDislike(card.id)}
|
||||
>
|
||||
<img draggable="false" src="./Dis.png" alt='#' className='card__choise_img' onClick={() => handleDislike(card.id)}/>
|
||||
<img draggable="false" src="./Dis.png" alt='#' style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} onClick={() => handleDislike(card.id)}/>
|
||||
</button>
|
||||
<button
|
||||
className="btn__tinder noselect"
|
||||
|
||||
className="noselect"
|
||||
style={{
|
||||
height: '69px',
|
||||
width: '69px',
|
||||
backgroundColor: 'rgb(0,0,0,0)',
|
||||
border: 'none',
|
||||
}}
|
||||
onClick={() => handleLike(card.id)}
|
||||
>
|
||||
<img draggable="false" src="./Like.png" alt='#' className='card__choise_img' onClick={() => handleLike(card.id)}/>
|
||||
<img draggable="false" src="./Like.png" alt='#' style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} onClick={() => handleLike(card.id)}/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user