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

ui : job-offers & members page update

Browse Source
This commit is contained in:
simon louvet 2018-11-17 18:01:19 +01:00
parent 70ae1b033a
commit 723419b6b3
7 changed files with 208 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/config.integration.pug
View File

@ -1,4 +1,4 @@
- var sdn = process.env.SDN || 'staging-app.happy-dev.fr' - var sdn = process.env.SDN || 'https://test-paris.happy-dev.fr'
- var cdn = process.env.CDN || 'staging-app.happy-dev.fr' - var cdn = process.env.CDN || 'staging-app.happy-dev.fr'
- var xmpp = 'https://jabber.happy-dev.fr/http-bind/' - var xmpp = 'https://jabber.happy-dev.fr/http-bind/'
- var client_id = 833925 - var client_id = 833925

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

@ -1,15 +1,29 @@
div div.containerH
sib-trigger(next="job-offer-create" class="new-job-offer") Post a new offer div.containerV.grow
h1 New offers h1 New offers
span Here you can find and post offers span Here you can find and post offers
sib-display#offers-list.limiter( sib-display#offers-list(
data-src=`${sdn}/job-offers/`, data-src=`${sdn}/job-offers/`,
data-fields='date, user-thumb, title, description, skills', data-fields='date, user-thumb, title, description, skills',
widget-skills='sib-display-lookuplist', widget-skills='sib-display-lookuplist',
set-user-thumb='author.member.avatar, author.first_name, author.last_name' set-user-thumb='author.member.avatar, author.first_name, author.last_name'
widget-author.member.avatar='sib-display-img', widget-author.member.avatar='sib-display-img',
set-date='closingDate, creationDate', set-date='closingDate, creationDate',
widget-closingDate='hdapp-closing-date', widget-closingDate='hdapp-closing-date',
set-searchset='title, description, skills', set-searchset='title, description, skills',
search-fields='searchset' search-fields='searchset'
) )
div.containerV.fix
div.containerH.containerCenter.action-link
div.containerV.fix.icon-plus
div.containerV.fix
sib-trigger(next="job-offer-create") Post a new offer
div.containerH.containerCenter.how-link
div.containerV.fix.icon-idea
div.containerV.grow
sib-trigger() How To find a new offer
div.containerH.containerCenter.how-link
div.containerV.fix.icon-idea
div.containerV.grow
sib-trigger() How to set notification ?

79
src/page-members.pug
View File

@ -1,35 +1,46 @@
div div.containerH
h1 Members div.containerV.grow
sib-display#profiles-list( h1 Members
data-src=`${sdn}/members/`, sib-display#profiles-list(
data-fields='header, infos' data-src=`${sdn}/members/`,
set-header='avatar, user, pseudonym, bio', data-fields='header, infos, group, role'
set-infos='cell, roles, user.email, foaf:homepage, skills', set-header='avatar, user, pseudonym, bio',
set-pseudonym='before-pseudo, pseudo', set-infos='cell, roles, user.email, foaf:homepage, skills',
value-before-pseudo='@', set-pseudonym='before-pseudo, pseudo',
widget-avatar='sib-display-img', label-skills='skill'
widget-user='hdapp-userinfo', value-before-pseudo='@',
widget-user.email='sib-display-mailto', widget-avatar='sib-display-img',
widget-foaf:hompage='hdapp-hyperlink', widget-user='hdapp-userinfo',
widget-cell='hdapp-usercell', widget-user.email='sib-display-mailto',
widget-roles='sib-display-lookuplist', widget-foaf:hompage='hdapp-hyperlink',
widget-skills='sib-display-lookuplist', widget-cell='hdapp-usercell',
set-searchset='pseudo', widget-roles='sib-display-lookuplist',
search-fields='searchset', widget-skills='sib-display-lookuplist',
next='member') set-searchset='pseudo',
search-fields='pseudo, skills, roles',
next='member')
//- sib-display#profiles-list( //- sib-display#profiles-list(
data-src=`${sdn}/users/`, data-src=`${sdn}/users/`,
data-fields='header, footer' data-fields='header, footer'
set-header='member.avatar, member.user, pseudonym, member.bio', set-header='member.avatar, member.user, pseudonym, member.bio',
set-footer='member.cell, member.roles, member.skills', set-footer='member.cell, member.roles, member.skills',
set-pseudonym='before-pseudo, pseudo', set-pseudonym='before-pseudo, pseudo',
value-before-pseudo='@', value-before-pseudo='@',
widget-member.avatar='sib-display-img', widget-member.avatar='sib-display-img',
widget-member.user='hdapp-userinfo', widget-member.user='hdapp-userinfo',
widget-member.cell='hdapp-usercell', widget-member.cell='hdapp-usercell',
widget-member.roles='sib-display-lookuplist', widget-member.roles='sib-display-lookuplist',
widget-member.skills='sib-display-lookuplist', widget-member.skills='sib-display-lookuplist',
set-searchset='last_name', set-searchset='last_name',
search-fields='searchset', search-fields='searchset',
next='member') next='member')
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 ?

