correctif organisation des modales d'inscription

- affichage des genres du jeu et recommendation d'âge dans la
description du jeu
- panel pour le MJ
- meilleur visualisation de l'horaire / lieu

templates/participation/_modal.add.html.twig

@@ -17,70 +17,79 @@
 
 {% block content %}
   <div class="content">
-    <div class="columns">
-      <div class="column has-text-right is-one-quarter">
-        <strong>Horaires</strong>
-      </div>
-    <div class="column has-text-left">
-        le {{ party.getStartOn|date('d/m/Y \\d\\e H:i', app_timezone)}} à {{ party.getEndOn|date('H:i', app_timezone)}}
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column has-text-right is-one-quarter">
-        <strong>Espace</strong>
-      </div>
-      <div class="column has-text-left">
-        {{ party.getSlots.first.getSpace.getName }}
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column has-text-right is-one-quarter">
-        <strong>Meneur(euse)</strong>
-      </div>
-      <div class="column has-text-left">
-        <span class="icon">
-            <figure class="image is-24x24 is-inline-block">
-            {% if party.getGamemaster.picture %}
-            <img class="is-rounded" src="/images/gamemasters/{{ party.getGamemaster.picture }}" />
-            {% else %}
-            <twig:ux:icon name="bi:person-fill"/>
-            {% endif %}
-            </figure>
-        </span> 
-        {{ party.getGamemaster.getPreferedName }}{% if party.gamemasterIsAuthor %} / auteur(rice) du jeu{% endif %}
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column has-text-right is-one-quarter">
-        <strong>Âge</strong>
-      </div>
-      <div class="column has-text-left">
-        {{ party.getGame.getAgeRecommendationLabel }}
-      </div>
-    </div>
-  </div>
+
+  		<div class="cell message">
+  			<div class="message-header">
+  				<p>Horaires et espace</p>
+  			</div>
+  			<div class="message-body">
+  				<p>le {{ party.getStartOn|date('d/m/Y \\d\\e H:i', app_timezone)}} à {{ party.getEndOn|date('H:i', app_timezone)}} • {{ party.getSlots.first.getSpace.getName }}</p>
+  			</div>
+  		</div>
+
+
+  		
+
+</div>
 
  <div class="tabs is-boxed" {{ stimulus_controller('bulma_tabs') }}>
    <ul>
      <li class="is-active" data-id="tab-1"><a>Le jeu</a></li>
-     {% if party.getDescription %}<li data-id="tab-2"><a>Le scénario</a></li>{% endif %}
-     {% if party.getSeatsLeft > 0 %}{% if party.getEndOn > date() or is_granted('ROLE_MANAGER') %}<li data-id="tab-3"><a>S'incrire</a></li>{% endif %}{% endif %}
+     <li data-id="tab-2"><a>Le(a) MJ</a></li>
+     {% if party.getDescription %}<li data-id="tab-3"><a>Le scénario</a></li>{% endif %}
+     {% if party.getSeatsLeft > 0 %}{% if party.getEndOn > date() or is_granted('ROLE_MANAGER') %}<li data-id="tab-4"><a>S'incrire</a></li>{% endif %}{% endif %}
    </ul>
  </div>
  
  <div id="tabs-content">
     <div class="container" id="tab-1">
       <p>{{ party.getGame.getDescription }}</p>
+      
+		<div class="cell message">
+  			<div class="message-header">
+  				<p>À propos du jeu</p>
+  			</div>
+  			<div class="message-body">
+  			{% if party.gamemasterIsAuthor %}<p>Partie animée par son auteur(rice)</p>{% endif %}
+  				<p><strong>Âge recommandé : </strong>{{ party.getGame.getAgeRecommendationLabel }}</p>
+  				
+  				<p><strong>Genres : </strong>{{ party.getGame.getGenre| join(", ") }}
+  			</div>
+  		</div>
+      
     </div>
-    {% if party.getDescription %}
+
     <div class="container is-hidden" id="tab-2">
+   		<article class="media">
+          <figure class="media-left">
+            <p class="image is-128x128">
+                {% if party.getGamemaster.picture %}
+                <img class="is-rounded" src="/images/gamemasters/{{ party.getGamemaster.picture }}" />
+                {% else %}
+                <twig:ux:icon name="bi:person-fill"/>
+                {% endif %}
+            </p>
+          </figure>
+          <div class="media-content">
+            <div class="content">
+            <h4>{{ party.getGamemaster.getPreferedName }}{% if party.gamemasterIsAuthor %} / auteur(rice) du jeu{% endif %}</h4>
+              <p>
+               {{ party.getGamemaster.description }}
+              </p>
+        
+            </div>
+          </div>
+	    </article>
+    </div>
+    {% if party.getDescription %}
+    <div class="container is-hidden" id="tab-3">
       <p>{{ party.getDescription }}</p>
       
     </div>
     {% endif %}
     {% if party.getSeatsLeft > 0 %}
       {% if party.getEndOn > date() or is_granted('ROLE_MANAGER') %}
-    <div class="container is-hidden" id="tab-3">
+    <div class="container is-hidden" id="tab-4">
     
     {{ form_errors(form) }}
     {{ form_start(form, {action: path(pathController, {id: party.slots.first.getId}), attr: {'data-turbo-frame': 'modal-content'}}) }}