templates/front/includes/courses/_course_reviews.html.twig line 1

  1. <!-- Review START -->
  2. <div class="row mb-4">
  3.     <h5 class="mb-4">Our Student Reviews</h5>
  5.     <!-- Rating info -->
  6.     <div class="col-md-4 mb-3 mb-md-0">
  7.         <div class="text-center">
  8.             <!-- Info -->
  9.             <h2 class="mb-0">{{ course.review / nbReviews }}</h2>
  10.             <!-- Star -->
  11.             <ul class="list-inline mb-0">
  12.                 {% for cmp in 1..(course.review / nbReviews) %}
  13.                     <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  14.                 {% endfor %}
  15.                 {% if course.review / nbReviews  < 5 %}
  16.                     {% for cmp in (course.review / nbReviews)..4 %}
  17.                         <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  18.                     {% endfor %}
  19.                 {% endif %}
  20.             </ul>
  21.             <p class="mb-0">(Based on todays review)</p>
  22.         </div>
  23.     </div>
  25.     <!-- Progress-bar and star -->
  26.     <div class="col-md-8">
  27.         <div class="row align-items-center text-center">
  28.             <!-- Progress bar and Rating -->
  29.             <div class="col-6 col-sm-8">
  30.                 <!-- Progress item -->
  31.                 <div class="progress progress-sm bg-warning bg-opacity-15">
  32.                     <div class="progress-bar bg-warning" role="progressbar" style="width: {{ (fiveStarsReviews|length / nbReviews) * 100 }}%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  33.                     </div>
  34.                 </div>
  35.             </div>
  37.             <div class="col-6 col-sm-4">
  38.                 <!-- Star item -->
  39.                 <ul class="list-inline mb-0">
  40.                     {% for i in 1..5 %}
  41.                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  42.                     {% endfor %}
  43.                 </ul>
  44.             </div>
  46.             <!-- Progress bar and Rating -->
  47.             <div class="col-6 col-sm-8">
  48.                 <!-- Progress item -->
  49.                 <div class="progress progress-sm bg-warning bg-opacity-15">
  50.                     <div class="progress-bar bg-warning" role="progressbar" style="width: {{ (fourStarsReviews|length / nbReviews) * 100 }}%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
  51.                     </div>
  52.                 </div>
  53.             </div>
  55.             <div class="col-6 col-sm-4">
  56.                 <!-- Star item -->
  57.                 <ul class="list-inline mb-0">
  58.                     {% for i in 1..4 %}
  59.                         <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  60.                     {% endfor %}
  61.                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  62.                 </ul>
  63.             </div>
  65.             <!-- Progress bar and Rating -->
  66.             <div class="col-6 col-sm-8">
  67.                 <!-- Progress item -->
  68.                 <div class="progress progress-sm bg-warning bg-opacity-15">
  69.                     <div class="progress-bar bg-warning" role="progressbar" style="width: {{ (treeStarsReviews|length / nbReviews) * 100 }}%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  70.                     </div>
  71.                 </div>
  72.             </div>
  74.             <div class="col-6 col-sm-4">
  75.                 <!-- Star item -->
  76.                 <ul class="list-inline mb-0">
  77.                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  78.                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  79.                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  80.                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  81.                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  82.                 </ul>
  83.             </div>
  85.             <!-- Progress bar and Rating -->
  86.             <div class="col-6 col-sm-8">
  87.                 <!-- Progress item -->
  88.                 <div class="progress progress-sm bg-warning bg-opacity-15">
  89.                     <div class="progress-bar bg-warning" role="progressbar" style="width: {{ (twoStarsReviews|length / nbReviews) * 100 }}%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  90.                     </div>
  91.                 </div>
  92.             </div>
  94.             <div class="col-6 col-sm-4">
  95.                 <!-- Star item -->
  96.                 <ul class="list-inline mb-0">
  97.                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  98.                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  99.                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  100.                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  101.                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  102.                 </ul>
  103.             </div>
  105.             <!-- Progress bar and Rating -->
  106.             <div class="col-6 col-sm-8">
  107.                 <!-- Progress item -->
  108.                 <div class="progress progress-sm bg-warning bg-opacity-15">
  109.                     <div class="progress-bar bg-warning" role="progressbar" style="width: {{ (oneStarReviews|length / nbReviews) * 100 }}%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  110.                     </div>
  111.                 </div>
  112.             </div>
  114.             <div class="col-6 col-sm-4">
  115.                 <!-- Star item -->
  116.                 <ul class="list-inline mb-0">
  117.                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  118.                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  119.                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  120.                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  121.                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  122.                 </ul>
  123.             </div>
  124.         </div>
  125.     </div>
  126. </div>
  127. <!-- Review END -->
  129. <!-- Student review START -->
  130. <div class="row">
  131.     {% for review in course.reviews %} 
  132.         <!-- Review item START -->
  133.         <div class="d-md-flex my-4">
  134.             <!-- Avatar -->
  135.             <div class="avatar avatar-xl me-4 flex-shrink-0">   
  136.                 <img class="avatar-img rounded-circle" src="{{ asset('uploads/images/eleves/' ~ review.eleve.utilisateur.personne.avatar) }}" alt="avatar">
  137.             </div>
  138.             <!-- Text -->
  139.             <div>
  140.                 <div class="d-sm-flex mt-1 mt-md-0 align-items-center">
  141.                     <h5 class="me-3 mb-0">{{ review.eleve.utilisateur.personne.nomComplet }}</h5>
  142.                     <!-- Review star -->
  143.                     <ul class="list-inline mb-0">
  144.                         {% for i in 1..review.rating %}
  145.                             <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  146.                         {% endfor %}
  147.                         {% if review.rating < 5 %}
  148.                             {% for i in review.rating..4 %}
  149.                                 <li class="list-inline-item me-0"><i class="far fa-star text-warning"></i></li>
  150.                             {% endfor %}
  151.                         {% endif %}
  152.                         
  153.                     </ul>
  154.                 </div>
  155.                 <!-- Info -->
  156.                 <p class="small mb-2">{{ review.createdAt|date('d/m/Y - H:i:s') }}</p>
  157.                 <p class="mb-2">{{ review.message }}</p>
  159.             </div>
  160.         </div>
  161.         <!-- Divider -->
  162.         <hr>
  163.     {% endfor %}
  164. </div>
  165. <!-- Student review END -->
  166. {% if app.user and app.user.eleve is not same as null and course in app.user.eleve.cours %}
  167.     <!-- Leave Review START -->
  168.     <div class="mt-2">
  169.         <h5 class="mb-4">Leave a Review</h5>
  170.         {# <form class="row g-3"> #}
  171.         {{ form_start(fromReview, {'attr': {'class': 'row g-3'}}) }}
  172.             <!-- Rating -->
  173.             <div class="col-12">
  174.                 {{ form_widget(fromReview.rating) }}
  175.             </div>
  176.             <!-- Message -->
  177.             <div class="col-12">
  178.                 {{ form_widget(fromReview.message) }}
  179.             </div>
  180.             <!-- Button -->
  181.             <div class="col-12">
  182.                 <button type="submit" class="btn btn-primary mb-0">Post Review</button>
  183.             </div>
  184.         {{ form_end(fromReview) }}
  185.     </div>
  186.     <!-- Leave Review END -->
  187. {% endif %}