69
src/styles/content.scss
View File

@ -1,9 +1,13 @@
// job offers // job offers
.new-job-offer { // .new-job-offer {
@extend %button; // @extend %button;
text-transform: uppercase; // text-transform: uppercase;
float: right; // margin-left: 1em;
} // margin-bottom: 1em
// //float: right;
// }
#offers-list { #offers-list {
> div { > div {
> sib-display { > sib-display {
@ -280,6 +284,61 @@ hdapp-available {
} }
} }
} }
.right-link{
padding: 0.5em;
margin-bottom: 1em;
margin-left: 1em;
flex-basis: content;
border-radius: 2em;
sib-trigger{
padding-left: 1em;
}
}
.how-link{
@extend .right-link;
background-color: $color-white;
color: $color-black;
.icon-idea{
background-color: $color-yellow-light;
border-radius :100%;
flex-shrink: 0;
flex-grow: 0;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
width: 1.8em;
height: 1.8em;
}
sib-trigger{
padding-left: 1em;
width: 12em;
}
}
.action-link{
@extend .right-link;
background-color: $color-yellow;
color: $color-white;
font-weight: bold;
text-transform: uppercase;
.icon-plus{
flex-shrink: 0;
flex-grow: 0;
justify-content: center;
align-items: center;
display: flex;
&:before {
font-size: 1.3em;
}
}
}
/* /*
label { label {
@extend h2; @extend h2;

1
src/styles/icons.scss
View File

@ -248,6 +248,7 @@ $icons: (
social-vkontakte: '\e618', social-vkontakte: '\e618',
event: '\e619', event: '\e619',
social-steam: '\e620', social-steam: '\e620',
idea:'\e076'
); );

86
src/styles/main.scss
View File

@ -5,9 +5,9 @@
} }
*, *,
*::before, *::after,
*::after { *::before {
// box-sizing: inherit; // box-sizing: inherit;
} }
html { html {
@ -17,9 +17,6 @@ html {
background-color: $color-grey-light; background-color: $color-grey-light;
color: $color-grey; color: $color-grey;
} }
// body { // body {
// height: 100%; // height: 100%;
// display:flex; // display:flex;
@ -36,9 +33,11 @@ h6 {
font-weight: 600; font-weight: 600;
padding: 0; padding: 0;
margin: 0.67em 0; margin: 0.67em 0;
span { span {
font-weight: 400; font-weight: 400;
padding-left: 0.5em; padding-left: 0.5em;
&:before { &:before {
content: '// '; content: '// ';
} }
@ -48,12 +47,15 @@ h6 {
h1 { h1 {
font-size: 1.24em; font-size: 1.24em;
} }
h2 { h2 {
font-size: 1.04em; font-size: 1.04em;
} }
h3 { h3 {
font-size: .84em; font-size: 0.84em;
} }
h4 { h4 {
font-size: 0.68em; font-size: 0.68em;
} }
@ -67,13 +69,12 @@ h4 {
padding: 1em; padding: 1em;
} }
#header { #header {
background-color: $color-white; background-color: $color-white;
color: $color-black; color: $color-black;
//position: relative; //position: relative;
//@include border-shadow(bottom); //@include border-shadow(bottom);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15); box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
border: solid $color-white; border: solid $color-white;
border-width: 1px 0; border-width: 1px 0;
display: flex; display: flex;
@ -82,6 +83,7 @@ h4 {
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
padding: 1em 0; padding: 1em 0;
> * { > * {
padding: 0 1rem; padding: 0 1rem;
} }
@ -97,7 +99,7 @@ h4 {
} }
#logo { #logo {
flex: 1 1 0px; flex: 1 1 0;
} }
#notifications-button { #notifications-button {
@ -107,18 +109,18 @@ h4 {
list-style-type: none; list-style-type: none;
} }
#notifications{ #notifications {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 0; height: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
>div{
> div {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
} }
} }
@ -126,6 +128,7 @@ h4 {
> * { > * {
vertical-align: middle; vertical-align: middle;
} }
img { img {
margin-right: 0.5em; margin-right: 0.5em;
width: 43px; width: 43px;
@ -136,11 +139,13 @@ h4 {
} }
} }
.layer {
.layer{ position: absolute;
position:absolute; bottom: 0;
bottom:0;top:0;right:0;left:0; top: 0;
display:flex; right: 0;
left: 0;
display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
overflow-x: hidden; overflow-x: hidden;
@ -164,39 +169,46 @@ h4 {
max-width: 650px; max-width: 650px;
} }
/* sub menu (right menu) */ /* sub menu (right menu) */
#mainContainer > div { #mainContainer > div {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: flex-start; align-items: flex-start;
> sib-router { > sib-router {
font-family: monospace; font-family: monospace;
color: $color-black; color: $color-black;
display: block; display: block;
background-color: $color-grey-light2; background-color: $color-grey-light2;
sib-route { sib-route {
display: block; display: block;
cursor: pointer; cursor: pointer;
> div { > div {
position: relative; position: relative;
padding: 1.5em 3em; padding: 1.5em 3em;
border-bottom: 1px solid $color-grey; border-bottom: 1px solid $color-grey;
} }
&:hover { &:hover {
background-color: $color-grey; background-color: $color-grey;
} }
&[active] { &[active] {
font-weight: bold; font-weight: bold;
background-color: $color-black; background-color: $color-black;
color: $color-yellow; color: $color-yellow;
> div:before { > div:before {
opacity: 1; opacity: 1;
transform: translateX(-150%); transform: translateX(-150%);
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
} }
} }
> div { > div {
@include icon(arrow-left); @include icon(arrow-left);
&:before { &:before {
position: absolute; position: absolute;
transform: translateX(-50%); transform: translateX(-50%);
@ -205,9 +217,10 @@ h4 {
} }
} }
} }
> div { > div {
margin: 2.6em; margin: 2.6em;
flex: 1 1 0px; flex: 1 1 0;
} }
} }
@ -219,8 +232,8 @@ h4 {
pointer-events: none; pointer-events: none;
} }
#search-icon, #close-search-icon,
#close-search-icon { #search-icon {
position: absolute; position: absolute;
right: 0.4em; right: 0.4em;
top: 50%; top: 50%;
@ -228,18 +241,22 @@ h4 {
margin: auto; margin: auto;
display: block; display: block;
} }
#search-input { #search-input {
-webkit-appearance: textfield; -webkit-appearance: textfield;
border-radius: 10em; border-radius: 10em;
padding: 0.4em 0.8em; padding: 0.4em 0.8em;
border: 1px solid $color-grey; border: 1px solid $color-grey;
& ~ #close-search-icon { & ~ #close-search-icon {
opacity: 0; opacity: 0;
} }
&:focus { &:focus {
& ~ #close-search-icon { & ~ #close-search-icon {
opacity: 1; opacity: 1;
} }
& ~ #search-icon { & ~ #search-icon {
visibility: hidden; visibility: hidden;
} }
@ -256,3 +273,28 @@ sib-trigger.back {
@include icon('arrow-left'); @include icon('arrow-left');
@extend h1; @extend h1;
} }
.containerH {
display: flex;
}
.containerV {
display: flex;
flex-direction: column;
align-items: stretch;
}
.grow {
flex-grow: 1;
flex-shrink: 1;
}
.fix {
flex-grow: 0;
flex-shrink: 0;
}
.containerCenter {
justify-content: center;
align-items: center;
}