iut/herbarium
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style pagination with Bootstrap

Browse Source
This commit is contained in:
Clément Fréville
2024-06-08 15:50:45 +02:00
parent 9aa8416442
commit 4a699fd0b8
5 changed files with 42 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
templates/_pagination.html.twig Normal file
View File

@@ -0,0 +1,24 @@
{% set route = app.request.attributes.get('_route') %}
<nav>
<ul class="pagination">
<li class="page-item {{ page < 2 ? 'disabled' }}">
<a class="page-link" href="{{ path(route, {'page': page - 1}) }}">Previous</a>
</li>
{% if page > 1 %}
<li class="page-item">
<a class="page-link" href="{{ path(route, {'page': page - 1}) }}">{{ page - 1 }}</a>
</li>
{% endif %}
<li class="page-item active" aria-current="page">
<a class="page-link">{{ page }}</a>
</li>
{% if page + 1 <= maxPage %}
<li class="page-item">
<a class="page-link" href="{{ path(route, {'page': page + 1}) }}">{{ page + 1 }}</a>
</li>
{% endif %}
<li class="page-item {{ page + 1 > maxPage ? 'disabled' }}">
<a class="page-link" href="{{ path(route, {'page': page + 1}) }}">Next</a>
</li>
</ul>
</nav>

3
templates/base.html.twig
View File

@@ -4,9 +4,8 @@
<meta charset="UTF-8">
<title>{% block title %}Welcome to Herbarium!{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
{% block stylesheets %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
{% endblock %}
{% block javascripts %}

24
templates/post/index.html.twig
View File

@@ -2,35 +2,19 @@
{% block title %}Posts!{% endblock %}
{% block body %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html>
<a href="/species/add" class="btn btn-primary">Ajouter une espèce</a>
<a href="/post/add" class="btn btn-primary">Ajouter un post</a>
{% for post in posts.iterator %}
<div class="card" style="width: 42rem; margin: 20px 0 50px 100px;">
<div class="card-body">
<h5 class="card-title">User</h5>
<h5 class="card-title">{{ post.species ? post.species.vernacularName : 'Post' }}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{ post.foundDate | date("d/m/Y \\à H \\h") }}</h6>
<p class="card-subtitle mb-2 text-muted">{{ post.latitude }}, {{ post.longitude }}, {{ post.altitude }}m</p>
<p class="card-text">{{ post.commentary }}</p>
</div>
<div class="card-footer">
<a class="fa fa-heart">28</a>
<a class="fa fa-comment">128</a>
28 ❤️
128 💬
</div>
</div>
{% endfor %}
{% if posts.count > maxPosts %}
<a class="btn btn-primary" href="/?page={{currentPage+1}}" id="load-more" style="margin: 20px 0 50px 100px;">Load More</a>
{% endif %}
{% include '_pagination.html.twig' %}
{% endblock %}