diff --git a/src/page-circle-chat.pug b/src/page-circle-chat.pug
index 6d1df86607bf8babcfd99b10a3604e655046d871..34b02a869c12c6825acafb3954bb3b9887561479 100644
--- a/src/page-circle-chat.pug
+++ b/src/page-circle-chat.pug
@@ -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(
diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug
index 6f5fbc1c9448d716152db21a078810db8881e583..507818a84c8cf3ca44514f28ea9756810bcba3c4 100644
--- a/src/page-circle-profile.pug
+++ b/src/page-circle-profile.pug
@@ -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
- )
diff --git a/src/page-messages.pug b/src/page-messages.pug
index dec706aba70032fb7403e1f984c00cf5d31f9ca4..f12cb8344881ba8a51acbf5e6c96ad67b539d2ad 100644
--- a/src/page-messages.pug
+++ b/src/page-messages.pug
@@ -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(
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index e18fd59e933dd6285337dccb26631ea3fa8e1d19..3abbbe1e1da33b1af4bcf4043cd234c55e8ceed8 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -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';
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index 89177aa5f4539f09bdd8186cd06312177a855cff..650e85f95bca8844b9c20e26d05366e504412ecc 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -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;
}
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 776381b17967377fa6bf4fc997d12e88af718058..51cc2afd24f3c6492a833b6187ce138364cb0d7d 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -145,6 +145,7 @@
}
img {
+ background-color: white;
height: 100%;
object-fit: cover;
object-position: center;
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 5e8464cc2fddb9e057edde6037c1cf17512c8757..4a127933fa2df8e9e9cb0e377a894b5ff87f51bb 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -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 {
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index ee78562b8a04541a6eff878a327abcab492dd4bd..ce38dc6dc5c0fcaf487ad75015cbe4af9a2bdd27 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -1,4 +1,5 @@
@import 'chat';
+@import 'comment.scss';
@import 'filters';
@import 'howto';
@import 'sidebar';
diff --git a/src/styles/components/chat.scss b/src/styles/components/chat.scss
index 3683b44c849ab4f2c4c88bcaa72f1a597cb31aab..1004736e9aa52ea9b533725ce3bdeb80bd601532 100644
--- a/src/styles/components/chat.scss
+++ b/src/styles/components/chat.scss
@@ -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);
diff --git a/src/styles/components/user-role.scss b/src/styles/components/user-role.scss
index fed7680d90ab9e1a3fc2ec2608c76f60357c803e..4e2c47e4a0e94ca143032f6470a97c755db2316e 100644
--- a/src/styles/components/user-role.scss
+++ b/src/styles/components/user-role.scss
@@ -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;
}
\ No newline at end of file
diff --git a/src/styles/layout/circle-profile/circle-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss
index 1df3fff47db09021bfc3613e458820a4d19f1295..c4d75e4a4103cb728d8bf9f8c246f5502ce03638 100644
--- a/src/styles/layout/circle-profile/circle-profile.scss
+++ b/src/styles/layout/circle-profile/circle-profile.scss
@@ -1,79 +1,134 @@
#circle-profile {
- .block-group > div {
- display: flex;
- flex-flow: row wrap;
- justify-content: space-between;
- margin: 0;
- padding: 0;
-
- 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;
-
- &:hover {
- cursor: pointer;
- box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
- top: -2px;
- }
+ .content-box__info {
+ @extend %padding-block;
+ }
+
+ .block {
+
+ >form { /* peut-être à mettre dans main.scss */
+ margin-bottom: 2.6rem;
+
+ .form-label.is-dark>label {
+ margin-top: 0;
- > 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;
-
- 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;
}
}
+ }
+
+ >div { /* peut-être à mettre dans main.scss */
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 2.6rem;
+ position: relative;
- sib-set-default[name='teammate-name'] {
- grid-column: 3 / span 2;
- grid-row: 1 / span 1;
+ >[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;
+
+ >*: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;
- > 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;
+ [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;
+ }
+ }
+ }
+ }
}
}
}
-}
\ No newline at end of file
+}
diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss
index e8b8cdc762afa1656a6c2928399feba73f2d4150..1a8b0f25d7f520c9dfd6f8e96c02806a09d3bb87 100644
--- a/src/styles/layout/project-profile/project-profile.scss
+++ b/src/styles/layout/project-profile/project-profile.scss
@@ -6,7 +6,7 @@
[name^='label-'] {
display: block;
font-weight: bold;
- margin-bottom: 1.4rem;
+ margin: 1.4rem 0;
text-transform: uppercase;
@extend h2;
}
diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug
index c747f1ac473462c81ca8e191aa60d3112ac96398..62f7b37f7e8b634e78ac04ebe222993e640c0a7a 100644
--- a/src/templates/hd-circle-team.pug
+++ b/src/templates/hd-circle-team.pug
@@ -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',
- widget-account.picture='hd-user-avatar'
- )
- 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
+ data-src="${await value}"
+ fields='account.picture, sup(name, groups), sub(profile.city)'
-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'
+ widget-groups='hd-user-groups'
+
+ multiple-groups=''
)
- 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'
- )
\ No newline at end of file
+
+sib-widget(name='hd-user-groups')
+ template ${await value.name}
diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug
index f529ecfc003295b6719172a6e697d11541c30ede..9a89adaf40da757b67001a1e92cffa9a8319e03d 100644
--- a/src/templates/template-team.pug
+++ b/src/templates/template-team.pug
@@ -21,3 +21,4 @@ sib-widget(name='team-template')
data-src="${value.user ? value.user['@id'] : ''}"
fields='username'
)
+