autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui : grid layers for jon offers & members

This commit is contained in:
simon louvet 2018-11-21 15:47:18 +01:00
parent 2b305418f0
commit 345dbfd241
5 changed files with 71 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/page-job-offers.pug
View File

@ -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 ?

4
src/page-member.pug
View File

@ -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
include page-member-edit.pug

23
src/page-members.pug
View File

@ -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 ?

30
src/styles/content.scss
View File

@ -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%;

19
src/styles/main.scss
View File

@ -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;
}