add utilities to tables

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## v1.2.2
 
+#### Features
+
+- Added a pagination element
+- Added filter and sort to table
+
 #### Enhancements
 
 - Added a new color to buttons
@@ -16,7 +21,7 @@
 - Section color is now a gradient blue between blue and dark blue
 - Background blue is now back to default blue
 
-#### Bug fixes
+#### Bug fixes 
 
 - Titles in article page are back to white
 - Titles have their top margin back but lose them if they are first child of an element

README.md

@@ -34,4 +34,4 @@ Puis importer le fichier
 
 ## Utiliser la dernière version complète
 
-En utilisant unpkg `<link href="https://unpkg.com/template.data.gouv.fr@1.2.1/dist/main.min.css" rel="stylesheet">`
+En utilisant unpkg `<link href="https://unpkg.com/template.data.gouv.fr@1.2.2/dist/main.min.css" rel="stylesheet">`

index.html

@@ -589,10 +589,11 @@ <h3>Pouet</h3>
         </div>
         <div class="panel">
           <h3>Dota 2 hero classification</h3>
+          <input type="text" class="table__filter" placeholder="Filtrer le tableau" />
           <table class="table">
             <thead>
-              <th>Force</th>
-              <th>Agility</th>
+              <th class="ascending">Force</th>
+              <th class="descending">Agility</th>
               <th>Intelligence</th>
             </thead>
             <tbody>
@@ -613,6 +614,41 @@ <h3>Dota 2 hero classification</h3>
               </tr>
             </tbody>
           </table>
+          <nav class="pagination">
+            <div class="pagination__display-group">
+              <label for="pagination__display" class="pagination__display-label">Rows per page</label>
+              <select class="pagination__display" id="pagination__display">
+                <option>5</option>
+                <option>10</option>
+                <option>50</option>
+                <option>100</option>
+              </select>
+            </div>
+            <div class="pagination__count"><strong>3</strong> sur <strong>112</strong></div>
+            <ul class="pagination__pages">
+              <li class="disabled">
+                <a>❮ Précédent</a>
+              </li>
+              <li class="active">
+                <a>1</a>
+              </li>
+              <li>
+                <a>2</a>
+              </li>
+              <li>
+                <a>3</a>
+              </li>
+              <li>
+                <a>4</a>
+              </li>
+              <li class="disabled">
+                <a>5</a>
+              </li>
+              <li>
+                <a>Suivant ❯</a>
+              </li>
+            </ul>
+          </nav>
         </div>
       </div>
     </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "template.data.gouv.fr",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Template CSS pour data.gouv.fr et compagnie.",
   "license": "MIT",
   "devDependencies": {

src/css/base/theme.css

@@ -35,6 +35,7 @@
   --desktop-min: 1000px;
 
   /* Spaces */
+  --space-xxs: 0.25em;
   --space-xs: 0.5em;
   --space-s: 1em;
   --space-m: 1.5em;

src/css/components/pagination.css

@@ -0,0 +1,65 @@
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+.pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: var(--space-m);
+}
+/* stylelint-enable declaration-block-no-redundant-longhand-properties */
+
+.pagination__display-group {
+  margin-left: var(--space-m);
+}
+
+.pagination__display-label {
+  display: inline;
+}
+
+select.pagination__display {
+  margin-left: var(--space-xs);
+  padding-top: var(--space-xxs);
+  padding-bottom: var(--space-xxs);
+}
+
+.pagination__count {
+  margin-left: var(--space-m);
+}
+
+.pagination__pages {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  justify-content: end;
+  margin-left: var(--space-m);
+}
+
+.pagination__pages li a {
+  color: var(--theme-primary);
+  background-color: var(--theme-background-white);
+  margin: 0 var(--space-xxs);
+  padding: var(--space-xxs) var(--space-xs);
+  border-radius: var(--theme-border-radius);
+  font-weight: 700;
+  pointer-events: inherit;
+  text-decoration: none;
+  display: block;
+}
+
+.pagination__pages li a:hover {
+  background-color: var(--lighter-blue);
+}
+
+.pagination__pages li.active a {
+  color: var(--theme-light-text);
+  background-color: var(--theme-background-color);
+}
+
+.pagination__pages li.disabled a {
+  color: var(--dark-grey);
+  background-color: var(--lightest-grey);
+  pointer-events: none;
+}

src/css/elements/table.css

@@ -27,6 +27,24 @@
   text-transform: uppercase;
 }
 
+.table thead th.ascending::after {
+  font-size: 0.75em;
+  content: '▲';
+  margin-left: var(--space-xs);
+}
+
+.table thead th.descending::after {
+  font-size: 0.75em;
+  content: '▼';
+  margin-left: var(--space-xs);
+}
+
 .table tr:hover {
   background: var(--lightest-grey);
 }
+
+.table__filter {
+  margin-bottom: var(--space-s);
+  max-width: 20em;
+  float: right;
+}

src/css/index.css

@@ -21,6 +21,7 @@
 @import "components/modal.css";
 @import "components/notification.css";
 @import "components/tile.css";
+@import "components/pagination.css";
 
 /* larger components */
 @import "layouts/container.css";