diff --git a/pairent_frontend_react/public/images/icons/gender-female.svg b/pairent_frontend_react/public/images/icons/gender-female.svg new file mode 100644 index 0000000..102783c --- /dev/null +++ b/pairent_frontend_react/public/images/icons/gender-female.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/pairent_frontend_react/public/images/icons/gender-male.svg b/pairent_frontend_react/public/images/icons/gender-male.svg new file mode 100644 index 0000000..b0aee1d --- /dev/null +++ b/pairent_frontend_react/public/images/icons/gender-male.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/pairent_frontend_react/public/images/icons/question.svg b/pairent_frontend_react/public/images/icons/question.svg new file mode 100644 index 0000000..fa3452e --- /dev/null +++ b/pairent_frontend_react/public/images/icons/question.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/pairent_frontend_react/src/components/ComparisonsApartamentsList/index.jsx b/pairent_frontend_react/src/components/ComparisonsApartamentsList/index.jsx index 212add8..f876d53 100644 --- a/pairent_frontend_react/src/components/ComparisonsApartamentsList/index.jsx +++ b/pairent_frontend_react/src/components/ComparisonsApartamentsList/index.jsx @@ -93,7 +93,7 @@ const ComparisonsApartmentsList = () => { return ( <> - + Фото diff --git a/pairent_frontend_react/src/components/UI/PaginatedTitle/index.jsx b/pairent_frontend_react/src/components/UI/PaginatedTitle/index.jsx index 575a5c7..01f119b 100644 --- a/pairent_frontend_react/src/components/UI/PaginatedTitle/index.jsx +++ b/pairent_frontend_react/src/components/UI/PaginatedTitle/index.jsx @@ -48,7 +48,7 @@ const ButtonPreviousAndNext = styled.button` margin-right: 10px; `; -const PaginatedTitle = function ({title, totalPages, page, changePage}) { +const PaginatedTitle = function ({title, totalPages, page, changePage, displayPages}) { let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page); return( @@ -64,12 +64,18 @@ const PaginatedTitle = function ({title, totalPages, page, changePage}) { - changePage(previousPage)}> - - - changePage(nextPage)}> - - + { + displayPages ? + <> + changePage(previousPage)}> + + + changePage(nextPage)}> + + + + : null + } ); diff --git a/pairent_frontend_react/src/components/UI/Pagination/index.jsx b/pairent_frontend_react/src/components/UI/Pagination/index.jsx index b58c4e3..377f72e 100644 --- a/pairent_frontend_react/src/components/UI/Pagination/index.jsx +++ b/pairent_frontend_react/src/components/UI/Pagination/index.jsx @@ -101,14 +101,16 @@ class Pagination extends React.Component { value: props.value } - this.value_controlled = props.onChange != undefined && props.value != undefined; + this.value_controlled = props.value != undefined; this.updateValue = this.updateValue.bind(this); } updateValue(new_val) { - if (new_val < 0) new_val = 0; - if (new_val > this.props.pages) - new_val = this.props.pages; + if (this.props.pages != 0) { + if (new_val < 0) new_val = 0; + if (new_val > this.props.pages) + new_val = this.props.pages; + } this.props.onChange(new_val); if (this.value_controlled) diff --git a/pairent_frontend_react/src/pages/Tinder/index.jsx b/pairent_frontend_react/src/pages/Tinder/index.jsx new file mode 100644 index 0000000..d8d2a58 --- /dev/null +++ b/pairent_frontend_react/src/pages/Tinder/index.jsx @@ -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 ; +} + +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 ( + + +

+ Выбери соседа +
+
+ + Не забывай, с этим человеком
+ придется жить бок-о-бок! + +

+ + { + [...Array(11)].map((_, i) => { + if (i == 5) return
; + + return ( + + + + + + + +

?

+ + + +

User, 0

+

No description provided.

+ + + + Перейти в чат + + + + ); + }) + } + + + ) + } +} + +class Filters extends React.Component { + render() { + return ( + + + Совместимость + + + от + + до + + + + + + + Возраст + + + от + + до + + + + + + + + + + ); + } +} + +export default class Tinder extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( + <> + + <BackButton> + <SVGIcon src='/images/icons/left-arrow-light.svg' width={10} height={16}/> + Вернуться назад + </BackButton> + + <Filters /> + + +
+ + +
+ + ); + } +} \ No newline at end of file diff --git a/pairent_frontend_react/src/router/index.jsx b/pairent_frontend_react/src/router/index.jsx index a87362c..90dd83e 100644 --- a/pairent_frontend_react/src/router/index.jsx +++ b/pairent_frontend_react/src/router/index.jsx @@ -2,6 +2,7 @@ import Favorites from "../pages/Favorites"; import Comparisons from "../pages/Comparisons"; import IndexApartment from "../pages/IndexApartment"; import IndexPage from "../pages/IndexPage"; +import Tinder from "../pages/Tinder"; // НА ПРОДАШКЕНЕ СДЕЛАТЬ ПРИВАТНЫЕ МАРШРУТЫ // export const privateRoutes = [ @@ -11,10 +12,11 @@ import IndexPage from "../pages/IndexPage"; export default Object.freeze({ publicRoutes: [ - {path: '/', component: , exact: true}, - {path: '/apartment/:id', component: , exact: true}, - {path: '/favorites', component: , exact: true}, - {path: '/comparisons', component: , exact: true}, + { path: '/', component: , exact: true }, + { path: '/apartment/:id', component: , exact: true }, + { path: '/favorites', component: , exact: true }, + { path: '/comparisons', component: , exact: true }, + { path: '/tinder', component: , exact: true } ], privateRoutes: [] }) \ No newline at end of file