Add autocomplete for location field

elastic-apm-node.js

@@ -1,7 +1,7 @@
 module.exports = {
 	active: process.env.NODE_ENV === 'production',
 	serviceName: process.env.SITE === 'globalping' ? 'globalping-website' : 'jsdelivr-website',
-	serviceVersion: require('./package.json').version,
+	serviceVersion: process.env.RENDER_GIT_COMMIT || require('./package.json').version,
 	logLevel: 'fatal',
 	centralConfig: false,
 	captureExceptions: false,

src/assets/less/common-globalping.less

@@ -406,7 +406,7 @@
 	}
 
 	&_input {
-		> input, > textarea {
+		> input, > textarea, .aa-Input {
 			background: #fff;
 			border: 1.5px solid #e7e7ee;
 			box-shadow: 0 2px 2px rgba(0, 0, 0, .04);
@@ -550,3 +550,82 @@
 		transform: rotate(360deg);
 	}
 }
+
+.aa-InputWrapperPrefix, .aa-InputWrapperSuffix {
+	display: none;
+}
+
+.aa-gp-container {
+	width: 100%;
+}
+
+.aa-Panel {
+	position: absolute;
+	z-index: 1000;
+
+	.fa {
+		margin-right: 4px;
+	}
+
+	.aa-PanelLayout {
+		display: block;
+		width: 400px;
+		background-color: #fff;
+		border-radius: 8px;
+		border: 1.5px solid #e7e7ee;
+		box-shadow: 0 7px 36px rgba(0, 0, 0, .05);
+		padding: 0;
+		margin-top: 4px;
+
+		@media (max-width: 480px) {
+			width: 100%;
+		}
+
+		.aa-gp-info {
+			padding: 8px 12px;
+			background: #f3f5f6;
+			border-radius: 8px 8px 0 0;
+			font-size: 13px;
+
+			code {
+				overflow-wrap: break-word;
+			}
+		}
+
+		.aa-gp-no-results {
+			padding: 12px;
+			color: #17233a;
+		}
+
+		.aa-Source {
+			.aa-SourceHeader {
+				border-top: 1px solid #e7e7ee;
+				padding: 8px 12px 4px;
+				font-size: 12px;
+				color: #17233a;
+				opacity: .7;
+			}
+
+			.aa-List {
+				margin-bottom: 6px;
+				list-style: none;
+				padding: 0;
+
+				.aa-Item {
+					cursor: pointer;
+					padding: 4px 16px;
+
+					&[aria-selected="true"] {
+						background: #f3f5f7;
+					}
+
+					.aa-gp-item-extra, .aa-gp-item-count {
+						font-size: 12px;
+						color: #17233a;
+						opacity: .7;
+					}
+				}
+			}
+		}
+	}
+}

src/assets/less/common.less

@@ -61,7 +61,7 @@ a, .fa {
 }
 
 // Global text input style
-input[type="text"], textarea {
+input[type="text"], input[type="search"], textarea {
 	transition: border 400ms;
 	font-size: 15px;
 	line-height: 22px;
@@ -598,3 +598,7 @@ body.noscroll {
 		}
 	}
 }
+
+.transition-none {
+	transition: none !important;
+}

src/assets/less/components/controlled-input.less

@@ -41,7 +41,7 @@
 		}
 	}
 
