@panoramax/web-viewer 3.2.1 → 3.2.2-develop-69587b96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.1",
+  "version": "3.2.2-develop-69587b96",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -252,4 +252,4 @@
       ]
     ]
   }
-}
+}

package/src/Editor.js

@@ -253,6 +253,7 @@ export default class Editor extends CoreView {
 
 		const imgBgStreets = document.createElement("img");
 		imgBgStreets.src = BackgroundStreets;
+		imgBgStreets.alt = "";
 
 		labelBgStreets.appendChild(imgBgStreets);
 		labelBgStreets.appendChild(document.createTextNode(this._t.gvs.map_background_streets));
@@ -272,6 +273,7 @@ export default class Editor extends CoreView {
 
 		const imgBgAerial = document.createElement("img");
 		imgBgAerial.src = BackgroundAerial;
+		imgBgAerial.alt = "";
 
 		labelBgAerial.appendChild(imgBgAerial);
 		labelBgAerial.appendChild(document.createTextNode(this._t.gvs.map_background_aerial));

package/src/Viewer.js

@@ -536,7 +536,6 @@ class Viewer extends CoreView {
 	setPopup(visible, content = null) {
 		if(!visible) {
 			this.popupContainer.classList.add("gvs-hidden");
-			this.setFocus("pic");
 			this.psv.startKeyboardControl();
 		}
 		else if(content) {

package/src/components/Loader.js

@@ -18,6 +18,7 @@ export default class Loader {
 		// Logo
 		const logo = document.createElement("img");
 		logo.src = LoaderImg;
+		logo.alt = "";
 		logo.title = this._parent._t.map.loading;
 		logo.classList.add("gvs-loader-img");
 		this.container.appendChild(logo);

package/src/components/Map.js

@@ -57,6 +57,8 @@ export default class Map extends maplibregl.Map {
 			attributionControl: false,
 			dragRotate: false,
 			pitchWithRotate: false,
+			touchZoomRotate: true,
+			touchPitch: false,
 			preserveDrawingBuffer: !parent.isWidthSmall(),
 			transformRequest: parent._api._getMapRequestTransform(),
 			locale: parent._t.maplibre,
@@ -68,6 +70,11 @@ export default class Map extends maplibregl.Map {
 		this._options = options;
 		this.getContainer().classList.add("gvs-map");
 
+		// Disable touch rotate
+		if(options.touchZoomRotate === undefined) {
+			this?.touchZoomRotate?.disableRotation();
+		}
+
 		// Handle raster source
 		if(this._options.raster) {
 			this._options.background = this._options.background || "streets";
@@ -786,6 +793,7 @@ export default class Map extends maplibregl.Map {
 	_getPictureMarker(selected = true) {
 		const img = document.createElement("img");
 		img.src = selected ? MarkerSelectedSVG : MarkerBaseSVG;
+		img.alt = "";
 		return new maplibregl.Marker({
 			element: img
 		});

package/src/components/Photo.js

@@ -678,7 +678,7 @@ export default class Photo extends PSViewer {
 		else {
 			console.error(e);
 			this.overlay.show({
-				image: `<img style="width: 200px" src="${LogoDead}" />`,
+				image: `<img style="width: 200px" src="${LogoDead}" alt="" />`,
 				title: this._parent._t.gvs.error, 
 				text: label + "<br />" + this._parent._t.gvs.error_click,
 				dissmisable,

package/src/translations/da.json

@@ -88,7 +88,7 @@
         "filter_user": "Bruger",
         "filter_user_mypics": "Mine billeder",
         "filter_picture": "Billedtype",
-        "filter_zoom_in": "Zoom ind for at gøre filtre synlige",
+        "filter_zoom_in": "Zoom ind for at se dette filter",
         "picture_flat": "Klassisk",
         "picture_360": "360°",
         "filter_qualityscore_help": "Klik for at aktivere eller deaktivere",
@@ -98,7 +98,7 @@
         "map_theme": "Korttema",
         "error_pic": "Det ønskede billede blev ikke fundet",
         "error_api_compatibility": "Billedserveren er ikke kompatibel med denne version af fremviseren",
-        "filter_qualityscore": "Kvalitetsvurdering",
+        "filter_qualityscore": "Kvalitetsscore",
         "error_josm": "JOSM svarer ikke, kører den, og er fjernstyring aktiveret?",
         "metadata_general_seqid_link": "Gå til JSON-beskrivelse af sekvensen",
         "map_theme_default": "Klassisk",
@@ -107,7 +107,7 @@
         "map_theme_age_3": "< 1 år",
         "map_theme_age_4": "< 1 måned",
         "map_theme_type": "Kameratype",
-        "map_theme_score": "Kvalitetsvurdering",
+        "map_theme_score": "Kvalitetsscore",
         "contrast": "Aktivér højere billedkontrast",
         "metadata_general_picid": "Billed-identifikator",
         "metadata_general_seqid": "Sekvens-identifikator",
@@ -125,18 +125,58 @@
         "metadata_location_latitude": "Breddegrad",
         "metadata_location_orientation": "Optageretning",
         "metadata_location_precision": "Præcision i positionering",
-        "metadata_quality": "Kvalitetsvurdering",
-        "metadata_quality_score": "Global vurdering",
-        "metadata_quality_gps_score": "Positioneringsvurdering",
-        "metadata_quality_help": "Få mere at vide om kvalitetsvurdering",
+        "metadata_quality": "Kvalitetsscore",
+        "metadata_quality_score": "Global score",
+        "metadata_quality_gps_score": "Positioneringsscore",
+        "metadata_quality_help": "Få mere at vide om kvalitetsscore",
         "map_theme_age": "Optagelsesdato",
         "metadata_location": "Placering",
         "metadata": "Metadata for billede",
-        "metadata_location_longitude": "Længdegrad"
+        "metadata_location_longitude": "Længdegrad",
+        "metadata_quality_resolution_score": "Opløsningsscore",
+        "metadata_quality_missing": "ingen værdi indstillet i billedet",
+        "metadata_exif": "EXIF / XMP",
+        "metadata_exif_name": "Tag",
+        "metadata_exif_value": "Værdi",
+        "report": "Indberet billede",
+        "report_auth": "Denne indberetning vil blive sendt via din konto \"{a}\"",
+        "report_nature_label": "Problemets karakter",
+        "report_nature": {
+            "": "Vælg problemets art…",
+            "blur_missing": "En persons ansigt eller bils nummerplade er synlig",
+            "blur_excess": "Et objekt, der ikke har brug for sløring, sløres",
+            "inappropriate": "Billedet er upassende (ikke relevant, nøgenhed…)",
+            "privacy": "En privat sti eller ejendom er synlig",
+            "picture_low_quality": "Billedet er af meget dårlig kvalitet",
+            "mislocated": "Billedet er dårligt placeret på kortet",
+            "copyright": "Billedet krænker ophavsretten",
+            "other": "Enhver anden form for problem"
+        },
+        "report_whole_sequence": "Det gælder hele sekvensen",
+        "report_details": "Yderligere detaljer",
+        "report_details_placeholder": "Hvis du vil, kan du tilføje detaljer om problemet, og hvad det drejer sig om",
+        "report_email": "Din e-mail",
+        "report_email_placeholder": "Valgfri",
+        "report_submit": "Indsend",
+        "report_wait": "Sender indberetning …",
+        "report_success": "Indberetningen er blevet sendt. Den vil blive gennemgået så hurtigt som muligt.",
+        "report_failure": "Der opstod en fejl under oprettelse af indberetning: {e}. Prøv venligst igen senere.",
+        "qualityscore_title": "Om kvalitetsscoren",
+        "qualityscore_doc_2": "Bedømmelsen vises for brugerne som en A/B/C/D/E-score (A er den bedste, E den dårligste) og vises grafisk via denne skala:",
+        "qualityscore_doc_3": "Den beregnes ud fra GPS-præcision og billedopløsning. Et professionelt system vil have en A-rating, et 360° actionkamera vil have en B-rating, og en smartphone vil have en C/D/E-rating.",
+        "qualityscore_doc_link": "Yderligere oplysninger om beregningen af kvalitetsscore findes i vores dokumentation.",
+        "qualityscore_doc_1": "Panoramax tilbyder en kvalitetsscore for hvert billede. Det giver mulighed for nem kortfiltrering og overskuelig visning af tilgængelige billeder af høj kvalitet.",
+        "minimize_short": "Skjul"
     },
     "psv": {
         "loadError": "Panoramaet kan ikke indlæses",
         "twoFingers": "Brug to fingre til at navigere",
         "ctrlZoom": "Brug ctrl + scroll til at zoome ind på billedet"
+    },
+    "map": {
+        "loading": "Indlæser…",
+        "thumbnail": "Miniature af billedet, der holdes",
+        "not_public": "Ikke offentligt synlig",
+        "slow_loading": "Kortet indlæses langsomt og kan virke defekt"
     }
 }

package/src/translations/de.json

@@ -118,9 +118,9 @@
         "map_theme_age_4": "< 1 Monat",
         "error_subtitle": "Bitte versuchen sie es später erneut, oder schauen sie in die Web-Browser-Konsole für mehr Details.",
         "moveLeft": "Nach links",
-        "share_rss_title": "RSS Feed neuer Sequenzen auf der aktuell sichtbaren Karte",
-        "error_webgl": "WebGL wird von diesem Browser nicht unterstützt",
-        "metadata_general_license_link": "Zur vollen Lizenzbeschreibung gehen",
+        "share_rss_title": "RSS Feed neuer Sequenzen auf dem aktuell sichtbaren Kartenbereich",
+        "error_webgl": "WebGL wird von ihrem Browser nicht unterstützt",
+        "metadata_general_license_link": "Volle Lizenzbeschreibung ansehen",
         "share_embed_docs": "Mehr über die Einbettungs-Konfiguration lesen",
         "report_nature": {
             "": "Art des Problems auswählen…",
@@ -160,7 +160,12 @@
         "metadata_quality_help": "Erfahre mehr über den Qualitätswert",
         "metadata_quality_resolution_score": "Auflösungswertung",
         "metadata_quality_gps_score": "Positionswertung",
-        "metadata_quality_score": "Gesamtwertung"
+        "metadata_quality_score": "Gesamtwertung",
+        "qualityscore_title": "Über den Qualitätsfaktor",
+        "qualityscore_doc_link": "Weitere Informationen zur Berechnung des Qualitätsfaktors findest du in unserer Dokumentation.",
+        "qualityscore_doc_1": "Panoramax bietet einen Qualitätsfaktor für jedes Bild. Es ermöglicht eine einfache Kartenfilterung und eine umfassende Anzeige der Verfügbarkeit hochwertiger Bilder.",
+        "qualityscore_doc_2": "Die Note wird den Benutzern als A/B/C/D/E-Bewertung angezeigt (A ist die beste, E die schlechteste) und anhand dieser Skala grafisch dargestellt:",
+        "qualityscore_doc_3": "Die Berechnung erfolgt auf der Grundlage der GPS-Genauigkeit und der Bildauflösung. Ein professionelles System wird mit A bewertet, eine 360-Grad-Action-Kamera mit B und ein Smartphone mit C/D/E."
     },
     "psv": {
         "twoFingers": "Nutzen sie zwei Finger zum navigieren",

package/src/translations/en.json

@@ -22,6 +22,7 @@
         "show_psv": "Show the picture viewer",
         "show_map": "Show the map",
         "minimize": "Hide this widget, you can show it again using button in bottom left corner",
+        "minimize_short": "Hide",
         "options": "Options",
         "filters": "Filters",
         "layers": "Layers",
@@ -98,11 +99,16 @@
         "filter_user": "User",
         "filter_user_mypics": "My pictures",
         "filter_picture": "Picture type",
-        "filter_zoom_in": "Zoom-in for filters to be visible",
+        "filter_zoom_in": "Zoom-in to see this filter",
         "picture_flat": "Classic",
         "picture_360": "360°",
         "filter_qualityscore": "Quality score",
         "filter_qualityscore_help": "Click to enable or disable",
+        "qualityscore_title": "About the quality score",
+        "qualityscore_doc_1": "Panoramax offers a Quality Score for each picture. It allows easy map filtering and comprehensive display of high-quality pictures availability.",
+        "qualityscore_doc_2": "The grade is shown to users as a A/B/C/D/E score (A is the best, E the worst), and shown graphically through this scale:",
+        "qualityscore_doc_3": "It is computed based on GPS precision and picture resolution. A professional system will have an A-rating, a 360° action camera will have a B-rating, and a smartphone will be C/D/E-rated.",
+        "qualityscore_doc_link": "More details about the Quality Score computation is available in our documentation.",
         "map_background": "Map background",
         "map_background_aerial": "Aerial",
         "map_background_streets": "Streets",

package/src/translations/fr.json

@@ -22,6 +22,7 @@
         "show_psv": "Afficher la visionneuse de photos",
         "show_map": "Afficher la carte",
         "minimize": "Masquer ce widget, vous pouvez l'afficher de nouveau grâce au bouton dans le coin en bas à gauche",
+        "minimize_short": "Masquer",
         "options": "Options",
         "filters": "Filtres",
         "layers": "Calques",
@@ -102,7 +103,12 @@
         "picture_360": "360°",
         "filter_qualityscore": "Score de qualité",
         "filter_qualityscore_help": "Cliquez pour activer ou désactiver",
-        "filter_zoom_in": "Zoomez plus pour voir les filtres",
+        "qualityscore_title": "À propos du score qualité",
+        "qualityscore_doc_1": "Panoramax propose un Score de Qualité pour chacune de ses photos. Cela facilite le filtre et la recherche de photos de bonne qualité sur la carte.",
+        "qualityscore_doc_2": "Le score est affiché sous la forme d'une lettre A/B/C/D/E (A étant le meilleur, E le moins bon), et visualisable grâce à cette échelle :",
+        "qualityscore_doc_3": "Il est calculé en fonction de la précision du GPS ainsi que la résolution de la photo. Un matériel professionnel aura une note de A, une caméra sportive 360° une note de B, et un smartphone une note de C à E.",
+        "qualityscore_doc_link": "Plus d'infos sur le calcul du Score Qualité dans notre documentation.",
+        "filter_zoom_in": "Zoomez plus pour voir ce filtre",
         "map_background": "Fond de carte",
         "map_background_aerial": "Satellite",
         "map_background_streets": "Plan",

package/src/translations/it.json

@@ -50,16 +50,16 @@
             "☕ Iniezione di caffeina",
             "😀 Sorridete, siete stati mappati!",
             "🐈 Condivisione delle foto di gatti",
-            "😴 Riduzione della procastinazione",
+            "😴 Riduzione della procrastinazione",
             "🫖 Preparazione del tè",
             "🐧 Apertura del codice sorgente",
             "🚇 Indicizzazione delle stazioni della metro",
             "🧹 Pulizia dei metadata",
             "🚒 Invio delle foto delle stazioni dei pompieri",
             "🚲 Aggiornamento delle strade verdi",
-            null,
+            "🚉 Passeggiata sulle banchine della stazione",
             "🛰️ Ricerca dei satelliti",
-            null,
+            "👥 Scrittura delle persone",
             "🐟 Ricerca dei negozi di patatine fritte",
             "🧑‍💻 Debug dell’interfaccia",
             "📈 Incremento delle statistiche"
@@ -68,7 +68,7 @@
         "error_pic": "La foto richiesta non è stata trovata",
         "error_nopic": "Nessuna foto disponibile alla posizione richiesta",
         "error_api": "Il server delle foto non è disponibile",
-        "error_webgl": "Questo browser non supporta WebGL",
+        "error_webgl": "Il tuo browser non supporta WebGL",
         "error_josm": "JOSM non risponde, è in esecuzione con il controllo remoto abilitato?",
         "error_api_compatibility": "Il server delle foto non è compatibile con questa versione del visualizzatore",
         "filter_date": "Data",
@@ -139,10 +139,10 @@
         "map_theme_age_1": "> 2 anni",
         "map_theme_type": "Tipo di fotocamera",
         "minimize": "Nascondi il widget, puoi mostrarlo di nuovo usando il pulsante nell’angolo in basso a sinistra",
-        "metadata_general_license_link": "Vai alla pagina della descrizione completa della licenza",
+        "metadata_general_license_link": "Vedi la descrizione completa della licenza",
         "share_rss": "Feed RSS",
         "show_psv": "Mostra il visualizzatore delle foto",
-        "share_rss_title": "Feed RSS delle nuove sequenze nell’area visibile della mappa",
+        "share_rss_title": "Feed RSS delle nuove sequenze nell’attuale area visibile della mappa",
         "sequence_prev": "Foto precedente della sequenza",
         "sequence_more": "Altre opzioni di riproduzione",
         "josm_live": "Abilita la sincronizzazione automatica di JOSM al caricamento delle foto",

package/src/translations/nl.json

@@ -14,7 +14,8 @@
             "🔍 EXIF metadata analyseren",
             "🏘️ 3D rendering",
             "📷 360° afbeelden initialiseren",
-            "🟠 Kleur balancering"
+            "🟠 Kleur balancering",
+            "💯 Bereken kwaliteits-score ©"
         ],
         "share_embed_docs": "Lees meer over embedded instellingen",
         "sequence_pause": "Pauzeer sequentie",
@@ -54,12 +55,24 @@
         "expand_info": "De widget op de volledige pagina weergeven",
         "minimize": "Verberg deze widget, je kan hem terug tonen met de knop linksonder",
         "loading_labels_fun": [
-            "🦌 Detectie van verkeersbord overlopende herten",
+            "🦌 Detectie verkeersborden overstekende herten",
             "🚘 Panoramax auto zoeken ©",
             "☕ Cafeïne-injectie",
-            null,
-            "🐈 Foto's delen van katten"
-        ]
+            "😀 Gelukt, je kaart is gekaart!",
+            "🐈 Foto's delen van katten",
+            "😴 Uitstelgedrag verminderen",
+            "🫖 Thee zetten",
+            "🐧 Broncode openen",
+            "🚇 Indexering metrostations",
+            "🧹 Metadata opschonen",
+            "🚒 Foto's van brandweerkazernes versturen",
+            "🚲 Fiets- en wandelpaden bijwerken",
+            "🚉 Perron doorgang",
+            "🛰️ Satellieten zoeken",
+            "👥 Personas opslaan"
+        ],
+        "share_rss_title": "RSS-feed van nieuwe reeksen in het nu zichtbare kaartgebied",
+        "josm_live": "Schakel JOSM automatische synchronisatie in bij het laden van afbeeldingen"
     },
     "psv": {
         "twoFingers": "Gebruik twee vingers om te navigeren",

package/src/translations/zh_Hant.json

@@ -152,7 +152,7 @@
         "map_theme_score": "品質分數",
         "metadata_camera_resolution": "解析度",
         "metadata_quality": "品質分數",
-        "metadata_quality_help": "了解有關品質分數的更多資訊",
+        "metadata_quality_help": "深入了解品質分數",
         "metadata_quality_gps_score": "定位分數",
         "metadata_quality_resolution_score": "解析度分數",
         "metadata_quality_missing": "相片未包含資訊",
@@ -160,7 +160,12 @@
         "metadata_quality_score": "整體分數",
         "filter_user_mypics": "我的相片",
         "filter_date_1month": "1 個月",
-        "filter_date_1year": "1 年"
+        "filter_date_1year": "1 年",
+        "qualityscore_doc_2": "分數以 A/B/C/D/E 等級的形式顯示 (A 最佳、E 最差) ，並透過這個量尺視覺化顯示:",
+        "qualityscore_doc_link": "關於品質分數的計算方式，請參閱我們的文件。",
+        "qualityscore_title": "關於品質分數",
+        "qualityscore_doc_1": "Panoramax 為每張相片提供品質分數，這能幫助我們輕鬆地在地圖上篩選和顯示高品質相片。",
+        "qualityscore_doc_3": "它根據 GPS 精確度和相片解析度計算得出，專業設備的等級為 A、360° 運動相機的等級為 B、智慧型手機的等級為 C/D/E。"
     },
     "map": {
         "loading": "正在載入…",

package/src/utils/Utils.js

@@ -31,8 +31,8 @@ export const QUALITYSCORE_VALUES = [
 	{ color: "#f6a020", label: "E" },
 ];
 
-export const QUALITYSCORE_RES_FLAT_VALUES = [1, 15, 2, 38, 3, 60, 4];				// Grade, < Px/FOV value
-export const QUALITYSCORE_RES_360_VALUES = [2, 15, 3, 20, 4, 38, 5];				// Grade, < Px/FOV value
+export const QUALITYSCORE_RES_FLAT_VALUES = [1, 10, 2, 15, 3, 30, 4];				// Grade, < Px/FOV value
+export const QUALITYSCORE_RES_360_VALUES = [3, 15, 4, 30, 5];						// Grade, < Px/FOV value
 export const QUALITYSCORE_GPS_VALUES = [5, 1.01, 4, 2.01, 3, 5.01, 2, 10.01, 1];	// Grade, < Meters value
 export const QUALITYSCORE_POND_RES = 4/5;
 export const QUALITYSCORE_POND_GPS = 1/5;
@@ -117,6 +117,7 @@ function svgToPSVLink(svg, fillColor) {
 	catch(e) {
 		const img = document.createElement("img");
 		img.src = svg;
+		img.alt = "";
 		return img;
 	}
 }

package/src/utils/Widgets.js

@@ -56,6 +56,12 @@ export function createExpandableButton(id, icon, label, container, classes = [])
 	btn.appendChild(fa(icon));
 	if(!container._viewer.isWidthSmall()) {
 		btn.appendChild(document.createTextNode(label));
+		if(classes.includes("gvs-filter-unset-btn")) {
+			const resetIcon = fa(faXmark, { classes: ["gvs-filter-unset-btn"]});
+			resetIcon.style.display = "none";
+			btn.appendChild(resetIcon);
+			classes = classes.filter(v => v !== "gvs-filter-unset-btn");
+		}
 		btn.appendChild(fa(faChevronDown));
 	}
 	else {
@@ -64,15 +70,25 @@ export function createExpandableButton(id, icon, label, container, classes = [])
 	btn.classList.add("gvs-btn", "gvs-widget-bg", "gvs-btn-expandable", ...classes);
 	btn.setActive = val => {
 		let span = btn.querySelector(".gvs-filters-active");
+		const resetIcon = btn.querySelector(".gvs-filter-unset-btn");
+		const downIcon = btn.querySelector(".fa-chevron-down");
 		if(val && !span) {
 			span = document.createElement("span");
 			span.classList.add("gvs-filters-active");
 			const svg = btn.querySelector("svg");
 			if(svg.nextSibling) { btn.insertBefore(span, svg.nextSibling); }
 			else { btn.appendChild(span); }
+			if(resetIcon) {
+				resetIcon.style.display = null;
+				downIcon.style.display = "none";
+			}
 		}
 		else if(!val && span) {
 			span.remove();
+			if(resetIcon) {
+				resetIcon.style.display = "none";
+				downIcon.style.display = null;
+			}
 		}
 	};
 	return btn;
@@ -112,6 +128,7 @@ export function createSearchBar(
 	input.type = "text";
 	input.placeholder = placeholder;
 	input.id = `${id}-input`;
+	input.setAttribute("autocomplete", "off");
 	bar.appendChild(input);
 	const extendInput = () => {
 		bar.classList.remove("gvs-search-bar-reduced");

package/src/viewer/Widgets.css

@@ -103,6 +103,12 @@
 
 .gvs-mini .gvs-corner .gvs-widget-bg { box-shadow: none; }
 .gvs-widget-bg a { color: var(--widget-font-btn-direct); }
+.gvs-widget-bg button.gvs-btn-link {
+	color: var(--widget-font-btn-direct);
+	background: none;
+	border: none;
+	cursor: pointer;
+}
 
 .gvs-hidden,
 .gvs-focus-map .gvs-only-psv,
@@ -663,6 +669,7 @@ a.gvs-btn { text-decoration: none; }
 #gvs-filter-panel {
 	width: 350px;
 	max-width: 350px;
+	padding: 0;
 }
 #gvs-filter-panel .gvs-filter-active {
 	background-color: var(--widget-bg-active);
@@ -680,11 +687,32 @@ a.gvs-btn { text-decoration: none; }
 	color: var(--widget-font-active);
 	background: none;
 }
-#gvs-filter-zoomin {
+.gvs-filter-block {
+	position: relative;
+	padding: 10px 15px;
+	border-bottom: 2px solid var(--widget-border-div);
+}
+.gvs-filter-block:first-child {
+	padding-top: 15px;
+}
+.gvs-filter-block:last-child {
+	border-bottom: none;
+	padding-bottom: 15px;
+}
+.gvs-filter-zoomin {
+	z-index: 10;
+	background-color: rgba(255,255,255,0.8);
 	text-align: center;
 	font-weight: bold;
-	margin-bottom: 15px;
-	color: var(--orange);
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 25px;
 }
 
 #gvs-filter-qualityscore {