add mocks pic for vehicle

ekaterinburgdev · Jan 26, 2023 · 4a0b950 · 4a0b950
1 parent 1658d47
commit 4a0b950
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 22 deletions.
diff --git a/components/Map/Stations/Sidebar/MapStationsSidebar.module.css b/components/Map/Stations/Sidebar/MapStationsSidebar.module.css
@@ -16,6 +16,14 @@
 .MapStationsSidebarWrapper {
     border-radius: 16px;
     background-color: var(--background-primary);
+
+    overflow-y: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.MapStationsSidebarWrapper::-webkit-scrollbar {
+    display: none;
 }
 
 .MapStationsSidebarRow {

diff --git a/components/Map/Vehicles/Item/MapVehiclesItem.tsx b/components/Map/Vehicles/Item/MapVehiclesItem.tsx
@@ -62,9 +62,7 @@ export class MapVehiclesItemComponent extends Component<MapVehiclesItemProps> {
     }
 
     getIcon() {
-        const {
-            boardId, routeNumber, course, type, disability, warning,
-        } = this.props;
+        const { boardId, routeNumber, course, type, disability, warning } = this.props;
         const isCourseEast = course > EAST_COURSE_RANGE.left || course < EAST_COURSE_RANGE.right;
 
         return new L.DivIcon({
@@ -103,25 +101,24 @@ export class MapVehiclesItemComponent extends Component<MapVehiclesItemProps> {
 
     onClickEventHandler = () => {
         const { routeNumber, onClick } = this.props;
+        console.log('HERE');
+        if (!this.isActive) {
+            this.isActive = true;
+            sidebarService.open(<MapVehiclesSidebar {...this.props} />, () => {
+                this.isActive = false;
+            });
+        }
 
         if (!routeNumber) {
             return;
         }
 
         onClick(routeNumber);
 
-        if (!this.isActive) {
-            this.isActive = true;
-            sidebarService.open(<MapVehiclesSidebar {...this.props} />, () => {
-                this.isActive = false;
-            });
-        }
     };
 
     private updateTranslate = () => {
-        const {
-            boardId, routeNumber, velocity, course,
-        } = this.props;
+        const { boardId, routeNumber, velocity, course } = this.props;
 
         const marker = document.querySelector(
             `#vehicle-${boardId}-${routeNumber}`,

diff --git a/components/Map/Vehicles/Marker/MapVehicleMarker.module.css b/components/Map/Vehicles/Marker/MapVehicleMarker.module.css
@@ -8,8 +8,8 @@
 
 .MapVehicleMarkerIcon {
     position: absolute;
-    top: 6px;
-    left: 6px;
+    top: 8px;
+    left: 7px;
 }
 
 .MapVehicleMarkerInfo {

diff --git a/components/Map/Vehicles/Sidebar/MapVehiclesSidebar.module.css b/components/Map/Vehicles/Sidebar/MapVehiclesSidebar.module.css
@@ -249,9 +249,9 @@
     position: absolute;
     z-index: 1;
     top: 50%;
-    left: -5px;
+    left: -6px;
     height: 23px;
-    transform: translateY(-55%) scale(0.7);
+    transform: translateY(-70%) scale(0.6);
 }
 
 .MapVehiclesSidebarBullet {

diff --git a/components/Map/Vehicles/Sidebar/MapVehiclesSidebar.tsx b/components/Map/Vehicles/Sidebar/MapVehiclesSidebar.tsx
@@ -30,7 +30,6 @@ import { MapVehicleMarker } from '../Marker/MapVehicleMarker';
 
 import modelPic from './mocks/model.png';
 import operatorPic from './mocks/operator.png';
-import vehiclePic from './mocks/vehicle.png';
 import { stations } from './mocks/stations';
 import { featuresTitle, fixture } from './mocks/main';
 
@@ -120,7 +119,7 @@ export function MapVehiclesSidebar({
                     <Close className={cn(styles.MapVehiclesSidebarCloseIcon)} />
                 </button>
                 <div className={cn(styles.MapVehiclesSidebarVehicleImage)}>
-                    <Image src={vehiclePic} width="448" height="225" />
+                    <Image src={`/${type}.png`} width="448" height="225" />
                 </div>
                 <div className={cn(styles.MapVehiclesSidebarVehicleInfoWrapper)}>
                     <div className={cn(styles.MapVehiclesSidebarVehicleInfo)}>
@@ -265,8 +264,8 @@ export function MapVehiclesSidebar({
                                         })}
                                     />
                                 </div>
-                                {afterOpened
-                                    && afterStart.map((station) => (
+                                {afterOpened &&
+                                    afterStart.map((station) => (
                                         <li className={cn(styles.MapVehiclesSidebarStation)}>
                                             <div
                                                 className={cn(styles.MapVehiclesSidebarBullet)}
@@ -349,8 +348,8 @@ export function MapVehiclesSidebar({
                                             })}
                                         />
                                     </div>
-                                    {beforeOpened
-                                        && beforeEnd.map((station) => (
+                                    {beforeOpened &&
+                                        beforeEnd.map((station) => (
                                             <li className={cn(styles.MapVehiclesSidebarStation)}>
                                                 <div
                                                     className={cn(styles.MapVehiclesSidebarBullet)}

diff --git a/...ts/Map/Vehicles/Sidebar/mocks/vehicle.png → public/bus.png b/...ts/Map/Vehicles/Sidebar/mocks/vehicle.png → public/bus.png
diff --git a/public/tram.png b/public/tram.png
diff --git a/public/troll.png b/public/troll.png