From 345dbfd2413a0441d6bd322ce6e2d10c414c6a73 Mon Sep 17 00:00:00 2001
From: simon louvet <smon.louvet.zen@gmail.com>
Date: Wed, 21 Nov 2018 15:47:18 +0100
Subject: [PATCH] ui : grid layers for jon offers & members

---
 src/page-job-offers.pug | 24 ++++++++++++------------
 src/page-member.pug     |  4 ++--
 src/page-members.pug    | 23 +++++++++++------------
 src/styles/content.scss | 30 +++++++++++++++++++++++++++---
 src/styles/main.scss    | 19 +++++++++++++++++++
 5 files changed, 71 insertions(+), 29 deletions(-)

diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug
index cb60d69..f5eaca2 100644
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@@ -1,15 +1,5 @@
-div.containerH.reverse
-  div.containerV.fix
-    sib-link(next="job-offer-create").containerH.containerCenter.action-link
-      div.containerV.fix.icon-plus
-      div.containerV.fix Post a new offer
-    sib-link().containerH.containerCenter.how-link
-      div.containerV.fix.icon-idea
-      div.containerV.grow How To find a new offer
-    sib-link().containerH.containerCenter.how-link
-      div.containerV.fix.icon-idea
-      div.containerV.grow How to set notification ?
-  div.containerV.grow
+div.grid-layer
+  div.grid-layer-main.containerV
     h1 New offers
       span Here you can find and post offers
     sib-display#offers-list(
@@ -23,3 +13,13 @@ div.containerH.reverse
       set-content='title, description',
       search-fields='content,skills,open'
     )
+  div.grid-layer-links.containerV
+    sib-link(next="job-offer-create").containerH.containerCenter.action-link
+      div.containerV.fix.icon-plus
+      div.containerV.fix Post a new offer
+    sib-link().containerH.containerCenter.how-link
+      div.containerV.fix.icon-idea
+      div.containerV.grow How To find a new offer
+    sib-link().containerH.containerCenter.how-link
+      div.containerV.fix.icon-idea
+      div.containerV.grow How to set notification ?
diff --git a/src/page-member.pug b/src/page-member.pug
index 7f4f133..cc5bcfe 100644
--- a/src/page-member.pug
+++ b/src/page-member.pug
@@ -1,5 +1,5 @@
 
-sib-router#member-router(default-route='member-chat')
+sib-router#member-router(default-route='member-profile')
   sib-route(name='member-chat')
     div Chat
   sib-route(name='member-profile')
@@ -15,4 +15,4 @@ sib-router#member-router(default-route='member-chat')
     #member-profile
       include page-member-profile.pug
     #member-edit
-      include page-member-edit.pug
\ No newline at end of file
+      include page-member-edit.pug
diff --git a/src/page-members.pug b/src/page-members.pug
index eb481ce..d07f397 100644
--- a/src/page-members.pug
+++ b/src/page-members.pug
@@ -1,15 +1,5 @@
-div.containerH.reverse
-
-  div.containerV.fix
-    div.containerH.containerCenter.how-link
-      div.containerV.fix.icon-idea
-      div.containerV.grow
-        sib-trigger() How To...
-    div.containerH.containerCenter.how-link
-      div.containerV.fix.icon-idea
-      div.containerV.grow
-        sib-trigger() How to complete my profile ?
-  div.containerV.grow
+div.grid-layer
+  div.grid-layer-main.containerV
     h1 Members
     sib-display#profiles-list(
       data-src=`${sdn}/members/`,
@@ -30,3 +20,12 @@ div.containerH.reverse
       set-name='pseudo,user.first_name,user.last_name',
       search-fields='name, skills, roles',
       next='member')
+  div.grid-layer-links.containerV
+    div.containerH.containerCenter.how-link
+      div.containerV.fix.icon-idea
+      div.containerV.grow
+        sib-trigger() How To...
+    div.containerH.containerCenter.how-link
+      div.containerV.fix.icon-idea
+      div.containerV.grow
+        sib-trigger() How to complete my profile ?
diff --git a/src/styles/content.scss b/src/styles/content.scss
index 14d9677..a8831ca 100644
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@@ -263,9 +263,18 @@ hdapp-available {
 }
 
 #profiles-list {
-  display: block;
-
+  @extend .grid-layer;
+  > sib-form {
+    grid-column-start: start;
+    grid-column-end: middle;
+    grid-row-start: start;
+    grid-row-end: middle;
+  }
   > div {
+    grid-column-start: start;
+    grid-column-end: end;
+    grid-row-start: middle;
+    grid-row-end: end;
     display: grid;
     margin-top: 1em;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -292,6 +301,21 @@ hdapp-available {
   }
 }
 
+#offers-list {
+  @extend .grid-layer;
+  > sib-form {
+    grid-column-start: start;
+    grid-column-end: middle;
+    grid-row-start: start;
+    grid-row-end: middle;
+  }
+  > div {
+    grid-column-start: start;
+    grid-column-end: end;
+    grid-row-start: middle;
+    grid-row-end: end;
+  }
+}
 #offers-list > sib-form > form {
   display: grid;
   grid-template-columns: 50% 50%;
@@ -440,7 +464,7 @@ hdapp-available {
   @extend .right-link;
   background-color: $color-white;
   color: $color-black;
-
+  flex-wrap: nowrap;
   .icon-idea {
     background-color: $color-yellow-light;
     border-radius: 100%;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 57c2b36..b3c70b0 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -311,6 +311,25 @@ sib-trigger.back {
   flex-direction: row-reverse;
 }
 
+
 .scrollY {
   overflow-y: auto;
 }
+
+.grid-layer{
+  display: grid;
+  grid-template-columns: [start]auto[middle]15em[end];
+  grid-template-rows: [start]10em[middle]auto[end];
+}
+.grid-layer-main{
+  grid-column-start: start;
+  grid-column-end: end;
+  grid-row-start: start;
+  grid-row-end: end;
+}
+.grid-layer-links{
+  grid-column-start: middle;
+  grid-column-end: end;
+  grid-row-start: start;
+  grid-row-end: middle;
+}