[taler-www] 33/42: UC: Improved grid layout; Added scrollable list for deliverables

[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 4f824d1b76209e87ebd72528cfcbd520978bd9b0
Author: Andreas HABEGGER <andreas.habegger@bfh.ch>
AuthorDate: Tue Nov 21 11:04:17 2023 +0100

    UC: Improved grid layout; Added scrollable list for deliverables
---
 static/styles.css           |  13 +-
 template/consortium.html.j2 | 294 +++++++++++++++++++++++++-------------------
 2 files changed, 176 insertions(+), 131 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index 44e2498..b0e60cb 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -297,10 +297,17 @@ ul.timeline > li:before {
   height: 13%;
   bottom: 0;
   left: 0.2em;
-  background: rgba(170, 57, 57, 0.3);
+  background: #86b7fe;
   z-index: -1;
 }
 
+.consortium .list-group{
+  max-height: 345px;
+  margin-bottom: 10px;
+  overflow:scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
 .announce .col-center {
        margin: 0 auto;
        float: none !important;
@@ -331,7 +338,7 @@ ul.timeline > li:before {
        width: 100%;
        height: 100%;
        display: block;
-       border-radius: 5%;
+       border-radius: 5px;
 }
 
 .announce .carousel .testimonial {
@@ -344,7 +351,7 @@ ul.timeline > li:before {
 
 .announce .carousel .overview b {
        text-transform: uppercase;
-       color: rgba(170, 57, 57, 0.3);
+       color: #86b7fe;
 }
 
 .announce .carousel-control-prev, .announce .carousel-control-next {
diff --git a/template/consortium.html.j2 b/template/consortium.html.j2
index 56e34ab..0ccc4b9 100644
--- a/template/consortium.html.j2
+++ b/template/consortium.html.j2
@@ -2,92 +2,139 @@
 {% block body_content %}
 <main id="maincontent">
 
-  <div class="container consortium">
-
-    <!--Section: Content-->
-    <section class="section-consortium dark-grey-text">
-
-
-      <div class="container-xl">
+  <div class="container consortium dark-grey-text">
 
+    <div class="row">
+      <div class="col-md-6 mb-6">
         <h4 class="font-weight-bold pb-2 mb-4">{{ _("Events")}}</h4>
         <div class="announce">
-          <div class="row">
-            <div class="col col-md-2 col-md-auto"></div>
-            <div class="col-md-8">
-
-              <div id="AnnouncCarousel" class="carousel slide" 
data-bs-ride="carousel">
-
-                <!-- Carousel indicators -->
-                <div class="carousel-indicators">
-                  <button data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="0" class="active" aria-current="true"
-                    aria-label="Slide 1"></button>
-                  <button type="button" data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="1"
-                    aria-label="Slide 2"></button>
-                  <button type="button" data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="2"
-                    aria-label="Slide 3"></button>
-                  <button type="button" data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="3"
-                    aria-label="Slide 4"></button>
-                </div>
+          <div id="AnnouncCarousel" class="carousel slide" 
data-bs-ride="carousel">
+
+            <!-- Carousel indicators -->
+            <div class="carousel-indicators">
+              <button data-bs-target="#AnnouncCarousel" data-bs-slide-to="0" 
class="active" aria-current="true"
+                aria-label="Slide 1"></button>
+              <button type="button" data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="1"
+                aria-label="Slide 2"></button>
+              <button type="button" data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="2"
+                aria-label="Slide 3"></button>
+              <button type="button" data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="3"
+                aria-label="Slide 4"></button>
+            </div>
 
 
-                <!-- Wrapper for carousel items -->
-                <div class="carousel-inner">
-                  <div class="carousel-item active" data-bs-interval="2000">
-                    <div class="img-box"><img src="{{ 
url('images/7-efficient.svg') }}" alt=""></div>
-                    <p class="testimonial">Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Nam eu sem tempor,
-                      varius quam at, luctus dui. Mauris magna metus, dapibus 
nec turpis vel, semper malesuada ante.
-                      Idac bibendum scelerisque non non purus. Suspendisse 
varius nibh non aliquet.</p>
-                    <p class="overview"><b>Paula Taler</b>, Professor</p>
-                  </div>
-                  <div class="carousel-item" data-bs-interval="2000">
-                    <div class="img-box"><img src="{{ 
url('images/taler-arch-full.svg') }}" alt=""></div>
-                    <p class="testimonial">Vestibulum quis quam ut magna 
consequat faucibus. Pellentesque eget nisi a mi
-                      suscipit tincidunt. Utmtc tempus dictum risus. 
Pellentesque viverra sagittis quam at mattis.
-                      Suspendisse potenti. Aliquam sit amet gravida nibh, 
facilisis gravida odio.</p>
-                    <p class="overview"><b>Antonio Twint</b>, Web Developer</p>
-                  </div>
-                  <div class="carousel-item" data-bs-interval="2000">
-                    <div class="img-box"><img src="{{ 
url('images/6-usable.svg') }}" alt=""></div>
-                    <p class="testimonial">Phasellus vitae suscipit justo. 
Mauris pharetra feugiat ante id lacinia.
-                      Etiam faucibus mauris id tempor egestas. Duis luctus 
turpis at accumsan tincidunt. Phasellus risus
-                      risus, volutpat vel tellus ac, tincidunt fringilla 
massa. Etiam hendrerit dolor eget rutrum.</p>
-                    <p class="overview"><b>Michael Coin</b>, CEO</p>
-                  </div>
-
-                  <div class="carousel-item" data-bs-interval="2000">
-                    <div class="img-box"><img src="{{ 
url('images/8-fault-tolerant.svg') }}" alt=""></div>
-                    <p class="testimonial">Phasellus vitae suscipit justo. 
Mauris pharetra feugiat ante id lacinia.
-                      Etiam
-                      faucibus mauris id tempor egestas. Duis luctus turpis at 
accumsan tincidunt. Phasellus risus
-                      risus,
-                      volutpat vel tellus ac, tincidunt fringilla massa. Etiam 
hendrerit dolor eget rutrum.</p>
-                    <p class="overview"><b>Michael Pay</b>, Seo Analyst</p>
-                  </div>
-                </div>
+            <!-- Wrapper for carousel items -->
+            <div class="carousel-inner">
+              <div class="carousel-item active" data-bs-interval="2000">
+                <div class="img-box"><img src="{{ 
url('images/7-efficient.svg') }}" alt=""></div>
+                <p class="testimonial">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Nam eu sem tempor,
+                  varius quam at, luctus dui. Mauris magna metus, dapibus nec 
turpis vel, semper malesuada ante.
+                  Idac bibendum scelerisque non non purus. Suspendisse varius 
nibh non aliquet.</p>
+                <p class="overview"><b>Paula Taler</b>, Professor</p>
+              </div>
+              <div class="carousel-item" data-bs-interval="2000">
+                <div class="img-box"><img src="{{ 
url('images/taler-arch-full.svg') }}" alt=""></div>
+                <p class="testimonial">Vestibulum quis quam ut magna consequat 
faucibus. Pellentesque eget nisi a mi
+                  suscipit tincidunt. Utmtc tempus dictum risus. Pellentesque 
viverra sagittis quam at mattis.
+                  Suspendisse potenti. Aliquam sit amet gravida nibh, 
facilisis gravida odio.</p>
+                <p class="overview"><b>Antonio Twint</b>, Web Developer</p>
+              </div>
+              <div class="carousel-item" data-bs-interval="2000">
+                <div class="img-box"><img src="{{ url('images/6-usable.svg') 
}}" alt=""></div>
+                <p class="testimonial">Phasellus vitae suscipit justo. Mauris 
pharetra feugiat ante id lacinia.
+                  Etiam faucibus mauris id tempor egestas. Duis luctus turpis 
at accumsan tincidunt. Phasellus risus
+                  risus, volutpat vel tellus ac, tincidunt fringilla massa. 
Etiam hendrerit dolor eget rutrum.</p>
+                <p class="overview"><b>Michael Coin</b>, CEO</p>
+              </div>
 
