commit 4f824d1b76209e87ebd72528cfcbd520978bd9b0
parent cfc386ed7444aa694acdf8fd2c3f1f4781d0cdf9
Author: Andreas HABEGGER <andreas.habegger@bfh.ch>
Date: Tue, 21 Nov 2023 11:04:17 +0100
UC: Improved grid layout; Added scrollable list for deliverables
Diffstat:
2 files changed, 176 insertions(+), 131 deletions(-)
diff --git 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
@@ -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>
