Map improvements

src/css/base/modal.css

@@ -73,7 +73,7 @@
     border: 1px solid var(--color-border-light);
     border-radius: var(--border-radius);
     padding: var(--modal-space);
-    max-width: 620px;
+    max-width: 720px;
   }
 
   & h2 {

src/css/sections/meetups.css

@@ -101,7 +101,7 @@
   & .links {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-xl);
+    gap: var(--space-l);
   }
 }
 

src/includes/mixins.pug

@@ -40,12 +40,12 @@ mixin member(m)
       !=markdown(m.text)
 
 mixin map(id, markers)
+  - const modalId = `modal-${id}`
   .vectorMap(id=id)
-  +modal(`modal-${id}`): #meeptupDetails
+  +modal(modalId): #meeptupDetails
   script.
     const markers = [!{markers}];
-    const modalId = 'modal-meetupMap';
+    const modalId = "!{modalId}";
-    const $modal = document.getElementById(modalId);
     // https://jvectormap.com/documentation/javascript-api/jvm-map/
     new jvm.MultiMap({
       container: $(`#!{id}`),
@@ -67,34 +67,7 @@ mixin map(id, markers)
           }
         },
         onMarkerClick(event, index) {
-          const m = markers[index]
+          onMeetupMapMarkerClick(markers[index], modalId)
-          const city = m.city ? m.city.trim() : ''
-          const date = m.event ? new Date(`${m.event.start}Z`) : null
-          const webUrl = m.url != m.websiteUrl ? m.websiteUrl : null
-          const twitterUrl = m.twitter ? `https://twitter.com/${m.twitter}` : null
-          const title = m.name + (city && !m.name.includes(city) ? ` (${city})` : '')
-          const urlTitle = m.url.includes('t.me/')
-            ? 'Telegram'
-            : m.url.includes('meetup.com/') ? 'Meetup.com' : 'Website'
-          const link = (url, title) => url ? `<a href="${url}" target="_blank" rel="nofollow noopener">${title}</a>` : ''
-          document.getElementById('meeptupDetails').innerHTML = `
-            <h2>${title}</h2>
-            <p class="links">
-              ${link(m.portalUrl, 'Portal')}
-              ${link(m.url, urlTitle)}
-              ${link(webUrl, 'Website')}
-              ${link(twitterUrl, 'Twitter')}
-            </p>` + (m.event ? `
-            <h3>Nächstes Treffen</h3>
-            <p class="date">${formatDate(date)}${m.event.location ? ` @ ${m.event.location}` : ''}</p>
-            ${m.event.description ? `<p>${m.event.description.replace('\n', '<br />')}</p>` : ''}
-            <p class="links">
-              ${link(m.event.portalLink, 'Portal')}
-              ${link(m.event.link, 'Website')}
-              ${link(m.event.nostr_note ? `https://snort.social/e/${m.event.nostr_note}` : null, 'Nostr')}
-            </p>` : '')
-
-          toggleModal(modalId)
         }
       },
       mapUrlByCode(code, multiMap) {

static/js/main.js

@@ -1,8 +1,6 @@
 const shuffle = arr => { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * i); const temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; }; return arr }
-const formatDate = date => {
+const dateFormat = new Intl.DateTimeFormat('de-DE', { dateStyle: 'full', timeStyle: 'short', timeZone: 'Europe/Berlin' })
-  const [day, time] = date.toISOString().split('T')
+const formatDate = date => dateFormat.format(date) + ' Uhr'
-  return day.split('-').reverse().join('.') + (time ? ` um ${time.replace(':00.000Z', ' Uhr')}` : '')
-}
 
 // Theme Switch
 const COLOR_MODES = ["light", "dark"]
@@ -44,7 +42,6 @@ const copyToClipboard = (e, text) => {
 
 const toggleModal = modalId => {
   const $modal = document.getElementById(modalId)
-  console.log($modal, modalId)
   const isVisible = $modal.classList.contains('modal--visible')
   if (isVisible) {
     $modal.addEventListener('transitionend', () => { $modal.classList.toggle('modal--visible') }, { once: true })
@@ -55,6 +52,39 @@ const toggleModal = modalId => {
   }
 }
 
+const onMeetupMapMarkerClick = (m, modalId) => {
+  console.log(modalId, m)
+  const city = m.city ? m.city.trim() : ''
+  const date = m.event ? new Date(`${m.event.start}Z`) : null
+  const webUrl = m.url != m.websiteUrl ? m.websiteUrl : null
+  const twitterUrl = m.twitter ? `https://twitter.com/${m.twitter}` : null
+  const title = m.name + (city && !m.name.includes(city) ? ` (${city})` : '')
+  const urlTitle = m.url.includes('t.me/')
+    ? 'Telegram'
+    : m.url.includes('meetup.com/') ? 'Meetup.com' : 'Website'
+  const link = (url, title) => url ? `<a href="${url}" target="_blank" rel="nofollow noopener">${title}</a>` : ''
+  document.getElementById('meeptupDetails').innerHTML = `
+    <h2>${title}</h2>
+    <p class="links">
+      Meetup-Links:
+      ${link(m.portalUrl, 'Portal')}
+      ${link(m.url, urlTitle)}
+      ${link(webUrl, 'Website')}
+      ${link(twitterUrl, 'Twitter')}
+    </p>` + (m.event ? `
+    <h3>Nächstes Treffen</h3>
+    <p class="date">${formatDate(date)}${m.event.location ? ` @ ${m.event.location}` : ''}</p>
+    ${m.event.description ? `<p>${m.event.description.replace('\n', '<br />')}</p>` : ''}
+    <p class="links">
+      Links zum Treffen:
+      ${link(m.event.portalLink, 'Portal')}
+      ${link(m.event.link, 'Website')}
+      ${link(m.event.nostr_note ? `https://snort.social/e/${m.event.nostr_note}` : null, 'Nostr')}
+    </p>` : '')
+
+  toggleModal(modalId)
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   // Topbar
   if (