diff --git a/src/page-members.pug b/src/page-members.pug index 402043e..f853e37 100644 --- a/src/page-members.pug +++ b/src/page-members.pug @@ -26,7 +26,7 @@ div.containerH.reverse widget-roles='sib-display-lookuplist', widget-skills='sib-display-lookuplist', set-name='pseudo,user.first_name', - search-fields='name, skills, roles', + search-fields='pseudo, skills, roles', next='member') //- sib-display#profiles-list( diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index 0040491..4d12e61 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -1,25 +1,38 @@ .frame template#client-template - div.toto ${value.address} + div#clientBox + div + h2 Client : + div.containerH + label Raison Sociale : + span ${value.name} + div.containerV + label Adresse : + span ${value.address} + div + h2 Contact : + sib-display( - data-fields='client', + data-fields='title, client.logo, label-description, description, client', + set-title='const-title1,number,client.name,const-title2, name', + widget-client.logo='sib-display-img', template-client='client-template', - bind-resources, - ) - sib-display( - data-fields='client.logo,label-description, description, label-client, client', + widget-team='sib-display-lookuplist', value-label-description="Description:", value-label-client="Client:", - template-client='client-template', + value-const-title1="N°:", + value-const-title2="-", bind-resources, ) h2 Team: - sib-display.members-list-condensed( - id-suffix='team', - data-fields='member.avatar, member.user', - widget-member.avatar='sib-display-img', - widget-member.user='hdapp-userinfo', - next='member', - bind-resources, - ) + div.containerH + sib-display.members-list-condensed( + id-suffix='team', + data-fields='member.avatar, member.user, member.roles', + widget-member.avatar='sib-display-img', + widget-member.user='hdapp-userinfo', + widget-member.roles='sib-display-lookuplist', + next='member', + bind-resources, + ) diff --git a/src/page-project.pug b/src/page-project.pug index dca3df8..39d3995 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -7,12 +7,13 @@ sib-router#project-router(default-route='project-profile') div Edit sib-route(name='project-create') div Add new -#project-views-container - #project-chat - include page-project-chat.pug - #project-profile - include page-project-profile.pug - #project-edit - include page-project-edit.pug - #project-create - include page-project-create.pug +div.scrollY + #project-views-container + #project-chat + include page-project-chat.pug + #project-profile + include page-project-profile.pug + #project-edit + include page-project-edit.pug + #project-create + include page-project-create.pug diff --git a/src/styles/content.scss b/src/styles/content.scss index 5ed7ded..85ca258 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -7,7 +7,6 @@ // //float: right; // } - #offers-list { > div { > sib-display { @@ -22,19 +21,23 @@ display: block; @extend h2; } + label { display: none; } } } } + [name='user-thumb'] { display: flex; align-items: center; margin: -0.25em; + > * { margin: 0.25em; } + sib-display-img { width: 2.5em; height: 2.5em; @@ -48,32 +51,37 @@ display: flex; align-items: center; margin: -0.25em; + > * { margin: 0.25em; } + strong { @extend %button; } } - // skills + #member-profile sib-display-lookuplist, #profiles-list sib-display-lookuplist, sib-display-lookuplist { &[name$='skills'] { display: block; - ul, - li { + + li, + ul { display: block; margin: 0; padding: 0; list-style: none; } + ul { display: flex; flex-wrap: wrap; margin: 1em -0.25em; } + li { padding: 0.5em 1em; border: 1px solid; @@ -82,12 +90,13 @@ sib-display-lookuplist { } } } - // group + #group-profile { sib-display-div[name='name'] div { @extend h1; } + sib-display-div[name='label-description'] div { @extend h2; } @@ -102,14 +111,14 @@ sib-display-lookuplist { height: 400px; height: calc(100vh - 143px - 3em); height: calc(100vh - var(--pos-top, 143px) - 3em); + > sib-chat { @include pos(); } } - // member-profile && members + .members-list-condensed { - display: block; img { width: 50px; height: 50px; @@ -117,23 +126,44 @@ sib-display-lookuplist { object-fit: cover; object-position: top; } + label { display: none; } + > div > sib-display > div { margin: 1em 0; - display: flex; - } - ul { - padding-left: 1em; + display: grid; + grid-template-columns: [first] 50px [middle] auto [end]; + grid-template-rows: [first] 25px [middle] 25px [end]; + align-items: center; + ul{ + margin-top: 0px; + margin-bottom: 0px; + list-style-type: none; + } + >[name$="user"]{ + color: $color-black; + } + >[name$="avatar"]{ + grid-column-start: first; + grid-column-end: middle; + grid-row-start: first; + grid-row-end: end; + } } + + // ul { + // padding-left: 1em; + // } } #profiles-list > div > sib-display { cursor: pointer; } -sib-display#member-info, -#profiles-list > div > sib-display { + +#profiles-list > div > sib-display, +sib-display#member-info { display: block; position: relative; @extend %frame; @@ -142,6 +172,7 @@ sib-display#member-info, label { display: none; } + sib-display-img { $width: 55%; display: block; @@ -150,6 +181,7 @@ sib-display#member-info, padding-bottom: $width; height: 0; margin: 2em auto; + img { display: block; position: absolute; @@ -170,35 +202,44 @@ sib-display#member-info, margin-bottom: 1em; text-align: center; } + hdapp-userinfo { @extend h1; } + div[name='pseudonym'] { div { display: inline; } } - [name=infos]{ + + [name=infos] { margin: 2em 0; - >*{ + + > * { display: block; margin: 0.5em 0; } } + ul[name$='roles'] * { @include icon('user'); } + ul[name$='cell'] * { @include icon('location-pin'); } + sib-display-mailto { display: block; @include icon('envelope'); } + sib-display-tel { display: block; @include icon('phone'); } + hdapp-hyperlink { display: block; @include icon('link'); @@ -212,6 +253,7 @@ sib-display#member-info, hdapp-available { display: block; text-align: right; + strong { @extend %button; } @@ -219,6 +261,7 @@ hdapp-available { #profiles-list { display: block; + > div { display: grid; margin-top: 1em; @@ -226,35 +269,42 @@ hdapp-available { grid-gap: 1em; } } -#profiles-list>sib-form>form{ + +#profiles-list > sib-form > form { display: grid; grid-template-columns: 50% 50%; - label{ - flex-basis :5em; + + label { + flex-basis: 5em; flex-shrink: 0; } - input{ - flex-grow:1; - min-width:0; + + input { + flex-grow: 1; + min-width: 0; } - input[type="submit"]{ - display: none + + input[type="submit"] { + display: none; } } -#offers-list>sib-form>form{ +#offers-list > sib-form > form { display: grid; grid-template-columns: 50% 50%; - label{ - flex-basis :5em; + + label { + flex-basis: 5em; flex-shrink: 0; } - input{ - flex-grow:1; - min-width:0; + + input { + flex-grow: 1; + min-width: 0; } - input[type="submit"]{ - display: none + + input[type="submit"] { + display: none; } } @@ -264,6 +314,7 @@ hdapp-available { @include list-reset(); } } + #member-profile { @include media('width>tablet') { div[name='header'] { @@ -271,17 +322,21 @@ hdapp-available { width: 50%; } } + div[name='name'] { @extend h1; + div { display: inline-block; margin-right: 0.4em; } } + div[name='pseudonym'] { margin-top: -1em; margin-bottom: 1em; } + #member-info { &:after { content: ''; @@ -290,70 +345,102 @@ hdapp-available { } } } - // projects -#project-profile { - div[name^='label-'] { - @extend h2; + +#project-profile sib-display { + sib-display-div { + > [name^='label-'] { + @extend h2; + } } + [name='title'] { @extend h1; - > sib-display-div { - display: inline-block; - } - div[name='number'] { + display: flex; + + > * { + padding-left: 0.5em; padding-right: 0.5em; - &:before { - content: '#'; - } } - div[name='name'] { + + > [name^='const-'] { + padding-left: 0; + padding-right: 0; + } + + > [name='name'] { font-weight: normal; - &:before { - padding: 0 0.5em; - content: '/'; - } } } } +#clientBox { + margin-top: 1em; + display: grid; + grid-template-columns: 50% 50%; + border-top-width: 1px; + border-top-style: solid; + border-left-width: 1px; + border-left-style: solid; -#project-edit form{ + > * { + label{ + font-weight: bold; + margin-right: 1em; + } + border-right-width: 1px; + border-right-style: solid; + border-bottom-width: 1px; + border-bottom-style: solid; + padding: 1em; + > div{ + margin-bottom: 1em; + } + } +} + +#project-edit form { display: flex; flex-direction: column; align-items: stretch; - >*{ - display: flex; - margin-bottom: 1em; - label{ - flex-basis : 8em; - flex-shrink: 0; - } - input,textarea{ - flex-grow: 1; - min-width: 0; - } + + > * { + display: flex; + margin-bottom: 1em; + + label { + flex-basis: 8em; + flex-shrink: 0; + } + + input, + textarea { + flex-grow: 1; + min-width: 0; + } } } -.right-link{ +.right-link { padding: 0.5em; margin-bottom: 1em; margin-left: 1em; flex-basis: content; border-radius: 2em; - div[class*="icon-"]{ - margin-right: 1em + + div[class*="icon-"] { + margin-right: 1em; } } -.how-link{ +.how-link { @extend .right-link; background-color: $color-white; color: $color-black; - .icon-idea{ + + .icon-idea { background-color: $color-yellow-light; - border-radius :100%; + border-radius: 100%; flex-shrink: 0; flex-grow: 0; justify-content: center; @@ -366,26 +453,25 @@ hdapp-available { } } -.action-link{ +.action-link { @extend .right-link; background-color: $color-yellow; color: $color-white; font-weight: bold; text-transform: uppercase; - .icon-plus{ + + .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/main.scss b/src/styles/main.scss index 36da0c7..57c2b36 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -169,58 +169,65 @@ h4 { max-width: 650px; } /* sub menu (right menu) */ -#mainContainer > div { +#mainContainer { display: flex; - flex-direction: row-reverse; - align-items: stretch; - - > sib-router { - font-family: monospace; - color: $color-black; - background-color: $color-grey-light2; + > div { + flex-grow: 1; display: flex; - flex-direction: column; + flex-direction: row-reverse; + align-items: stretch; - sib-route { - cursor: pointer; + > sib-router { + font-family: monospace; + color: $color-black; + background-color: $color-grey-light2; + display: flex; + flex-direction: column; - > div { - position: relative; - padding: 1.5em 3em; - border-bottom: 1px solid $color-grey; - } + sib-route { + cursor: pointer; - &: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 { + position: relative; + padding: 1.5em 3em; + border-bottom: 1px solid $color-grey; } - } - > div { - @include icon(arrow-left); + &:hover { + background-color: $color-grey; + } - &:before { - position: absolute; - transform: translateX(-50%); - opacity: 0; + &[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%); + opacity: 0; + } } } } - } - > div { - margin: 2.6em; - flex: 1 1 0; + > div { + //display: flex; + //margin: 2.6em; + padding:2.6em; + //flex: 1 1 0; + flex-grow: 1; + } } } @@ -300,6 +307,10 @@ sib-trigger.back { align-items: center; } -.reverse{ +.reverse { flex-direction: row-reverse; } + +.scrollY { + overflow-y: auto; +} diff --git a/www/lib/sib-core b/www/lib/sib-core index 837d45a..c876ae4 160000 --- a/www/lib/sib-core +++ b/www/lib/sib-core @@ -1 +1 @@ -Subproject commit 837d45a5a38c201456220ffe10e1dbc2ff526b55 +Subproject commit c876ae44e88d09b6862c878f53abdbf5d210fe52