@panoramax/web-viewer 3.2.3-develop-e277ccb9 → 3.2.3-develop-dbce84df

package/docs/reference/components/core/Viewer.md

@@ -1,8 +1,8 @@
 <a name="Panoramax.components.core.Viewer"></a>
 
-## Panoramax.components.core.Viewer ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+## Panoramax.components.core.Viewer ⇐ [<code>PhotoViewer</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer)
 **Kind**: static class of <code>Panoramax.components.core</code>  
-**Extends**: [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)  
+**Extends**: [<code>PhotoViewer</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer)  
 **Emits**: [<code>select</code>](Basic.md/#Panoramax.components.core.Basic+event_select), [<code>ready</code>](Basic.md/#Panoramax.components.core.Basic+event_ready), [<code>broken</code>](Basic.md/#Panoramax.components.core.Basic+event_broken), [<code>focus-changed</code>](#Panoramax.components.core.Viewer+event_focus-changed)  
 **Element**: pnx-viewer  
 **Slot**: `top-left` The top-left corner  
@@ -17,28 +17,28 @@
 | --- | --- | --- |
 | loader | [<code>Loader</code>](../ui/Loader.md/#Panoramax.components.ui.Loader) | The loader screen |
 | api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager |
-| [map] | [<code>MapMore</code>](../ui/MapMore.md/#Panoramax.components.ui.MapMore) | The MapLibre GL map itself (if map is enabled) |
+| map | [<code>MapMore</code>](../ui/MapMore.md/#Panoramax.components.ui.MapMore) | The MapLibre GL map itself |
 | psv | [<code>Photo</code>](../ui/Photo.md/#Panoramax.components.ui.Photo) | The Photo Sphere Viewer component itself |
 | grid | [<code>CorneredGrid</code>](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) | The grid layout manager |
-| [mini] | [<code>Mini</code>](../layout/Mini.md/#Panoramax.components.layout.Mini) | The reduced/collapsed map/photo component (if map is enabled) |
+| mini | [<code>Mini</code>](../layout/Mini.md/#Panoramax.components.layout.Mini) | The reduced/collapsed map/photo component |
 | popup | [<code>Popup</code>](../ui/Popup.md/#Panoramax.components.ui.Popup) | The popup container |
 | urlHandler | [<code>URLHandler</code>](../../utils/URLHandler.md/#Panoramax.utils.URLHandler) | The URL query parameters manager |
 
 
-* [.Viewer](#Panoramax.components.core.Viewer) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+* [.Viewer](#Panoramax.components.core.Viewer) ⇐ [<code>PhotoViewer</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer)
     * [new Viewer()](#new_Panoramax.components.core.Viewer_new)
     * [.properties](#Panoramax.components.core.Viewer+properties) : <code>Object</code>
     * [.onceReady()](#Panoramax.components.core.Viewer+onceReady) ⇒ <code>Promise</code>
-    * [.oncePSVReady()](#Panoramax.components.core.Viewer+oncePSVReady) ⇒ <code>Promise</code>
     * [.onceMapReady()](#Panoramax.components.core.Viewer+onceMapReady) ⇒ <code>Promise</code>
-    * [.onceFirstPicLoaded()](#Panoramax.components.core.Viewer+onceFirstPicLoaded) ⇒ <code>Promise</code>
-    * [.setPopup(visible, [content])](#Panoramax.components.core.Viewer+setPopup)
     * [.moveCenter()](#Panoramax.components.core.Viewer+moveCenter)
-    * [.moveLeft()](#Panoramax.components.core.Viewer+moveLeft)
-    * [.moveRight()](#Panoramax.components.core.Viewer+moveRight)
-    * [.moveUp()](#Panoramax.components.core.Viewer+moveUp)
-    * [.moveDown()](#Panoramax.components.core.Viewer+moveDown)
     * [.isMapWide()](#Panoramax.components.core.Viewer+isMapWide) ⇒ <code>boolean</code>
+    * [.oncePSVReady()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+oncePSVReady) ⇒ <code>Promise</code>
+    * [.onceFirstPicLoaded()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+onceFirstPicLoaded) ⇒ <code>Promise</code>
+    * [.setPopup(visible, [content])](#Panoramax.components.core.PhotoViewer+setPopup)
+    * [.moveLeft()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveLeft)
+    * [.moveRight()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveRight)
+    * [.moveUp()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveUp)
+    * [.moveDown()](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveDown)
     * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
     * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
     * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
@@ -57,6 +57,8 @@ Viewer is the main component of Panoramax JS library, showing pictures and map.
 
 This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
 
+If you need a viewer without map, checkout [Photo Viewer component](PhotoViewer.md/#Panoramax.components.core.PhotoViewer).
+
 **Example**  
 ```html
 <!-- Basic example -->
@@ -75,7 +77,6 @@ This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.compone
 <pnx-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
   widgets="false"
-  map="false"
 >
   <p slot="top-right">My custom text</p>
 </pnx-viewer>
@@ -92,14 +93,14 @@ This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.compone
 Component properties. All of [Basic properties](Basic.md/#Panoramax.components.core.Basic+properties) are available as well.
 
 **Kind**: instance property of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
-**Mixes**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
-**Overrides**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
+**Mixes**: [<code>properties</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+properties)  
+**Overrides**: [<code>properties</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+properties)  
 **Properties**
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
-| [map] | <code>boolean</code> \| <code>object</code> | <code>true</code> | Should map be used (true/false), or an object with [any map option available in Map or MapMore class](../ui/MapMore.md/#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"` |
+| [map] | <code>object</code> |  | An object with [any map option available in Map or MapMore class](../ui/MapMore.md/#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"` |
 | [psv] | <code>object</code> |  | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"` |
 | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
 | [focus] | <code>string</code> | <code>&quot;pic&quot;</code> | The component showing up as main component (pic, map) |
@@ -118,15 +119,8 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 Waits for Viewer to be completely ready (map & PSV loaded, first picture also if one is wanted)
 
 **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
-**Overrides**: [<code>onceReady</code>](Basic.md/#Panoramax.components.core.Basic+onceReady)  
+**Overrides**: [<code>onceReady</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+onceReady)  
 **Returns**: <code>Promise</code> - When viewer is ready  
-<a name="Panoramax.components.core.Viewer+oncePSVReady"></a>
-
-### viewer.oncePSVReady() ⇒ <code>Promise</code>
-Waiting for Photo Sphere Viewer to be available.
-
-**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
-**Returns**: <code>Promise</code> - When PSV is ready to use  
 <a name="Panoramax.components.core.Viewer+onceMapReady"></a>
 
 ### viewer.onceMapReady() ⇒ <code>Promise</code>
@@ -134,14 +128,37 @@ Waiting for map to be available.
 
 **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
 **Returns**: <code>Promise</code> - When map is ready to use  
-<a name="Panoramax.components.core.Viewer+onceFirstPicLoaded"></a>
+<a name="Panoramax.components.core.Viewer+moveCenter"></a>
+
+### viewer.moveCenter()
+Move the view of main component to its center.
+For map, center view on selected picture.
+For picture, center view on image center.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Overrides**: [<code>moveCenter</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer+moveCenter)  
+<a name="Panoramax.components.core.Viewer+isMapWide"></a>
+
+### viewer.isMapWide() ⇒ <code>boolean</code>
+Is the map shown as main element instead of viewer (wide map mode) ?
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Returns**: <code>boolean</code> - True if map is wider than viewer  
+<a name="Panoramax.components.core.PhotoViewer+oncePSVReady"></a>
+
+### viewer.oncePSVReady() ⇒ <code>Promise</code>
+Waiting for Photo Sphere Viewer to be available.
+
+**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
+**Returns**: <code>Promise</code> - When PSV is ready to use  
+<a name="Panoramax.components.core.PhotoViewer+onceFirstPicLoaded"></a>
 
 ### viewer.onceFirstPicLoaded() ⇒ <code>Promise</code>
 Waits for first picture to display on PSV.
 
 **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
 **Fulfil**: <code>undefined</code> When picture is shown  
-<a name="Panoramax.components.core.Viewer+setPopup"></a>
+<a name="Panoramax.components.core.PhotoViewer+setPopup"></a>
 
 ### viewer.setPopup(visible, [content])
 Change full-page popup visibility and content
@@ -153,49 +170,30 @@ Change full-page popup visibility and content
 | visible | <code>boolean</code> |  | True to make it appear |
 | [content] | <code>string</code> \| <code>Array.&lt;Element&gt;</code> | <code>null</code> | The new popup content |
 
-<a name="Panoramax.components.core.Viewer+moveCenter"></a>
-
-### viewer.moveCenter()
-Move the view of main component to its center.
-For map, center view on selected picture.
-For picture, center view on image center.
-
-**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
-<a name="Panoramax.components.core.Viewer+moveLeft"></a>
+<a name="Panoramax.components.core.PhotoViewer+moveLeft"></a>
 
 ### viewer.moveLeft()
 Moves the view of main component slightly to the left.
 
 **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
-<a name="Panoramax.components.core.Viewer+moveRight"></a>
+<a name="Panoramax.components.core.PhotoViewer+moveRight"></a>
 
 ### viewer.moveRight()
 Moves the view of main component slightly to the right.
 
 **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
-<a name="Panoramax.components.core.Viewer+moveUp"></a>
+<a name="Panoramax.components.core.PhotoViewer+moveUp"></a>
 
 ### viewer.moveUp()
 Moves the view of main component slightly to the top.
 
 **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
-<a name="Panoramax.components.core.Viewer+moveDown"></a>
+<a name="Panoramax.components.core.PhotoViewer+moveDown"></a>
 
 ### viewer.moveDown()
 Moves the view of main component slightly to the bottom.
 
 **Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
-<a name="Panoramax.components.core.Viewer+isMapWide"></a>
-
-### viewer.isMapWide() ⇒ <code>boolean</code>
-Is the map shown as main element instead of viewer (wide map mode) ?
-
-**Kind**: instance method of [<code>Viewer</code>](#Panoramax.components.core.Viewer)  
-**Returns**: <code>boolean</code> - True if map is wider than viewer  
-**Throws**:
-
-- <code>Error</code> If map is not enabled
-
 <a name="Panoramax.components.core.Basic+onceAPIReady"></a>
 
 ### viewer.onceAPIReady() ⇒ <code>Promise</code>

package/docs/reference/components/menus/MapLegend.md

@@ -7,7 +7,7 @@
 <a name="new_Panoramax.components.menus.MapLegend_new"></a>
 
 ### new MapLegend()
-Map legend displays information about map sources and Panoramax.
+Map legend displays information about map sources.
 
 **Example**  
 ```html

package/docs/reference/components/ui/Photo.md

@@ -8,6 +8,7 @@
 * [.Photo](#Panoramax.components.ui.Photo) ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
     * [new Photo(parent, container, [options])](#new_Panoramax.components.ui.Photo_new)
     * [.getPictureMetadata()](#Panoramax.components.ui.Photo+getPictureMetadata) ⇒ <code>object</code>
+    * [.getPictureId()](#Panoramax.components.ui.Photo+getPictureId) ⇒ <code>string</code> \| <code>null</code>
     * [.goToNextPicture()](#Panoramax.components.ui.Photo+goToNextPicture)
     * [.goToPrevPicture()](#Panoramax.components.ui.Photo+goToPrevPicture)
     * [.goToPosition(lat, lon)](#Panoramax.components.ui.Photo+goToPosition) ⇒ <code>Promise</code>
@@ -69,6 +70,13 @@ Access currently shown picture metadata
 
 **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
 **Returns**: <code>object</code> - Picture metadata  
+<a name="Panoramax.components.ui.Photo+getPictureId"></a>
+
+### photo.getPictureId() ⇒ <code>string</code> \| <code>null</code>
+Get current picture ID, or loading picture ID if any.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>string</code> \| <code>null</code> - Picture ID (current or loading), or null if none is selected.  
 <a name="Panoramax.components.ui.Photo+goToNextPicture"></a>
 
 ### photo.goToNextPicture()

package/docs/reference/components/ui/widgets/Legend.md

@@ -13,10 +13,15 @@
 
 ### new Legend()
 Legend widget, handling switch between map and photo components.
+Also displays a default "About Panoramax" message.
 
 **Example**  
 ```html
-<pnx-widget-legend _parent=${viewer} />
+<pnx-widget-legend
+  _parent=${viewer}
+  focus="map"
+  picture="PICTURE-ID-IF-ANY"
+/>
 ```
 <a name="Panoramax.components.ui.widgets.Legend+properties"></a>
 
@@ -29,4 +34,5 @@ Component properties.
 | Name | Type | Description |
 | --- | --- | --- |
 | [focus] | <code>string</code> | The focused main component (map, pic) |
+| [picture] | <code>string</code> | The picture ID |
 

package/docs/reference.md

@@ -8,8 +8,9 @@ Main web components:
 
 - [Basic](./reference/components/core/Basic.md) : base class for other components, embedding shared logic.
 - [CoverageMap](./reference/components/core/CoverageMap.md) : map showing Panoramax data availability.
-- [Editor](./reference/components/core/Editor.md) : photo and map display for editing purposes.
-- [Viewer](./reference/components/core/Viewer.md) : the classic photo and map viewer.
+- [Editor](./reference/components/core/Editor.md) : photo and map display for editing purposes.7
+- [PhotoViewer](./reference/components/core/PhotoViewer.md) : the classic photo-only viewer.
+- [Viewer](./reference/components/core/Viewer.md) : the photo and map viewer.
 
 ## `components.layout`
 

package/docs/tutorials/custom_widgets.md

@@ -6,7 +6,7 @@ We use internally [slots](https://developer.mozilla.org/docs/Web/HTML/Element/sl
 
 !!! note
 
-	This is only available for __Viewer__ component, not for _Coverage Map_ or _Editor_.
+	This is only available for __Viewer__ & __Photo Viewer__ components, not for _Coverage Map_ or _Editor_.
 
 
 ## Add a new widget
@@ -36,17 +36,12 @@ For finer control, you may want to get rid of all existing widgets before adding
 </pnx-viewer>
 ```
 
-Note that this keeps only the _Mini_ map/picture display (in bottom-left corner), if you want to get rid of it as well, you can with `map="false"` attribute:
+Note that this keeps only the _Mini_ map/picture display (in bottom-left corner).
+
+!!! note
+
+	If you don't need map at all, you can also use the [Photo Viewer](../reference/components/core/PhotoViewer.md) component, which is a picture display without any map.
 
-```html
-<pnx-viewer
-  endpoint="https://panoramax.openstreetmap.fr/"
-  widgets="false"
-  map="false"
->
-  <p slot="top-right">My custom text</p>
-</pnx-viewer>
-```
 
 ## Reuse default widgets
 

package/docs/tutorials/migrate_v4.md

@@ -66,6 +66,8 @@ Many stuff was moved around, and have a bit different naming. Main classes shoul
 | `Panoramax.Editor` | `<pnx-editor>` |
 | `Panoramax.StandaloneMap` | `<pnx-coverage-map>` |
 
+A new main component is available, named __Photo Viewer__ (`<pnx-photo-viewer>`) for showing up only picture (without map).
+
 And source code is splitted in more packages:
 
 * `Panoramax.components` : everything you can see graphically

package/mkdocs.yml

@@ -57,6 +57,7 @@ nav:
         - Basic: 'reference/components/core/Basic.md'
         - CoverageMap: 'reference/components/core/CoverageMap.md'
         - Editor: 'reference/components/core/Editor.md'
+        - PhotoViewer: 'reference/components/core/PhotoViewer.md'
         - Viewer: 'reference/components/core/Viewer.md'
       - layout:
         - CorneredGrid: 'reference/components/layout/CorneredGrid.md'

package/package.json

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

package/public/index.html

@@ -18,9 +18,8 @@
     }
     .oneView {
       text-align: center;
-      flex-grow: 1;
-      flex-shrink: 1;
-      min-width: 30%;
+      flex: 1;
+      min-width: 400px;
     }
     iframe {
       width: 100%;
@@ -38,20 +37,26 @@
 
   <div class="allViews">
     <div class="oneView">
-      <h2 id="viewer">Viewer</h2>
-      <p>General-purpose map and picture display.<br /><a href="./viewer.html">Full page</a> | <a href="https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/docs/02_Usage.md#viewer">Docs</a></p>
+      <h2>Viewer</h2>
+      <p>General-purpose map and picture display.<br /><a href="./viewer.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/Viewer/">Docs</a></p>
       <iframe src="./viewer.html?server=meta"></iframe>
     </div>
 
     <div class="oneView">
-      <h2 id="map">Coverage Map</h2>
-      <p>A map-only view, to locate sequences and pictures.<br /><a href="./map.html">Full page</a> | <a href="https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/docs/02_Usage.md#CoverageMap">Docs</a></p>
+      <h2>Photo Viewer</h2>
+      <p>Picture-only display.<br /><a href="./photo.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/PhotoViewer/">Docs</a></p>
+      <iframe src="./photo.html?server=meta"></iframe>
+    </div>
+
+    <div class="oneView">
+      <h2>Coverage Map</h2>
+      <p>A map-only view, to locate sequences and pictures.<br /><a href="./map.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/CoverageMap/">Docs</a></p>
       <iframe src="./map.html"></iframe>
     </div>
 
     <div class="oneView">
-      <h2 id="editor">Editor</h2>
-      <p>A map and picture view, focused around metadata editing.<br /><a href="./editor.html">Full page</a> | <a href="https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/docs/02_Usage.md#editor">Docs</a></p>
+      <h2>Editor</h2>
+      <p>A map and picture view, focused around metadata editing.<br /><a href="./editor.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/Editor/">Docs</a></p>
       <iframe src="./editor.html"></iframe>
     </div>
   </div>

package/public/photo.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Panoramax Photo Viewer</title>
+  <style>
+    #viewer {
+      position: relative;
+      width: 95%;
+      margin: 2.5%;
+      height: 400px;
+    }
+    #viewer.fullpage {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: unset;
+      width: unset;
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+<noscript>
+  You need to enable JavaScript to run this app.
+</noscript>
+
+<pnx-photo-viewer
+  id="viewer"
+  class="fullpage"
+  sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8"
+  picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"
+/>
+
+<script>
+  var servers = {
+    meta: "https://api.panoramax.xyz/api",
+    ign: "https://panoramax.ign.fr/api",
+    osm: "https://panoramax.openstreetmap.fr/api",
+    local: "http://localhost:5000/api",
+    dev: "https://panoramax.codeureusesenliberte.fr/api",
+  };
+  var urlParams = new URLSearchParams(window.location.search);
+  var server = servers[urlParams.get("server") || "meta"];
+
+  window.onload = () => {
+    var viewer = document.getElementById("viewer");
+    viewer.setAttribute("endpoint", server);
+  };
+</script>
+</body>
+</html>

package/src/components/core/PhotoViewer.css

@@ -0,0 +1,65 @@
+/* Maximized components */
+pnx-photo-viewer .pnx-psv {
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+}
+
+/* No PSV loader */
+pnx-photo-viewer .psv-loader {
+	display: none;
+}
+
+/* Cornered grid layout */
+pnx-photo-viewer pnx-cornered-grid::part(corner-top-left),
+pnx-photo-viewer pnx-cornered-grid::part(corner-top),
+pnx-photo-viewer pnx-cornered-grid::part(corner-top-right),
+pnx-photo-viewer pnx-cornered-grid::part(corner-bottom-left),
+pnx-photo-viewer pnx-cornered-grid::part(corner-bottom),
+pnx-photo-viewer pnx-cornered-grid::part(corner-bottom-right) {
+	gap: 10px;
+	padding: 10px;
+}
+
+@media screen and (max-width: 576px) {
+	pnx-photo-viewer pnx-cornered-grid::part(corner-top-right) {
+		flex-direction: column;
+		align-items: flex-end;
+		justify-content: flex-start;
+	}
+}
+
+/* Override legend positioning */
+@media screen and (max-width: 576px) {
+	pnx-photo-viewer pnx-widget-legend {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+
+	pnx-photo-viewer pnx-widget-legend::part(panel) {
+		border-radius: 0;
+		border-top: none;
+		border-left: none;
+		border-right: none;
+		width: unset;
+		max-width: unset;
+	}
+
+	pnx-photo-viewer pnx-widget-player {
+		margin-top: 60px;
+	}
+}
+
+@media screen and (min-width: 576px) {
+	pnx-photo-viewer pnx-widget-legend {
+		position: absolute;
+		left: 10px;
+		top: 60px;
+	}
+
+	pnx-photo-viewer pnx-widget-legend {
+		top: 10px;
+	}
+}