From 34557ea3b82b4a73232f75021f22a3b591b8d3ae Mon Sep 17 00:00:00 2001
From: Andreas HABEGGER <andreas.habegger@bfh.ch>
Date: Sun, 19 Nov 2023 20:51:42 +0100
Subject: UC: Switched to card elements for the partner panel; Imporvement of
 alignment.

---
 static/styles.css           |  7 ++++++
 template/consortium.html.j2 | 57 +++++++++++++++++++++------------------------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index c26490f2..fcff74fd 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -268,4 +268,11 @@ ul.timeline > li:before {
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
+}
+
+.section-consortium .card-note {
+  overflow: hidden;
+  line-height: 1.5rem;
+  height: 4.5rem;
+  min-height: 4.5rem;
 }
\ No newline at end of file
diff --git a/template/consortium.html.j2 b/template/consortium.html.j2
index 073e3dc7..58706d74 100644
--- a/template/consortium.html.j2
+++ b/template/consortium.html.j2
@@ -36,13 +36,13 @@
                   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                     data-bs-target="#collapse_{{ loop.index }}" aria-expanded="false"
                     aria-controls="collapse_{{ loop.index }}">
-                    Objective {{ loop.index }}: {{ objective['title'] }}
+                    Objective {{ loop.index }}: {{ objective.title }}
                   </button>
                 </h2>
                 <div id="collapse_{{ loop.index }}" class="accordion-collapse collapse"
                   aria-labelledby="heading_{{ loop.index }}" data-bs-parent="#accordionObjectives">
                   <div class="accordion-body text-muted w-responsive">
-                    {{ objective['text'] }}
+                    {{ objective.text }}
                   </div>
                 </div>
               </div>
@@ -85,40 +85,35 @@
     <!--Section: Content-->
     <section class="section-consortium justify-content-md-center text-center dark-grey-text ">
 
-      {% for partner in conf['partners'] %}
+      <div class="container">
 
-      {% if loop.index0 % 2 == 0 %}
-      <!-- Grid row -->
-      <div class="row align-items-top">
-        {% endif %}
+        <div class="row row-cols-1 row-cols-md-3 g-4">
+          <!-- start -->
 
-        <!-- Grid column -->
-        <div class="col-lg-6">
-          <div class="avatar mx-auto">
-            <a href="{{ partner['url'] }}" target="_blank" rel="noopener noreferrer">
-              <img src="{{ url(partner['logo']) }}" height="180" class="rounded-circle z-depth-3"
-                alt="{{ partner['id'] + ' avatar'}}">
-            </a>
+          {% for partner in conf['partners'] %}
+
+          <div class="col">
+            <div class="card border-0 h-100">
+              <a href="{{ partner.url }}" target="_blank" rel="noopener noreferrer">
+                <img src="{{ url(partner.logo ) }}" height="180" class="card-header rounded-circle z-depth-3"
+                alt="{{ partner.id + ' avatar'}}">
+              </a>
+            <div class="card-note grey-text text-muted mt-3">The team of {{ partner.name }} is represented by </div>
+            <div class="card-body h-100">
+              <h5 class="card-title font-weight-bold grey-text">{{ partner.contact }} </h5>
+              <p class="card-text grey-text text-muted word-wrap"> {{ partner.role }} </p>
+            </div>
+            <div class="card-footer">
+              <small class="text-body-secondary dark-grey-text text-muted word-wrap"><i> {{ partner.statement }} </i></small>
+            </div>
           </div>
-          <p class="grey-text text-muted mt-4 mb-2">The team of {{ partner['name']}} is represented by</p>
-
-          <h5 class="font-weight-bold grey-text">{{ partner['contact'] }} </h5>
-          <p class="grey-text text-muted"> {{ partner['role'] }} </p>
-          <div class="divider"></div>
-          <p class="dark-grey-text text-muted"><i>
-              {{ partner['statement'] }}
-            </i></p>
         </div>
-        {% if not loop.index0 == 0 and loop.index % 2 == 0 %}
-        <!-- Grid row -->
-      </div>
-      <br>
-      {% endif %}
-      {% endfor %}
-
 
-    </section>
-    <!--Section: Content-->
+        {% endfor %}
+      </div>
+  </div>
+  </section>
+  <!--Section: Content-->
 
   </div>
 </main>
-- 
cgit v1.2.3