➕ Ajout de datatable

Fixes #280

CHANGELOG.md

@@ -11,6 +11,7 @@ Une version intermédiaire, pour préparer le portage d'Erratum sous Pélican.
 
 ### Ajouté
 
+- [ui] Ajout des data-tables pour mieux afficher les tableaux
 - [bonus] Ajout des niveaux
 - [bonus] Remise du jeu de figurine
 

_includes/layouts/layout.njk

@@ -13,8 +13,9 @@
 
 		{#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
 		<meta name="generator" content="{{ eleventy.generator }}">
+		<script src="/js/datatables.js"></script>
 
-		{%- css %}{% include "public/css/index.css" %}{% endcss %}
+		{%- css %}{% include "public/css/index.css" %}{% include "public/css/datatables.css" %}{% endcss %}
 		<style>{% getBundle "css" %}</style>
 
 	</head>
@@ -62,5 +63,25 @@
 		<button id="mobile-button" class="menu-button"><svg class="icon icon-bars" alt=""><use xlink:href="#icon-bars"></use></svg> <span class="sr-only">Afficher le menu</span></button>
 
 		<script src="/js/mobile-sidebar.js"></script>
+		<script>
+			const myTables = document.querySelectorAll(".dataTable table");
+
+			console.log(myTables);
+
+			if (myTables) {
+				let labels = {
+						placeholder: "Chercher...",
+						searchTitle: "Chercher dans le tableau",
+						perPage: "lignes par page",
+						noRows: "Aucune lignée trouvée",
+						info: "Résultats {start} à {end} sur {rows}",
+						noResults: "Aucun résultat ne correspond à votre recherche",
+				};
+				myTables.forEach((myTable) => {
+					let dataTable = new simpleDatatables.DataTable(myTable, {labels});
+				});
+				
+			}
+		</script>
 	</body>
 </html>

content/rules/inventaire.md

@@ -26,6 +26,8 @@ En plus de cela, il est possible d'imaginer des *baguettes magiques* qui attaque
 
 Voici un petit tableau d'armes de bases :
 
+<div class="dataTable">
+
 | Nom | Type | Mains | Effet | Force | Prix |
 |:------:|:------:|:------:|:------:|:------:|:------:|
 | Mains | CaC | 2 | Comptent comme main nue. Non-Lethal | 0 | 0 |
@@ -60,6 +62,8 @@ Voici un petit tableau d'armes de bases :
 | Fusil automatique | Arme à feu | 2 | -50% en PER; Réussite de DEF/2 | 9 | 1200 |
 | Fusil à double canon | Arme à feu | 2 | -50% en PER; Doit être rechargé tout les tirs ; Réussite de DEF/2 | 12 | 1200 |
 
+</div>
+
 ## Boucliers
 
 Les boucliers permettent de diminuer les dégats si un jet d'encaissement est réussi, en ajoutant leur puissance de protection à l'armure physique ou magique du personnage.
@@ -96,6 +100,8 @@ Les armes et boucliers peuvent avoir un ou des effet(s) supplémentaire(s).
 
 Les tenues sont un équipement offrant protection et effets divers à votre personnage. Les personnages ne peuvent porter qu'une tenues à la fois, il peut être donc intéressant d'adapter sa tenue aux circonstances. Les tenues se divisent principalement en deux types : Les vêtements (qui apportent peu de protection, mais des effets utiles) ou les armures (qui ont moins d'effets, mais plus de protection).
 
+<div class="dataTable">
+
 | Nom | Effet | Physique | Spécial | Prix |
 |:------:|:------:|:------:|:------:|:------:|
 | Vêtements communs | | 1 | 1 | 200 |
@@ -117,6 +123,8 @@ Les tenues sont un équipement offrant protection et effets divers à votre pers
 | Armure | -25 % DIS et HAB | 5 | 2 | 950 |
 | Armure Lourde | -40 % DIS et HAB | 7 | 3 | 1200 |
 
+</div>
+
 \* Les bonus de boost d'armure physique renforce cet élément
 
 Les armures peuvent avoir les effets suivants :
@@ -142,7 +150,7 @@ Les armures peuvent avoir les effets suivants :
 
 Les accessoires sont des objets limités aux nombre de deux, qui peuvent améliorer un personnages. A noter que ces accessoires ne sont que des exemples, et que la liste sera très variable selon les JDRs.
 
-<div class="dataTable-containeur">
+<div class="dataTable">
 
 | Accessoire | Effet | Prix |
 |:----------:|:------|:----:|
@@ -167,6 +175,8 @@ Les accessoires sont des objets limités aux nombre de deux, qui peuvent amélio
 
 Les objets peuvent être stocké dans l'inventaire de votre personnage et utilisé quand le besoin s'en fait sentir. Certains objets sont consommable, d'autres sont réutilisable, et divers effets peuvent exister pouvant être utile.
 
+<div class="dataTable">
+
 | Objet | Effet | Prix |
 |:----------:|:------|:----:|
 | Nécessaire de camping | Permet de loger un petit groupe de personne (4~5). Réutilisable, mais prend de la place et doit prendre du temps pour être remonté | 200 |
@@ -187,4 +197,6 @@ Les objets peuvent être stocké dans l'inventaire de votre personnage et utilis
 | Remontant | Retire l'effet *terreur* | 10 |
 | Torche | Permet d'éclairer les lieux | 5 |
 | Cordes | Permet d'attacher | 5 |
-| Explosif | Fait 8 dégats d'explosion de zone | 40 |
+| Explosif | Fait 8 dégats d'explosion de zone | 40 |
+
+</div>

content/rules/personnages.md

@@ -162,6 +162,8 @@ Chaque trait offre :
 
 Si une personnalité doit être choisi au hasard, alors le jet suivant est fait 1D4 pour la dizaine, et 1D10 pour l'unité.
 
+<div class="dataTable">
+
 | Nom | +20 | +10 | -10 |
 |:----|:---:|:---:|:---:|
 | **Costaud** | FOR | CON | HAB |
@@ -202,4 +204,6 @@ Si une personnalité doit être choisi au hasard, alors le jet suivant est fait
 | **Bidouilleur** | PER | HAB | CHA |
 | **Observeur** | PER | SAG | CON |
 | **Traqueur/Chasseur** | PER | FOR | INT |
-| **Espion** | PER | DIS | FOR |
+| **Espion** | PER | DIS | FOR |
+
+</div>

public/css/datatables.css

@@ -0,0 +1,208 @@
+.datatable-top,
+.datatable-bottom {
+  padding: 8px 0px;
+}
+
+.datatable-top>nav:first-child,
+.datatable-top>div:first-child,
+.datatable-bottom>nav:first-child,
+.datatable-bottom>div:first-child {
+  float: left;
+}
+
+.datatable-top>nav:last-child,
+.datatable-top>div:last-child,
+.datatable-bottom>nav:last-child,
+.datatable-bottom>div:last-child {
+  float: right;
+}
+
+.datatable-selector {
+  padding: 6px;
+  border-radius: 6px;
+  border:0;
+  background-color: rgba(0,0,0,0.1);
+  color:var(--text-color)
+}
+
+.datatable-input {
+  padding: 6px 12px;
+  background-color:rgba(0, 0, 0, 0.1);
+  color: var(--text-color);
+  border:none;
+  border-radius:6px;
+}
+
+.datatable-info {
+  margin: 7px 0;
+}
+
+/* PAGER */
+.datatable-pagination ul {
+  margin: 0;
+  padding-left: 0;
+}
+
+.datatable-pagination li {
+  list-style: none;
+  float: left;
+}
+
+.datatable-pagination li.datatable-hidden {
+  visibility: hidden;
+}
+
+.datatable-pagination a {
+  border: 1px solid transparent;
+  float: left;
+  margin-left: 2px;
+  padding: 6px 12px;
+  position: relative;
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.datatable-pagination a:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.datatable-pagination .datatable-active a,
+.datatable-pagination .datatable-active a:focus,
+.datatable-pagination .datatable-active a:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  cursor: default;
+}
+
+.datatable-pagination .datatable-ellipsis a,
+.datatable-pagination .datatable-disabled a,
+.datatable-pagination .datatable-disabled a:focus,
+.datatable-pagination .datatable-disabled a:hover {
+  pointer-events: none;
+  cursor: default;
+}
+
+.datatable-pagination .datatable-disabled a,
+.datatable-pagination .datatable-disabled a:focus,
+.datatable-pagination .datatable-disabled a:hover {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.datatable-pagination .datatable-pagination a {
+  font-weight: bold;
+}
+
+/* TABLE */
+.datatable-table {
+  max-width: 100%;
+  width: 100%;
+  border-spacing: 0;
+}
+
+.datatable-table>tbody>tr>td,
+.datatable-table>tbody>tr>th,
+.datatable-table>tfoot>tr>td,
+.datatable-table>tfoot>tr>th,
+.datatable-table>thead>tr>td,
+.datatable-table>thead>tr>th {
+  vertical-align: top;
+  padding: 8px 10px;
+}
+
+.datatable-table>thead>tr>th {
+  vertical-align: bottom;
+  text-align: left;
+}
+
+.datatable-table>tfoot>tr>th {
+  vertical-align: bottom;
+  text-align: left;
+}
+
+.datatable-table th {
+  vertical-align: bottom;
+  text-align: left;
+}
+
+.datatable-table th a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.datatable-sorter,
+.datatable-filter {
+  display: inline-block;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.datatable-sorter::before,
+.datatable-sorter::after {
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+  right: 4px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  opacity: 0.2;
+}
+
+
+.datatable-sorter::before {
+  border-top: 4px solid var(--text-color);
+  bottom: 0px;
+}
+
+.datatable-sorter::after {
+  border-bottom: 4px solid var(--text-color);
+  border-top: 4px solid transparent;
+  top: 0px;
+}
+
+.datatable-ascending .datatable-sorter::after,
+.datatable-descending .datatable-sorter::before,
+.datatable-ascending .datatable-filter::after,
+.datatable-descending .datatable-filter::before {
+  opacity: 0.6;
+}
+
+.datatable-filter::before {
+  content: "";
+  position: absolute;
+  right: 4px;
+  opacity: 0.2;
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-radius: 50%;
+  border-top: 10px solid var(--text-color);
+  top: 25%;
+}
+
+.datatable-filter-active .datatable-filter::before {
+  opacity: 0.6;
+}
+
+.datatable-empty {
+  text-align: center;
+}
+
+.datatable-top::after,
+.datatable-bottom::after {
+  clear: both;
+  content: " ";
+  display: table;
+}
+
+table.datatable-table:focus tr.datatable-cursor>td:first-child {
+  border-left: 3px var(--text-color) solid;
+}
+
+table.datatable-table:focus {
+  outline: solid 1px black;
+  outline-offset: -1px;
+}