content for info dialogue card

CHANGELOG.md

@@ -1,10 +1,10 @@
 # easyBiograph Version History
 
-## version 2.0.4 beta, released xx Mar 2024
+## version 2.0.4 beta, released 18 Mar 2024
 
 * (feature) standard dimensions are not changeable
 * (feature) high contrast mode
-* (feature) help button
+* (feature) info button shows card with version and links
 * (bugfix) zoom button only visible if zoomed
 * (bugfix) cancel after new results in start screen
 

src/components/HelpDialogue.vue

@@ -1,28 +1,39 @@
+<script setup>
+// eslint-disable-next-line no-undef
+const appVersion = __APP_VERSION__;
+</script>
+
 <template>
   <div class="card">
     <div class="card-content">
-      <div class="media">
-        <div class="media-content">
-          <label class="title is-4">
-            This is the help pop up.
-          </label>
-          <br /><br />
-
-          <p class="subtitle is-6">Waiting for content :)</p>
-          <br />
+      <div class="content">
+        <p class="title is-4">easyBiograph</p>
+        <p class="subtitle is-6">version {{ appVersion }}</p>
+        <p class="block">
+          <!-- TODO provide link to https://easybiograph.fhstp.ac.at/ -->
+          Die Webseite mit Handbüchern und Einführungsmaterialien ist noch nicht
+          verfügbar.
+        </p>
+        <p class="block">
+          easyBiograph ist Free and Open Source Software. Den Source Code finden
+          Sie auf <a href="https://github.com/fhstp/easybiograph">GitHub</a>.
+        </p>
+        <p class="block">
+          Diese Software wurde im Rahmen des Erasmus+ Projekts
+          <a
+            href="https://research.fhstp.ac.at/en/projects/transsodia-transnational-and-digital-learning-and-teaching-in-cooperative-social-diagnostics"
+            target="_blank"
+          >
+            TransSoDia
+          </a>
+          entwickelt, das von der Europäischen Union kofinanziert wurde.
+        </p>
+        <div class="buttons is-centered">
+          <button class="button" @click="$emit('abort')">Schließen</button>
         </div>
       </div>
-      <br />
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: "HelpDialogue"
-}
-</script>
-
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/TimeGraph.vue

@@ -158,7 +158,7 @@
               <span class="icon">
                 <font-awesome-icon icon="question" />
               </span>
-            <span>Hilfe</span>
+            <span>Info</span>
           </a>
           </div>
         </div>