increased size of products

css/style.css

@@ -70,7 +70,7 @@ a:link, a:visited, a:hover, a:focus, a:active, a:visited:hover {
     AI Technology Bubbles
 */
 .ai-technology, .legend-item-ai-technology-icon{
-    margin-top: 0.25em;
+    margin-top: 0.5em;
     margin-left: 0.1em;
     margin-right: 0.1em;
     color: #000;

js/scripts.js

@@ -25,13 +25,13 @@ $( document ).ready(function() {
             
             html = `
             <div class="card">
-                <div class="category-wrapper" id="${currentCategoryShort}">
-                    <div class="category-header clearfix">
-                        ${currentCategoryLong} <span class="counter-text"><span class="count-product">0</span> Produkte</span>
-                    </div>
-                    <ul class="list-inline" id="list-${currentCategoryShort}">
-                    </ul>`;
-
+            <div class="category-wrapper" id="${currentCategoryShort}">
+            <div class="category-header clearfix">
+            ${currentCategoryLong} <span class="counter-text"><span class="count-product">0</span> Produkte</span>
+            </div>
+            <ul class="list-inline" id="list-${currentCategoryShort}">
+            </ul>`;
+            
             // sort subcategories by long name
             if (currentSubcategories !== undefined){
                 currentSubcategories.sort(function (a, b) {
@@ -43,15 +43,15 @@ $( document ).ready(function() {
                 currentSubcategoryShort = currentSubcategory.nameShort;
                 currentSubcategoryLong = currentSubcategory.nameLong;
                 html += `
-                    <div class="subcategory-header card-subtitle mb-2 text-muted">
-                    ${currentSubcategoryLong}
-                    </div>
-                    <ul class="list-inline" id="sublist-${currentSubcategoryShort}">
-                    </ul>`;
+                <div class="subcategory-header card-subtitle mb-2 text-muted">
+                ${currentSubcategoryLong}
+                </div>
+                <ul class="list-inline" id="sublist-${currentSubcategoryShort}">
+                </ul>`;
             });
-
+            
             html += `
-                </div>
+            </div>
             </div>
             `;
             $("#row-products").append(html);
@@ -99,8 +99,8 @@ $( document ).ready(function() {
                 }
                 
                 html = `
-                <li class="product-wrapper text-center list-inline-item ${currentMediatype} ${currentTechnologyReadinessLevel}">
-                <a href="${currentLink}" title="${currentDescription}" target="_blank" class="product-link">
+                <li class="product-wrapper text-center d-inline-flex ${currentMediatype} ${currentTechnologyReadinessLevel}">
+                <a href="${currentLink}" title="${currentDescription}" target="_blank" class="product-link w-100 my-auto">
                 <img class="logo" src="img/${currentLogo}">
                 <span class="product-name">${currentProductName}</span>`;
                 $.each(currentAiTechnologiesUsed, function (index, value){
@@ -144,6 +144,13 @@ $( document ).ready(function() {
             });
         });
         
+        // set equal minimum height for all products
+        var maxHeight = Math.max.apply(null, $(".product-wrapper").map(function ()
+        {
+            return $(this).height();
+        }).get());
+        $(".product-wrapper").css({"min-height" : maxHeight});
+        
         // show or hide various information
         if (showProductCount){
             $(".counter-text").show();

json/products.json

@@ -1241,7 +1241,9 @@
 		],
 		"description": "Computerunterstützte Untertitelung",
 		"technologyReadinessLevel": "basic-research",
-		"aiTechnologiesUsed": [],
+		"aiTechnologiesUsed": [
+			"NN"
+		],
 		"categories": [
 			"BeschaffungInhalte_TextToSpeechToText"
 		]