feat(ccp app): add links and new styling to footer

packages/demo/src/AppCCP.svelte

@@ -8,13 +8,13 @@
         dktkHistologyMeasure,
     } from "./measures";
 
-    let mockCatalogueData = "";
+    let catalogueData = "";
     let libraryOptions = "";
 
     fetch("catalogues/catalogue-dktk.json")
         .then((response) => response.text())
         .then((data) => {
-            mockCatalogueData = data;
+            catalogueData = data;
         });
 
     fetch("options.json")
@@ -137,7 +137,7 @@
 <main>
     <div class="search">
         <lens-search-bar
-            treeData={mockCatalogueData}
+            treeData={catalogueData}
             noMatchesFoundMessage={"keine Ergebnisse gefunden"}
         />
         <lens-info-button
@@ -166,7 +166,7 @@
                 toggleIconUrl="right-arrow-svgrepo-com.svg"
                 addIconUrl="long-right-arrow-svgrepo-com.svg"
                 infoIconUrl="info-circle-svgrepo-com.svg"
-                treeData={mockCatalogueData}
+                treeData={catalogueData}
                 texts={catalogueText}
                 toggle={{ collapsable: false, open: catalogueopen }}
             />
@@ -278,14 +278,20 @@
 </main>
 
 <footer>
-    <a class="user-agreement" href="http">Nutzervereinbarung</a>
-    <a class="email" href="mailto:[email protected]">[email protected]</a>
-    <div class="copyright">
-        <span>&#169; 2023</span>
-        <a href="https://dktk.dkfz.de/en/clinical-platform/about-ccp"
-            >Clinical Comunication Platform (CCP)</a
-        >
-    </div>
+    <a
+        class="ccp"
+        href="https://dktk.dkfz.de/klinische-plattformen/ueber-die-ccp/about-ccp"
+    >
+        Clinical Communication Platform (CCP)
+    </a>
+    <a class="email" href="mailto:[email protected]">Kontakt</a>
+    <a class="user-agreement" href="http" download="nutzervereinbarung"
+        >Nutzungsvereinbarung</a
+    >
+    <a class="privacy-policy" href="http" download="datenschutzerklaerung"
+        >Datenschutz</a
+    >
+    <a class="imprint" href="http">Impressum</a>
 </footer>
 
-<lens-options options={libraryOptions} catalogueData={mockCatalogueData} />
+<lens-options options={libraryOptions} {catalogueData} />

packages/demo/src/ccp.css

@@ -225,8 +225,8 @@ footer {
 
 
 footer {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  display: flex;
+  justify-content: center;
   padding: var(--gap-s);
   background-color: var(--white);
   border-radius: var(--border-radius-small);
@@ -236,15 +236,16 @@ footer {
   bottom: 0;
 }
 
-.email {
-  justify-self: center;
-}
+footer a {
+  color: var(--blue);
+  padding: 0 var(--gap-xs);
+  border-right: solid 1px var(--blue);
 
-.copyright {
-  justify-self: end;
-  text-align: right;
 }
 
+.imprint {
+  border-right: none;
+}
 
 .result-table-hint-text {
   padding-top: 20px;