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

ui : project view & general designe scroll

Browse Source
This commit is contained in:
simon louvet 2018-11-21 03:06:38 +01:00
parent b7da28c3a8
commit 3e91d94a08
6 changed files with 248 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/page-members.pug
View File

@ -26,7 +26,7 @@ div.containerH.reverse
widget-roles='sib-display-lookuplist', widget-roles='sib-display-lookuplist',
widget-skills='sib-display-lookuplist', widget-skills='sib-display-lookuplist',
set-name='pseudo,user.first_name', set-name='pseudo,user.first_name',
search-fields='name, skills, roles', search-fields='pseudo, skills, roles',
next='member') next='member')
//- sib-display#profiles-list( //- sib-display#profiles-list(

43
src/page-project-profile.pug
View File

@ -1,25 +1,38 @@
.frame .frame
template#client-template 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( 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', template-client='client-template',
bind-resources, widget-team='sib-display-lookuplist',
)
sib-display(
data-fields='client.logo,label-description, description, label-client, client',
value-label-description="Description:", value-label-description="Description:",
value-label-client="Client:", value-label-client="Client:",
template-client='client-template', value-const-title1="N°:",
value-const-title2="-",
bind-resources, bind-resources,
) )
h2 Team: h2 Team:
sib-display.members-list-condensed( div.containerH
id-suffix='team', sib-display.members-list-condensed(
data-fields='member.avatar, member.user', id-suffix='team',
widget-member.avatar='sib-display-img', data-fields='member.avatar, member.user, member.roles',
widget-member.user='hdapp-userinfo', widget-member.avatar='sib-display-img',
next='member', widget-member.user='hdapp-userinfo',
bind-resources, widget-member.roles='sib-display-lookuplist',
) next='member',
bind-resources,
)

19
src/page-project.pug
View File

@ -7,12 +7,13 @@ sib-router#project-router(default-route='project-profile')
div Edit div Edit
sib-route(name='project-create') sib-route(name='project-create')
div Add new div Add new
#project-views-container div.scrollY
#project-chat #project-views-container
include page-project-chat.pug #project-chat
#project-profile include page-project-chat.pug
include page-project-profile.pug #project-profile
#project-edit include page-project-profile.pug
include page-project-edit.pug #project-edit
#project-create include page-project-edit.pug
include page-project-create.pug #project-create
include page-project-create.pug

226
src/styles/content.scss
View File