-	> input {
+	> input, .aa-Input {
 		border-radius: 8px;
 		height: 40px;
 		padding: 0 16px;

src/assets/less/components/gp-results-controls.less

@@ -19,7 +19,7 @@
 		flex-direction: column;
 		justify-content: flex-end;
 		width: 100%;
-		max-width: 1158px;
+		max-width: 1238px;
 
 		@media (min-width: @screen-sm-min) {
 			flex-direction: row;

src/assets/less/pages/esm.less

@@ -455,6 +455,38 @@
 			width: 100%;
 		}
 	}
+
+	.algolia-autocomplete {
+		.aa-hint {
+			color: #999;
+		}
+
+		.aa-dropdown-menu {
+			width: max-content; // stylelint-disable-line plugin/no-unsupported-browser-features
+			min-width: 200px;
+			background-color: #fff;
+			border: 1px solid rgba(0, 0, 0, .15);
+			border-top: none;
+			text-align: left;
+			font-family: @font-family-base;
+			-webkit-font-smoothing: antialiased;
+
+			.aa-suggestion {
+				cursor: pointer;
+				padding: 3px 20px;
+				font-size: 14px;
+
+				&.aa-cursor {
+					color: @dropdown-link-hover-color;
+					background-color: @c-orange;
+				}
+
+				p {
+					margin: 0;
+				}
+			}
+		}
+	}
 }
 
 .benchmark-iframe {
@@ -466,35 +498,3 @@
 	width: 0;
 	border: none;
 }
-
-.algolia-autocomplete {
-	.aa-hint {
-		color: #999;
-	}
-
-	.aa-dropdown-menu {
-		width: max-content; // stylelint-disable-line plugin/no-unsupported-browser-features
-		min-width: 200px;
-		background-color: #fff;
-		border: 1px solid rgba(0, 0, 0, .15);
-		border-top: none;
-		text-align: left;
-		font-family: @font-family-base;
-		-webkit-font-smoothing: antialiased;
-
-		.aa-suggestion {
-			cursor: pointer;
-			padding: 3px 20px;
-			font-size: 14px;
-
-			&.aa-cursor {
-				color: @dropdown-link-hover-color;
-				background-color: @c-orange;
-			}
-
-			p {
-				margin: 0;
-			}
-		}
-	}
-}

src/assets/less/pages/globalping.less

@@ -159,7 +159,7 @@
 			z-index: 1;
 
 			@media (min-width: @screen-sm-min) {
-				max-width: 1224px;
+				max-width: 1304px;
 				margin: 0 auto;
 				width: calc(100% - 48px);
 				border: 1.5px solid #e7e7ee;
@@ -306,11 +306,11 @@
 							flex-shrink: 1;
 
 							&:nth-child(1) {
-								width: 60%;
+								width: 55%;
 							}
 
 							&:nth-child(2) {
-								width: calc(40% - 8px);
+								width: calc(45% - 8px);
 							}
 						}
 

src/views/components/gp-credits.html

@@ -102,7 +102,7 @@
 				});
 
 				this.observe('rateCreditsData', (rateCreditsData) => {
-					if (rateCreditsData) {
+					if (rateCreditsData && rateCreditsData['x-ratelimit-limit']) {
 						let rateLimitConsumed = Number(rateCreditsData['x-ratelimit-consumed']) || 0;
 						let rateLimitRemaining = Number(rateCreditsData['x-ratelimit-remaining']) || 0;
 						let rateLimitLimit = Number(rateCreditsData['x-ratelimit-limit']) || 0;

src/views/components/gp-results-controls.html

@@ -30,7 +30,7 @@
 
 			<div class="content-wrapper_ctrls_map-switch">
 				<span>Map: </span>
-				<div class="content-wrapper_ctrls_map-switch_switch" on-click="@this.set('showMap', !showMap)">
+				<div class="content-wrapper_ctrls_map-switch_switch" on-click="@this.set('originalShowMap', !showMap),@this.set('showMap', !showMap)">
 					<img width="16" height="16" src="{{@shared.assetsHost}}/img/globalping/map-icon{{#if showMap}}.active{{/if}}.svg">
 				</div>
 			</div>

src/views/components/gp-results-share.html

@@ -130,7 +130,7 @@
 
 					if (params.locations && params.locations.length) {
 						let locationStr = params.locations.reduce((str, loc, idx) => {
-							let locPart = loc.magic.toLowerCase().trim();
+							let locPart = loc.magic.trim();
 
 							if (idx === 0) {
 								return str += locPart;