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-edit.pug b/src/page-circle-edit.pug
index 7e23b009aac6b0f7f50f186be7b5fc196dbd8de4..11219694e89f849939683bd0e3a11972d6ce2d31 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -1,9 +1,71 @@
-#circle-edit.content-box.with-padding.with-form.full-width
- h1 Edit group
+div.content-box__info
+
+ include templates/hd-user-avatar.pug
+
+ sib-widget(name='hd-user-groups')
+ template ${await value.name}
+
+ sib-widget(name='team-template-edit')
+ template
+ sib-display(
+ data-src='${await value.user}'
+ fields='account.picture, sup(name, groups), sub(profile.city)'
+
+ widget-account.picture='hd-user-avatar'
+
+ multiple-groups=''
+ widget-groups='hd-user-groups'
+ )
+
+ sib-ac-checker(
+ permission="acl:Delete"
+ data-src="${await value['@id']}"
+ )
+ sib-delete(
+ data-src="${await value['@id']}"
+ data-label='Leave the circle'
+ )
+
+ //- Only to show the table grid
+ sib-ac-checker(
+ no-permission="acl:Delete"
+ data-src="${await value['@id']}"
+ )
+
+ sib-link(class="backlink", bind-resources, next='circle-profile') Back
+
+ h1 Edit your circle
+
sib-form.block(
- range-owner=`${endpoints.users}`,
- fields="name, description, owner, team, jabberID, jabberRoom"
- range-team=`${endpoints.users}`,
bind-resources
+
+ fields='block-circle__info(name, owner), description'
+ range-owner=`${endpoints.users}`
+
+ label-owner='owner'
+
+ class-name='form-label is-light is-half-width'
+ class-owner='form-label is-light is-half-width member-select color'
+ class-description='form-label is-light is-full-width'
+
+ widget-owner='sib-form-auto-completion'
+ widget-description='sib-form-textarea'
+
+ partial=''
+
+ submit-button='Save'
+ )
+
+ h2 Members list
+
+ div.table-header
+ div.cell Name
+ div.cell Access
+
+ sib-display.table-body(
+ bind-resources
+ fields='members'
+
+ multiple-members=''
+ widget-members='team-template-edit'
)
- //- widget-team='sib-form-multiple-dropdown',
diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug
index 9deac43d8291bb6bcd46492f2e09f499b9abcbc9..72d0f5270c34e2c8c3487c9464ec2b2a9c2e0232 100644
--- a/src/page-circle-profile.pug
+++ b/src/page-circle-profile.pug
@@ -1,29 +1,55 @@
-.content-box.with-padding.full-width
- h2 Channel's name:
- sib-display(
- fields='name',
- bind-resources
- )
-
- h2 Description:
- sib-display(
- fields='description',
- bind-resources
- )
-
- 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',
-
- template-teammate-contact='chat-link',
-
- value-before-pseudo='@',
- value-teammate-contact='Send a message',
- value-teammate-profile='View profile',
-
- widget-account.picture='sib-display-img',
+.content-box.full-width.with-form
+ sib-router(default-route='circle-profile')
+ sib-route(name='circle-profile')
+ sib-route(name='circle-edit')
+
+ #circle-profile(hidden)
+ include templates/hd-circle-team.pug
- next='member',
- bind-resources
- )
+ div.content-box__header.with-edit
+ sib-display(
+ bind-resources
+ fields='name'
+
+ class-name='name'
+ )
+
+ sib-link(class="editlink", next="circle-edit" bind-resources)
+
+ div.content-box__info
+
+ sib-display.block(
+ bind-resources
+ fields='label-description, description, entitled(title, creationDate)'
+
+ value-label-description='Description: '
+
+ default-description='No description available.'
+
+ value-title='Creation date:'
+ )
+
+ 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'
+ )
+
+ #circle-edit(hidden)
+ include page-circle-edit.pug
\ No newline at end of file
diff --git a/src/page-circle.pug b/src/page-circle.pug
index b66986c87f11846b79d7df029773935df90668cb..f132b75c18ea208cf99e8501b39a623c32b38010 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -1,26 +1,18 @@
.views-container
- #circle-chat
+ #circle-chat(hidden)
include page-circle-chat.pug
- //- #circle-profile
- //- include page-circle-profile.pug
- //- #circle-edit
- //- include page-circle-edit.pug
- //- #circle-create
- //- include page-circle-create.pug
-//- nav.jsRightMenu(role='navigation')
-//- sib-router(default-route='circle-chat')
-//- ul
-//- li.jsOffsiteToggle
-//- a Fold menu
-//- sib-route(name='circle-chat')
-//- li
-//- a Chat
-//- sib-route(name='circle-profile')
-//- li
-//- a Information
-//- sib-route(name='circle-edit')
-//- //- li
-//- //- a Edit
-//- sib-route(name='circle-create')
-//- //- li
-//- //- a Add new
\ No newline at end of file
+ #circle-information(hidden)
+ include page-circle-profile.pug
+ //-#circle-create
+ include page-circle-create.pug
+nav.jsRightMenu(role='navigation')
+ sib-router(default-route='circle-chat')
+ ul
+ li.jsOffsiteToggle
+ a Fold menu
+ sib-route(name='circle-chat')
+ li
+ a Chat
+ sib-route(name='circle-information')
+ li
+ a Information
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/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index e63db81aec093d3d221b0a1f4e18d1dae4f1f552..53cbb4746288b5fd292fe0a14529255450affc16 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -10,6 +10,7 @@ $color-210-25-95: hsl(210, 25%, 95%);
$color-222-57-95: hsl(222, 57%, 95%);
$color-213-20-91: hsl(213, 20%, 91%);
$color-221-51-90: hsl(221, 51%, 90%);
+$color-228-25-79: hsl(228, 25%, 79%);
$color-0-0-85: hsl(0, 0%, 85%);
$color-229-25-79: hsl(229, 25%, 79%);
$color-215-9-73: hsl(215, 9%, 73%);
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index c1ae4a76b1355ddabf012fd9be584d57082034b3..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;
}
@@ -151,15 +196,19 @@
sib-form-auto-completion.member-select {
align-self: flex-end;
- font-weight: normal;
+
+ >label:first-of-type>div {
+ font-weight: 600;
+ }
.ss-single-selected {
background-color: $color-222-57-95;
border: none;
border-radius: 0px;
display: flex;
+ font-weight: normal;
margin-top: 0.8rem;
- min-height: 3.9rem;
+ min-height: 4.4rem;
padding-left: 1rem;
text-transform: none;
@@ -170,6 +219,7 @@
}
.ss-content .ss-list .ss-option {
+ font-weight: normal;
text-transform: none;
}
}
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 8fa3b610762d56c249a69e9e7d14a0b86cd9b590..4a127933fa2df8e9e9cb0e377a894b5ff87f51bb 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -7,10 +7,6 @@ $breakpoints: (phone: 480px,
display: none !important;
}
-sib-ac-checker[hidden] {
- display: block !important;
-}
-
* {
outline: none;
}
@@ -56,14 +52,14 @@ h6 {
font-weight: 600;
padding: 0;
- span {
+ /*span {
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
- }
+ }*/
}
h1 {
@@ -75,7 +71,7 @@ h2 {
}
h3 {
- font-size: 1.6rem;
+ font-size: 1.7rem;
}
h4 {
@@ -105,10 +101,35 @@ a {
}
}
+sib-delete {
+
+ button {
+ @include icon('close');
+ background-color: $color-233-18-29;
+ border: none;
+ border-radius: 100em;
+ color: $color-0-0-100;
+ cursor: pointer;
+ font-size: 1.4rem;
+ font-weight: bold;
+ padding: 0.55rem 2.5rem;
+ text-transform: uppercase;
+
+ &::before {
+ font-size: 1.6rem;
+ margin-right: 1rem;
+ }
+ }
+}
+
%padding-main {
padding: 5rem;
}
+%padding-block {
+ padding: 3.2rem;
+}
+
.content-box {
@include window-style-modal();
display: flex;
@@ -119,7 +140,7 @@ a {
&.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);
}
@@ -129,11 +150,67 @@ a {
}
}
+.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;
}
+.content-box__header.with-edit {
+ border-bottom: 1px solid $color-221-51-90;
+
+ div {
+
+ .name {
+ text-transform: uppercase;
+ }
+
+ .edit {
+ color: $color-213-4-50;
+ font-size: 1.6rem;
+ margin-left: auto;
+ }
+ }
+}
+
.backlink {
font-size: 1.5rem;
margin: 2rem 0 0 2rem;
@@ -151,6 +228,15 @@ a {
}
}
+.editlink {
+
+ @include icon('pencil');
+ background: $color-244-73-62;
+ border-radius: 50%;
+ color: white;
+ padding: 12px;
+}
+
.name {
color: $color-216-4-22;
font-size: 2rem;
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/sidebar.scss b/src/styles/components/sidebar.scss
index 2377358acfd4a75138be9212db31b20c30fdd400..cea2695c77ee3735ff4daa629fec3490cf0c96a5 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -89,7 +89,7 @@
@include ci('list');
}
- &[name$='profile']>li {
+ &[name$='profile']>li, &[name$='information']>li {
@include ci('information');
}
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/_index.scss b/src/styles/layout/circle-profile/_index.scss
index 293bc89d18edef441868c87a50263f92dec8d61b..6efac3d0d23ebbb29c4cdaefc79d23d111b04107 100644
--- a/src/styles/layout/circle-profile/_index.scss
+++ b/src/styles/layout/circle-profile/_index.scss
@@ -1 +1,2 @@
-@import 'circle-profile';
\ No newline at end of file
+@import 'circle-profile';
+@import 'circle-edit';
\ No newline at end of file
diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1c3fe92542264009e9abc1ea44719f43cb69f89f
--- /dev/null
+++ b/src/styles/layout/circle-profile/circle-edit.scss
@@ -0,0 +1,140 @@
+h2 {
+ font-size: 1.7rem;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+
+.table-header {
+ background: $color-228-25-79;
+ color: white;
+ display: flex;
+ font-size: 1.6rem;
+ font-weight: 600;
+ justify-content: space-around;
+ text-align: center;
+
+ >*{
+ border-right: 1px solid $color-228-25-79;
+ flex: 1;
+ padding: 1rem;
+ width: 50%;
+ }
+
+ >*:first-of-type {
+ border-right: 1px solid white;
+ }
+}
+
+.table-body div team-template-edit {
+ display: flex;
+ justify-content: space-between;
+
+ >* {
+ border-bottom: 1px solid $color-228-25-79;
+ flex: 1;
+ width: 50%;
+ }
+
+ >*:nth-child(odd) {
+ border-left: 1px solid $color-228-25-79;
+ border-right: 1px solid $color-228-25-79;
+ padding: 0 2.2rem;
+ }
+
+ >*:nth-child(even) {
+ display: flex;
+ border-right: 1px solid $color-228-25-79;
+ justify-content: flex-end;
+ padding: 2.7rem 2.2rem;
+ }
+}
+
+.member-select.color {
+
+ .ss-main {
+ color: $color-233-18-29;
+ }
+}
+
+sib-multiple[widget='team-template-edit'] {
+
+ label {
+ display: none;
+ }
+
+ >div>team-template-edit>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;
+ }
+ }
+ }
+ }
+}
\ 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..834985a508be893ea68e9d9606cf932018701f5e 100644
--- a/src/styles/layout/circle-profile/circle-profile.scss
+++ b/src/styles/layout/circle-profile/circle-profile.scss
@@ -1,79 +1,139 @@
-#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;
- }
+#circle-information, #circle-edit {
+
+ .content-box__info {
+ @extend %padding-block;
+
+ .backlink {
+ text-align: right;
+ display: block;
+ }
+ }
+
+ .block {
- > 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%;
+ >form { /* peut-être à mettre dans main.scss */
+ margin-bottom: 2.6rem;
+
+ .form-label.is-dark>label {
+ margin-top: 0;
+
+ >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;
+
+ >*:first-child {
+ margin-right: 0.8rem;
+ }
}
+
+ >sib-multiple {
- > 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;
+ 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;
+ }
+ }
+ }
+ }
}
}
}
-}
\ 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
new file mode 100644
index 0000000000000000000000000000000000000000..62f7b37f7e8b634e78ac04ebe222993e640c0a7a
--- /dev/null
+++ b/src/templates/hd-circle-team.pug
@@ -0,0 +1,16 @@
+include hd-user-avatar.pug
+
+sib-widget(name='team-template')
+ template
+ sib-display(
+ 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=''
+ )
+
+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'
)
+