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 xmpp = 'https://jabber.happy-dev.fr/http-bind/'
- var client_id = 833925

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

@ -1,15 +1,29 @@
div
sib-trigger(next="job-offer-create" class="new-job-offer") Post a new offer
h1 New offers
span Here you can find and post offers
sib-display#offers-list.limiter(
data-src=`${sdn}/job-offers/`,
data-fields='date, user-thumb, title, description, skills',
widget-skills='sib-display-lookuplist',
set-user-thumb='author.member.avatar, author.first_name, author.last_name'
widget-author.member.avatar='sib-display-img',
set-date='closingDate, creationDate',
widget-closingDate='hdapp-closing-date',
set-searchset='title, description, skills',
search-fields='searchset'
)
div.containerH
div.containerV.grow
h1 New offers
span Here you can find and post offers
sib-display#offers-list(
data-src=`${sdn}/job-offers/`,
data-fields='date, user-thumb, title, description, skills',
widget-skills='sib-display-lookuplist',
set-user-thumb='author.member.avatar, author.first_name, author.last_name'
widget-author.member.avatar='sib-display-img',
set-date='closingDate, creationDate',
widget-closingDate='hdapp-closing-date',
set-searchset='title, description, skills',
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
h1 Members
sib-display#profiles-list(
data-src=`${sdn}/members/`,
data-fields='header, infos'
set-header='avatar, user, pseudonym, bio',
set-infos='cell, roles, user.email, foaf:homepage, skills',
set-pseudonym='before-pseudo, pseudo',
value-before-pseudo='@',
widget-avatar='sib-display-img',
widget-user='hdapp-userinfo',
widget-user.email='sib-display-mailto',
widget-foaf:hompage='hdapp-hyperlink',
widget-cell='hdapp-usercell',
widget-roles='sib-display-lookuplist',
widget-skills='sib-display-lookuplist',
set-searchset='pseudo',
search-fields='searchset',
next='member')
div.containerH
div.containerV.grow
h1 Members
sib-display#profiles-list(
data-src=`${sdn}/members/`,
data-fields='header, infos, group, role'
set-header='avatar, user, pseudonym, bio',
set-infos='cell, roles, user.email, foaf:homepage, skills',
set-pseudonym='before-pseudo, pseudo',
label-skills='skill'
value-before-pseudo='@',
widget-avatar='sib-display-img',
widget-user='hdapp-userinfo',
widget-user.email='sib-display-mailto',
widget-foaf:hompage='hdapp-hyperlink',
widget-cell='hdapp-usercell',
widget-roles='sib-display-lookuplist',
widget-skills='sib-display-lookuplist',
set-searchset='pseudo',
search-fields='pseudo, skills, roles',
next='member')
//- sib-display#profiles-list(
data-src=`${sdn}/users/`,
data-fields='header, footer'
set-header='member.avatar, member.user, pseudonym, member.bio',
set-footer='member.cell, member.roles, member.skills',
set-pseudonym='before-pseudo, pseudo',
value-before-pseudo='@',
widget-member.avatar='sib-display-img',
widget-member.user='hdapp-userinfo',
widget-member.cell='hdapp-usercell',
widget-member.roles='sib-display-lookuplist',
widget-member.skills='sib-display-lookuplist',
set-searchset='last_name',
search-fields='searchset',
next='member')
//- sib-display#profiles-list(
data-src=`${sdn}/users/`,
data-fields='header, footer'
set-header='member.avatar, member.user, pseudonym, member.bio',
set-footer='member.cell, member.roles, member.skills',
set-pseudonym='before-pseudo, pseudo',
value-before-pseudo='@',
widget-member.avatar='sib-display-img',
widget-member.user='hdapp-userinfo',
widget-member.cell='hdapp-usercell',
widget-member.roles='sib-display-lookuplist',
widget-member.skills='sib-display-lookuplist',
set-searchset='last_name',
search-fields='searchset',
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
.new-job-offer {
@extend %button;
text-transform: uppercase;
float: right;
}
// .new-job-offer {
// @extend %button;
// text-transform: uppercase;
// margin-left: 1em;
// margin-bottom: 1em
// //float: right;
// }
#offers-list {
> div {
> 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 {
@extend h2;

1
src/styles/icons.scss
View File

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

86
src/styles/main.scss
View File

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