diff --git a/src/components/dialogs/MapListDialog.jsx b/src/components/dialogs/MapListDialog.jsx index d0cb452..a28dbee 100644 --- a/src/components/dialogs/MapListDialog.jsx +++ b/src/components/dialogs/MapListDialog.jsx @@ -138,6 +138,7 @@ class Component extends React.Component { {...route} key={route._id} openRoute={this.openRoute} + tab={tab} /> )) } diff --git a/src/components/maps/RouteRow.jsx b/src/components/maps/RouteRow.jsx index f1b56f8..bdd1128 100644 --- a/src/components/maps/RouteRow.jsx +++ b/src/components/maps/RouteRow.jsx @@ -13,24 +13,29 @@ type Props = { }; export const RouteRow = ({ - title, distance, created_at, _id, editing, openRoute, + title, distance, _id, openRoute, tab, }: Props) => ( -
openRoute(_id)} - > -
- {title || _id} -
-
- - - {_id} - - - - {(distance && `${distance} km`) || '0 km'} - +
+
openRoute(_id)} + > +
+ +
+
+ {title || _id} +
+
+ + + {_id} + + + + {(distance && `${distance} km`) || '0 km'} + +
); diff --git a/src/styles/dialogs.less b/src/styles/dialogs.less index 9d3f8a0..7f71e5e 100644 --- a/src/styles/dialogs.less +++ b/src/styles/dialogs.less @@ -110,8 +110,8 @@ } .dialog-maplist { - padding: 10px; box-sizing: border-box; + padding: 10px 0 0 0; } @keyframes pulse { @@ -162,6 +162,20 @@ } } +.route-row-wrapper { + overflow: hidden; + padding: 0 10px; + + &:hover { + .route-row { + transform: translateX(-48px); + } + .route-row-edit { + opacity: 1; + } + } +} + .route-row { margin-bottom: 10px; background: rgba(255, 255, 255, 0.05); @@ -169,13 +183,30 @@ color: white; user-select: none; cursor: pointer; - transition: background-color 250ms; + transition: background 250ms, transform 500ms; + position: relative; &:hover { background: rgba(255, 255, 255, 0.1); } } +.route-row-edit { + fill: rgba(0, 0, 0, 0.5); + left: 100%; + stroke: none; + position: absolute; + top: 0; + width: 58px; + background: rgba(255, 255, 255, 0.2); + height: 100%; + opacity: 0; + transition: all 500ms; + display: flex; + align-items: center; + justify-content: center; +} + .route-title { margin-bottom: 5px; font-weight: bold; @@ -183,6 +214,7 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + position: relative; } .route-description {