Add tags to info index page

Author: MalloryWittwer

src/imaging_server_kit/core/static/css/index.css

@@ -24,9 +24,7 @@ a {
 .card-product {
     border-radius: 5px;
     overflow: hidden;
-    /* height: 80px; */
     background: white;
-    /* box-shadow: 0 0 15px rgba(0,0,0,0.2); */
     display: flex;
     align-items: center;
 }
@@ -35,13 +33,26 @@ a {
     font-size: 16px;
     font-weight: bold;
     margin: 0;
+    margin-bottom: 5px;
 }
 
 .card-product .card-product-infos {
     padding: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    gap: 8px;
+    flex-wrap: wrap;
 }
 
 .card-product:hover {
     background-color: #f4f4f4;
 }
-  
+
+.keyword {
+    border-radius: 2px;
+    font-size: 14px;
+    background-color: #f4f4f4;
+    padding: 2px 4px;
+}

src/imaging_server_kit/core/static/css/info.css

@@ -35,56 +35,6 @@ a:hover {
     padding: 2px 4px;
 }
 
-/* .card-category {
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 18px;
-    border-radius: 5px;
-}
-
-.card-category i {
-    font-size: 36px;
-    padding-top: 20px;
-}
-
-.cards {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 16px;
-}
-
-@media (min-width: 100px) and (max-width: 575px) {
-    .cards {
-        grid-template-columns: 1fr;
-    }
-}
-
-@media (min-width: 576px) {
-    .cards {
-        grid-template-columns: 1fr;
-    }
-}
-
-@media (min-width: 768px) {
-    .cards {
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-@media (min-width: 992px) {
-    .cards {
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-@media (min-width: 1200px) {
-    .cards {
-        grid-template-columns: 1fr 1fr;
-    }
-} */
-
 table {
     width: 100%;                 /* Make the table span the full width of its container */
     border-collapse: collapse;   /* Remove gaps between table cells */

src/imaging_server_kit/core/templates/index.html

@@ -12,11 +12,16 @@
 <body>
     <div class="container">
         <h1>Available algorithms</h1>
-        {% for algorithm in algorithms %}
+        {% for algorithm, algo_info in algorithms_and_infos %}
         <a href="/{{ algorithm }}/info">
             <div class="card-product">
                 <div class="card-product-infos">
                     <h2>{{ algorithm }}</h2>
+                    <div>
+                        {% for tag in algo_info.tags %}
+                        <span class="keyword">{{ tag }}</span>
+                        {% endfor %}
+                    </div>
                 </div>
             </div>
         </a>

src/imaging_server_kit/remote/app.py

@@ -88,11 +88,15 @@ def _register_routes(self):
         )
         async def home(request: Request):
             if len(self.algorithms) > 1:
+                algo_infos = []
+                for algo in self.algorithms:
+                    algo_infos.append(self.algorithms_dict[algo].algo_info)
+                
                 return templates.TemplateResponse(
                     request=request,
                     name="index.html",
                     context={
-                        "algorithms": self.algorithms,
+                        "algorithms_and_infos": zip(self.algorithms, algo_infos),
                     },
                 )
             elif len(self.algorithms) == 1: