templates/livre/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Livre index{% endblock %}
  5. {% block body %}
  7. <style>
  8. .filter .form-group {
  9.     width: 33%;
  10.     display: inline-block;
  11. }
  12. .filter{
  13.     max-width: none;
  14. }
  15. .form-control{
  16.     border-radius: 2.25rem;
  17. }
  18. </style>
  19.     <div id="cover">
  20.         {{form_start(form,{attr:{class:'filter'}})}}
  21.         {{form_row(form.q,{attr:{class:''}})}}
  22.         {{form_row(form.categories,{attr:{class:''}})}}
  23.         {# {{form_row(form.ville,{attr:{class:''}})}} #}
  24.         <div class="form-group">
  25.         <button type="submit" class="btn form-control btn-primary" style="padding:0;">{% trans %}Search{% endtrans %}
  26.             <!--i class="fa fa-search" aria-hidden="true"></i-->
  27.         </button></div>
  28.         {{form_end(form, {'render_rest': false})}}
  29.     </div>
  30.     <hr style="display: inline-block;margin-top: 300px;">
  31.     <h1><b>{% trans %}New books{% endtrans %}</b></h1>
  32.     <div class="scrollmenu" id="scrollmenu">
  33.     {% for livre in lastbooks %}
  34.     <div class="card draggable">
  35.         <a class="" href="{{ path('app_livre_show', {'id': livre.id}) }}">
  36.             <img alt="" src="/uploads/{{ livre.photo }}" onerror="this.src='/img/book.avif'" class="height-grid-card" style="height:100%;">
  37.             <div class="card-body p-0">
  38.                 <h6 class="primary-color card-title font-weight-bold">{{ livre.titre }}</h6>
  39.             </div>
  40.         </a>
  41.         </div>
  42.     {% endfor %}
  43.     </div>
  46.     <h1><b>{% trans %}Available books{% endtrans %}</b></h1>
  47.     <div class="row">
  48.     <div class="grid box">
  49.     {% for livre in livres %}
  50.         <div class="card">
  51.         <a class="favori-icon" href="{{ path('addfavori', {'id': livre.id}) }}"> <i class="fa fa-heart" aria-hidden="true"></i> </a>
  52.         <a class="" href="{{ path('app_livre_show', {'id': livre.id}) }}">
  53.             <img alt="" src="/uploads/{{ livre.photo }}" onerror="this.src='/img/book.avif'" class="height-grid-card" style="height:100%;">
  54.             <div class="card-body p-2">
  55.                 <h2 class="primary-color card-title font-weight-bold">{{ livre.titre }}</h2>
  56.                 {# <span class="new-secondary text-secondary small-text">
  58.                         {{ livre.description|slice(0, 250) }}
  59.                         {% if livre.description|length > 250 %}
  60.                         <span id="dots_{{ loop.index }}">...</span>{% endif %}
  61.                         <span id="more_{{ loop.index }}" style="display: none;">{{ livre.description|slice(250) }}</span>
  62.                         {% if livre.description|length > 250 %}
  63.                     <a style="text-decoration: underline; cursor: pointer;color: #320258;" onclick="myFunction('{{ loop.index }}')" id="myBtn_{{ loop.index }}">Lire plus</a>
  64.                     {% endif %}
  65.                 </span> #}
  66.                 {% trans %}Author{% endtrans %} : {{ livre.auteur }}<br>
  67.                 {% trans %}Language{% endtrans %} : {{livre.language}}<br>
  68.                 {% trans %}Country{% endtrans %} : {{livre.user.country}}
  69.                 <div class="par">user : <a class="primary-color" href="{{ path('app_user_show', {'id': livre.user.id}) }}">{{ livre.user.username }}</a></div>
  70.             </div>
  71.             {# <div class="body2">
  72.                 <span class="card-title price float-left" > {{ livre.prix }} Dhs    / Séance</span> #}
  73.                 {# <button type="button" class="btn btn-success">Réserver une séance</button>
  74.                 <a class="btn btn-success"href="{{ path('app_livre_show', {'id': livre.id}) }}">
  75.                     See the book
  76.                 </a>
  77.                 <span class="text-center p-2"><span class="fa fa-star checked"></span>
  78.                     <span class="fa fa-star checked"></span>
  79.                     <span class="fa fa-star checked"></span>
  80.                     <span class="fa fa-star checked"></span>
  81.                     <span class="fa fa-star {{ random(['', 'checked']) }}"></span>
  82.                 </span>
  83.             </div> #}
  84.         </a>
  85.         </div>
  86.     {% endfor %}
  87.     </div>
  88.     </div>
  89.     {# <div class="side-bar card">
  90.         <button type="button" class="btn btn-success">Réserver le livre</button>
  91.         
  92.     </div> #}
  93.     {{knp_pagination_render(livres)}}
  96. <script>
  97. function myFunction(id) {
  98.     var dotsElement = document.getElementById('dots_' + id);
  99.     var moreTextElement = document.getElementById('more_' + id);
  100.     var btnTextElement = document.getElementById('myBtn_' + id);
  102.     if (dotsElement.style.display === 'none') {
  103.         dotsElement.style.display = 'inline';
  104.         btnTextElement.innerHTML = 'Lire plus';
  105.         moreTextElement.style.display = 'none';
  106.     } else {
  107.         dotsElement.style.display = 'none';
  108.         btnTextElement.innerHTML = 'Lire moins';
  109.         moreTextElement.style.display = 'inline';
  110.     }
  111. }
  112. </script>
  113. <script>
  114. var menu = document.getElementById("scrollmenu");
  115. var isDragging = false;
  116. var startX, scrollLeft;
  118. menu.addEventListener("mousedown", startDrag);
  119. menu.addEventListener("touchstart", startDrag);
  120. document.addEventListener("mouseup", stopDrag);
  121. document.addEventListener("touchend", stopDrag);
  122. menu.addEventListener("mousemove", dragMenu);
  123. menu.addEventListener("touchmove", dragMenu);
  125. function startDrag(e) {
  126.   isDragging = true;
  127.   startX = e.pageX || e.touches[0].pageX;
  128.   scrollLeft = menu.scrollLeft;
  129.   menu.style.cursor = "grabbing";
  130. }
  132. function stopDrag() {
  133.   isDragging = false;
  134.   menu.style.cursor = "grab";
  135. }
  137. function dragMenu(e) {
  138.   if (!isDragging) return;
  139.   e.preventDefault();
  140.   var x = e.pageX || e.touches[0].pageX;
  141.   menu.scrollLeft = scrollLeft - (x - startX) * 2; // Adjust scroll speed here
  142. }
  143. </script>
  145. {% endblock %}