diff --git a/src/page-members.pug b/src/page-members.pug index f3c8e4258c53bf19782495968e77dc6bc25f9e32..057f1e54ec7839dcef2635087070bd9b7abac11a 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 5b9e966797ffb6645358b6439bfc0a317422b319..3335ba31ebaa3e1d2fe50e570ed1566e1ef30372 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 af2a1ffd794bdec66f1b8c737d73d4cbe26c62e0..8e7777fb304f463ee008faf07bbfcfd9463249d2 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 cff26622125ce38ee2767d7d778555f7761408c2..d1a0a231b8f7ebf8455dc7bd57da6c032e193630 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 66889511defc37378870d4ae3e7ecc1a7341df2f..96a7accd607a143a659ba01f3558e4671225c588 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 715c7c0708435ebef2a1df9ae507eaa00a0b4843..5d7bd69ed8dab280dc0b36ab95806bf6bdbe911c 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%);