diff --git a/pairent_frontend_react/public/images/icons/caret-double-blue.svg b/pairent_frontend_react/public/images/icons/caret-double-blue.svg
new file mode 100644
index 0000000..7a79d6b
--- /dev/null
+++ b/pairent_frontend_react/public/images/icons/caret-double-blue.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/pairent_frontend_react/public/images/icons/caret-double.svg b/pairent_frontend_react/public/images/icons/caret-double.svg
new file mode 100644
index 0000000..73e1b35
--- /dev/null
+++ b/pairent_frontend_react/public/images/icons/caret-double.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/pairent_frontend_react/public/images/icons/dots.svg b/pairent_frontend_react/public/images/icons/dots.svg
new file mode 100644
index 0000000..ea92369
--- /dev/null
+++ b/pairent_frontend_react/public/images/icons/dots.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx b/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx
index 486f18c..977a5b3 100644
--- a/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx
+++ b/pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx
@@ -52,7 +52,7 @@ const FavoritesApartamentsList = () => {
Идет загрузка...
}
-
+
>
);
};
diff --git a/pairent_frontend_react/src/components/UI/Pagination/index.jsx b/pairent_frontend_react/src/components/UI/Pagination/index.jsx
index bd094b4..3afa876 100644
--- a/pairent_frontend_react/src/components/UI/Pagination/index.jsx
+++ b/pairent_frontend_react/src/components/UI/Pagination/index.jsx
@@ -1,6 +1,11 @@
import React, { useState } from 'react';
import styled from 'styled-components';
-import SVGIcon from '../Icon/SVGIcon';
+import ISVGIcon from '../Icon/SVGIcon';
+
+const SVGIcon = styled(ISVGIcon)`
+ margin: 0;
+ transform: translateY(2px);
+`;
const PageButtonContainer = styled.div`
margin: 24px auto;
@@ -39,6 +44,20 @@ const PageButton = styled.button`
}
`;
+const FastButton = styled(PageButton)`
+ background: url(/images/icons/dots.svg) no-repeat;
+ background-position: center;
+ background-size: 20px;
+ transform: translateY(-5px);
+
+ &:hover, &:active {
+ background: url(/images/icons/caret-double-blue.svg) no-repeat;
+ background-position: center;
+ background-size: 14px;
+ transform: translateY(-5px);
+ }
+`;
+
const range = (start, stop) => {
if (stop < start) throw 'Stop value can\'t be smaller than start value.';
@@ -88,6 +107,10 @@ class Pagination extends React.Component {
}
updateValue(new_val) {
+ 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)
return;
@@ -109,8 +132,8 @@ class Pagination extends React.Component {
{
this.props.sideButtons ?
-
-
+ this.updateValue(value - 1)}>
+
: null
}
@@ -120,8 +143,20 @@ class Pagination extends React.Component {
if ( !( i == 0 | i == pages - 1) )
if ( i < value - 2 | i > value + 2 ) {
- if ( i == value + 3 | i == value - 3 ) {
- return ...
+ if ( i == value - 3 | i == value + 3 ) {
+ return (
+ {
+ if (i == value - 3) {
+ this.updateValue(value - 3);
+ } else
+ this.updateValue(value + 3);
+ }}
+ >
+
+
+ );
}
return null;
}
@@ -132,8 +167,8 @@ class Pagination extends React.Component {
{
this.props.sideButtons ?
-
-
+ this.updateValue(value + 1)}>
+
: null
}