Add mesocenter details with icons

content/pages/mentions_legales.rst

@@ -78,7 +78,7 @@ Mentions légales
 
       Les pictogrammes proviennent des sources suivantes :
 
-        - Pawel Rak sur `Noun Project <https://thenounproject.com/pr3113738/>`_,
+        - `Pawel Rak <https://thenounproject.com/pr3113738/>`_ et `Adi Kurniawan <https://thenounproject.com/kuradn/>`_ sur Noun Project,
         - Site `iconfinder <https://www.iconfinder.com>`_,
         - `Pierre Digonnet`_ (licence `CC-BY-4.0-FR`_).
 

content/pages/meso-details.rst

@@ -43,6 +43,7 @@ Les mésocentres en |_| France
             :GPSCoordinates: 48.805402, 2.227640
             :contactName: Fabrice Roy
             :totalCoreNumber: 5432
+            :totalStorage: 430
     
             MesoPSL est le mésocente de l'Université PSL.
 

plugins/meso_list/directives.py

@@ -61,7 +61,7 @@ class Meso(Directive):
         'url': directives.uri,
         'financersname': csv_converter,
         'location': str,
-        'gpscoordinates': str,
+        'gpscoordinates': csv_converter,
         'contactname': str,
         'contactaddress': str,
         'totalcorenumber': int,
@@ -96,18 +96,17 @@ class myHTMLTranslator(PelicanHTMLTranslator):
 
     def visit_meso_list(self, node):
         super().visit_section(node)
-        self.body.append('<div class="meso_list event">')
+        self.body.append('<div class="meso">')
 
     def depart_meso_list(self, node):
         self.body.append('</div>')
         super().depart_section(node)
 
     def visit_meso(self, node):
-        self.body.extend(self.meso_template.render(meso=node).splitlines(True))
+        self.body.extend(self.meso_template.render(meso=node, header=True).splitlines(True))
 
     def depart_meso(self, node):
-        #self.body.append('</div>')
-        pass
+        self.body.extend(self.meso_template.render(meso=node, footer=True).splitlines(True))
 
 
 # Overwrite default translator so that extensions can be chained

plugins/meso_list/templates/meso.tpl

+{% if header %}
 <div class="card">
     <div class="card-header">
         {% if meso['url'] %}
@@ -8,8 +9,8 @@
     </div>
     <div class="card-body">
         {% if meso['contactname'] %}
-            <img src="../theme/img/mail.png" alt="Contact" height="15px"/>
-            {% if meso['contactaddress'] is defined %}
+            <img src="../theme/img/mail.png" alt="Contact" />
+            {% if meso['contactaddress'] %}
             <a href="mailto:{{ meso['contactaddress'] }}">{{ meso['contactname'] }}</a>
             {% else %}
             {{ meso['contactname'] }}
@@ -17,15 +18,43 @@
             <br />
         {% endif %}
         {% if meso['institutesname'] %}
-            <img src="../theme/img/employer.png" alt="Institutions" height="15px" />
-            {% for name in meso['institutesname'] %}
-            {{ ' et ' if loop.last }}{{ name }}{{ ', ' if not loop.last }}
-            {% endfor %}
+            <img src="../theme/img/employer.png" alt="Institutions" />
+            {% for name in meso['institutesname'] -%}
+            {{ ' et ' if loop.last }}{{ ', ' if not loop.first and not loop.last }}{{ name }}
+            {%- endfor %}
+            <br />
+        {% endif %}
+        {% if meso['financersname'] %}
+            <img src="../theme/img/contract.png" alt="Financeurs" />
+            {% for name in meso['financersname'] -%}
+            {{ ' et ' if loop.last }}{{ ', ' if not loop.first and not loop.last }}{{ name }}
+            {%- endfor %}
+            <br />
+        {% endif %}
+        {% if meso['location'] %}
+            <img src="../theme/img/position_full.png" alt="Position" />
+            {% if meso['gpscoordinates'] %}
+            <a href="https://www.openstreetmap.org/#map=16/{{meso['gpscoordinates'][0]}}/{{meso['gpscoordinates'][1]}}">{{ meso['location'] }}</a>
+            {% else %}
+            {{ meso['location'] }}
+            {% endif %}
+            <br />
+        {% endif %}
+        {% if meso['totalcorenumber'] %}
+            <img src="../theme/img/cpu.png" alt="Nombre de cœurs">
+            {{ meso['totalcorenumber'] }} cœurs
+            <br />
+        {% endif %}
+        {% if meso['totalstorage'] %}
+            <img src="../theme/img/floppy.png" alt="Stockage">
+            {{ meso['totalstorage'] }} To
             <br />
         {% endif %}
     </div>
     <div class="card-footer p-0 d-flex align-items-center">
+{% endif %}
+{% if footer %}
     </div>
     </a>
 </div>
-
+{% endif %}

themes/calcul/static/css/style.css

@@ -1150,3 +1150,48 @@ a.year-toc {
 .savoirplus a {
     text-decoration: none;
 }
+
+/* mesocenters list */
+
+.meso .card a:hover {
+    color: #5b5b5b;
+}
+
+.meso .card a:hover .card-header, 
+.meso .card a:hover .card-footer,
+.meso .card a:hover #special.card-footer {
+    border-color: currentColor;
+}
+
+.meso .card-header {
+    padding-left: 0;
+    font-size: 26px;
+    font-family: 'Playfair Display';
+    font-weight: 400;
+    background-color: transparent;
+    border-bottom: 1px solid black;
+    line-height: 30px;
+}
+
+.meso .card-body {
+    padding: 3px 0px 3px 0px;
+    font-size: 14px;
+    font-family: 'Roboto', serif;
+    font-weight: 700;
+    line-height: 17px;
+}
+
+.meso .card-body img {
+    height: 15px;
+}
+
+.meso .card-footer {
+    padding-left: 0;
+    font-size: 14px;
+    font-family: 'Roboto', serif;
+    font-weight: 700;
+    background-color: transparent;
+    border-top: 1px solid black;
+    border-bottom: 10px solid black;
+    height: 57px;
+}