diff --git a/src/config.integration.pug b/src/config.integration.pug index 02c5b80..787f6be 100644 --- a/src/config.integration.pug +++ b/src/config.integration.pug @@ -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 diff --git a/src/page-groups.pug b/src/page-groups.pug index 575e18b..49a1648 100644 --- a/src/page-groups.pug +++ b/src/page-groups.pug @@ -1,7 +1,7 @@ #groups sib-display#groups-list( - data-src=`${sdn}/channels/`, + data-src=`${sdn}/channels/`, data-fields='name, description', - search-fields='name, description', + search-fields='name, description', next='group' ) diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index 95877e1..e48ef1a 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -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' - ) \ No newline at end of file +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 ? diff --git a/src/page-members.pug b/src/page-members.pug index 79d735d..3c8e695 100644 --- a/src/page-members.pug +++ b/src/page-members.pug @@ -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') \ No newline at end of file + //- 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 ? diff --git a/src/styles/content.scss b/src/styles/content.scss index d6130e4..34944ea 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -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 { @@ -198,8 +202,8 @@ sib-display#member-info, hdapp-hyperlink { display: block; @include icon('link'); - } - + } + sib-display-div[name$='foaf:homepage'] * { @include icon('link'); } @@ -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; diff --git a/src/styles/icons.scss b/src/styles/icons.scss index 477162d..f85028c 100644 --- a/src/styles/icons.scss +++ b/src/styles/icons.scss @@ -248,6 +248,7 @@ $icons: ( social-vkontakte: '\e618', event: '\e619', social-steam: '\e620', + idea:'\e076' ); diff --git a/src/styles/main.scss b/src/styles/main.scss index 66c1699..bbaaa3e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -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; +}