ui : job-offers & members page update
This commit is contained in:
simon louvet
parent
70ae1b033a
commit
723419b6b3
@ -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
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
div
|
||||
sib-trigger(next="job-offer-create" class="new-job-offer") Post a new offer
|
||||
div.containerH
|
||||
div.containerV.grow
|
||||
h1 New offers
|
||||
span Here you can find and post offers
|
||||
sib-display#offers-list.limiter(
|
||||
sib-display#offers-list(
|
||||
data-src=`${sdn}/job-offers/`,
|
||||
data-fields='date, user-thumb, title, description, skills',
|
||||
widget-skills='sib-display-lookuplist',
|
||||
@ -13,3 +13,17 @@ div
|
||||
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 ?
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
div
|
||||
div.containerH
|
||||
div.containerV.grow
|
||||
h1 Members
|
||||
sib-display#profiles-list(
|
||||
data-src=`${sdn}/members/`,
|
||||
data-fields='header, infos'
|
||||
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',
|
||||
@ -15,7 +17,7 @@ div
|
||||
widget-roles='sib-display-lookuplist',
|
||||
widget-skills='sib-display-lookuplist',
|
||||
set-searchset='pseudo',
|
||||
search-fields='searchset',
|
||||
search-fields='pseudo, skills, roles',
|
||||
next='member')
|
||||
|
||||
//- sib-display#profiles-list(
|
||||
@ -33,3 +35,12 @@ div
|
||||
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 ?
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -248,6 +248,7 @@ $icons: (
|
||||
social-vkontakte: '\e618',
|
||||
event: '\e619',
|
||||
social-steam: '\e620',
|
||||
idea:'\e076'
|
||||
);
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user