templates/theme/default/modele-widget/avis_block.html.twig line 1

Open in your IDE?
  1. <div class="avis-widget" {% if widget.bgcolor is defined and widget.bgcolor != null %} style="background-color: {{ widget.bgcolor }};" {% endif %}>
  2. <style>
  3. .avis-widget {
  4. margin: auto;
  5. }
  8. .avis-cards-container {
  9. display: flex;
  10. gap: 30px;
  11. justify-content: center;
  12. }
  15. .avis-author {
  16. font-size: 18px;
  17. font-weight: 700;
  18. color: #4a6c82;
  19. }
  21. .avis-ville,
  22. .avis-activite,
  23. .avis-date {
  24. font-size: 14px;
  26. margin-top: 4px;
  27. }
  29. .avis-rating {
  30. margin: 10px 0;
  31. }
  33. .star {
  34. color: #bbdefb;
  35. font-size: 18px;
  36. }
  38. .star.filled {
  39. color: #4a6c82;
  40. }
  42. .avis-comment {
  43. font-size: 15px;
  44. margin-top: 14px;
  45. line-height: 1.6;
  46. font-style: italic;
  47. }
  49. .avis-reponse {
  50. margin-top: 16px;
  51. padding: 14px;
  52. background: #e3f2fd;
  53. border-left: 4px solid #4a6c82;
  54. border-radius: 8px;
  55. }
  57. .avis-reponse-titre {
  58. font-weight: 600;
  59. font-size: 14px;
  60. margin-bottom: 6px;
  61. color: #4a6c82;
  62. }
  65. .carousel-item.active .avis-card {
  66. animation: bounceUpDown 0.7s ease forwards;
  67. }
  69. .carousel-item.active .avis-card:nth-child(2) {
  70. animation-delay: 0.2s;
  71. }
  73. .carousel-item.active .avis-card:nth-child(3) {
  74. animation-delay: 0.4s;
  75. }
  77. @keyframes bounceUpDown {
  78. 0% {
  79. opacity: 0;
  80. transform: translateY(30px);
  81. }
  82. 50% {
  83. opacity: 1;
  84. transform: translateY(-8px);
  85. }
  86. 100% {
  87. opacity: 1;
  88. transform: translateY(0);
  89. }
  90. }
  93. @media(max-width: 992px) {
  94. .avis-cards-container {
  95. flex-direction: column;
  96. align-items: center;
  97. }
  99. .avis-card {
  100. max-width: 100%;
  101. }
  102. }
  105. .carousel-control-prev,
  106. .carousel-control-next {
  107. position: absolute;
  108. right: 10px; /* les déplace complètement à droite */
  109. top: auto; /* désactive la position verticale par défaut */
  110. bottom: auto;
  111. transform: none; /* annule le centrage vertical par défaut */
  112. width: 40px;
  113. height: 40px;
  114. margin: 5px 0; /* espace entre les flèches */
  115. }
  117. .carousel-control-prev {
  118. top: 50px; /* flèche du haut */
  119. }
  121. .carousel-control-next {
  122. top: 110px; /* flèche du bas */
  123. }
  125. .carousel-control-prev-icon,
  126. .carousel-control-next-icon {
  127. border-radius: 100%
  128. }
  133. button {
  134. background: transparent !important;
  135. }
  138. .carousel-item {
  139. transition: none; /* on gère la transition via JS */
  140. display: flex;
  141. justify-content: start;
  142. }
  144. .avis-card {
  145. opacity: 0;
  146. transform: translateY(30px); /* carte initialement en bas */
  147. transition: transform 0.50s ease, opacity 0.50s ease;
  148. }
  151. .carousel-control-prev-icon {
  152. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M1 8a.5.5 0 0 1 .5-.5h10.793L9.146 4.354a.5.5 0 1 1 .708-.708l4 4a.5.5 0 0 1 0 0.708l-4 4a.5.5 0 1 1-.708-.708L12.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E") !important;
  153. transform: rotate(-90deg);
  155. }
  156. .carousel-control-next-icon {
  157. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M1 8a.5.5 0 0 1 .5-.5h10.793L9.146 4.354a.5.5 0 1 1 .708-.708l4 4a.5.5 0 0 1 0 0.708l-4 4a.5.5 0 1 1-.708-.708L12.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E") !important;
  158. transform: rotate(90deg);
  160. }
  162. .content-avis {
  163. min-height: 100%;
  164. justify-content: space-evenly;
  165. display: flex;
  166. flex-direction: column;
  167. }
  168. </style>
  169. <div class="container-fluid">
  171. <div class="row">
  174. {% if widget.bgimage %}
  176. <div class="col-lg-5 order-lg-1 order-2 d-flex justify-content-center align-items-center image-avis">
  177. <div class="avis-image">
  178. <img src="{{ asset(widget.bgimage) }}" alt="Image avis" loading="lazy">
  179. </div>
  180. {% endif %}
  181. </div>
  183. <div class="col-lg-7 order-lg-2 order-1 content-avis">
  185. <div class="avis-header">
  186. <h2>
  187. <span>{{ 'label.item_avis'|trans([],'textes') }}</span/>{{ 'label.avis_client'|trans([],'textes') }}</h3>
  190. </div>
  192. {% set avis_chunks = avis|batch(1) %}
  193. <div>
  195. <div id="avis-carousel-{{ widget.id|default('1') }}" class="carousel slide avis-carousel" data-bs-ride="carousel">
  197. <div class="carousel-inner">
  198. {% for chunk in avis_chunks %}
  199. <div class="carousel-item {% if loop.first %}active{% endif %}">
  200. <div class="avis-cards-container">
  201. {% for response in chunk %}
  202. <div class="avis-card">
  203. <strong class="avis-author">
  204. {{ response.data.nom|default('') }}
  205. {{ response.data.prenom|default('') }}
  206. </strong>
  208. {% if response.data.ville is defined and response.data.ville %}
  209. <div class="avis-ville">
  210. De :
  211. {{ response.data.ville }}
  212. </div>
  213. {% endif %}
  215. {% if response.data.activite is defined and response.data.activite %}
  216. <div class="avis-activite">
  217. {{ response.data.activite }}
  218. </div>
  219. {% endif %}
  221. {% if response.data.note is defined %}
  222. <div class="avis-rating">
  223. {% for i in 1..5 %}
  224. <span class="star {{ i <= response.data.note ? 'filled' : '' }}">★</span>
  225. {% endfor %}
  226. </div>
  227. {% endif %}
  229. {% if response.data.commentaire is defined and response.data.commentaire %}
  230. <p class="avis-comment">
  231. “{{ response.data.commentaire|nl2br }}”
  232. </p>
  233. {% endif %}
  235. {% if response.reponse is defined and response.reponse %}
  236. <div class="avis-reponse">
  237. <p class="avis-reponse-titre">
  238. Réponse de l'équipe :
  239. </p>
  240. <p>{{ response.reponse|nl2br }}</p>
  241. </div>
  242. {% endif %}
  243. </div>
  244. {% endfor %}
  245. </div>
  246. </div>
  247. {% endfor %}
  249. </div>
  251. <button class="carousel-control-prev" type="button" data-bs-target="#avis-carousel-{{ widget.id|default('1') }}" data-bs-slide="prev">
  252. <span class="carousel-control-prev-icon"></span>
  253. </button>
  255. <button class="carousel-control-next" type="button" data-bs-target="#avis-carousel-{{ widget.id|default('1') }}" data-bs-slide="next">
  256. <span class="carousel-control-next-icon"></span>
  257. </button>
  260. </div>
  262. </div>
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  269. <script>
  270. (function () {
  271. const carousel = document.getElementById('avis-carousel- {{ widget.id|default('1') }}');
  272. if (! carousel)
  273. return;
  277. carousel.addEventListener('slide.bs.carousel', function () {
  278. carousel.querySelectorAll('.avis-card').forEach(card => {
  279. card.style.opacity = '0';
  280. card.style.transform = 'translateY(25px)';
  281. });
  282. });
  283. })();
  284. </script>