feature+ui(members): issue #90 HTML - Use pagination

Add paginate into sib-display.
Add styles to buttons and span inside the new <nav> generated.

src/page-members.pug

@@ -7,6 +7,7 @@ div.grid-layer
       data-src=`${sdn}/members/`,
       counter-template='${counter} members',
       data-fields='header, infos',
+      paginate-by='3',
 
       set-header='user.account.picture, user, pseudonym, bio, send',
       widget-user.account.picture='sib-display-img',
@@ -30,7 +31,7 @@ div.grid-layer
       search-label-skills='Search by skills',
       search-widget-skills='sib-form-placeholder-text',
       next='member')
-  //-div.grid-layer-links.containerV
+  div.grid-layer-links.containerV
     div.containerH.containerCenter.how-link
       div.containerV.fix.icon-idea
       div.containerV.grow

src/scripts/index.js

@@ -5,6 +5,10 @@ document.addEventListener('DOMContentLoaded', function (event) {
   const btnRightMenu = document.querySelector('#jsOffsiteToggle');
   const rightMenu = document.querySelector('#jsRightMenu');
 
+  const display = document.querySelector('sib-display#profiles-list');
+  const nav = display.querySelector("nav");
+  console.log(nav);
+  
   if (!navBar || !btnToggle) return;
 
   btnToggle.addEventListener('click', e => {

src/styles/form.scss

@@ -1,9 +1,8 @@
 .frame-form {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   margin: 0 auto;
-  min-height: 100%;
+  min-height: 100vh;
   padding: 4em 5em 6em;
   @extend %frame;
   

src/styles/main.scss

@@ -70,6 +70,16 @@ h5 {
   outline: 2px dotted red;
 }
 
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  -webkit-appearance: none;
+}
+
 #job-offers,
 #members {
   @extend %content-padding;

src/styles/members.scss

@@ -1,6 +1,35 @@
 #profiles-list {
   @extend .grid-layer;
 
+  nav {
+    align-items: center;
+    display: flex;
+    font-size: 24px;
+    justify-content: center;
+
+    button {
+      color: $color-anti-flash-white;
+      
+      &:before {
+        color: $color-dark-lava;
+        @include icon('arrow-left-circle');
+      }
+
+      &:disabled::before {
+        color: $color-manatee;
+      }
+    }
+
+    button:nth-of-type(2) {
+      order: 1;
+      transform: rotate(180deg);
+    }
+
+    span {
+      font-size: 26px;
+    }
+  }
+
   & > sib-form {
     grid-column-start: start;
     grid-column-end: middle;
@@ -8,13 +37,17 @@
     grid-row-end: middle;
   }
 
-  & > div {
+  & > div,
+  & > nav {
     display: flex;
     flex-wrap: wrap;
     grid-column-start: start;
     grid-column-end: end;
-    justify-content: space-between;
     margin-bottom: 1em;
+  }
+  
+  & > div {
+    justify-content: space-between;
 
     &:first-of-type {
       color: $color-quartz;

src/styles/variables.scss

@@ -15,6 +15,7 @@ $color-text-base:        hsl(213, 4%, 50%);
 $color-gainsboro:        hsl(213, 13%, 86%);
 $color-gainsboro-a02:    hsla(213, 13%, 86%, 0.2);
 $color-bombay:           hsl(215, 9%, 73%);
+$color-manatee:          hsl(215, 6%, 63%);
 $color-dark-lava:        hsl(216, 4%, 22%);
 $color-link-water:       hsl(221, 51%, 90%);
 $color-glitter:          hsl(222, 57%, 95%);