mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 02:56:41 +07:00
routes: completed slider
This commit is contained in:
parent
008acbbfd7
commit
febe619e8c
4 changed files with 32 additions and 13 deletions
6
package-lock.json
generated
6
package-lock.json
generated
|
@ -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",
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue