Merge pull request #122 from Dataport/fix/github-io-correct-container

Change all asides to divs as they hold main content
Dataport · Apr 16, 2024 · 8528eee · 8528eee
2 parents d2bd8ae + 0530451
commit 8528eee
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 39 deletions.
diff --git a/pages/examples/address.html b/pages/examples/address.html
@@ -4,6 +4,7 @@
 <head>
   <link rel="icon" href="../assets/iceberg_icon.svg">
   <link rel="stylesheet" href="../mvp.css">
+  <link rel="stylesheet" href="../polar.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - Address example">
@@ -75,8 +76,8 @@
     },
     postCreation: ({ mapClient, id }) => {
       const paragraph = document.createElement('p')
-      const aside = document.getElementById(id).parentElement.parentElement
-      aside.appendChild(paragraph)
+      const card = document.getElementById(id).parentElement.parentElement
+      card.appendChild(paragraph)
       mapClient.subscribe('plugin/pins/latLon', (pinCoordinate) => {
         if (pinCoordinate.length) {
           paragraph.innerHTML = `The pin is at coordinate ${pinCoordinate.map(number => number.toFixed(4)).join(', ')}.`
@@ -86,7 +87,7 @@
       const copyright = document.createElement('p')
       copyright.style.cssText = 'color: var(--color-text-secondary)'
       copyright.innerHTML = 'Background map by <i>Freie und Hansestadt Hamburg, Landesbetrieb Geoinformation und Vermessung</i>'
-      aside.appendChild(copyright)
+      card.appendChild(copyright)
     },
   })
 </script>

diff --git a/pages/examples/draw.html b/pages/examples/draw.html
@@ -4,6 +4,7 @@
 <head>
   <link rel="icon" href="../assets/iceberg_icon.svg">
   <link rel="stylesheet" href="../mvp.css">
+  <link rel="stylesheet" href="../polar.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - draw example">
@@ -76,8 +77,8 @@
       figure.innerHTML = `
       <img id="${imgId}" alt=""">
       <figcaption>The screenshot that can be made above will appear here.</figcaption>`
-      const aside = document.getElementById(id).parentElement.parentElement
-      aside.appendChild(figure)
+      const card = document.getElementById(id).parentElement.parentElement
+      card.appendChild(figure)
       mapClient.subscribe('plugin/export/exportedMap', (screenshot) => {
         const imgElement = document.getElementById(imgId)
         if (imgElement && screenshot) {
@@ -96,7 +97,7 @@
       const copyright = document.createElement('p')
       copyright.style.cssText = 'color: var(--color-text-secondary)'
       copyright.innerHTML = 'Background map by <i>LGV Hamburg</i>'
-      aside.appendChild(copyright)
+      card.appendChild(copyright)
     },
   })
 </script>

diff --git a/pages/examples/gfi.html b/pages/examples/gfi.html
@@ -4,6 +4,7 @@
 <head>
   <link rel="icon" href="../assets/iceberg_icon.svg">
   <link rel="stylesheet" href="../mvp.css">
+  <link rel="stylesheet" href="../polar.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - GFI example">
@@ -139,7 +140,7 @@
       },
     },
     postCreation: ({ id }) => {
-      const aside = document.getElementById(id).parentElement.parentElement
+      const card = document.getElementById(id).parentElement.parentElement
       const ul = document.createElement('ul')
 
       const copyright = document.createElement('li')
@@ -152,7 +153,7 @@
 
       ul.appendChild(copyright)
       ul.appendChild(copyrightBackground)
-      aside.appendChild(ul)
+      card.appendChild(ul)
     }
   })
 </script>

diff --git a/pages/examples/layer.html b/pages/examples/layer.html
@@ -4,6 +4,7 @@
 <head>
   <link rel="icon" href="../assets/iceberg_icon.svg">
   <link rel="stylesheet" href="../mvp.css">
+  <link rel="stylesheet" href="../polar.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - Layer example">

diff --git a/pages/examples/locales.html b/pages/examples/locales.html
@@ -4,6 +4,7 @@
 <head>
   <link rel="icon" href="../assets/iceberg_icon.svg">
   <link rel="stylesheet" href="../mvp.css">
+  <link rel="stylesheet" href="../polar.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - Locales example">

diff --git a/pages/examples/orientation.html b/pages/examples/orientation.html
@@ -4,6 +4,7 @@
 <head>
   <link rel="icon" href="../assets/iceberg_icon.svg">
   <link rel="stylesheet" href="../mvp.css">
