@panoramax/web-viewer 3.2.3-develop-17bc8da1 → 3.2.3-develop-d3aad6f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.3-develop-17bc8da1",
+  "version": "3.2.3-develop-d3aad6f3",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -89,6 +89,7 @@
     "workbox-webpack-plugin": "^6.5.4"
   },
   "dependencies": {
+    "@fontsource/atkinson-hyperlegible-next": "^5.2.2",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",

package/src/components/core/Basic.css

@@ -1,5 +1,5 @@
 /* Colors */
-:root {
+:root, :host {
 	--white: #ffffff;
 	--black: #181818;
 	--black-pale: #1b1a17;
@@ -31,6 +31,7 @@
 	--widget-font: var(--grey-dark);
 	--widget-font-active: var(--white);
 	--widget-font-direct: var(--blue);
+	--font-family: "Atkinson Hyperlegible Next", sans-serif;
 }
 
 .pnx-hidden { display: none !important; }

package/src/components/core/Basic.js

@@ -5,6 +5,7 @@ import { DEFAULT_TILES } from "../../utils/map";
 import { createWebComp } from "../../utils/widgets";
 import { isInIframe, isInternetFast } from "../../utils/utils";
 import PACKAGE_JSON from "../../../package.json";
+import "@fontsource/atkinson-hyperlegible-next";
 import "./Basic.css";
 
 /**

package/src/components/menus/MapFilters.js

@@ -48,7 +48,7 @@ export default class MapFilters extends LitElement {
 			z-index: 131;
 			background-color: rgba(255,255,255,0.8);
 			text-align: center;
-			font-weight: bold;
+			font-weight: 800;
 			position: absolute;
 			top: 0;
 			right: 0;
@@ -80,6 +80,7 @@ export default class MapFilters extends LitElement {
 			color: var(--widget-font);
 			border: 1px solid var(--widget-border-div);
 			border-radius: 20px;
+			font-family: var(--font-family);
 		}
 
 		/* Input shortcuts */
@@ -91,13 +92,14 @@ export default class MapFilters extends LitElement {
 			border: none;
 			height: 20px;
 			line-height: 20px;
-			font-size: 11px;
+			font-size: 0.8em;
 			padding: 0 8px;
 			vertical-align: middle;
 			background-color: var(--grey-pale);
 			color: var(--black);
 			border-radius: 10px;
 			cursor: pointer;
+			font-family: var(--font-family);
 		}
 		.pnx-input-shortcuts button:hover {
 			background-color: #d9dcd9;

package/src/components/menus/MapLegend.js

@@ -17,7 +17,7 @@ export default class MapLegend extends LitElement {
 	/** @private */
 	static styles = css`
 		:host {
-			font-size: 0.8em;
+			font-size: 0.9em;
 		}
 		small {
 			font-size: 1em;

package/src/components/menus/PictureLegend.js

@@ -30,7 +30,7 @@ export default class PictureLegend extends LitElement {
 		}
 
 		.context {
-			font-size: 0.8em;
+			font-size: 0.9em;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;

package/src/components/menus/PlayerOptions.js

@@ -84,7 +84,6 @@ export default class PlayerOptions extends LitElement {
 				id="pnx-player-contrast"
 				title="${this._parent?._t.pnx.contrast}"
 				kind="outline"
-				style="width: 26px;"
 				@click=${this._onContrastClick}
 			>
 				${fa(faLightbulb)}

package/src/components/menus/Share.js

@@ -78,10 +78,13 @@ export default class ShareMenu extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._onUrlChange();
-		this._parent?.addEventListener("ready", this._onUrlChange.bind(this), { once: true });
-		this._parent?.urlHandler?.addEventListener("url-changed", this._onUrlChange.bind(this));
-		this._parent?.oncePSVReady().then(() => this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this)));
+		this._parent?.onceReady().then(() => {
+			this._onUrlChange();
+			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
+			
+			this._parent.onceFirstPicLoaded().then(this._onPictureLoad.bind(this));
+			this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this));
+		});
 	}
 
 	/** @private */

package/src/components/styles.js

@@ -13,7 +13,7 @@ export const panel = css`
 		color: var(--widget-font);
 		min-width: 250px;
 		box-sizing: border-box;
-		font-family: sans-serif;
+		font-family: var(--font-family);
 	}
 
 	.pnx-panel.pnx-hidden {
@@ -58,6 +58,7 @@ export const textarea = css`
 		padding: 5px;
 		width: 100%;
 		box-sizing: border-box;
+		font-family: var(--font-family);
 	}
 `;
 
@@ -70,6 +71,7 @@ export const select = css`
 		border-radius: 20px;
 		font-size: 16px;
 		padding: 2px 10px;
+		font-family: var(--font-family);
 	}
 
 	select.pnx-100w {
@@ -87,6 +89,7 @@ export const input = css`
 		border-radius: 20px;
 		font-size: 16px;
 		padding: 2px 10px;
+		font-family: var(--font-family);
 	}
 
 	input.pnx-100w {
@@ -98,14 +101,14 @@ export const input = css`
 // Buttons
 export const btn = css`
 	:host {
-		display: inline-block;
+		display: inline-flex;
 	}
 	
 	/* Common properties */
 	.pnx-btn {
 		white-space: nowrap;
-		font-size: 0.9em;
-		font-family: sans-serif;
+		font-size: 1em;
+		font-family: var(--font-family);
 		flex-grow: 1;
 		flex-shrink: 1;
 		text-align: center;
@@ -155,7 +158,7 @@ export const btn = css`
 		height: 40px;
 		line-height: 40px;
 		font-size: 16px;
-		font-weight: 400;
+		font-weight: 500;
 		min-width: 40px;
 		padding: 0 10px;
 		gap: 8px;
@@ -232,6 +235,10 @@ export const btn = css`
 
 // Titles
 export const titles = css`
+	h1, h2, h3, h4, h5, h6 {
+		font-family: var(--font-family);
+	}
+	
 	h3 {
 		font-size: 1.1em;
 		line-height: 1.1em;

package/src/components/ui/ButtonGroup.css

@@ -1,3 +1,7 @@
+pnx-button-group > pnx-button {
+	display: inline-block;
+}
+
 /* Togglable in group */
 pnx-button-group > pnx-togglable-group > pnx-button {
 	width: 100%;

package/src/components/ui/Loader.js

@@ -28,7 +28,7 @@ export default class Loader extends LitElement {
 			background-size: cover;
 			background-position: center; 
 			z-index: 200;
-			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+			font-family: var(--font-family);
 			font-weight: 550;
 			color: var(--black);
 			font-size: 1.4em;

package/src/components/ui/QualityScore.js

@@ -32,14 +32,14 @@ export default class QualityScore extends LitElement {
 			font-size: 18px;
 			width: 25px;
 			height: 30px;
-			line-height: 26px;
+			line-height: 28px;
 			display: inline-block;
 			border: 1px solid white;
 			text-align: center;
 			background-color: gray;
 			color: rgba(255,255,255,0.9);
-			font-family: sans-serif;
-			font-weight: bold;
+			font-family: var(--font-family);
+			font-weight: 800;
 			vertical-align: middle;
 		}
 
@@ -58,7 +58,7 @@ export default class QualityScore extends LitElement {
 		.selected, input[type="checkbox"]:checked + label {
 			width: 30px;
 			height: 42px;
-			line-height: 37px;
+			line-height: 41px;
 			border-radius: 8px;
 			font-size: 27px;
 			color: white;
@@ -71,7 +71,7 @@ export default class QualityScore extends LitElement {
 		label:hover {
 			width: 28px;
 			height: 35px;
-			line-height: 30px;
+			line-height: 34px;
 			border-radius: 3px;
 			font-size: 22px;
 			color: white;

package/src/components/ui/SearchBar.js

@@ -50,6 +50,7 @@ export default class SearchBar extends LitElement {
 			width: fit-content;
 			max-width: 100%;
 			box-sizing: border-box;
+			font-family: var(--font-family);
 		}
 		.sb.sb-xxl {
 			height: 40px;
@@ -113,9 +114,9 @@ export default class SearchBar extends LitElement {
 			background-color: var(--widget-bg);
 			color: var(--widget-font);
 			z-index: 130;
-			font-size: 1em;
+			font-size: 1.05em;
   			line-height: normal;
-			font-family: sans;
+			font-family: var(--font-family);
 		}
 		.sb.sb-xxl .sb-results {
 			top: 45px;