routes: completed slider

This commit is contained in:
muerwre 2018-12-13 12:19:30 +07:00
parent 008acbbfd7
commit febe619e8c
4 changed files with 32 additions and 13 deletions

6
package-lock.json generated
View file

@ -11289,9 +11289,9 @@
} }
}, },
"rc-slider": { "rc-slider": {
"version": "8.6.4", "version": "8.5.0",
"resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-8.6.4.tgz", "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-8.5.0.tgz",
"integrity": "sha512-CV2i2Ww6ib0EjFuBKvgjw3PgT6QwvWKC93iEpqPtrztZrx5wO9Iw//AUri4KHRqptW13AuBvFdEHovqLi6XFTw==", "integrity": "sha512-dw1kA7Dr6GOmPZFsy+yMxVyqmckeUtYVdfNOdQcI9O8mXkoCwlxXolMK9bW/TTlXCc8ztaXkJkyTVXl/Gkg5Tw==",
"requires": { "requires": {
"babel-runtime": "6.x", "babel-runtime": "6.x",
"classnames": "^2.2.5", "classnames": "^2.2.5",

View file

@ -75,7 +75,7 @@
"pt-sans-cyrillic": "0.0.4", "pt-sans-cyrillic": "0.0.4",
"pug": "2.0.0-beta11", "pug": "2.0.0-beta11",
"raleway-cyrillic": "^4.0.2", "raleway-cyrillic": "^4.0.2",
"rc-slider": "^8.6.4", "rc-slider": "8.5.0",
"react": "^16.3.2", "react": "^16.3.2",
"react-dom": "^16.3.2", "react-dom": "^16.3.2",
"react-hot-loader": "^4.1.1", "react-hot-loader": "^4.1.1",

View file

@ -118,9 +118,8 @@ const mapStateToProps = ({ user: { editing, routes } }) => ({
editing, editing,
marks: [...new Array((routes.filter.max - routes.filter.min) / 20 + 1)].reduce((obj, el, i) => ({ marks: [...new Array((routes.filter.max - routes.filter.min) / 20 + 1)].reduce((obj, el, i) => ({
...obj, ...obj,
[routes.filter.min + (i * 20)]: (routes.filter.min + (i * 20)), [routes.filter.min + (i * 20)]: String(routes.filter.min + (i * 20)),
}), {}), }), {}),
// routes_sorted: Object.keys(routes).sort((a, b) => (Date.parse(routes[b].updated_at) - Date.parse(routes[a].updated_at))),
}); });
const mapDispatchToProps = dispatch => bindActionCreators({ const mapDispatchToProps = dispatch => bindActionCreators({

View file

@ -38,6 +38,7 @@
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
height: 4px; height: 4px;
border-radius: @border-radius-base; border-radius: @border-radius-base;
pointer-events: none;
} }
&-track { &-track {
@ -62,6 +63,19 @@
background-color: #fff; background-color: #fff;
touch-action: pan-x; touch-action: pan-x;
&::after {
content: '';
display: block;
width: 40px;
height: 50px;
position: absolute;
left: -15px;
top: -16px;
border-radius: 4px;
background: black;
opacity: 0.2;
}
&:focus { &:focus {
// border-color: tint(@primary-color, 20%); // border-color: tint(@primary-color, 20%);
box-shadow: 0 0 0 4px tint(@primary-color, 50%); box-shadow: 0 0 0 4px tint(@primary-color, 50%);
@ -91,6 +105,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
pointer-events: none;
} }
&-mark-text { &-mark-text {
@ -112,17 +127,20 @@
&-dot { &-dot {
position: absolute; position: absolute;
bottom: -2px; bottom: -2;
margin-left: -4px; margin-left: -0.5px;
width: 8px; width: 1px;
height: 8px; height: 12px;
border: 2px solid #e9e9e9; // border: 2px solid #e9e9e9;
background-color: #fff; background-color: black;
opacity: 0.2;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
vertical-align: middle; vertical-align: middle;
&-active { &-active {
border-color: tint(@primary-color, 50%); // border-color: tint(@primary-color, 50%);
background-color: white;
opacity: 0.2;
} }
} }
@ -167,6 +185,8 @@
margin-left: -5px; margin-left: -5px;
margin-bottom: -7px; margin-bottom: -7px;
touch-action: pan-y; touch-action: pan-y;
position: relative;
} }
&-mark { &-mark {