+  <link rel="stylesheet" href="../polar.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - Orientation example">
@@ -77,11 +78,11 @@
       ],
     },
     postCreation: ({ id }) => {
-      const aside = document.getElementById(id).parentElement.parentElement
+      const card = document.getElementById(id).parentElement.parentElement
       const copyright = document.createElement('p')
       copyright.style.cssText = 'color: var(--color-text-secondary)'
       copyright.innerHTML = `Background map by <i>© GeoBasis-DE / BKG (${new Date().getFullYear()}) CC BY 4.0</i>`
-      aside.appendChild(copyright)
+      card.appendChild(copyright)
     }
   })
 </script>

diff --git a/pages/examples/render.js b/pages/examples/render.js
@@ -15,7 +15,7 @@ const commonParameters = {
   },
 }
 
-const makeAsideHtml = (id, name, description, parameterObject, useCases) => `
+const makeCardHtml = (id, name, description, parameterObject, useCases) => `
 <h3>${name}</h3>
 ${(typeof description === 'string' ? [description] : description)
   .map((text) => `<p>${text}</p>`)
@@ -57,8 +57,9 @@ export default ({
   services,
 }) => {
   const id = nameToId(name)
-  const aside = document.createElement('aside')
-  aside.style = 'width: 100% !important'
+  const card = document.createElement('div')
+  card.classList.add('card')
+  card.style = 'width: 100% !important'
   const parameterObject = {
     ...commonParameters,
     containerId: id,
@@ -70,15 +71,15 @@ export default ({
     },
     modifyLayerConfiguration,
   }
-  aside.innerHTML = makeAsideHtml(
+  card.innerHTML = makeCardHtml(
     id,
     name,
     description,
     parameterObject,
     useCases
   )
 
-  document.getElementById('render-node').appendChild(aside)
+  document.getElementById('render-node').appendChild(card)
 
   client.createMap(parameterObject).then((mapClient) => {
     if (postCreation) {

diff --git a/pages/index.html b/pages/index.html
@@ -5,6 +5,7 @@
   <link rel="icon" href="./assets/iceberg_icon.svg">
   <link rel="stylesheet" href="./mvp.css">
   <link rel="stylesheet" href="./mobile.css">
+  <link rel="stylesheet" href="./polar.css">
 
   <meta charset="utf-8">
   <meta name="description" content="POLAR - the configurable map client factory">
@@ -54,31 +55,31 @@ <h1>The <u>configurable</u> map element solution</h1>
         <h2>Reusable plugins, extensible library</h2>
         <p>Use configurable solutions for recurring needs. <i>Designed to fill in the blanks.</i></p>
       </header>
-      <aside>
+      <div class="card">
         <img alt="" src="./assets/manypixels-puzzle.svg" height="150" style="margin: 0 auto; display: block;">
         <h3>Plugins for common features</h3>
         <p>Configurable solutions for recurring requirements. Add pieces as needed. Currently <b>17 supported plugins</b> exist. View them in the <a href="#plugin-gallery">plugin gallery</a>.</p>
-      </aside>
-      <aside>
+      </div>
+      <div class="card">
         <img alt="" src="./assets/manypixels-decentralized.svg" height="150" style="margin: 0 auto; display: block;">
         <h3>Decentralized</h3>
         <p>POLAR is built upon the common interfaces defined by the <a href="https://www.ogc.org/" target="_blank">Open Geospatial Consortium ↗</a>, ready to be used with any standard-conforming geospatial infrastructure.</p>
-      </aside>
-      <aside>
+      </div>
+      <div class="card">
         <img alt="" src="./assets/manypixels-map.svg" height="150" style="margin: 0 auto; display: block;">
         <h3>Tried & tested</h3>
         <p>There are <a href="#users">20+ productive uses</a> of the POLAR library, <i>from</i> minimal inputs in official applications <i>to</i> expert clients for niche cases.</p>
-      </aside>
-      <aside>
+      </div>
+      <div class="card">
         <img alt="" src="./assets/manypixels-mobile.svg" height="150" style="margin: 0 auto; display: block;">
         <h3>Mobile-friendly UI</h3>
         <p>The library is focused on making maps accessible on <u>any device</u>; smartphone, tablet, or desktop PC.</p>
-      </aside>
-      <aside>
+      </div>
+      <div class="card">
         <img alt="" src="./assets/manypixels-legal.svg" height="150" style="margin: 0 auto; display: block;">
         <h3>EUPL license</h3>
         <p>POLAR is using the official <i>free software license of the European Union</i> for legally secure usage.</p>
-      </aside>
+      </div>
       <hr>
       <figure style="width: 100%; position: relative;">
         <img alt="Image of person using a pin to mark a location on a map" src="./assets/maps_pin.jpg" style="filter: brightness(0.4); min-width: 100%; height: 250px; object-fit: cover;">
@@ -97,56 +98,56 @@ <h2>Maps provide <i>context</i> to coordinates</h2>
         <h2>Productive usage</h2>
         <p>POLAR is backed and used by states and government agencies in Germany.</p>
       </header>
-      <aside>
+      <div class="card">
         <figure style="text-align: center;">
           <img src="./assets/landessymbole/bremen.svg" alt="Bremer Wappenzeichen" height="120px">
           <figcaption>Freie Hansestadt Bremen</figcaption>
         </figure>
-      </aside>
-      <aside>
+      </div>
+      <div class="card">
         <figure style="text-align: center;">
           <img src="./assets/landessymbole/hamburg.svg" alt="Hamburg-Symbol" height="120px">
           <figcaption>Freie und Hansestadt Hamburg</figcaption>
         </figure>
-      </aside>
-      <aside>
+      </div>
+      <div class="card">
         <figure style="text-align: center;">
           <img src="./assets/landessymbole/sachsen-anhalt.svg" alt="Landessymbol Sachsen-Anhalt" height="120px">
           <figcaption>Sachsen-Anhalt</figcaption>
         </figure>
-      </aside>
-      <aside>
+      </div>
+      <div class="card">
         <figure style="text-align: center;">
           <img src="./assets/landessymbole/schleswig-holstein.svg" alt="Landessymbol Schleswig-Holstein" height="120px">
           <figcaption>Schleswig-Holstein</figcaption>
         </figure>
-      </aside>
-      <aside>
+      </div>
+      <div class="card">
         <a target="_blank" href="https://www.hamburg.de/senatskanzlei/" style="text-decoration: none; width: 100%">
           <figure style="text-align: center;">
             <img src="./assets/productive-users/hamburg-logo.svg" alt="Senatskanzlei Hamburg" width="150px">
             <figcaption>Senatskanzlei Hamburg</figcaption>
           </figure>
         </a>
         <p>POLAR is used to provide insights into damages of public infrastructure and allows citizens to add additional reports via the <a target="_blank" href="https://static.hamburg.de/kartenclient/prod/">Meldemichel ↗</a>.</p>
-      </aside>
-      <aside>
+      </div>
+      <div class="card">
         <a target="_blank" href="https://www.schleswig-holstein.de/DE/landesregierung/ministerien-behoerden/LD/ld_node.html" style="text-decoration: none; width: 100%">
           <figure style="text-align: center;">
             <img src="./assets/productive-users/schleswig-holstein-logo.svg" alt="Landesamt für Denkmalpflege Schleswig-Holstein" width="150px">
             <figcaption>Landesamt für Denkmalpflege Schleswig-Holstein</figcaption>
           </figure>
         </a>
         <p>POLAR is used to display cultural monuments in Schleswig-Holstein via the <a target="_blank" href="https://efi2.schleswig-holstein.de/dish/dish_client/index.html">monument map ↗</a>.</p>
-      </aside>
-      <aside>
+      </div>
+      <div class="card">
         <a target="_blank" href="https://www.dataport.de" style="text-decoration: none; width: 100%">
           <figure style="text-align: center;">
             <img src="./assets/productive-users/dataport-logo.svg" alt="Dataport AöR" width="150px">
           </figure>
         </a>
         <p>We're using POLAR in-house whenever geospatial input or display is required.</p>
-      </aside>
+      </div>
     </section>
     <hr>
     <section id="plugin-gallery">

diff --git a/pages/polar.css b/pages/polar.css
@@ -0,0 +1,13 @@
+.card {
+    border: 1px solid var(--color-bg-secondary);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow) var(--color-shadow);
+    margin: 1rem;
+    padding: 1.25rem;
+    width: var(--width-card);
+}
+
+.card:hover {
+    box-shadow: var(--box-shadow) var(--color-text-secondary);
+    transition: box-shadow 0.2s ease;
+}