From 1b6b4952f53c90e7e071fa5a71cea48d74e8d2e4 Mon Sep 17 00:00:00 2001
From: Guilhem Moulin <guilhem@fripost.org>
Date: Sat, 20 Jan 2024 21:15:18 +0100
Subject: Show feature properties on popover via singleclick on map.

We use bootstrap's Popover for that:
https://getbootstrap.com/docs/5.3/components/popovers/#options
---
 style.css | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 96e8bca..aff1fc8 100644
--- a/style.css
+++ b/style.css
@@ -303,3 +303,76 @@ html, body {
 #layer-selection-panel .accordion-item .form-check > .form-check-label {
   display: inline;
 }
+
+.popover {
+  --bs-popover-header-padding-x: .5rem;
+  --bs-popover-header-padding-y: .5rem;
+  --bs-popover-body-padding-x: .25rem;
+  --bs-popover-body-padding-y: .25rem;
+  --bs-popover-header-bg: var(--bs-popover-bg);
+  --bs-popover-zindex: 1000;
+  --bs-popover-max-width: 450px;
+  width: var(--bs-popover-max-width);
+}
+.popover-body {
+  max-height: 1024px;
+  overflow: auto auto;
+}
+.popover-body h6, .popover-body h5 {
+  margin-bottom: var(--bs-popover-body-padding-y);
+  margin-left: calc(var(--bs-popover-header-padding-x) - var(--bs-popover-body-padding-x));
+  margin-right: calc(var(--bs-popover-header-padding-x) - var(--bs-popover-body-padding-x));
+}
+.popover-body .table {
+  --bs-table-bg: none;
+  --bs-table-hover-bg: rgba(0, 0, 0, 0.04);
+  margin: 0;
+}
+.popover-body table > tbody > tr > td:first-child {
+  font-style: italic;
+  white-space: nowrap;
+  padding-right: .75em;
+}
+.popover-body table > tbody > tr > td {
+  padding: 0.1rem var(--bs-popover-body-padding-x);
+}
+
+/* inspired from bootstrap's .btn-close */
+.popover-header .popover-button {
+  box-sizing: content-box;
+  width: 1em;
+  height: 1em;
+  padding: 0.25em 0.25em;
+  color: #000;
+  background: transparent var(--popover-button-icon) center/1em auto no-repeat;
+  border: 0;
+  border-radius: 0.375rem;
+  opacity: .5;
+}
+.popover-header .popover-button:hover {
+  text-decoration: none;
+  opacity: .75;
+}
+.popover-header .popover-button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  opacity: 1;
+}
+.popover-header .popover-button:disabled, .popover-header .popover-button.disabled {
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  opacity: .25;
+}
+
+/* SVG from bootstrap icons v1.11.0 (released under MIT License) */
+.popover-header .popover-button-prev {
+  --popover-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath transform='scale(1.3799) translate(-2.2025 -2.2025)' d='M10 12.796V3.204L4.519 8zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753'/%3e%3c/svg%3e");
+}
+.popover-header .popover-button-next {
+  --popover-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath transform='scale(1.3799) translate(-2.2025 -2.2025)' d='M6 12.796V3.204L11.481 8zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753'/%3e%3c/svg%3e");
+}
+.popover-header .popover-button-close {
+  --popover-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath transform='scale(1.3332) translate(-2 -2)' d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3e%3c/svg%3e");
+}
-- 
cgit v1.2.3