CSS: Improve style for maximized popovers.

In particular, fix a bug where not the entire height was used for the
popover body.

2 files changed, 46 insertions, 16 deletions

diff --git a/src/popover.js b/src/popover.js
index bdcd5ae..7313ce1 100644
--- a/src/popover.js
+++ b/src/popover.js
@@ -1655,18 +1655,19 @@ const formatFeaturePropertiesToHTML = function(properties) {
     const tr = document.createElement('tr');
     tbody.appendChild(tr);
 
-    const td1 = document.createElement('td');
-    tr.appendChild(td1);
+    const th = document.createElement('th');
+    th.setAttribute('scope', 'row');
+    tr.appendChild(th);
     const textDesc = document.createTextNode(desc);
-    td1.appendChild(textDesc);
+    th.appendChild(textDesc);
 
-    const td2 = document.createElement('td');
-    tr.appendChild(td2);
+    const td = document.createElement('td');
+    tr.appendChild(td);
     const v = formatValue(properties[key], opts);
     if (v != null) {
-      td2.appendChild(v);
+      td.appendChild(v);
     }
-    opts?.classes?.forEach?.((c) => td2.classList.add(c));
+    opts?.classes?.forEach?.((c) => td.classList.add(c));
   });
 
   const content = document.createElement('div');
diff --git a/src/style.css b/src/style.css
index ac7410d..cf7fc86 100644
--- a/src/style.css
+++ b/src/style.css
@@ -488,7 +488,8 @@ body.inprogress {
 .popover {
   --bs-popover-header-padding-x: .75rem;
   --bs-popover-header-padding-y: .5rem;
-  --bs-popover-body-padding-x: .45rem;
+  --bs-popover-body-offset-x: .3rem;
+  --bs-popover-body-padding-x: calc(var(--bs-popover-header-padding-x) - var(--bs-popover-body-offset-x));
   --bs-popover-body-padding-y: .5rem;
   --bs-popover-header-bg: var(--bs-popover-bg);
   --bs-popover-zindex: 1000;
@@ -496,6 +497,13 @@ body.inprogress {
   width: var(--bs-popover-max-width);
   pointer-events: auto;
 }
+.popover.popover-maximized {
+  --bs-popover-header-padding-x: 1rem;
+  --bs-popover-header-padding-y: 1rem;
+  --bs-popover-body-padding-y: 1rem;
+  --bs-popover-body-offset-x: .5rem;
+  --bs-popover-font-size: 1rem;
+}
 .popover.inprogress > .popover-header,
 .popover.inprogress > .popover-body {
   filter: opacity(70%);
@@ -507,6 +515,11 @@ body.inprogress {
   user-select: none; /* eslint-disable-line css/use-baseline */
   --bs-heading-color: var(--bs-popover-header-color);
 }
+.popover-header h5, .popover-header h6 {
+  line-height: var(--bs-body-line-height);
+  vertical-align: middle;
+  margin: 0;
+}
 .popover-body {
   -webkit-user-select: text;
   -moz-user-select: text;
@@ -514,32 +527,48 @@ body.inprogress {
   max-height: 40vh;
   overflow: auto auto;
 }
+.popover.popover-maximized .popover-body {
+  max-height: calc(100% - 2*var(--bs-popover-header-padding-y) - var(--bs-body-line-height)*var(--bs-popover-font-size) - var(--bs-popover-border-width));
+}
 .popover-body h6, .popover-body h5 {
-  margin-bottom: .25rem;
+  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.popover-maximized .popover-body h5,
+.popover.popover-maximized .popover-body h6 {
+  font-size: calc(1.2 * var(--bs-popover-font-size));
+}
 .popover-body .table {
   --bs-table-bg: none;
-  --bs-table-hover-bg: rgba(0, 0, 0, 0.04);
+  --bs-table-hover-bg: rgba(0, 0, 0, .04);
+  --bs-table-bg-padding-y: .1rem;
   margin: 0;
 }
-.popover-body table > tbody > tr > td:first-child {
+.popover.popover-maximized .popover-body .table {
+  --bs-table-hover-bg: none;
+  --bs-table-bg-padding-y: .5rem;
+}
+.popover.popover-maximized .popover-body .table tr:nth-of-type(2n+1) {
+  background: rgba(0, 0, 0, .05);
+}
+.popover-body table > tbody > tr > th[scope="row"] {
   font-style: italic;
-  width: 9.75em;
   padding-right: .75em;
+  font-weight: normal;
+}
+.popover .popover-body table > tbody > tr > th[scope="row"] {
+  width: 35%;
 }
+.popover-body table > tbody > tr > th[scope="row"],
 .popover-body table > tbody > tr > td {
-  padding: 0.1rem 0.3rem;
+  padding: var(--bs-table-bg-padding-y) var(--bs-popover-body-offset-x);
 }
 .feature-attr-mrr-license-id, .feature-attr-dnr, .feature-objid, .feature-orgnr {
   font-family: var(--bs-font-monospace);
   word-wrap: break-word;
 }
 
-.popover-header h6 {
-  margin: 0;
-}
 /* inspired from bootstrap's .btn-close */
 .popover-header .popover-button {
   box-sizing: content-box;