@panoramax/web-viewer 4.0.3-develop-503c9f25 → 4.0.3-develop-d48b09a7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-503c9f25",
+  "version": "4.0.3-develop-d48b09a7",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/layout/Tabs.js

@@ -33,6 +33,9 @@ export default class Tabs extends LitElement {
 			align-items: stretch;
 			overflow-x: auto;
 			touch-action: pan-x;
+			position: sticky;
+			top: 0;
+			background: white;
 		}
 		nav ::slotted(*) {
 			color: var(--grey-dark);

package/src/components/menus/PictureLegend.js

@@ -26,18 +26,16 @@ export default class PictureLegend extends LitElement {
 	/** @private */
 	static styles = [placeholder, panel, hidden, css`
 		:host {
-			overflow-y: auto;
-			overflow-x: hidden;
 			display: flex;
 			flex-direction: column;
 			margin: 0;
 			font-family: var(--font-family);
+			flex-wrap: nowrap;
 		}
 
 		@media screen and (min-width: 576px) {
 			:host {
 				max-height: 70vh;
-				width: 30vw;
 			}
 		}
 
@@ -48,6 +46,7 @@ export default class PictureLegend extends LitElement {
 			align-items: center;
 			margin: 10px 10px 5px 10px;
 			justify-content: space-between;
+			flex: 1;
 		}
 
 		.headline-buttons {
@@ -95,6 +94,7 @@ export default class PictureLegend extends LitElement {
 			display: block;
 			margin-top: 5px;
 			max-width: 100%;
+			flex: 1;
 		}
 		#pic-legend-expand::part(btn) {
 			border-radius: 10px;
@@ -104,9 +104,11 @@ export default class PictureLegend extends LitElement {
 
 		/* Details block */
 		pnx-picture-metadata {
-			margin: 5px 10px 10px;
+			margin: 5px 10px;
 			display: block;
 			box-sizing: border-box;
+			flex: 1;
+			overflow-y: auto;
 		}
 
 		/* Details actions */
@@ -117,6 +119,7 @@ export default class PictureLegend extends LitElement {
 			border-bottom-right-radius: 10px;
 			gap: 5px;
 			flex-wrap: wrap;
+			flex: 1;
 		}
 
 		/* More options menu */

package/src/components/menus/PictureMetadata.js

@@ -15,6 +15,7 @@ import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
 import { faSvg, titles, textarea, hidden } from "../styles";
 import { createWebComp } from "../../utils/widgets";
 import { getGPSPrecision } from "../../utils/picture";
+import { PanoramaxMetaCatalogURL } from "../../utils/services";
 import {
 	getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES,
 	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES
@@ -377,11 +378,21 @@ export default class PictureMetadata extends LitElement {
 			},
 			this._meta?.origInstance && {
 				title: this._parent?._t.pnx.metadata_general_instance,
-				content: html`<strong><a href=${this._meta.origInstance.href+window.location.search} target="_blank">
-					${this._meta.origInstance.instance_name || this._meta.origInstance.href.replace(/^http.?:\/\//, "")}
-				</a></strong>`
+				content: html`<strong>
+					<a href=${this._meta.origInstance.href+window.location.search} target="_blank" style="text-decoration: none">
+						<img
+							src=${PanoramaxMetaCatalogURL()+"/api/instances/"+this._meta.origInstance.instance_name+"/logo"}
+							style="height: 30px; max-width: 150px; vertical-align: middle"
+							alt=""
+						/>
+						<span style="text-decoration: underline">
+							${this._meta.origInstance.instance_name || this._meta.origInstance.href.replace(/^http.?:\/\//, "")}
+						</span>
+					</a>
+				</strong>`
 			}
 		];
+		console.log("instance", this._meta.origInstance);
 
 		return html`<pnx-tabs>
 			${this._toTab( // General

package/src/components/ui/widgets/Legend.js

@@ -37,7 +37,7 @@ export default class Legend extends LitElement {
 		.pnx-panel[part="panel"] {
 			border-radius: 10px;
 			position: relative;
-			max-width: 80vw;
+			max-width: 450px;
 			z-index: 121; /* To appear above mini component */
 			min-width: unset;
 		}

package/src/utils/services.js

@@ -12,6 +12,14 @@ export function PanoramaxPresetsURL() {
 	return "https://presets.panoramax.fr";
 }
 
+/**
+ * Panoramax meta-catalog URL
+ * @returns {string} The metacatalog URL
+ */
+export function PanoramaxMetaCatalogURL() {
+	return "https://explore.panoramax.fr";
+}
+
 /**
  * Temaki icons URL
  * @param {string} [iconName] The icon name to insert in URL