add basic tinder
This commit is contained in:
parent
90cd5fe843
commit
8cabfeb1ba
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gender-female" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M8 1a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM3 5a5 5 0 1 1 5.5 4.975V12h2a.5.5 0 0 1 0 1h-2v2.5a.5.5 0 0 1-1 0V13h-2a.5.5 0 0 1 0-1h2V9.975A5 5 0 0 1 3 5z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 316 B |
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gender-male" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M9.5 2a.5.5 0 0 1 0-1h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.707L9.871 6.836a5 5 0 1 1-.707-.707L13.293 2H9.5zM6 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 312 B |
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-lg" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215 0 1.344-.665 2.288-1.79 2.973-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712 1.03-.632 1.397-1.135 1.397-2.028 0-.979-.758-1.698-1.926-1.698-1.009 0-1.71.529-1.938 1.402-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09 0-.618-.473-1.092-1.095-1.092-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 655 B |
|
@ -93,7 +93,7 @@ const ComparisonsApartmentsList = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PaginatedTitle title={"Сравнения квартир"} totalPages={totalPages} page={page} changePage={changePage}/>
|
<PaginatedTitle title={"Сравнения квартир"} totalPages={totalPages} page={page} changePage={changePage} displayPages={true} />
|
||||||
<ApartmentSection>
|
<ApartmentSection>
|
||||||
<ApartmentSectionTitle>
|
<ApartmentSectionTitle>
|
||||||
<ApartmentSectionTitleText style={{height:300}}>Фото</ApartmentSectionTitleText>
|
<ApartmentSectionTitleText style={{height:300}}>Фото</ApartmentSectionTitleText>
|
||||||
|
|
|
@ -48,7 +48,7 @@ const ButtonPreviousAndNext = styled.button`
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const PaginatedTitle = function ({title, totalPages, page, changePage}) {
|
const PaginatedTitle = function ({title, totalPages, page, changePage, displayPages}) {
|
||||||
let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page);
|
let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page);
|
||||||
|
|
||||||
return(
|
return(
|
||||||
|
@ -64,12 +64,18 @@ const PaginatedTitle = function ({title, totalPages, page, changePage}) {
|
||||||
</TitleSectionLeftAndRight>
|
</TitleSectionLeftAndRight>
|
||||||
|
|
||||||
<TitleSectionLeftAndRight>
|
<TitleSectionLeftAndRight>
|
||||||
|
{
|
||||||
|
displayPages ?
|
||||||
|
<>
|
||||||
<ButtonPreviousAndNext onClick={() => changePage(previousPage)}>
|
<ButtonPreviousAndNext onClick={() => changePage(previousPage)}>
|
||||||
<SVGIcon src='/images/icons/left-arrow.svg' width={9} height={16}/>
|
<SVGIcon src='/images/icons/left-arrow.svg' width={9} height={16}/>
|
||||||
</ButtonPreviousAndNext>
|
</ButtonPreviousAndNext>
|
||||||
<ButtonPreviousAndNext onClick={() => changePage(nextPage)}>
|
<ButtonPreviousAndNext onClick={() => changePage(nextPage)}>
|
||||||
<SVGIcon src='/images/icons/right-arrow.svg' width={9} height={16}/>
|
<SVGIcon src='/images/icons/right-arrow.svg' width={9} height={16}/>
|
||||||
</ButtonPreviousAndNext>
|
</ButtonPreviousAndNext>
|
||||||
|
</>
|
||||||
|
: null
|
||||||
|
}
|
||||||
</TitleSectionLeftAndRight>
|
</TitleSectionLeftAndRight>
|
||||||
</TitleSection>
|
</TitleSection>
|
||||||
);
|
);
|
||||||
|
|
|
@ -101,14 +101,16 @@ class Pagination extends React.Component {
|
||||||
value: props.value
|
value: props.value
|
||||||
}
|
}
|
||||||
|
|
||||||
this.value_controlled = props.onChange != undefined && props.value != undefined;
|
this.value_controlled = props.value != undefined;
|
||||||
this.updateValue = this.updateValue.bind(this);
|
this.updateValue = this.updateValue.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
updateValue(new_val) {
|
updateValue(new_val) {
|
||||||
|
if (this.props.pages != 0) {
|
||||||
if (new_val < 0) new_val = 0;
|
if (new_val < 0) new_val = 0;
|
||||||
if (new_val > this.props.pages)
|
if (new_val > this.props.pages)
|
||||||
new_val = this.props.pages;
|
new_val = this.props.pages;
|
||||||
|
}
|
||||||
|
|
||||||
this.props.onChange(new_val);
|
this.props.onChange(new_val);
|
||||||
if (this.value_controlled)
|
if (this.value_controlled)
|
||||||
|
|
|
@ -0,0 +1,327 @@
|
||||||
|
import React from "react";
|
||||||
|
import styled, { keyframes } from 'styled-components';
|
||||||
|
import SVGIcon from "../../components/UI/Icon/SVGIcon";
|
||||||
|
import Pagination from "../../components/UI/Pagination";
|
||||||
|
|
||||||
|
const ChatSVG = () => {
|
||||||
|
return <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/></svg>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Box = styled.div`
|
||||||
|
box-shadow: 0 2px 1px #00000010;
|
||||||
|
border: 1px solid #c2c4c2;
|
||||||
|
border-radius: 14px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BackButton = styled.button`
|
||||||
|
border: 1px solid #c2c4c2;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 14px;
|
||||||
|
|
||||||
|
background: #ffffff;
|
||||||
|
color: gray;
|
||||||
|
box-shadow: 0 2px 1px #00000010;
|
||||||
|
|
||||||
|
font-size: 12pt;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
& ${SVGIcon} {
|
||||||
|
transform: translate(-4px, 2px)
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
const Title = styled.div`
|
||||||
|
text-align: center;
|
||||||
|
height: 100px;
|
||||||
|
padding-top: 32px;
|
||||||
|
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
& h2 {
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
display: inline-block;
|
||||||
|
transform: translateY(6px);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
const FilterForm = styled.div`
|
||||||
|
display: inline-block;
|
||||||
|
float: right
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FilterOption = styled(Box)`
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid #c2c4c2;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
margin: 0 12px;
|
||||||
|
font-size: 11pt;
|
||||||
|
width: 160px;
|
||||||
|
|
||||||
|
& input[type=text] {
|
||||||
|
margin: 0 8px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid gray;
|
||||||
|
outline: none;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FilterSetting = styled.div`
|
||||||
|
border-top: 1px solid #c2c4c2;
|
||||||
|
margin-top: 6px;
|
||||||
|
padding-top: 8px;
|
||||||
|
font-size: 10pt;
|
||||||
|
transform: translate(4px)
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FilterButton = styled.button`
|
||||||
|
background: royalblue;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
float: right;
|
||||||
|
margin: 0 10px;
|
||||||
|
box-shadow: 0 2px 1px #00000020;
|
||||||
|
transition: 250ms ease;
|
||||||
|
|
||||||
|
transform: translateY(12px);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 2px 2px #00000060;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const UserList = styled.div`
|
||||||
|
margin: 32px auto;
|
||||||
|
margin-bottom: 0;
|
||||||
|
display: block;
|
||||||
|
width: fit-content;
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
const ContactButton = styled.button`
|
||||||
|
background: white;
|
||||||
|
border: 2px solid royalblue;
|
||||||
|
border-radius: 12px;
|
||||||
|
color: royalblue;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 20px;
|
||||||
|
transition: 150ms ease;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 10.5pt;
|
||||||
|
height: 36px;
|
||||||
|
opacity: 0;
|
||||||
|
padding: 0px 10px;
|
||||||
|
clip-path: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
& svg {
|
||||||
|
fill: royalblue;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 6px;
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: white;
|
||||||
|
background: royalblue;
|
||||||
|
}
|
||||||
|
&:hover svg {
|
||||||
|
fill: white
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const UserAppear = keyframes`
|
||||||
|
0%, 50% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1.05)
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1)
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const UserCard = styled(Box)`
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px;
|
||||||
|
padding-top: 20px;
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
width: 200px;
|
||||||
|
height: 256px;
|
||||||
|
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 84px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
animation: ${UserAppear} 500ms ease;
|
||||||
|
|
||||||
|
& h4 {
|
||||||
|
margin: 10px 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
& p {
|
||||||
|
margin: 10px 0;
|
||||||
|
height: 74px;
|
||||||
|
color: gray;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
transition: 150ms ease;
|
||||||
|
&:hover > ${ContactButton} {
|
||||||
|
opacity: 1;
|
||||||
|
padding: 6px 10px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
height: 300px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Badges = styled.div`
|
||||||
|
height: 0px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LeftBadge = styled.div`
|
||||||
|
float: left;
|
||||||
|
transform: translate(90%, -100%);
|
||||||
|
background: lightgray;
|
||||||
|
border: 3px solid white;
|
||||||
|
border-radius: 100px;
|
||||||
|
width: 36px; height: 36px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const RightBadge = styled(LeftBadge)`
|
||||||
|
float: right;
|
||||||
|
transform: translate(-75%, -100%);
|
||||||
|
background: limegreen;
|
||||||
|
& p {
|
||||||
|
transform: translateY(6px);
|
||||||
|
font-size: 11pt;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 2px 1px #00000040;
|
||||||
|
margin: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
class Users extends React.Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<UserList>
|
||||||
|
|
||||||
|
<h2 style={{textAlign: 'center', lineHeight: '11pt', marginBottom: 32}}>
|
||||||
|
Выбери соседа
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<span style={{ fontSize: '11pt', fontWeight: 500 }}>
|
||||||
|
Не забывай, с этим человеком<br/>
|
||||||
|
придется жить бок-о-бок!
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{
|
||||||
|
[...Array(11)].map((_, i) => {
|
||||||
|
if (i == 5) return <br/>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<UserCard>
|
||||||
|
<SVGIcon src='/images/icons/user.svg' width='100' height='100' />
|
||||||
|
<Badges>
|
||||||
|
<LeftBadge>
|
||||||
|
<SVGIcon src='/images/icons/question.svg' style={{margin: '5px 0'}} width='20' height='20' />
|
||||||
|
</LeftBadge>
|
||||||
|
<RightBadge>
|
||||||
|
<p>?</p>
|
||||||
|
</RightBadge>
|
||||||
|
</Badges>
|
||||||
|
|
||||||
|
<h4 className="inner-element">User, 0</h4>
|
||||||
|
<p>No description provided.</p>
|
||||||
|
|
||||||
|
<ContactButton>
|
||||||
|
<ChatSVG />
|
||||||
|
Перейти в чат
|
||||||
|
</ContactButton>
|
||||||
|
|
||||||
|
</UserCard>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
</UserList>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Filters extends React.Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<FilterForm>
|
||||||
|
<FilterOption>
|
||||||
|
Совместимость
|
||||||
|
|
||||||
|
<FilterSetting>
|
||||||
|
от
|
||||||
|
<input type='text' />
|
||||||
|
до
|
||||||
|
<input type='text' />
|
||||||
|
</FilterSetting>
|
||||||
|
|
||||||
|
</FilterOption>
|
||||||
|
|
||||||
|
<FilterOption>
|
||||||
|
Возраст
|
||||||
|
|
||||||
|
<FilterSetting>
|
||||||
|
от
|
||||||
|
<input type='text' />
|
||||||
|
до
|
||||||
|
<input type='text' />
|
||||||
|
</FilterSetting>
|
||||||
|
|
||||||
|
</FilterOption>
|
||||||
|
|
||||||
|
<FilterButton>
|
||||||
|
<SVGIcon src='/images/icons/search.svg' width='18' height='18' />
|
||||||
|
</FilterButton>
|
||||||
|
</FilterForm>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Tinder extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Title>
|
||||||
|
<BackButton>
|
||||||
|
<SVGIcon src='/images/icons/left-arrow-light.svg' width={10} height={16}/>
|
||||||
|
Вернуться назад
|
||||||
|
</BackButton>
|
||||||
|
|
||||||
|
<Filters />
|
||||||
|
</Title>
|
||||||
|
|
||||||
|
<div style={{transform: 'translateY(-100px)', position: 'relative', top:0, zIndex: 0}}>
|
||||||
|
<Users />
|
||||||
|
<Pagination pages={0} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,6 +2,7 @@ import Favorites from "../pages/Favorites";
|
||||||
import Comparisons from "../pages/Comparisons";
|
import Comparisons from "../pages/Comparisons";
|
||||||
import IndexApartment from "../pages/IndexApartment";
|
import IndexApartment from "../pages/IndexApartment";
|
||||||
import IndexPage from "../pages/IndexPage";
|
import IndexPage from "../pages/IndexPage";
|
||||||
|
import Tinder from "../pages/Tinder";
|
||||||
|
|
||||||
// НА ПРОДАШКЕНЕ СДЕЛАТЬ ПРИВАТНЫЕ МАРШРУТЫ
|
// НА ПРОДАШКЕНЕ СДЕЛАТЬ ПРИВАТНЫЕ МАРШРУТЫ
|
||||||
// export const privateRoutes = [
|
// export const privateRoutes = [
|
||||||
|
@ -15,6 +16,7 @@ export default Object.freeze({
|
||||||
{ path: '/apartment/:id', component: <IndexApartment />, exact: true },
|
{ path: '/apartment/:id', component: <IndexApartment />, exact: true },
|
||||||
{ path: '/favorites', component: <Favorites />, exact: true },
|
{ path: '/favorites', component: <Favorites />, exact: true },
|
||||||
{ path: '/comparisons', component: <Comparisons />, exact: true },
|
{ path: '/comparisons', component: <Comparisons />, exact: true },
|
||||||
|
{ path: '/tinder', component: <Tinder />, exact: true }
|
||||||
],
|
],
|
||||||
privateRoutes: []
|
privateRoutes: []
|
||||||
})
|
})
|
Loading…
Reference in New Issue