diff --git a/src/SFA.DAS.FAA.Web/Frontend/scss/components/maps/_index.scss b/src/SFA.DAS.FAA.Web/Frontend/scss/components/maps/_index.scss index 86999e81..9dc20495 100644 --- a/src/SFA.DAS.FAA.Web/Frontend/scss/components/maps/_index.scss +++ b/src/SFA.DAS.FAA.Web/Frontend/scss/components/maps/_index.scss @@ -122,12 +122,24 @@ &.expanded { background: #000; border-radius: 50%; - height: 15px; - width: 15px; - margin-bottom: 12px; + height: 30px; + width: 30px; + margin-bottom: 5px; + position: relative; svg { display: none; } + &:before { + content: ""; + height: 4px; + width: 18px; + background-color: #fff; + position: absolute; + top: 50%; + margin-top: -2px; + left: 6px; + z-index: 10; + } } } @@ -141,16 +153,22 @@ } .faa-map__marker-tail { - display: block; - position: absolute; - top: 50%; - left: 50%; - width: 100px; - height: 3px; - z-index: -1; - background: #000; - background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,1) 12%, rgba(0,0,0,0) 100%); - + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 100px; + height: 3px; + z-index: -1; + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0) 9%, + rgb(0, 0, 0) 10%, + rgb(0, 0, 0) 87%, + rgba(0, 0, 0, 0) 90%, + rgba(0, 0, 0, 0) 100% + ); } a[href^="http://maps.google.com/maps"], diff --git a/src/SFA.DAS.FAA.Web/package-lock.json b/src/SFA.DAS.FAA.Web/package-lock.json index f513a809..7c776757 100644 --- a/src/SFA.DAS.FAA.Web/package-lock.json +++ b/src/SFA.DAS.FAA.Web/package-lock.json @@ -9,8 +9,8 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "govuk-frontend": "^5.7.1", - "sass": "^1.80.4", + "govuk-frontend": "^5.8.0", + "sass": "^1.83.1", "watch": "^1.0.2" } }, @@ -19,6 +19,7 @@ "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz", "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==", "license": "MIT", + "optional": true, "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", @@ -292,6 +293,7 @@ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "license": "MIT", + "optional": true, "dependencies": { "fill-range": "^7.1.1" }, @@ -319,6 +321,7 @@ "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", "license": "Apache-2.0", + "optional": true, "bin": { "detect-libc": "bin/detect-libc.js" }, @@ -339,6 +342,7 @@ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "license": "MIT", + "optional": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -347,24 +351,26 @@ } }, "node_modules/govuk-frontend": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.7.1.tgz", - "integrity": "sha512-jF1cq5rn57kxZmJRprUZhTQ31zaBBK4b5AyeJaPX3Yhg22lk90Mx/dQLvOk/ycV3wM7e0y+s4IPvb2fFaPlCGg==", + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.8.0.tgz", + "integrity": "sha512-6l3f/YhDUCWjpmSW3CL95Hg8B+ZLzTf2WYo25ZtCs2Lb8UIzxxxFI8LxG7Ey/z04UuPhUunqFhTwSkQyJ69XbQ==", "license": "MIT", "engines": { "node": ">= 4.2.0" } }, "node_modules/immutable": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", - "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==" + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz", + "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==", + "license": "MIT" }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", "license": "MIT", + "optional": true, "engines": { "node": ">=0.10.0" } @@ -374,6 +380,7 @@ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", "license": "MIT", + "optional": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -386,6 +393,7 @@ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "license": "MIT", + "optional": true, "engines": { "node": ">=0.12.0" } @@ -400,6 +408,7 @@ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "license": "MIT", + "optional": true, "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -420,13 +429,15 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", - "license": "MIT" + "license": "MIT", + "optional": true }, "node_modules/picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", "license": "MIT", + "optional": true, "engines": { "node": ">=8.6" }, @@ -448,14 +459,13 @@ } }, "node_modules/sass": { - "version": "1.80.4", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.4.tgz", - "integrity": "sha512-rhMQ2tSF5CsuuspvC94nPM9rToiAFw2h3JTrLlgmNw1MH79v8Cr3DH6KF6o6r+8oofY3iYVPUf66KzC8yuVN1w==", + "version": "1.83.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.1.tgz", + "integrity": "sha512-EVJbDaEs4Rr3F0glJzFSOvtg2/oy2V/YrGFPqPY24UqcLDWcI9ZY5sN+qyO3c/QCZwzgfirvhXvINiJCE/OLcA==", "license": "MIT", "dependencies": { - "@parcel/watcher": "^2.4.1", "chokidar": "^4.0.0", - "immutable": "^4.0.0", + "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { @@ -463,6 +473,9 @@ }, "engines": { "node": ">=14.0.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" } }, "node_modules/source-map-js": { @@ -478,6 +491,7 @@ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "license": "MIT", + "optional": true, "dependencies": { "is-number": "^7.0.0" }, diff --git a/src/SFA.DAS.FAA.Web/package.json b/src/SFA.DAS.FAA.Web/package.json index 9a526cd4..25490215 100644 --- a/src/SFA.DAS.FAA.Web/package.json +++ b/src/SFA.DAS.FAA.Web/package.json @@ -11,8 +11,8 @@ "build": "sass --no-source-map --quiet-deps --style=compressed --load-path=node_modules/govuk-frontend/dist Frontend/scss/:wwwroot/css" }, "dependencies": { - "govuk-frontend": "^5.7.1", - "sass": "^1.80.4", + "govuk-frontend": "^5.8.0", + "sass": "^1.83.1", "watch": "^1.0.2" } } diff --git a/src/SFA.DAS.FAA.Web/wwwroot/js/site.js b/src/SFA.DAS.FAA.Web/wwwroot/js/site.js index a1d25e11..9c8f9a2d 100644 --- a/src/SFA.DAS.FAA.Web/wwwroot/js/site.js +++ b/src/SFA.DAS.FAA.Web/wwwroot/js/site.js @@ -975,6 +975,14 @@ FaaMap.prototype.handlePlusMarkerClick = function ( group, mapRoleDetailsWrap ) { + if (markerElement.content.classList.contains("expanded")) { + group.forEach((role) => { + this.removeMarkersWithTitle(`VAC${role.job.id}`); + }); + markerElement.content.classList.remove("expanded"); + return; + } + markerElement.content.classList.add("expanded"); markerElement.zIndex = 1; @@ -985,6 +993,7 @@ FaaMap.prototype.handlePlusMarkerClick = function ( const y = Math.round(100 * Math.sin(a * (Math.PI / 180))); const Marker = new google.maps.marker.AdvancedMarkerElement({ map: this.map, + title: `VAC${role.job.id}`, position: group[0].position, content: this.markerHtml(x, y, a), }); @@ -996,6 +1005,14 @@ FaaMap.prototype.handlePlusMarkerClick = function ( }); }; +FaaMap.prototype.removeMarkersWithTitle = function (title) { + for (let i = 0; i < this.map.markers.length; i++) { + if (this.map.markers[i].title === title) { + this.map.markers[i].setMap(null); + } + } +}; + FaaMap.prototype.markerHtml = function ( marginLeft = 0, marginTop = 0,