Make dismissal of InfoModal clearer. Big purple "Go to the map" button instead of close button lost in the image. Removed link to the forum (will add via clearer submission flow)

Author: SableRaf

pcd-website/src/components/InfoModal.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, nextTick, onUnmounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Icon } from '@iconify/vue';
 import { createFocusTrap, type FocusTrap } from 'focus-trap';
-import { PCD_FORUM_THREAD_URL } from '../config';
 import fallbackBannerImage from '../images/community_background_2x.png?url';
 
 const props = defineProps<{ open: boolean; bannerImageUrl?: string; autoOpened?: boolean }>();
@@ -14,7 +12,7 @@ const dontShowAgain = ref(false);
 
 function handleClose() {
   if (dontShowAgain.value) emit('suppress');
-  emit('close');
+  else emit('close');
 }
 
 const { t } = useI18n();
@@ -62,13 +60,6 @@ onUnmounted(() => {
         :aria-label="t('nav.info_modal_title')"
         class="info-modal"
       >
-        <button
-          class="info-modal-close"
-          :aria-label="t('nav.info_modal_close')"
-          @click="handleClose()"
-        >
-          <Icon icon="bi:x-lg" width="1.125em" height="1.125em" aria-hidden="true" />
-        </button>
         <img
           :src="bannerImage"
           class="info-modal-banner"
@@ -78,16 +69,12 @@ onUnmounted(() => {
         <div class="info-modal-body">
           <h2 class="info-modal-title">{{ t('nav.info_modal_title') }}</h2>
           <p class="info-modal-description">{{ t('nav.info_modal_description') }}</p>
-          <a
-            :href="PCD_FORUM_THREAD_URL"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="info-modal-forum-btn"
-            :aria-label="t('nav.info_modal_forum_btn_new_tab')"
+          <button
+            class="info-modal-show-map-btn"
+            @click="handleClose()"
           >
-            {{ t('nav.info_modal_forum_btn') }}
-            <Icon icon="bi:box-arrow-up-right" width="1em" height="1em" aria-hidden="true" style="margin-left: 0.5rem; vertical-align: -0.1em;" />
-          </a>
+            {{ props.autoOpened ? t('nav.info_modal_go_to_map') : t('nav.info_modal_back_to_map') }}
+          </button>
           <label v-if="props.autoOpened" class="info-modal-suppress">
             <input type="checkbox" v-model="dontShowAgain" />
             {{ t('nav.info_modal_dont_show_again') }}
@@ -120,28 +107,6 @@ onUnmounted(() => {
   overflow: hidden;
 }
 
-.info-modal-close {
-  position: absolute;
-  top: var(--spacing-sm);
-  right: var(--spacing-sm);
-  z-index: 1;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.35);
-  color: #fff;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.info-modal-close:hover {
-  background: rgba(0, 0, 0, 0.55);
-}
-
 .info-modal-banner {
   display: block;
   width: 100%;
@@ -172,25 +137,31 @@ onUnmounted(() => {
   color: var(--color-text-muted);
 }
 
-.info-modal-forum-btn {
+.info-modal-show-map-btn {
   display: block;
   width: 100%;
   padding: 0.625rem 1rem;
   background: var(--color-primary);
   color: #fff;
   text-align: center;
-  text-decoration: none;
   font-size: 0.9375rem;
   font-weight: 600;
+  border: none;
   border-radius: 6px;
+  cursor: pointer;
   box-sizing: border-box;
   transition: opacity 0.15s ease;
 }
 
-.info-modal-forum-btn:hover {
+.info-modal-show-map-btn:hover {
   opacity: 0.85;
 }
 
+.info-modal-show-map-btn:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
 .info-modal-suppress {
   display: flex;
   align-items: center;

pcd-website/src/components/MapView.vue

@@ -648,8 +648,8 @@ onMounted(async () => {
   document.addEventListener('keydown', handleKeydown);
 
 
-  // Auto-open info modal on first visit
-  if (shouldAutoOpenInfoModal()) {
+  // Auto-open info modal on first visit, unless arriving via a direct event link
+  if (shouldAutoOpenInfoModal() && !linkedNode) {
     infoModalOpen.value = true;
     infoModalAutoOpened.value = true;
   }

pcd-website/src/i18n/locales/de.json

@@ -14,7 +14,8 @@
     "info_modal_description": "Der Processing Community Day (PCD) ist eine weltweite Veranstaltungsreihe, die von lokalen Communities organisiert wird und Kunst, Code und kreative Open-Source-Tools feiert. Finde deine lokale Veranstaltung auf der Karte oder fang an, deine eigene zu organisieren!",
     "info_modal_forum_btn": "Mehr im Forum erfahren",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close",
+    "info_modal_go_to_map": "Zur Karte",
+    "info_modal_back_to_map": "Zurück zur Karte",
     "info_modal_dont_show_again": "Nicht mehr anzeigen"
   },
   "node_list": {

pcd-website/src/i18n/locales/en.json

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day (PCD) is a worldwide series of community-led events celebrating art, code, and open-source creative tools. Events are organized by local communities around the globe. Find your local event on the map, or start organizing your own!",
     "info_modal_forum_btn": "Learn more on the forum",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close",
+    "info_modal_go_to_map": "Go to the map",
+    "info_modal_back_to_map": "Back to the map",
     "info_modal_dont_show_again": "Don't show this again"
   },
   "node_list": {

pcd-website/src/i18n/locales/es.json

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day (PCD) es una serie mundial de eventos organizados por comunidades locales que celebran el arte, el código y las herramientas creativas de código abierto. Encuentra tu evento local en el mapa, ¡o empieza a organizar el tuyo!",
     "info_modal_forum_btn": "Más información en el foro",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close",
+    "info_modal_go_to_map": "Ir al mapa",
+    "info_modal_back_to_map": "Volver al mapa",
     "info_modal_dont_show_again": "No volver a mostrar"
   },
   "node_list": {

pcd-website/src/i18n/locales/fr.json

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day (PCD) est une série mondiale d'événements organisés par des communautés locales, célébrant l'art, le code et les outils créatifs open source. Trouvez votre événement local sur la carte, ou commencez à organiser le vôtre !",
     "info_modal_forum_btn": "En savoir plus sur le forum",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close",
+    "info_modal_go_to_map": "Aller à la carte",
+    "info_modal_back_to_map": "Retour à la carte",
     "info_modal_dont_show_again": "Ne plus afficher"
   },
   "node_list": {

pcd-website/src/i18n/locales/ja.json

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day（PCD）は、アート・コード・オープンソースのクリエイティブツールを祝う、世界各地のコミュニティが主催するイベントシリーズです。地図からお近くのイベントを見つけるか、自分でイベントを主催してみましょう！",
     "info_modal_forum_btn": "フォーラムで詳しく見る",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close",
+    "info_modal_go_to_map": "地図を見る",
+    "info_modal_back_to_map": "地図に戻る",
     "info_modal_dont_show_again": "今後表示しない"
   },
   "node_list": {

pcd-website/src/i18n/locales/ko.json

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day(PCD)는 예술, 코드, 오픈소스 창작 도구를 기념하는 전 세계 커뮤니티 주도 이벤트 시리즈입니다. 지도에서 가까운 이벤트를 찾거나 직접 이벤트를 조직해 보세요!",
     "info_modal_forum_btn": "포럼에서 자세히 알아보기",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close",
+    "info_modal_go_to_map": "지도로 이동",
+    "info_modal_back_to_map": "지도로 돌아가기",
     "info_modal_dont_show_again": "다시 표시하지 않기"
   },
   "node_list": {

pcd-website/src/i18n/locales/pt.json

@@ -14,7 +14,8 @@
     "info_modal_description": "O Processing Community Day (PCD) é uma série mundial de eventos organizados por comunidades locais que celebram a arte, o código e as ferramentas criativas de código aberto. Encontre o seu evento local no mapa ou comece a organizar o seu próprio!",
     "info_modal_forum_btn": "Saiba mais no fórum",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close",
+    "info_modal_go_to_map": "Ir para o mapa",
+    "info_modal_back_to_map": "Voltar ao mapa",
     "info_modal_dont_show_again": "Não mostrar novamente"
   },
   "node_list": {

pcd-website/src/i18n/locales/zh-CN.json

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day（PCD）是由全球各地社区主办的系列活动，旨在庆祝艺术、代码与开源创意工具。在地图上找到您附近的活动，或者开始组织您自己的活动！",
     "info_modal_forum_btn": "在论坛了解更多",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close",
+    "info_modal_go_to_map": "前往地图",
+    "info_modal_back_to_map": "返回地图",
     "info_modal_dont_show_again": "不再显示"
   },
   "node_list": {