minimal bootstrap integration to add Card content container in group …

…card
ssciwr · Apr 23, 2024 · be8b896 · be8b896
1 parent c733f05
commit be8b896
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -30,16 +30,12 @@ a.iwr-vis:active {
 .iwr-vis-group-card-html {
   font-size: 6px;
   line-height: 6px;
-  overflow-y:scroll;
-  scrollbar-width: thin;
   height: 90px;
 }
 
 .iwr-vis-group-card-doi {
   font-size: 6px;
   line-height: 6px;
-  overflow-y:scroll;
-  scrollbar-width: thin;
   height: 20px;
 }
 

diff --git a/src/html/index.html b/src/html/index.html
@@ -8,10 +8,12 @@
       content="width=device-width, initial-scale=1.0"
     />
     <title>Research Software Directory Visualization</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
     <script type="text/javascript" src="bundle.js"></script>
   </head>
   <body>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <div class="iwr-vis">
       <div class="iwr-vis-menu">
         <svg

diff --git a/src/js/script.ts b/src/js/script.ts
@@ -476,22 +476,28 @@ function addGroupCard(svg, member, color, image_base_url) {
   }
   const doi = group_card.foreignObject(180, 20).attr({x: 110, y: y});
   doi.add(
-      SVG(
-          '<div xmlns="http://www.w3.org/1999/xhtml" class="iwr-vis-group-card-doi">' +
-        doi_content +
-        "</div>",
-      true,
-      ),
+    SVG(
+        '<div xmlns="http://www.w3.org/1999/xhtml" class="iwr-vis-group-card-doi">' +
+        '<div class="card overflow-auto" style="width: 100%; height: 100%;scrollbar-width: thin;">' +
+        '<div class="card-body p-1">' +
+        '<p class="card-text">'+ doi_content + '</p>' +
+        "</div>" +
+        "</div>" +
+        "</div>"
+    , true),
   );
   y += 28;
   const blurb = group_card.foreignObject(180, 95).attr({ x: 110, y: y });
   blurb.add(
     SVG(
-      '<div xmlns="http://www.w3.org/1999/xhtml" class="iwr-vis-group-card-html">' +
-        member.description +
-        "</div>",
-      true,
-    ),
+        '<div xmlns="http://www.w3.org/1999/xhtml" class="iwr-vis-group-card-html">' +
+        '<div class="card overflow-auto" style="width: 100%; height: 100%;scrollbar-width: thin;">' +
+        '<div class="card-body p-1">' +
+        '<p class="card-text">'+ member.description + '</p>' +
+        "</div>" +
+        "</div>" +
+        "</div>"
+    , true),
   );
 }