[taler-www] 25/42: UC: Switched to card elements for the partner panel; Imporvement of alignment.

[gnunet]

This is an automated email from the git hooks/post-receive script.

andreas-habegger pushed a commit to branch master
in repository www.

commit 34557ea3b82b4a73232f75021f22a3b591b8d3ae
Author: Andreas HABEGGER <andreas.habegger@bfh.ch>
AuthorDate: Sun Nov 19 20:51:42 2023 +0100

    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 c26490f..fcff74f 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 073e3dc..58706d7 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>

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.