Commit 28544f97 authored by Roland Denis's avatar Roland Denis

Nicer meso card with collapsible content

parent 67753c5b
Pipeline #6063 passed with stages
in 57 seconds
......@@ -2,15 +2,29 @@
<div class="meso">
<div class="card">
<div class="card-header">
<h4>
{% if meso['url'] %}
<a href="{{ meso['url'] }}">{{ meso['name'] }}</a>
{% else %}
{{ meso['name'] }}
{% endif %}
{% if meso['gpscoordinates'] %}
<div>
<a href="https://www.openstreetmap.org/?mlat={{meso['gpscoordinates'][0]}}&mlon={{meso['gpscoordinates'][1]}}&zoom=16">
<img src="../theme/img/position_full.png" alt="Position" title="Position" />
</a>
</div>
{% endif %}
</h4>
<p>
{% endif %}
{% if footer %}
</p>
</div>
<div class="card-body">
<div class="plus-minus plus" onclick="$(this).closest('.card-body').find('.collapse').collapse('toggle'); $(this).toggleClass('plus minus')"></div>
{% if meso['contactname'] %}
<p><img src="../theme/img/mail.png" alt="Contact" />
<p><img src="../theme/img/mail.png" alt="Contact" title="Contact" />
{% if meso['contactaddress'] %}
<a href="mailto:{{ meso['contactaddress'] }}">{{ meso['contactname'] }}</a>
{% else %}
......@@ -19,43 +33,37 @@
</p>
{% endif %}
{% if meso['institutesname'] %}
<p><img src="../theme/img/employer.png" alt="Institutions" />
<p><img src="../theme/img/employer.png" alt="Institutions" title="Institutions" />
{% for name in meso['institutesname'] -%}
{{ ' et ' if loop.last }}{{ ', ' if not loop.first and not loop.last }}{{ name }}
{%- endfor %}
</p>
{% endif %}
{% if meso['financersname'] %}
<p><img src="../theme/img/contract.png" alt="Financeurs" />
<p class="collapse"><img src="../theme/img/piggy_bank.png" alt="Financeurs" title="Financeurs" />
{% for name in meso['financersname'] -%}
{{ ' et ' if loop.last }}{{ ', ' if not loop.first and not loop.last }}{{ name }}
{%- endfor %}
</p>
{% endif %}
{% if meso['location'] %}
<p><img src="../theme/img/position_full.png" alt="Position" />
{% if meso['gpscoordinates'] %}
<a href="https://www.openstreetmap.org/?mlat={{meso['gpscoordinates'][0]}}&mlon={{meso['gpscoordinates'][1]}}&zoom=16">{{ meso['location'] }}</a>
{% else %}
{{ meso['location'] }}
{% endif %}
{% if meso['accesspolicy'] %}
<p class="collapse"><img src="../theme/img/contract.png" alt="Conditions d'accès" title="Conditions d'accès" />
{{ meso['accesspolicy'] }}
</p>
{% endif %}
</div>
<div class="card-footer row">
{% if meso['totalcorenumber'] %}
<p><img src="../theme/img/cpu.png" alt="Nombre de cœurs" />
<p class="col-sm"><img src="../theme/img/cpu.png" alt="Nombre de cœurs" />
{{ meso['totalcorenumber'] }} cœurs
</p>
{% endif %}
{% if meso['totalstorage'] %}
<p><img src="../theme/img/floppy.png" alt="Stockage" />
<p class="col-sm"><img src="../theme/img/floppy.png" alt="Stockage" />
{{ meso['totalstorage'] }} To
</p>
{% endif %}
</div>
<div class="card-footer p-0 d-flex align-items-center">
{% endif %}
{% if footer %}
</div>
</div>
</div>
{% endif %}
......@@ -1165,14 +1165,33 @@ a.year-toc {
.meso .card-header {
padding-left: 0;
font-size: 26px;
font-family: 'Playfair Display';
font-weight: 400;
padding-right: 0;
background-color: transparent;
border-bottom: 1px solid black;
line-height: 30px;
}
.meso .card-header h4 {
font-size: 26px;
font-family: 'Playfair Display';
font-weight: 400;
}
/* location icon */
.meso .card-header h4 div {
float: right;
}
.meso .card-header h4 div img {
height: 1em;
}
/* meso description */
.meso .card-header p {
margin: 0em 0em 0em 2em;
}
/* meso adminitrative description */
.meso .card-body {
padding: 0px;
font-size: 14px;
......@@ -1180,7 +1199,26 @@ a.year-toc {
font-weight: 700;
}
.meso .card-body img {
.meso .card-body .plus-minus {
float: right;
cursor: pointer;
width: 1em;
height: 1em;
display: block;
margin: 1px;
}
.meso .card-body .plus {
background: url(../img/plus.png) no-repeat;
background-size: 100%;
}
.meso .card-body .minus {
background: url(../img/minus.png) no-repeat;
background-size: 100%;
}
.meso .card img {
height: 15px;
vertical-align: text-top;
}
......@@ -1189,6 +1227,7 @@ a.year-toc {
margin-bottom: 0px;
}
/* meso technical description */
.meso .card-footer {
padding-left: 0;
font-size: 14px;
......@@ -1197,9 +1236,15 @@ a.year-toc {
background-color: transparent;
border-top: 1px solid black;
border-bottom: 10px solid black;
height: 57px;
margin-left: 0;
margin-right: 0;
padding-bottom: 0;
}
.region h3 {
margin: 3em 2em 1em 2em;
}
.meso .hidden {
display: none;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment