improvements: hotspots icons

scaleflex · Mar 28, 2022 · 7fbd788 · 7fbd788
1 parent 1c20809
commit 7fbd788
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git a/examples/src/hotspots-config.constant.js b/examples/src/hotspots-config.constant.js
@@ -2,14 +2,17 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [
   {
     variant: {
       images: [
-        { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', alt: 'air snorkel' }
+        {
+          src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb',
+          alt: 'air snorkel'
+        }
       ],
       title: 'Air Intake Snorkel',
       description: 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.',
       moreDetailsUrl: 'https://forcegurkha.co.in',
     },
     popupProps: { popupSelector: 'air-intake-popup' },
-    initialDimensions: [ 1170, 662 ],
+    initialDimensions: [1170, 662],
     positions: [
       { imageIndex: 0, xCoord: 527, yCoord: 319 },
       { imageIndex: 1, xCoord: 527, yCoord: 319 },
@@ -57,15 +60,24 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [
   {
     variant: {
       images: [
-        { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent+%281%29.jpg', alt: 'car accessory' },
-        { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent+%282%29.jpg', alt: 'spoiler' },
-        { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent.jpg', alt: 'car accessory' }
+        {
+          src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent+%281%29.jpg',
+          alt: 'car accessory'
+        },
+        {
+          src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent+%282%29.jpg',
+          alt: 'spoiler'
+        },
+        {
+          src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/transparent.jpg',
+          alt: 'car accessory'
+        }
       ],
       description: 'The All New Force Gurkha ensures best-in-class safety for passengers and security for the vehicle with its full metal body structure.',
       moreDetailsTitle: 'Download accessories brochure',
       moreDetailsUrl: 'https://www.forcegurkha.co.in/wp-content/themes/force-motors/assets/pdf/Force-Gurkha-accessories-E-brochure.pdf'
     },
-    popupProps: { popupSelector: 'accessories-popup'},
+    popupProps: { popupSelector: 'accessories-popup' },
     initialDimensions: [ 1170, 662 ],
     positions: [
       { imageIndex: 11, xCoord: 683, yCoord: 151 },
@@ -95,9 +107,18 @@ const GURKHA_SUV_HOTSPOTS_CONFIG = [
   {
     variant: {
       images: [
-        { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/feature-5.png', alt: 'car top'},
-        { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/ALL_AROUND_VISIBILITY_UPDATED.png', alt: 'car inside' },
-        { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/feature-2.png', alt: 'transmission' }
+        {
+          src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/feature-5.png',
+          alt: 'car top'
+        },
+        {
+          src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/ALL_AROUND_VISIBILITY_UPDATED.png',
+          alt: 'car inside'
+        },
+        {
+          src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/feature-2.png',
+          alt: 'transmission'
+        }
       ],
       description:'All four captain seats with ample head room, leg room and shoulder room.Easy ingress and egress from the rear door into the widest gangway in the category that makes space for all your luggage',
       moreDetailsUrl: 'https://www.forcegurkha.co.in/wp-content/themes/force-motors/assets/pdf/Force-Gurkha-accessories-E-brochure.pdf',

diff --git a/examples/src/styles/main.css b/examples/src/styles/main.css
@@ -176,15 +176,6 @@ body {
   font-weight: 700;
 }
 
-.cloudimage-360-carousel-dots {
-  column-gap: 6px;
-}
-
-.cloudimage-360-carousel-dot {
-  width: 6px;
-  height: 6px;
-}
-
 .cloudimage-360-carousel-dot.active-dot {
   background-color: #db5e2e;
 }
@@ -279,7 +270,6 @@ body {
   line-height: 30px;
   font-weight: 400;
   color: #4d5c74;
-  margin-top: 8px;
 }
 
 .gallery-section .gallery-content {

diff --git a/src/static/css/hotspots.css b/src/static/css/hotspots.css
@@ -141,7 +141,7 @@
 
 .cloudimage-360-carousel-dots {
   display: flex;
-  column-gap: 3px;
+  column-gap: 6px;
   justify-content: center;
   flex-wrap: wrap;
   margin: 5px auto;
@@ -151,8 +151,8 @@
 }
 
 .cloudimage-360-carousel-dot {
-  width: 5px;
-  height: 5px;
+  width: 6px;
+  height: 6px;
   background-color: #C9D0DE;
   border-radius: 50%;
   cursor: pointer;