diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 5a7302e..cd4e302 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -25,10 +25,10 @@ sib-router(default-route='circle-profile', hidden) sib-display.block( bind-resources - fields='team' + fields='members' - multiple-team='' - widget-team='circle-team-template' + multiple-members='' + widget-members='circle-team-template' ) div.box-button diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index ce38dc6..eecf780 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -4,4 +4,4 @@ @import 'howto'; @import 'sidebar'; @import 'skills'; -@import 'user-role'; \ No newline at end of file +@import 'tags'; \ No newline at end of file diff --git a/src/styles/components/tags.scss b/src/styles/components/tags.scss new file mode 100644 index 0000000..6fb27df --- /dev/null +++ b/src/styles/components/tags.scss @@ -0,0 +1,19 @@ +%tag-role { + border: 1px solid $color-45-95-54; + border-radius: 3px; + color: $color-210-4-50; + font-size: 1.4rem; + font-weight: 400; + margin-right: 0.6rem; + padding: 0.2rem 0.98rem; +} + +%tag-admin { + border: 1px solid $color-244-73-62; + border-radius: 3px; + color: $color-244-73-62; + font-size: 1.4rem; + font-weight: 400; + margin-left: 0.6rem; + padding: 0.3rem 0.98rem; +} \ No newline at end of file diff --git a/src/styles/components/user-role.scss b/src/styles/components/user-role.scss deleted file mode 100644 index 4e2c47e..0000000 --- a/src/styles/components/user-role.scss +++ /dev/null @@ -1,9 +0,0 @@ -%user-role { - border: 1px solid $color-45-95-54; - border-radius: 3px; - color: $color-210-4-50; - font-size: 1.4rem; - font-weight: 400; - margin-right: 0.4rem; - padding: 0.2rem 0.98rem; - } \ No newline at end of file diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index a491e70..c1e2683 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -133,7 +133,7 @@ display: flex; [name='groups'] { - @extend %user-role; + @extend %tag-role; } } } diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 7810d26..73e2b4e 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -15,87 +15,84 @@ } } - >div { /* peut-être à mettre dans main.scss */ - - >sib-multiple { + /* peut-être à mettre dans main.scss */ - label { - display: none; + circle-team-template>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%; } - >div>circle-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); + object { + height: 45%; + width: 45%; + } + } - >[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; + >[name='sup'] { + align-items: center; + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } + .user-name { + font-weight: 600; + } - object { - height: 45%; - width: 45%; - } + .tag-group { + display: flex; + margin-left: 0.6rem; + + [name='user.groups'] { + @extend %tag-role; } + } - >[name='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + .tag-admin:not(:empty) { + @extend %tag-admin; + } + } - [name='name'] { - font-weight: 600; - } + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; - sib-multiple { - display: flex; - margin-left: 1rem; + >.city:not(:empty) { + @include mdi('atom'); + align-items: center; + display: flex; - [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; - } - } + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; } } } diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index 2d483cf..160ecae 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -135,7 +135,7 @@ display: flex; [name='groups'] { - @extend %user-role; + @extend %tag-role; } } } diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss index d8324ab..172e863 100644 --- a/src/styles/layout/job-offers/job-offers.scss +++ b/src/styles/layout/job-offers/job-offers.scss @@ -88,7 +88,7 @@ sib-job-board { } >* { - @extend %user-role; + @extend %tag-role; } } diff --git a/src/styles/layout/members/members.scss b/src/styles/layout/members/members.scss index 79ffa52..6ee0e9c 100644 --- a/src/styles/layout/members/members.scss +++ b/src/styles/layout/members/members.scss @@ -32,7 +32,7 @@ } member-info-groups { - @extend %user-role; + @extend %tag-role; } #members-list { diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index 287172f..51893e1 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -117,11 +117,6 @@ @include mdi('atom'); align-items: center; display: flex; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } } } } diff --git a/src/styles/layout/user/user-profile.scss b/src/styles/layout/user/user-profile.scss index 60a05c2..2192233 100644 --- a/src/styles/layout/user/user-profile.scss +++ b/src/styles/layout/user/user-profile.scss @@ -35,7 +35,7 @@ padding-left: 1.4rem; groups-name { - @extend %user-role; + @extend %tag-role; } } } diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index 7db73b7..fa64815 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -3,14 +3,23 @@ include hd-user-avatar.pug sib-widget(name='circle-team-template') template sib-display( - data-src="${await value}" - fields='account.picture, sup(name, groups), sub(profile.city)' + data-src='${await value}' + fields='account.picture, sup(user.name, is_admin, user.groups), sub(user.profile.city)' + + class-user.name='user-name' + class-is_admin='tag-admin' + class-user.groups='tag-group' + class-user.profile.city='city' widget-account.picture='hd-user-avatar' - widget-groups='hd-user-groups' + widget-is_admin='hd-user-admin' + widget-user.groups='hd-user-groups' - multiple-groups='' + multiple-user.groups='' ) +sib-widget(name='hd-user-admin') + template ${await value ? "Administrator" : ""} + sib-widget(name='hd-user-groups') template ${await value.name}