@ -7,7 +7,6 @@
// //float: right; // //float: right;
// } // }
#offers-list { #offers-list {
> div { > div {
> sib-display { > sib-display {
@ -22,19 +21,23 @@
display: block; display: block;
@extend h2; @extend h2;
} }
label { label {
display: none; display: none;
} }
} }
} }
} }
[name='user-thumb'] { [name='user-thumb'] {
display: flex; display: flex;
align-items: center; align-items: center;
margin: -0.25em; margin: -0.25em;
> * { > * {
margin: 0.25em; margin: 0.25em;
} }
sib-display-img { sib-display-img {
width: 2.5em; width: 2.5em;
height: 2.5em; height: 2.5em;
@ -48,32 +51,37 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin: -0.25em; margin: -0.25em;
> * { > * {
margin: 0.25em; margin: 0.25em;
} }
strong { strong {
@extend %button; @extend %button;
} }
} }
// skills // skills
#member-profile sib-display-lookuplist, #member-profile sib-display-lookuplist,
#profiles-list sib-display-lookuplist, #profiles-list sib-display-lookuplist,
sib-display-lookuplist { sib-display-lookuplist {
&[name$='skills'] { &[name$='skills'] {
display: block; display: block;
ul,
li { li,
ul {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
ul { ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 1em -0.25em; margin: 1em -0.25em;
} }
li { li {
padding: 0.5em 1em; padding: 0.5em 1em;
border: 1px solid; border: 1px solid;
@ -82,12 +90,13 @@ sib-display-lookuplist {
} }
} }
} }
// group // group
#group-profile { #group-profile {
sib-display-div[name='name'] div { sib-display-div[name='name'] div {
@extend h1; @extend h1;
} }
sib-display-div[name='label-description'] div { sib-display-div[name='label-description'] div {
@extend h2; @extend h2;
} }
@ -102,14 +111,14 @@ sib-display-lookuplist {
height: 400px; height: 400px;
height: calc(100vh - 143px - 3em); height: calc(100vh - 143px - 3em);
height: calc(100vh - var(--pos-top, 143px) - 3em); height: calc(100vh - var(--pos-top, 143px) - 3em);
> sib-chat { > sib-chat {
@include pos(); @include pos();
} }
} }
// member-profile && members // member-profile && members
.members-list-condensed { .members-list-condensed {
display: block;
img { img {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -117,23 +126,44 @@ sib-display-lookuplist {
object-fit: cover; object-fit: cover;
object-position: top; object-position: top;
} }
label { label {
display: none; display: none;
} }
> div > sib-display > div { > div > sib-display > div {
margin: 1em 0; margin: 1em 0;
display: flex; display: grid;
} grid-template-columns: [first] 50px [middle] auto [end];
ul { grid-template-rows: [first] 25px [middle] 25px [end];
padding-left: 1em; 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 { #profiles-list > div > sib-display {
cursor: pointer; cursor: pointer;
} }
sib-display#member-info,
#profiles-list > div > sib-display { #profiles-list > div > sib-display,
sib-display#member-info {
display: block; display: block;
position: relative; position: relative;
@extend %frame; @extend %frame;
@ -142,6 +172,7 @@ sib-display#member-info,
label { label {
display: none; display: none;
} }
sib-display-img { sib-display-img {
$width: 55%; $width: 55%;
display: block; display: block;
@ -150,6 +181,7 @@ sib-display#member-info,
padding-bottom: $width; padding-bottom: $width;
height: 0; height: 0;
margin: 2em auto; margin: 2em auto;
img { img {
display: block; display: block;
position: absolute; position: absolute;
@ -170,35 +202,44 @@ sib-display#member-info,
margin-bottom: 1em; margin-bottom: 1em;
text-align: center; text-align: center;
} }
hdapp-userinfo { hdapp-userinfo {
@extend h1; @extend h1;
} }
div[name='pseudonym'] { div[name='pseudonym'] {
div { div {
display: inline; display: inline;
} }
} }
[name=infos]{
[name=infos] {
margin: 2em 0; margin: 2em 0;
>*{
> * {
display: block; display: block;
margin: 0.5em 0; margin: 0.5em 0;
} }
} }
ul[name$='roles'] * { ul[name$='roles'] * {
@include icon('user'); @include icon('user');
} }
ul[name$='cell'] * { ul[name$='cell'] * {
@include icon('location-pin'); @include icon('location-pin');
} }
sib-display-mailto { sib-display-mailto {
display: block; display: block;
@include icon('envelope'); @include icon('envelope');
} }
sib-display-tel { sib-display-tel {
display: block; display: block;
@include icon('phone'); @include icon('phone');
} }
hdapp-hyperlink { hdapp-hyperlink {
display: block; display: block;
@include icon('link'); @include icon('link');
@ -212,6 +253,7 @@ sib-display#member-info,
hdapp-available { hdapp-available {
display: block; display: block;
text-align: right; text-align: right;
strong { strong {
@extend %button; @extend %button;
} }
@ -219,6 +261,7 @@ hdapp-available {
#profiles-list { #profiles-list {
display: block; display: block;
> div { > div {
display: grid; display: grid;
margin-top: 1em; margin-top: 1em;
@ -226,35 +269,42 @@ hdapp-available {
grid-gap: 1em; grid-gap: 1em;
} }
} }
#profiles-list>sib-form>form{
#profiles-list > sib-form > form {
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
label{
flex-basis :5em; label {
flex-basis: 5em;
flex-shrink: 0; flex-shrink: 0;
} }
input{
flex-grow:1; input {
min-width:0; 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; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
label{
flex-basis :5em; label {
flex-basis: 5em;
flex-shrink: 0; flex-shrink: 0;
} }
input{
flex-grow:1; input {
min-width:0; 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(); @include list-reset();
} }
} }
#member-profile { #member-profile {
@include media('width>tablet') { @include media('width>tablet') {
div[name='header'] { div[name='header'] {
@ -271,17 +322,21 @@ hdapp-available {
width: 50%; width: 50%;
} }
} }
div[name='name'] { div[name='name'] {
@extend h1; @extend h1;
div { div {
display: inline-block; display: inline-block;
margin-right: 0.4em; margin-right: 0.4em;
} }
} }
div[name='pseudonym'] { div[name='pseudonym'] {
margin-top: -1em; margin-top: -1em;
margin-bottom: 1em; margin-bottom: 1em;
} }
#member-info { #member-info {
&:after { &:after {
content: ''; content: '';
@ -290,70 +345,102 @@ hdapp-available {
} }
} }
} }
// projects // projects
#project-profile {
div[name^='label-'] { #project-profile sib-display {
@extend h2; sib-display-div {
> [name^='label-'] {
@extend h2;
}
} }
[name='title'] { [name='title'] {
@extend h1; @extend h1;
> sib-display-div { display: flex;
display: inline-block;
} > * {
div[name='number'] { padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
&:before {
content: '#';
}
} }
div[name='name'] {
> [name^='const-'] {
padding-left: 0;
padding-right: 0;
}
> [name='name'] {
font-weight: normal; 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; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
>*{
display: flex; > * {
margin-bottom: 1em; display: flex;
label{ margin-bottom: 1em;
flex-basis : 8em;
flex-shrink: 0; label {
} flex-basis: 8em;
input,textarea{ flex-shrink: 0;
flex-grow: 1; }
min-width: 0;
} input,
textarea {
flex-grow: 1;
min-width: 0;
}
} }
} }
.right-link{ .right-link {
padding: 0.5em; padding: 0.5em;
margin-bottom: 1em; margin-bottom: 1em;
margin-left: 1em; margin-left: 1em;
flex-basis: content; flex-basis: content;
border-radius: 2em; border-radius: 2em;
div[class*="icon-"]{
margin-right: 1em div[class*="icon-"] {
margin-right: 1em;
} }
} }
.how-link{ .how-link {
@extend .right-link; @extend .right-link;
background-color: $color-white; background-color: $color-white;
color: $color-black; color: $color-black;
.icon-idea{
.icon-idea {
background-color: $color-yellow-light; background-color: $color-yellow-light;
border-radius :100%; border-radius: 100%;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
justify-content: center; justify-content: center;
@ -366,26 +453,25 @@ hdapp-available {
} }
} }
.action-link{ .action-link {
@extend .right-link; @extend .right-link;
background-color: $color-yellow; background-color: $color-yellow;
color: $color-white; color: $color-white;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
.icon-plus{
.icon-plus {
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
&:before { &:before {
//font-size: 1.3em; //font-size: 1.3em;
} }
} }
} }
/* /*
label { label {
@extend h2; @extend h2;

93
src/styles/main.scss
View File

@ -169,58 +169,65 @@ h4 {
max-width: 650px; max-width: 650px;
} }
/* sub menu (right menu) */ /* sub menu (right menu) */
#mainContainer > div { #mainContainer {
display: flex; display: flex;
flex-direction: row-reverse; > div {
align-items: stretch; flex-grow: 1;
> sib-router {
font-family: monospace;
color: $color-black;
background-color: $color-grey-light2;
display: flex; display: flex;
flex-direction: column; flex-direction: row-reverse;
align-items: stretch;
sib-route { > sib-router {
cursor: pointer; font-family: monospace;
color: $color-black;
background-color: $color-grey-light2;
display: flex;
flex-direction: column;
> div { sib-route {
position: relative; cursor: pointer;
padding: 1.5em 3em;
border-bottom: 1px solid $color-grey;
}
&:hover { > div {
background-color: $color-grey; position: relative;
} padding: 1.5em 3em;
border-bottom: 1px solid $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 { &:hover {
@include icon(arrow-left); background-color: $color-grey;
}
&:before { &[active] {
position: absolute; font-weight: bold;
transform: translateX(-50%); background-color: $color-black;
opacity: 0; 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 { > div {
margin: 2.6em; //display: flex;
flex: 1 1 0; //margin: 2.6em;
padding:2.6em;
//flex: 1 1 0;
flex-grow: 1;
}
} }
} }
@ -300,6 +307,10 @@ sib-trigger.back {
align-items: center; align-items: center;
} }
.reverse{ .reverse {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.scrollY {
overflow-y: auto;
}

2
www/lib/sib-core

@ -1 +1 @@
Subproject commit 837d45a5a38c201456220ffe10e1dbc2ff526b55 Subproject commit c876ae44e88d09b6862c878f53abdbf5d210fe52