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

ui : project view & general designe scroll

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-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(

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

@ -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,
)

19
src/page-project.pug
View File

@ -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

226
src/styles/content.scss
View File

@ -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;

93
src/styles/main.scss
View File

@ -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;
}

2
www/lib/sib-core

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