mise a jout du site

templates/salles/show.html.twig

@@ -6,37 +6,38 @@
 
 <main class="bg-[#FFFF]">
     <h3 class="flex justify-center my-7 text-4xl">{{salle.nom}}</h3> 
-    <section class="flex justify-center">
-        <img class="h-48 mr-4 sm:flex-col" src="{{ salle.img }}" alt="{{ salle.alt }}" >
-        <div class='w-[400px] h-[400px] rounded-3xl border-8 border-[#5C9EAD] ' id="carte">Carte</div>
-        <p class="hidden position">{{ salle.positionGPS }}</p>
-        <p class="hidden parcours">{{ salle.parcours }}</p>
-    </section>
-    <p class="mx-10 w-4/5">{{ salle.description }}</p>
+<section class="flex flex-col md:flex-row justify-center md:gap-6 gap-6 m-2">
+    <img class="h-48 mr-4 md:mr-0 md:mb-4" src="{{ salle.img }}" alt="{{ salle.alt }}">
+    <div class="w-full md:w-1/2 h-[400px] rounded-3xl border-8 border-[#5C9EAD] flex items-center justify-center" id="carte">Carte</div>
+    <p class="hidden position">{{ salle.positionGPS }}</p>
+    <p class="hidden parcours">{{ salle.parcours }}</p>
+</section>
+<p class="w-fit text-center md:w-full mb-[120px] px-10">{{ salle.description }}</p>
 
-    <section>
-    <h4 class="bg-[#326273] py-4 text-[#FFFFFF] rounded-r-lg my-8 w-96 pl-8 pr-4 text-3xl ">Concert à venir dans cette salle</h4>
+<section class="mb-[120px]">
+    <h4 class="bg-[#326273] py-4 text-[#FFFFFF] rounded-r-lg my-8 w-96 md:w-96 text-right pl-8 pr-4 text-3xl">Concert ?  venir dans cette salle</h4>
     <div class="slider">
         {% for concerts in salle.concerts %}
-            <div class="slide">
-                <a href="{{ path('app_concerts_show', {'id': concerts.id}) }}"><img src="{{ concerts.img }}" ></a>
-            </div>
+        <div class="slide">
+            <a href="{{ path('app_concerts_show', {'id': concerts.id}) }}"><img src="{{ concerts.img }}"></a>
+        </div>
         {% endfor %}
         <button class="btn-slide prev"><i class="bi bi-arrow-left-circle-fill"></i></button>
         <button class="btn-slide next"><i class="bi bi-arrow-right-circle-fill"></i></button>
     </div>
-    <div class="dots-container">
+    <div class="dots-container flex justify-center">
         {% for i in 0..salle.concerts|length-1 %}
-            <span class="dot {% if i == 0 %}active{% endif %}" data-slide="{{ i }}"></span>
+        <span class="dot {% if i == 0 %}active{% endif %}" data-slide="{{ i }}"></span>
         {% endfor %}
     </div>
+
 </section>
 
 
 
     
     <section class="flex flex-col gap-6">
-        <h4 class="bg-[#326273] py-4 text-[#FFFFFF] rounded-r-lg my-8 w-96 pl-8 pr-4 text-3xl">Commentaires</h4>
+        <h4 class="bg-[#326273] text-right py-4 text-[#FFFFFF] rounded-r-lg my-8 w-96 pl-8 pr-4 text-3xl">Commentaires</h4>
 
         {% for commentaires in salle.commentaires %}
             <article class="self-center flex flex-col text-center rounded-lg w-96 bg-[#EEEEEE] p-2 my-3">
@@ -72,4 +73,4 @@
 <script src="{{ asset('js/salle.js') }}"></script>
 <script src="{{ asset('js/slider.js') }}"></script>
 
-{% endblock %}
+{% endblock %}
\ No newline at end of file