-                {# <!-- Carousel controls -->
-                <a class="carousel-control-prev" href="#AnnouncCarousel" 
data-slide="prev">
-                  <i class="fab fa-angle-left"></i>
-                </a>
-                <a class="carousel-control-next" href="#AnnouncCarousel" 
data-slide="next">
-                  <i class="fab fa-angle-right"></i>
-                </a> #}
+              <div class="carousel-item" data-bs-interval="2000">
+                <div class="img-box"><img src="{{ 
url('images/8-fault-tolerant.svg') }}" alt=""></div>
+                <p class="testimonial">Phasellus vitae suscipit justo. Mauris 
pharetra feugiat ante id lacinia.
+                  Etiam
+                  faucibus mauris id tempor egestas. Duis luctus turpis at 
accumsan tincidunt. Phasellus risus
+                  risus,
+                  volutpat vel tellus ac, tincidunt fringilla massa. Etiam 
hendrerit dolor eget rutrum.</p>
+                <p class="overview"><b>Michael Pay</b>, Seo Analyst</p>
               </div>
             </div>
-            <div class="col col-md-2 col-md-auto"></div>
+
+            {# <!-- Carousel controls -->
+            <a class="carousel-control-prev" href="#AnnouncCarousel" 
data-slide="prev">
+              <i class="fab fa-angle-left"></i>
+            </a>
+            <a class="carousel-control-next" href="#AnnouncCarousel" 
data-slide="next">
+              <i class="fab fa-angle-right"></i>
+            </a> #}
           </div>
         </div>
       </div>
+      <div class="col-md-1 mb-1"></div>
+      <div class="col-md-4 mb-4">
+        <h4 class="font-weight-bold pb-2 mb-4">{{ _("Deliverables")}}</h4>
+        <div class="list-group">
+          <a href="#" class="list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-between">
+              <h5 class="mb-1">List group item heading</h5>
+              <small>3 days ago</small>
+            </div>
+            <p class="mb-1">Some placeholder content in a paragraph.</p>
+            <small>And some small print.</small>
+          </a>
+          <a href="#" class="list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-between">
+              <h5 class="mb-1">List group item heading</h5>
+              <small class="text-muted">3 days ago</small>
+            </div>
+            <p class="mb-1">Some placeholder content in a paragraph.</p>
+            <small class="text-muted">And some muted small print.</small>
+          </a>
+          <a href="#" class="list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-between">
+              <h5 class="mb-1">List group item heading</h5>
+              <small class="text-muted">3 days ago</small>
+            </div>
+            <p class="mb-1">Some placeholder content in a paragraph.</p>
+            <small class="text-muted">And some muted small print.</small>
+          </a>
+          <a href="#" class="list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-between">
+              <h5 class="mb-1">List group item heading</h5>
+              <small class="text-muted">3 days ago</small>
+            </div>
+            <p class="mb-1">Some placeholder content in a paragraph.</p>
+            <small class="text-muted">And some muted small print.</small>
+          </a>
+          <a href="#" class="list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-between">
+              <h5 class="mb-1">List group item heading</h5>
+              <small class="text-muted">3 days ago</small>
+            </div>
+            <p class="mb-1">Some placeholder content in a paragraph.</p>
+            <small class="text-muted">And some muted small print.</small>
+          </a>
+          <a href="#" class="list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-between">
+              <h5 class="mb-1">List group item heading</h5>
+              <small class="text-muted">3 days ago</small>
+            </div>
+            <p class="mb-1">Some placeholder content in a paragraph.</p>
+            <small class="text-muted">And some muted small print.</small>
+          </a>
+          <a href="#" class="list-group-item list-group-item-action">
+            <div class="d-flex w-100 justify-content-between">
+              <h5 class="mb-1">List group item heading</h5>
+              <small class="text-muted">3 days ago</small>
+            </div>
+            <p class="mb-1">Some placeholder content in a paragraph.</p>
+            <small class="text-muted">And some muted small print.</small>
+          </a>
+        </div>
+        <div class="col cold-md-auto"></div>
+      </div>
 
 
-
-      <h4 class="font-weight-bold pb-2 mb-4">{{ _("Deliverables")}}</h4>
-
-
-      <!-- Section heading -->
-      <h4 class="font-weight-bold pb-2 mb-4">{{ _("Project")}}</h4>
       <div class="row">
+        <h4 class="font-weight-bold pb-2 mb-4">{{ _("Project")}}</h4>
         <div class="col col-md-auto"></div>
 
         <div class="col-md-11">
@@ -122,76 +169,67 @@
             </div>
             {% endfor %}
           </div>
-          <div class="col col-md-auto"></div>
-          <p class="text-muted w-responsive mx-auto"><br></p>
-
         </div>
+        <div class="col col-md-auto"></div>
+      </div>
 
-
-        <!-- Section heading -->
+      <div class="row">
         <h4 class="font-weight-bold pb-2 mb-4">{{ _("Partners")}}</h4>
+      </div>
 
-        <div class="row mb-4">
-          <div class="col col-md-auto"></div>
-
-          <div class="col-md-11">
-            <p class="text-muted w-responsive mx-auto mb-3">
-              {% trans %}
-              TALER consortium consists of 11 partners from 8 European 
countries (the Netherlands,
-              Belgium, France,
-              Germany, Greece, Hungary, Luxembourg and Switzerland).
-              {% endtrans %}
-            </p>
-            <p class="text-muted w-responsive mx-auto mb-3">
-              {% trans %}
-              The consortium is diverse in terms of types of institutions, 
including research (TUE) and
-              applied
-              science
-              universities (BFH), small for-profit (CBG, TSYS, VV) and 
non-profit (PS) companies,
-              cooperative banks
-              (GLS, MAG), a foundation (NLnet) and grassroots movements (ESEN, 
HODI).
-              {% endtrans %}
-            </p>
-
-          </div>
-          <div class="col col-md-auto"></div>
-        </div>
+      <div class="row mb-4">
+        <div class="col col-md-auto"></div>
 
-    </section>
+        <div class="col-md-11">
+          <p class="text-muted w-responsive mx-auto mb-3">
+            {% trans %}
+            TALER consortium consists of 11 partners from 8 European countries 
(the Netherlands,
+            Belgium, France,
+            Germany, Greece, Hungary, Luxembourg and Switzerland).
+            {% endtrans %}
+          </p>
+          <p class="text-muted w-responsive mx-auto mb-3">
+            {% trans %}
+            The consortium is diverse in terms of types of institutions, 
including research (TUE) and
+            applied
+            science
+            universities (BFH), small for-profit (CBG, TSYS, VV) and 
non-profit (PS) companies,
+            cooperative banks
+            (GLS, MAG), a foundation (NLnet) and grassroots movements (ESEN, 
HODI).
+            {% endtrans %}
+          </p>
 
-    <!--Section: Content-->
-    <section class="section-consortium justify-content-md-center text-center 
dark-grey-text ">
+        </div>
+        <div class="col col-md-auto"></div>
+      </div>
 
-      <div class="container">
 
-        <div class="row row-cols-1 row-cols-md-3 g-4">
-          <!-- start -->
+      <div class="row row-cols-1 row-cols-md-3 g-4 text-center">
+        <!-- start -->
 
-          {% for partner in conf['partners'] %}
+        {% 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 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>
-
-          {% endfor %}
         </div>
+
+        {% endfor %}
       </div>
-    </section>
-    <!--Section: Content-->
+    </div>
 
   </div>
 </main>

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