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

Merge branch '201-right-column-missing-on-the-circles' of git.happy-dev.fr:startinblox/applications/sib-app into gm-missing-edit-circle

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2019-10-24 21:44:14 +02:00
commit 7086dbd931
No known key found for this signature in database
GPG Key ID: F2702E6D22ED4D62
14 changed files with 271 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/page-circle-chat.pug
View File

@ -1,7 +1,9 @@
.content-box.full-width
sib-display.chat-header(
sib-display.content-box__header(
bind-resources
fields='name'
class-name='name'
)
.chat-view
sib-chat(

70
src/page-circle-profile.pug
View File

@ -1,41 +1,49 @@
.content-box.with-padding.full-width
.content-box.full-width.with-form
include templates/hd-circle-team.pug
div.content-box__header.with-edit
sib-display(
bind-resources
fields='name'
class-name='name'
)
sib-display.content-box__header.with-edit(
bind-resources
fields='name'
class-name='name'
value-status='Public'
)
sib-link(class="editlink", next="circle-edit" bind-resources)
sib-link(class="editlink", next="circle-edit" bind-resources)
div.content-box__info
h2 Channel's name:
sib-display(
fields='name',
bind-resources
)
sib-display.block(
bind-resources
fields='label-description, description, entitled(title, creationDate)'
h2 Description:
sib-display(
fields='description',
bind-resources
)
value-label-description='Description: '
h2 In group:
sib-display.block-group(
nested-field='team',
fields='teammate-img(account.picture), teammate-name(name), teammate-pseudonym(before-pseudo, username), teammate-profile, teammate-contact',
default-description='No description available.'
template-teammate-contact='chat-link',
value-title='Creation date:'
)
value-before-pseudo='@',
value-teammate-contact='Send a message',
value-teammate-profile='View profile',
sib-ac-checker(permission='acl:Write' bind-resources)
sib-form.block.team-form(
bind-resources
fields='team'
range-team=`${endpoints.users}`
partial=''
class-team='team form-label is-dark'
label-team='Members:'
widget-team='sib-form-auto-completion'
submit-button='Add a member'
)
sib-display.block(
bind-resources
fields='team'
multiple-team=''
widget-team='team-template'
)
widget-account.picture='sib-display-img',
next='member',
bind-resources
)

4
src/page-messages.pug
View File

@ -1,7 +1,9 @@
.content-box.full-width
sib-display.chat-header(
sib-display.content-box__header(
bind-resources
fields='username'
class-username='name'
)
.chat-view
sib-chat(

1
src/styles/_index.scss
View File

@ -16,7 +16,6 @@ div#viewport {
@import 'components/index';
@import 'layout/members/index';
@import 'layout/job-offers/index';
@import 'components/comment.scss';
@import 'layout/project-profile/index';
@import 'layout/circle-profile/index';
@import 'layout/user/index';

45
src/styles/base/form.scss
View File

@ -102,6 +102,51 @@
/* CLASSES Peut-être à sortir de .content-box */
.block.team-form>form { /* circle-profile */
display: flex;
flex-direction: row;
label {
>.ss-main {
font-weight: normal;
min-width: 35vw;
text-transform: none;
>.ss-single-selected {
align-items: center;
background-color: #ebeffa;
border: none;
border-radius: 0px;
display: flex;
justify-content: flex-end;
min-height: 4.2rem;
padding-left: 1.2rem;
.ss-arrow {
font-size: 1.8rem;
margin: 0 18px 0 0;
span {
border: solid $color-244-73-62;
border-width: 0 2px 2px 0;
}
}
}
}
}
>input[type='submit'] {
background-color: transparent;
border: 1px solid #6157e5;
color: #6157e5;
font-size: 1.4rem;
align-self: flex-end;
margin-bottom: 0.6rem;
margin-left: 4.2rem;
}
}
.form-container>form {
margin-top: 2.7rem;
}

1
src/styles/base/header.scss
View File

@ -145,6 +145,7 @@
}
img {
background-color: white;
height: 100%;
object-fit: cover;
object-position: center;

64
src/styles/base/main.scss
View File

@ -52,14 +52,14 @@ h6 {
font-weight: 600;
padding: 0;
span {
/*span {
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
}
}*/
}
h1 {
@ -71,7 +71,7 @@ h2 {
}
h3 {
font-size: 1.6rem;
font-size: 1.7rem;
}
h4 {
@ -126,6 +126,10 @@ sib-delete {
padding: 5rem;
}
%padding-block {
padding: 3.2rem;
}
.content-box {
@include window-style-modal();
display: flex;
@ -136,7 +140,7 @@ sib-delete {
&.full-width {
background: $color-0-0-100;
flex: 1;
font-size: 1.5rem;
font-size: 1.6rem;
margin: 0 auto;
min-height: calc(100vh - 84px);
}
@ -146,6 +150,45 @@ sib-delete {
}
}
.content-box__header {
padding: 2.3rem 3rem;
div {
color: $color-233-18-29;
display: flex;
font-size: 2rem;
&>* {
align-self: center;
}
.name {
font-size: 2rem;
font-weight: bold;
margin: 1.1rem 0;
}
}
}
.content-box__header.with-edit {
border-bottom: 1px solid $color-221-51-90;
display: flex;
justify-content: space-between;
sib-display {
display: flex;
text-transform: uppercase;
}
sib-link {
display: flex;
&::before {
align-self: center;
display: flex;
}
}
}
.drive {
width: 100%;
border: 0;
@ -186,17 +229,12 @@ sib-delete {
}
.editlink {
font-size: 1.6rem;
@include icon('pencil');
background: $color-244-73-62;
border-radius: 50%;
color: white;
&::before {
background: $color-244-73-62;
border-radius: 50%;
text-decoration: none;
height: 34px;
width: 34px;
}
padding: 12px;
}
.name {

1
src/styles/components/_index.scss
View File

@ -1,4 +1,5 @@
@import 'chat';
@import 'comment.scss';
@import 'filters';
@import 'howto';
@import 'sidebar';

17
src/styles/components/chat.scss
View File

@ -1,20 +1,3 @@
// chat
.chat-header {
div {
color: $color-233-18-29;
display: flex;
flex-direction: column;
margin: 3rem;
&>:first-child {
font-size: 2rem;
font-weight: bold;
}
}
}
.chat-view {
padding: 0;
height: calc(100vh - 84px - 83px);

2
src/styles/components/user-role.scss
View File

@ -5,5 +5,5 @@
font-size: 1.4rem;
font-weight: 400;
margin-right: 0.4rem;
padding: calc(1.6rem - 0.8em) 0.7em;
padding: 0.2rem 0.98rem;
}

179
src/styles/layout/circle-profile/circle-profile.scss
View File

@ -1,79 +1,134 @@
#circle-profile {
.block-group > div {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 0;
padding: 0;
.content-box__info {
@extend %padding-block;
}
sib-display > div {
align-items: center;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
display: grid;
font-size: 1.6rem;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
height: auto;
justify-items: center;
margin: 1rem 0.5rem 1rem 0;
position: relative;
padding-right: 1rem;
padding-top: 1rem;
text-align: center;
width: 14em;
.block {
&:hover {
cursor: pointer;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
top: -2px;
}
>form { /* peut-être à mettre dans main.scss */
margin-bottom: 2.6rem;
> sib-set-default[name='teammate-img'] {
background-color: $color-215-9-73;
border-radius: 50%;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
height: 6vh;
overflow: hidden;
width: 6vh;
.form-label.is-dark>label {
margin-top: 0;
img {
height: 100%;
left: 0;
object-fit: cover;
top: 0;
width: 100%;
>div:first-child {
@extend h3;
font-weight: bold;
margin: 0 0 1.4rem;
text-transform: uppercase;
}
}
}
sib-set-default[name='teammate-name'] {
grid-column: 3 / span 2;
grid-row: 1 / span 1;
>div { /* peut-être à mettre dans main.scss */
display: flex;
flex-direction: column;
margin-bottom: 2.6rem;
position: relative;
>[name^='label'] {
@extend h3;
font-weight: bold;
margin: 0 0 1.4rem;
text-transform: uppercase;
}
> sib-set-default[name='teammate-pseudonym'] {
align-self: start;
font-size: 1.2rem;
grid-column: 3 / span 2;
grid-row: 2 / span 1;
>[name='description'] {
max-width: 80%;
}
> sib-display-value[name='teammate-profile'] {
color: $color-216-4-22;
display: block;
font-size: 1.2rem;
grid-column: 1 / span 2;
grid-row: 3 / span 1;
}
>[name='entitled'] {
align-self: flex-end;
position: absolute;
> sib-display-value[name='teammate-contact'] {
color: $color-244-73-62;
font-size: 1.2rem;
justify-self: stretch;
grid-column: 3 / span 2;
grid-row: 3 / span 1;
>*:first-child {
margin-right: 0.8rem;
}
}
>sib-multiple {
label {
display: none;
}
>div>team-template[name='team']>sib-display>div {
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
>[name='account.picture'] {
align-items: center;
align-self: center;
background-color: $color-213-20-91;
border-radius: 50%;
display: flex;
grid-column: 1 / span 1;
grid-row: 1 / span 2;
height: 7vh;
justify-content: center;
overflow: hidden;
position: relative;
width: 7vh;
img {
background-color: white;
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
object {
height: 45%;
width: 45%;
}
}
>[name='sup'] {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
[name='name'] {
font-weight: 600;
}
sib-multiple {
display: flex;
margin-left: 1rem;
[name='groups'] {
@extend %user-role;
}
}
}
>[name='sub'] {
align-self: start;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
margin-top: 0.50rem;
>[name$='profile.city']:not(:empty) {
@include mdi('atom');
align-items: center;
display: flex;
&::before {
color: $color-43-100-50;
margin-right: 0.50rem;
}
}
}
}
}
}
}
}
}

2
src/styles/layout/project-profile/project-profile.scss
View File

@ -6,7 +6,7 @@
[name^='label-'] {
display: block;
font-weight: bold;
margin-bottom: 1.4rem;
margin: 1.4rem 0;
text-transform: uppercase;
@extend h2;
}

43
src/templates/hd-circle-team.pug
View File

@ -3,41 +3,14 @@ include hd-user-avatar.pug
sib-widget(name='team-template')
template
sib-display(
data-src="${value.user ? value.user['@id'] : ''}"
fields='account.picture',
data-src="${await value}"
fields='account.picture, sup(name, groups), sub(profile.city)'
widget-account.picture='hd-user-avatar'
widget-groups='hd-user-groups'
multiple-groups=''
)
div(name='user.thumb')
span ${value.user.name}
sib-display(
data-src="${value.user ? value.user.groups['@id'] : ''}",
fields='name',
multiple-name
)
span ${value.name}
include hd-user-avatar.pug
sib-widget(name='team-template')
template
sib-display.project-profile-user-avatar(
data-src="${value.user ? value.user['@id'] : ''}"
fields='account.picture',
widget-account.picture='hd-user-avatar'
)
div(name='user.thumb')
sib-display(
data-src="${value.user ? value.user['@id'] : ''}"
fields='name'
)
sib-display(
data-src="${value.user ? value.user['@id'] : ''}",
fields='name'
nested-field="groups"
)
sib-display(
data-src="${value.user ? value.user['@id'] : ''}"
fields='username'
)
sib-widget(name='hd-user-groups')
template ${await value.name}

1
src/templates/template-team.pug
View File

@ -21,3 +21,4 @@ sib-widget(name='team-template')
data-src="${value.user ? value.user['@id'] : ''}"
fields='username'
)