From 6d9c958f349d488a908690464e8a9d04bfa7cbd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 18 Feb 2019 17:16:33 +0100
Subject: [PATCH] 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 | 3 ++-
src/scripts/index.js | 4 ++++
src/styles/form.scss | 3 +--
src/styles/main.scss | 10 ++++++++++
src/styles/members.scss | 39 ++++++++++++++++++++++++++++++++++++---
src/styles/variables.scss | 1 +
6 files changed, 54 insertions(+), 6 deletions(-)
diff --git a/src/page-members.pug b/src/page-members.pug
index f3c8e425..057f1e54 100644
--- a/src/page-members.pug
+++ b/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
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 5b9e9667..3335ba31 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -4,6 +4,10 @@ document.addEventListener('DOMContentLoaded', function (event) {
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
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;
diff --git a/src/styles/form.scss b/src/styles/form.scss
index af2a1ffd..8e7777fb 100644
--- a/src/styles/form.scss
+++ b/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;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index cff26622..d1a0a231 100644
--- a/src/styles/main.scss
+++ b/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;
diff --git a/src/styles/members.scss b/src/styles/members.scss
index 66889511..96a7accd 100644
--- a/src/styles/members.scss
+++ b/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,14 +37,18 @@
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;
font-weight: bold;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 715c7c07..5d7bd69e 100644
--- a/src/styles/variables.scss
+++ b/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%);
--
GitLab