From 74a453d169b8a0c259f6ade26a366de58e1dea6d Mon Sep 17 00:00:00 2001 From: Matthieu Fesselier Date: Fri, 20 Mar 2020 14:48:56 +0100 Subject: [PATCH 1/9] bugfix: remove extra-context --- src/dependencies.pug | 5 +---- src/header.pug | 2 +- src/styles/base/header.scss | 4 ++-- src/styles/layout/job-offers/job-offers.scss | 2 +- src/templates/hd-customer.pug | 2 +- src/views/admin/page-admin-projects.pug | 6 +++--- 6 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index ec43d24..caa799d 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -42,8 +42,5 @@ script(data-default-context, type="application/ld+json") | "author": "http://happy-dev.fr/owl/#author", | "account": "http://happy-dev.fr/owl/#account", | "jabberID": "foaf:jabberID", - | "picture": "foaf:depiction", - | "firstName": "http://happy-dev.fr/owl/#first_name", - | "lastName": "http://happy-dev.fr/owl/#last_name", - | "isAdmin": "http://happy-dev.fr/owl/#is_admin" + | "picture": "foaf:depiction" | } diff --git a/src/header.pug b/src/header.pug index ef56755..83e9cfb 100644 --- a/src/header.pug +++ b/src/header.pug @@ -17,7 +17,7 @@ include templates/hd-user-avatar.pug details#user-controls.notLoggedIn summary(tabindex='0' role='button') sib-display#user-controls__profile( - fields='firstName, account.picture' + fields='first_name, account.picture' widget-account.picture='hd-user-avatar' bind-user ) diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index b330266..093cfcd 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -169,7 +169,7 @@ width: 45%; } - sib-display-value[name='firstName'] { + sib-display-value[name='first_name'] { @include icon('arrow-down'); align-items: center; display: flex; @@ -241,7 +241,7 @@ div { - sib-display-value[name='firstName'] { + sib-display-value[name='first_name'] { @include icon('close'); &::before { diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss index 172e863..64c41fe 100644 --- a/src/styles/layout/job-offers/job-offers.scss +++ b/src/styles/layout/job-offers/job-offers.scss @@ -75,7 +75,7 @@ sib-job-board { margin: 0.25em; } - [name='author.firstName'] { + [name='author.first_name'] { color: $color-0-0-29; font-weight: 600; } diff --git a/src/templates/hd-customer.pug b/src/templates/hd-customer.pug index 813aa81..04e891f 100644 --- a/src/templates/hd-customer.pug +++ b/src/templates/hd-customer.pug @@ -10,7 +10,7 @@ sib-widget(name='hd-customer') div h3 Contact: ul - li #[span(class='mdi-account-outline') ${await value.firstName} ${await value.lastName ? await value.lastName : ""}]${await value.role ? `, ${await value.role}` : ""} + li #[span(class='mdi-account-outline') ${await value.first_name} ${await value.last_name ? await value.last_name : ""}]${await value.role ? `, ${await value.role}` : ""} li span(class='link-color norm-weight mdi-email-outline') a(href='mailto:${await value.email}') ${await value.email} diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index d93aa33..6ae79e9 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/src/views/admin/page-admin-projects.pug @@ -50,9 +50,9 @@ sib-display( data-src='${value}' fields='user' - search-fields='isAdmin' - search-value-isAdmin='true' - search-widget-isAdmin='sib-form-hidden' + search-fields='is_admin' + search-value-is_admin='true' + search-widget-is_admin='sib-form-hidden' widget-user='project-captain' ) From 675921d84acf972d2e7b72a048ee9f384a0c8b1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 2 Apr 2020 16:09:23 +0000 Subject: [PATCH 2/9] update: clear unused and fixes CSS --- .gitlab-ci.yml | 19 +- src/dependencies.pug | 2 - src/header.pug | 2 +- src/page-circle.pug | 2 +- src/page-project.pug | 2 +- src/styles/base/form.scss | 48 ++--- src/styles/base/header.scss | 7 +- src/styles/base/main.scss | 58 +++--- src/styles/base/table.scss | 89 ++------ src/styles/base/user-thumb.scss | 108 ++++++++++ src/styles/components/_index.scss | 2 +- src/styles/components/howto.scss | 3 - src/styles/components/tags.scss | 3 +- src/styles/index.scss | 2 +- src/styles/layout/circle/_index.scss | 1 - src/styles/layout/circle/circle-profile.scss | 72 +------ src/styles/layout/circle/circle.scss | 191 ------------------ src/styles/layout/job-offers/job-offers.scss | 2 +- .../project-profile/project-profile.scss | 177 ---------------- .../layout/project-profile/project.scss | 8 - .../{project-profile => project}/_index.scss | 1 - .../layout/project/project-profile.scss | 115 +++++++++++ src/templates/hd-captain.pug | 8 +- src/templates/hd-circle-team.pug | 7 +- src/templates/hd-customer.pug | 2 +- src/templates/hd-project-team.pug | 9 +- src/views/admin/page-admin-circles-create.pug | 6 +- src/views/admin/page-admin-circles.pug | 10 +- .../admin/page-admin-projects-create.pug | 4 +- src/views/admin/page-admin-projects.pug | 10 +- src/views/admin/page-admin-users.pug | 2 +- src/views/circle/page-circle-edit.pug | 13 +- src/views/job-offer/page-job-offer-create.pug | 17 +- src/views/job-offer/page-job-offer-edit.pug | 2 +- src/views/project/page-project-edit.pug | 4 +- src/views/project/page-project-profile.pug | 2 +- 36 files changed, 376 insertions(+), 634 deletions(-) create mode 100644 src/styles/base/user-thumb.scss delete mode 100644 src/styles/layout/circle/circle.scss delete mode 100644 src/styles/layout/project-profile/project-profile.scss delete mode 100644 src/styles/layout/project-profile/project.scss rename src/styles/layout/{project-profile => project}/_index.scss (58%) create mode 100644 src/styles/layout/project/project-profile.scss diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 975c459..fe0b5c3 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -99,7 +99,7 @@ stg2: alpha: stage: deployment environment: - name: paris + name: alpha url: https://alpha.happy-dev.fr script: - echo "$APP_CONFIG_ALPHA" > config.json @@ -113,6 +113,23 @@ alpha: tags: - deploy +community: + stage: deployment + environment: + name: community + url: https://community.startinblox.com + script: + - echo "$APP_CONFIG_COMMUNITY" > config.json + - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key + - npm install + - npm run build + - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* community@astral.startinblox.com:~/front/ + only: + - master + when: manual + tags: + - deploy + etuc: stage: deployment environment: diff --git a/src/dependencies.pug b/src/dependencies.pug index ec43d24..4f7189a 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -43,7 +43,5 @@ script(data-default-context, type="application/ld+json") | "account": "http://happy-dev.fr/owl/#account", | "jabberID": "foaf:jabberID", | "picture": "foaf:depiction", - | "firstName": "http://happy-dev.fr/owl/#first_name", - | "lastName": "http://happy-dev.fr/owl/#last_name", | "isAdmin": "http://happy-dev.fr/owl/#is_admin" | } diff --git a/src/header.pug b/src/header.pug index ef56755..83e9cfb 100644 --- a/src/header.pug +++ b/src/header.pug @@ -17,7 +17,7 @@ include templates/hd-user-avatar.pug details#user-controls.notLoggedIn summary(tabindex='0' role='button') sib-display#user-controls__profile( - fields='firstName, account.picture' + fields='first_name, account.picture' widget-account.picture='hd-user-avatar' bind-user ) diff --git a/src/page-circle.pug b/src/page-circle.pug index 9f84093..8aad774 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -10,7 +10,7 @@ class-description='h1-aside description' ) button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU - div.content-box__info + div sib-ac-checker(permission='acl:Read', bind-resources) #circle-chat(hidden) include views/circle/page-circle-chat.pug diff --git a/src/page-project.pug b/src/page-project.pug index ffb9269..66fbfca 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -16,7 +16,7 @@ .mobile-sidebar-button.jsMobileSidebarOpenButton button.icon-arrow-left-circle span MENU - div.content-box__info + div sib-ac-checker(permission='acl:Read', bind-resources) #project-chat(hidden) include views/project/page-project-chat.pug diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 388f197..6fc03d4 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -1,3 +1,18 @@ +#admin-circle-create, +#admin-project-create { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; + } +} + .content-box { &.with-form { @@ -23,16 +38,6 @@ padding-bottom: 0.8rem; } - p.center { - margin: 0; - text-align: center; - } - - [name$='-text'] { - font-size: 1.5rem; - margin-bottom: 2rem; - } - [name^='block-'] { margin-bottom: 2.75rem; } @@ -153,20 +158,17 @@ margin-top: 2.7rem; } - .form-edit { + .form-edit>form { - >form { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-dark, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; } } diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index b330266..291b92e 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -65,6 +65,7 @@ details { margin-right: 2.5rem; + position: relative; @include breakpoint(sm) { margin-right: 0; @@ -82,7 +83,7 @@ } } - details { + .sib-notifications__container { position: relative; .sib-notifications__button { @@ -169,7 +170,7 @@ width: 45%; } - sib-display-value[name='firstName'] { + sib-display-value[name='first_name'] { @include icon('arrow-down'); align-items: center; display: flex; @@ -241,7 +242,7 @@ div { - sib-display-value[name='firstName'] { + sib-display-value[name='first_name'] { @include icon('close'); &::before { diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 32b1174..5c06575 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -1,12 +1,3 @@ -$breakpoints: (phone: 480px, - tablet: 768px, - desktop: 1024px) !default; - -[hidden], -.hidden { - display: none !important; -} - * { outline: none; } @@ -95,6 +86,10 @@ nav { display: contents; } +[hidden], +.hidden { + display: none !important; +} img { max-height: 100%; @@ -121,12 +116,6 @@ h6 { }*/ } -.h2-like { - display: block; - margin: 14.94px 0; - width: 100%; -} - h1, .h1-like { color: $color-233-18-29; font-size: 2rem; @@ -143,6 +132,12 @@ h2, .h2-like { text-transform: uppercase; } +.h2-like { + display: block; + margin: 14.94px 0; + width: 100%; +} + h3 { color: $color-216-4-22; font-size: 1.7rem; @@ -164,21 +159,6 @@ h5 { padding: 3.2rem; } -#admin-circle-create, -#admin-project-create { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-dark, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } -} - .content-box { @include window-style-modal(); display: flex; @@ -199,6 +179,7 @@ h5 { } } +/* Header inside circle, project view */ .content-box__header { border-bottom: 1px solid $color-221-51-90; padding: 3rem; @@ -257,6 +238,12 @@ h5 { } } +.content-box__info { + @extend %padding-block; + display: flex; + flex-direction: column; +} + .modal { color: white; margin: 75px; @@ -280,11 +267,6 @@ h5 { } } -.drive { - width: 100%; - border: 0; -} - .backlink { @include icon('arrow-left-circle'); color: $color-233-18-29; @@ -297,6 +279,11 @@ h5 { margin-right: 1rem; text-decoration: none; } + + &.right { + display: block; + text-align: right; + } } .name { @@ -342,6 +329,7 @@ h5 { @import 'table'; @import 'header'; @import 'menu-left'; +@import 'user-thumb'; // Button global CSS sib-delete, diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index af42ed7..cb5e2a7 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -6,17 +6,6 @@ #admin-project-list, #admin-project-create { - .content-box__info { - @extend %padding-block; - display: flex; - flex-direction: column; - - .backlink { - text-align: right; - display: block; - } - } - .table { .table-header { @@ -85,83 +74,35 @@ padding-top: 2.5rem; } - .cell-with-id-card>div, - /* for the table in circle-edit */ - .cell-with-id-card>sib-display>div, - project-captain[name='user']>sib-display>div { - /* for the captain's cell in project-admin */ - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); + .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */ { + @extend %user-thumb__grid; padding: 0 2.2rem; - >[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%; - } + >.user-thumb__picture { + @extend %user-thumb__picture; } >[name='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + @extend %user-thumb__grid-sup; - [name$='name'] { - color: #7A7F85; - font-weight: 600; - margin-right: 1rem; + .user-thumb__name { + @extend %user-thumb__name; } - sib-multiple>div { - display: flex; - - [name='groups'] { - @extend %tag-role; - } + .user-thumb__groups { + @extend %user-thumb__groups; } } >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; + @extend %user-thumb__grid-inf; - >[name$='username']:not(:empty) { - align-items: center; - display: flex; + >.user-thumb__username:not(:empty) { + @extend %user-thumb__username; + } - &::before { - content: '@'; - - } + >.user-thumb__city:not(:empty) { + @extend %user-thumb__city; } } } diff --git a/src/styles/base/user-thumb.scss b/src/styles/base/user-thumb.scss new file mode 100644 index 0000000..db3902d --- /dev/null +++ b/src/styles/base/user-thumb.scss @@ -0,0 +1,108 @@ +%user-thumb__grid { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); +} + +%user-thumb__grid-sup { + align-items: center; + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; +} + +%user-thumb__grid-inf { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; +} + +%user-thumb__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%; + } +} + +%user-thumb__name { + color: #7A7F85; + font-weight: 600; + margin-right: 1rem; +} + +%user-thumb__groups { + display: flex; + margin-bottom: 1px; + margin-left: 0.6rem; + + [name='groups'], + [name='user.groups'] { + @extend %tag-role; + } +} + +%user-thumb__admin { + @extend %tag-admin; +} + +%user-thumb__username { + align-items: center; + display: flex; + + &::before { + content: '@'; + } +} + +%user-thumb__city { + @include mdi('atom'); + align-items: center; + display: flex; + margin-right: 1.6rem; + + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; + } +} + +%user-thumb__lead { + @include icon('eyeglass'); + align-items: center; + display: flex; + + &::before { + color: $color-43-100-50; + font-size: 1.9rem; + font-weight: bold; + margin-left: 0; + margin-right: 0.50rem; + } +} diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index eecf780..30de5d0 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -1,5 +1,5 @@ @import 'chat'; -@import 'comment.scss'; +@import 'comment'; @import 'filters'; @import 'howto'; @import 'sidebar'; diff --git a/src/styles/components/howto.scss b/src/styles/components/howto.scss index 391e9ba..12b29e5 100644 --- a/src/styles/components/howto.scss +++ b/src/styles/components/howto.scss @@ -12,6 +12,3 @@ flex-shrink: 0; } } - - - diff --git a/src/styles/components/tags.scss b/src/styles/components/tags.scss index f5435c2..80e0310 100644 --- a/src/styles/components/tags.scss +++ b/src/styles/components/tags.scss @@ -15,6 +15,5 @@ font-size: 1.4rem; font-weight: 400; margin-left: 0.6rem; - margin-top: -2px; - padding: 0.3rem 0.98rem; + padding: 0.35rem 0.98rem; } \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index b2b17ba..912d488 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -18,7 +18,7 @@ div#viewport { @import 'components/index'; @import 'layout/members/index'; @import 'layout/job-offers/index'; - @import 'layout/project-profile/index'; + @import 'layout/project/index'; @import 'layout/circle/index'; @import 'layout/user/index'; @import 'layout/events/index'; diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss index 940c5fc..3de89ec 100644 --- a/src/styles/layout/circle/_index.scss +++ b/src/styles/layout/circle/_index.scss @@ -1,3 +1,2 @@ -@import 'circle'; @import 'circle-profile'; @import 'circle-admin'; diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 64dbf51..4afb54a 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -8,62 +8,22 @@ .block { /* peut-être à mettre dans main.scss */ - 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); + .user-thumb>div { + @extend %user-thumb__grid; - >[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%; - } + >.user-thumb__picture { + @extend %user-thumb__picture; } >[name='sup'] { - align-items: center; - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + @extend %user-thumb__grid-sup; - .user-name { - font-weight: 600; + .user-thumb__name { + @extend %user-thumb__name; } .tag-group { - display: flex; - margin-bottom: 1px; - margin-left: 0.6rem; - - [name='groups'] { - @extend %tag-role; - } + @extend %user-thumb__groups; } .tag-admin:not(:empty) { @@ -72,20 +32,10 @@ } >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; + @extend %user-thumb__grid-inf; - >.city:not(:empty) { - @include mdi('atom'); - align-items: center; - display: flex; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } + >.user-thumb__city:not(:empty) { + @extend %user-thumb__city; } } } diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss deleted file mode 100644 index b6f7d2e..0000000 --- a/src/styles/layout/circle/circle.scss +++ /dev/null @@ -1,191 +0,0 @@ -#circle-information, -#circle-edit, -#admin-circle-list, -#admin-circle-create, -#admin-project-list, -#admin-project-create { - - .content-box__info { - @extend %padding-block; - display: flex; - flex-direction: column; - - .backlink { - text-align: right; - display: block; - } - } - - .table { - - .table-header { - display: flex; - flex: 1; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - text-align: center; - - &.grey-color { - background: $color-228-25-79; - color: white; - } - - >* { - border-right: 1px solid white; - flex: 1; - padding: 2.1rem 0; - text-align: center; - } - - >*:last-of-type { - border-right: 1px solid $color-228-25-79; - } - } - - .table-body { - - >div:first-of-type>sib-display>div, - team-template-edit[name='members'] { - display: flex; - border-left: 1px solid $color-228-25-79; - } - - .border { - border-bottom: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - } - - .cell { - text-align: center; - word-wrap: break-word; - } - - .w25 { - width: 25%; - } - - .w33 { - width: 33.3333%; - } - - .w50 { - width: 50%; - } - - .hashtag::before { - content: '#'; - } - } - - .cell-with-name { - color: $color-233-18-29; - font-weight: 600; - padding-top: 2.5rem; - } - - .cell-with-id-card>div, /* for the table in circle-edit */ - .cell-with-id-card>sib-display>div, - project-captain[name='user']>sib-display>div { /* for the captain's cell in project-admin */ - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - padding: 0 2.2rem; - - >[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'] { - color: #7A7F85; - font-weight: 600; - margin-right: 1rem; - } - - sib-multiple>div { - display: flex; - - [name='groups'] { - @extend %tag-role; - } - } - } - - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; - - >[name$='username']:not(:empty) { - align-items: center; - display: flex; - - &::before { - content: '@'; - - } - } - } - } - - .cell-with-buttons { - align-items: center; - display: flex; - justify-content: center; - - [name='button'] { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-blue, - .bordered, - .btn-margin-left; - } - } - } - - sib-ac-checker { - align-items: center; - display: flex; - justify-content: center; - } - } -} \ No newline at end of file diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss index 172e863..64c41fe 100644 --- a/src/styles/layout/job-offers/job-offers.scss +++ b/src/styles/layout/job-offers/job-offers.scss @@ -75,7 +75,7 @@ sib-job-board { margin: 0.25em; } - [name='author.firstName'] { + [name='author.first_name'] { color: $color-0-0-29; font-weight: 600; } diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss deleted file mode 100644 index f212645..0000000 --- a/src/styles/layout/project-profile/project-profile.scss +++ /dev/null @@ -1,177 +0,0 @@ -#project-profile { - - .button-question__position { - position: relative; - bottom: 5px; - } - - .button-question__color { - color: $color-216-4-22; - } - - .customer-box { - display: flex; - margin: 1.6rem 0; - - >* { - border: 1px solid $color-221-51-90; - flex: 0 1 50%; - padding: 1.7rem 2rem; - - &:first-child { - - li:last-child { - margin-top: 3rem; - - p { - margin-top: 0.8rem; - } - } - } - - &:last-child { - border-left: none; - - li { - margin-bottom: 1.5rem; - } - } - } - } - - .customer-logo { - box-sizing: border-box; - display: flex; - height: 8.5vh; - justify-content: flex-end; - margin-top: 20px; - text-align: end; - width: 15vw; - } - - hd-captain>sib-display>div, - hd-project-team>sib-display>div { /* Maybe move it in main.scss. /!\ some fields are different */ - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - - >[name='user.account.picture'], - >[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; - - .user-name { - font-weight: 600; - } - - sib-multiple { - display: flex; - margin-left: 1rem; - - [name='groups'], - [name='user.groups'] { - @extend %tag-role; - } - } - - .tag-admin:not(:empty) { - @extend %tag-admin; - } - } - - >[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; - margin-right: 1.6rem; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } - } - - >[name$='name']:not(:empty), - >[name='is_lead'] { - @include icon('eyeglass'); - align-items: center; - display: flex; - - &::before { - color: $color-43-100-50; - font-size: 1.9rem; - font-weight: bold; - margin-left: 0; - margin-right: 0.50rem; - } - } - } - } - - ul { - list-style: none; - padding-left: 0; - - li { - margin-bottom: 0.5em; - - span::before { - color: $color-43-100-50; - font-size: 2.2rem; - margin: 0 1rem 0 0; - } - - span { - font-weight: bold; - - &.link-color { - color: $color-244-73-62; - } - - &.norm-weight { - font-weight: normal; - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/layout/project-profile/project.scss b/src/styles/layout/project-profile/project.scss deleted file mode 100644 index cd3c9d6..0000000 --- a/src/styles/layout/project-profile/project.scss +++ /dev/null @@ -1,8 +0,0 @@ -#project-profile { - - .content-box__info { - @extend %padding-block; - display: flex; - flex-direction: column; - } -} \ No newline at end of file diff --git a/src/styles/layout/project-profile/_index.scss b/src/styles/layout/project/_index.scss similarity index 58% rename from src/styles/layout/project-profile/_index.scss rename to src/styles/layout/project/_index.scss index 74f68a7..5a93164 100644 --- a/src/styles/layout/project-profile/_index.scss +++ b/src/styles/layout/project/_index.scss @@ -1,2 +1 @@ -@import 'project'; @import 'project-profile'; diff --git a/src/styles/layout/project/project-profile.scss b/src/styles/layout/project/project-profile.scss new file mode 100644 index 0000000..9e8cdd4 --- /dev/null +++ b/src/styles/layout/project/project-profile.scss @@ -0,0 +1,115 @@ +#project-profile { + + .button-question__position { + position: relative; + bottom: 5px; + } + + .button-question__color { + color: $color-216-4-22; + } + + .customer-box { + display: flex; + margin: 1.6rem 0; + + >* { + border: 1px solid $color-221-51-90; + flex: 0 1 50%; + padding: 1.7rem 2rem; + + &:first-child { + + li:last-child { + margin-top: 3rem; + + p { + margin-top: 0.8rem; + } + } + } + + &:last-child { + border-left: none; + + li { + margin-bottom: 1.5rem; + } + } + } + } + + .customer-logo { + box-sizing: border-box; + display: flex; + height: 8.5vh; + justify-content: flex-end; + margin-top: 20px; + text-align: end; + width: 15vw; + } + + .user-thumb>div { + /* Maybe move it in main.scss. /!\ some fields are different */ + @extend %user-thumb__grid; + + >.user-thumb__picture { + @extend %user-thumb__picture; + } + + >[name='sup'] { + @extend %user-thumb__grid-sup; + + .user-thumb__name { + @extend %user-thumb__name; + } + + sib-multiple { + @extend %user-thumb__groups; + } + + .tag-admin:not(:empty) { + @extend %tag-admin; + } + } + + >[name='sub'] { + @extend %user-thumb__grid-inf; + + >.user-thumb__city:not(:empty) { + @extend %user-thumb__city; + } + + >.user-thumb__lead:not(:empty) { + @extend %user-thumb__lead; + } + } + } + + ul { + list-style: none; + padding-left: 0; + + li { + margin-bottom: 0.5em; + + span::before { + color: $color-43-100-50; + font-size: 2.2rem; + margin: 0 1rem 0 0; + } + + span { + font-weight: bold; + + &.link-color { + color: $color-244-73-62; + } + + &.norm-weight { + font-weight: normal; + } + } + } + } +} \ No newline at end of file diff --git a/src/templates/hd-captain.pug b/src/templates/hd-captain.pug index 7119ea2..30a4108 100644 --- a/src/templates/hd-captain.pug +++ b/src/templates/hd-captain.pug @@ -2,12 +2,14 @@ include hd-user-avatar.pug sib-widget(name='hd-captain') template - sib-display( + sib-display.user-thumb( data-src="${await value}" fields='account.picture, sup(name), sub(profile.city, is_lead)' - class-name='user-name' - class-profile.city='city' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-profile.city='user-thumb__city' + class-is_lead='user-thumb__lead' widget-account.picture='hd-user-avatar' widget-is_lead='hd-user-lead' diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index 846f6e9..24539a8 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -2,15 +2,16 @@ include hd-user-avatar.pug sib-widget(name='circle-team-template') template - sib-display( + sib-display.user-thumb( data-src='${await value.user}' fields='account.picture, sup(name, isadmin, groups), sub(profile.city)' value-isadmin='${await value.is_admin}' - class-name='user-name' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' class-isadmin='tag-admin' class-groups='tag-group' - class-profile.city='city' + class-profile.city='user-thumb__city' widget-account.picture='hd-user-avatar' widget-isadmin='hd-circle-user-admin' diff --git a/src/templates/hd-customer.pug b/src/templates/hd-customer.pug index 813aa81..04e891f 100644 --- a/src/templates/hd-customer.pug +++ b/src/templates/hd-customer.pug @@ -10,7 +10,7 @@ sib-widget(name='hd-customer') div h3 Contact: ul - li #[span(class='mdi-account-outline') ${await value.firstName} ${await value.lastName ? await value.lastName : ""}]${await value.role ? `, ${await value.role}` : ""} + li #[span(class='mdi-account-outline') ${await value.first_name} ${await value.last_name ? await value.last_name : ""}]${await value.role ? `, ${await value.role}` : ""} li span(class='link-color norm-weight mdi-email-outline') a(href='mailto:${await value.email}') ${await value.email} diff --git a/src/templates/hd-project-team.pug b/src/templates/hd-project-team.pug index ff0616f..25243f7 100644 --- a/src/templates/hd-project-team.pug +++ b/src/templates/hd-project-team.pug @@ -2,15 +2,18 @@ include hd-user-avatar.pug sib-widget(name='hd-project-team') template - sib-display( + sib-display.user-thumb( data-src='${await value}' fields='user.account.picture, sup(user.name, isadmin, user.groups), sub(user.profile.city, name)' value-isadmin='${await value.is_admin}' - class-user.name='user-name' + class-user.account.picture='user-thumb__picture' + + class-user.name='user-thumb__name' class-isadmin='tag-admin' class-user.groups='tag-group' - class-user.profile.city='city' + class-user.profile.city='user-thumb__city' + class-name='user-thumb__lead' widget-user.account.picture='hd-user-avatar' widget-isadmin='hd-project-user-admin' diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index 500b751..607bb7d 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -1,11 +1,9 @@ div.content-box__info - sib-link(class="backlink", next='admin-circle-list') Back + sib-link(class="backlink right", next='admin-circle-list') Back h1.centered New circle - p.center Here you can create a new circle according to your interests, what you want to share, etc. - - sib-form.block( + sib-form( data-src=`${endpoints.circles || endpoints.post.circles}` fields='name, description' diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index c4428bd..bed9375 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/src/views/admin/page-admin-circles.pug @@ -4,8 +4,8 @@ sib-route(name='admin-circle-create') sib-route(name='circle-left') - div.content-box__header.with-description - h1.title-left.without-margin Administration + div.content-box__header + h1.without-margin Administration #circle-left(hidden) @@ -17,10 +17,14 @@ sib-widget(name='circle-owner') template - sib-display( + sib-display.user-thumb( data-src='${await value}' fields='account.picture, sup(name), sub(username)' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' + widget-account.picture='hd-user-avatar' ) diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug index 6875d11..71dc897 100644 --- a/src/views/admin/page-admin-projects-create.pug +++ b/src/views/admin/page-admin-projects-create.pug @@ -3,7 +3,7 @@ sib-widget(name='hd-template-project-title') p ${value} div.content-box__info - sib-link(class="backlink" next='admin-project-list') Back + sib-link(class="backlink right" next='admin-project-list') Back sib-widget(name="admin-project-add-user") template @@ -18,7 +18,7 @@ div.content-box__info h1.centered New project - sib-form.block( + sib-form( data-src=`${endpoints.projects || endpoints.post.projects}` fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)' diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index d93aa33..51f4b08 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/src/views/admin/page-admin-projects.pug @@ -4,8 +4,8 @@ sib-route(name='admin-project-create') sib-route(name='project-left') - div.content-box__header.with-description - h1.title-left.without-margin Administration + div.content-box__header + h1.without-margin Administration #project-left(hidden) include ../project/page-project-left.pug @@ -38,10 +38,14 @@ sib-widget(name='project-captain') template - sib-display( + sib-display.user-thumb( data-src='${await value}' fields='account.picture, sup(name), sub(username)' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' + widget-account.picture='hd-user-avatar' ) diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug index 031c358..b916ba1 100644 --- a/src/views/admin/page-admin-users.pug +++ b/src/views/admin/page-admin-users.pug @@ -8,7 +8,7 @@ #admin-users-list(hidden) div.content-box__info - sib-display.block( + sib-display( data-src=`${endpoints.users || endpoints.get.users}` fields="account.picture, name, username, email, groups" multiple-groups="" diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index f1ab588..84b46e9 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -7,11 +7,16 @@ div.content-box__info sib-widget(name='team-template-edit') template - sib-display( - class='w50 cell border cell-with-id-card' + sib-display.user-thumb( + class='w50 cell border cell-with-id-card user-thumb' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-groups='user-thumb__groups' + class-profile.city='user-thumb__city' + widget-account.picture='hd-user-avatar' multiple-groups='' @@ -36,12 +41,12 @@ div.content-box__info data-src="${value['@id']}" ) - sib-link(class="backlink", bind-resources, next='circle-profile') Back + sib-link(class="backlink right", bind-resources, next='circle-profile') Back sib-ac-checker(permission='acl:Write', bind-resources) h1 Edit your circle - sib-form.block.form-edit( + sib-form.form-edit( bind-resources fields='block-circle__info(name, owner), description' diff --git a/src/views/job-offer/page-job-offer-create.pug b/src/views/job-offer/page-job-offer-create.pug index c015306..3164807 100644 --- a/src/views/job-offer/page-job-offer-create.pug +++ b/src/views/job-offer/page-job-offer-create.pug @@ -1,32 +1,19 @@ .content-box.with-padding.with-form h1 Post a new job offer - p.center This form allows you to share an offer to all members of the network. - - sib-widget(name='title-text') - template - p Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP". - - sib-widget(name='description-text') - template - p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...' - sib-form.block( + sib-form( data-src=`${endpoints.joboffers || endpoints.post.joboffers}` range-skills=`${endpoints.skills || endpoints.get.skills}` - fields='title, title-text, description, description-text, skills, closingDate' + fields='title, description, skills, closingDate' class-title='field form-label is-light is-expanded' label-title='Title*' - widget-title-text='title-text' - class-description='field form-label is-light is-expanded' label-description='Description*' widget-description='sib-form-textarea' - widget-description-text='description-text' - class-skills='form-label is-dark' label-skills='The required skills for this mission:*' multiple-skills='sib-multiple-select' diff --git a/src/views/job-offer/page-job-offer-edit.pug b/src/views/job-offer/page-job-offer-edit.pug index e13fa5c..95e57b8 100644 --- a/src/views/job-offer/page-job-offer-edit.pug +++ b/src/views/job-offer/page-job-offer-edit.pug @@ -1,7 +1,7 @@ .content-box.with-padding.with-form h1 Edit your job offer - sib-form.block( + sib-form( bind-resources range-skills=`${endpoints.skills || endpoints.get.skills}` diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug index 61e5aa2..b8ab17a 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -6,11 +6,11 @@ div.content-box__info template label ${label} - sib-link(class='backlink', bind-resources, next='project-profile') Back + sib-link(class='backlink right', bind-resources, next='project-profile') Back h1 Edit your project - sib-form.block.form-edit( + sib-form.form-edit( bind-resources fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)' diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug index 62ac1d6..720163f 100644 --- a/src/views/project/page-project-profile.pug +++ b/src/views/project/page-project-profile.pug @@ -55,7 +55,7 @@ sib-router(default-route='project-profile', hidden) h2 Customer informations: - sib-display.block( + sib-display( bind-resources fields='customer' From 4fbd76965cf8ab91721b818bbca873530241c898 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 2 Apr 2020 16:09:23 +0000 Subject: [PATCH 3/9] update: clear unused and fixes CSS --- src/dependencies.pug | 2 - src/header.pug | 2 +- src/page-circle.pug | 2 +- src/page-project.pug | 2 +- src/styles/base/form.scss | 48 ++--- src/styles/base/header.scss | 7 +- src/styles/base/main.scss | 58 +++--- src/styles/base/table.scss | 89 ++------ src/styles/base/user-thumb.scss | 108 ++++++++++ src/styles/components/_index.scss | 2 +- src/styles/components/howto.scss | 3 - src/styles/components/tags.scss | 3 +- src/styles/index.scss | 2 +- src/styles/layout/circle/_index.scss | 1 - src/styles/layout/circle/circle-profile.scss | 72 +------ src/styles/layout/circle/circle.scss | 191 ------------------ src/styles/layout/job-offers/job-offers.scss | 2 +- .../project-profile/project-profile.scss | 177 ---------------- .../layout/project-profile/project.scss | 8 - .../{project-profile => project}/_index.scss | 1 - .../layout/project/project-profile.scss | 115 +++++++++++ src/templates/hd-captain.pug | 8 +- src/templates/hd-circle-team.pug | 7 +- src/templates/hd-customer.pug | 2 +- src/templates/hd-project-team.pug | 9 +- src/views/admin/page-admin-circles-create.pug | 6 +- src/views/admin/page-admin-circles.pug | 10 +- .../admin/page-admin-projects-create.pug | 4 +- src/views/admin/page-admin-projects.pug | 10 +- src/views/admin/page-admin-users.pug | 2 +- src/views/circle/page-circle-edit.pug | 13 +- src/views/job-offer/page-job-offer-create.pug | 17 +- src/views/job-offer/page-job-offer-edit.pug | 2 +- src/views/project/page-project-edit.pug | 4 +- src/views/project/page-project-profile.pug | 2 +- 35 files changed, 358 insertions(+), 633 deletions(-) create mode 100644 src/styles/base/user-thumb.scss delete mode 100644 src/styles/layout/circle/circle.scss delete mode 100644 src/styles/layout/project-profile/project-profile.scss delete mode 100644 src/styles/layout/project-profile/project.scss rename src/styles/layout/{project-profile => project}/_index.scss (58%) create mode 100644 src/styles/layout/project/project-profile.scss diff --git a/src/dependencies.pug b/src/dependencies.pug index ec43d24..4f7189a 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -43,7 +43,5 @@ script(data-default-context, type="application/ld+json") | "account": "http://happy-dev.fr/owl/#account", | "jabberID": "foaf:jabberID", | "picture": "foaf:depiction", - | "firstName": "http://happy-dev.fr/owl/#first_name", - | "lastName": "http://happy-dev.fr/owl/#last_name", | "isAdmin": "http://happy-dev.fr/owl/#is_admin" | } diff --git a/src/header.pug b/src/header.pug index ef56755..83e9cfb 100644 --- a/src/header.pug +++ b/src/header.pug @@ -17,7 +17,7 @@ include templates/hd-user-avatar.pug details#user-controls.notLoggedIn summary(tabindex='0' role='button') sib-display#user-controls__profile( - fields='firstName, account.picture' + fields='first_name, account.picture' widget-account.picture='hd-user-avatar' bind-user ) diff --git a/src/page-circle.pug b/src/page-circle.pug index 9f84093..8aad774 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -10,7 +10,7 @@ class-description='h1-aside description' ) button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU - div.content-box__info + div sib-ac-checker(permission='acl:Read', bind-resources) #circle-chat(hidden) include views/circle/page-circle-chat.pug diff --git a/src/page-project.pug b/src/page-project.pug index ffb9269..66fbfca 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -16,7 +16,7 @@ .mobile-sidebar-button.jsMobileSidebarOpenButton button.icon-arrow-left-circle span MENU - div.content-box__info + div sib-ac-checker(permission='acl:Read', bind-resources) #project-chat(hidden) include views/project/page-project-chat.pug diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 388f197..6fc03d4 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -1,3 +1,18 @@ +#admin-circle-create, +#admin-project-create { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; + } +} + .content-box { &.with-form { @@ -23,16 +38,6 @@ padding-bottom: 0.8rem; } - p.center { - margin: 0; - text-align: center; - } - - [name$='-text'] { - font-size: 1.5rem; - margin-bottom: 2rem; - } - [name^='block-'] { margin-bottom: 2.75rem; } @@ -153,20 +158,17 @@ margin-top: 2.7rem; } - .form-edit { + .form-edit>form { - >form { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-dark, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; } } diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index b330266..291b92e 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -65,6 +65,7 @@ details { margin-right: 2.5rem; + position: relative; @include breakpoint(sm) { margin-right: 0; @@ -82,7 +83,7 @@ } } - details { + .sib-notifications__container { position: relative; .sib-notifications__button { @@ -169,7 +170,7 @@ width: 45%; } - sib-display-value[name='firstName'] { + sib-display-value[name='first_name'] { @include icon('arrow-down'); align-items: center; display: flex; @@ -241,7 +242,7 @@ div { - sib-display-value[name='firstName'] { + sib-display-value[name='first_name'] { @include icon('close'); &::before { diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 32b1174..5c06575 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -1,12 +1,3 @@ -$breakpoints: (phone: 480px, - tablet: 768px, - desktop: 1024px) !default; - -[hidden], -.hidden { - display: none !important; -} - * { outline: none; } @@ -95,6 +86,10 @@ nav { display: contents; } +[hidden], +.hidden { + display: none !important; +} img { max-height: 100%; @@ -121,12 +116,6 @@ h6 { }*/ } -.h2-like { - display: block; - margin: 14.94px 0; - width: 100%; -} - h1, .h1-like { color: $color-233-18-29; font-size: 2rem; @@ -143,6 +132,12 @@ h2, .h2-like { text-transform: uppercase; } +.h2-like { + display: block; + margin: 14.94px 0; + width: 100%; +} + h3 { color: $color-216-4-22; font-size: 1.7rem; @@ -164,21 +159,6 @@ h5 { padding: 3.2rem; } -#admin-circle-create, -#admin-project-create { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-dark, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } -} - .content-box { @include window-style-modal(); display: flex; @@ -199,6 +179,7 @@ h5 { } } +/* Header inside circle, project view */ .content-box__header { border-bottom: 1px solid $color-221-51-90; padding: 3rem; @@ -257,6 +238,12 @@ h5 { } } +.content-box__info { + @extend %padding-block; + display: flex; + flex-direction: column; +} + .modal { color: white; margin: 75px; @@ -280,11 +267,6 @@ h5 { } } -.drive { - width: 100%; - border: 0; -} - .backlink { @include icon('arrow-left-circle'); color: $color-233-18-29; @@ -297,6 +279,11 @@ h5 { margin-right: 1rem; text-decoration: none; } + + &.right { + display: block; + text-align: right; + } } .name { @@ -342,6 +329,7 @@ h5 { @import 'table'; @import 'header'; @import 'menu-left'; +@import 'user-thumb'; // Button global CSS sib-delete, diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index af42ed7..cb5e2a7 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -6,17 +6,6 @@ #admin-project-list, #admin-project-create { - .content-box__info { - @extend %padding-block; - display: flex; - flex-direction: column; - - .backlink { - text-align: right; - display: block; - } - } - .table { .table-header { @@ -85,83 +74,35 @@ padding-top: 2.5rem; } - .cell-with-id-card>div, - /* for the table in circle-edit */ - .cell-with-id-card>sib-display>div, - project-captain[name='user']>sib-display>div { - /* for the captain's cell in project-admin */ - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); + .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */ { + @extend %user-thumb__grid; padding: 0 2.2rem; - >[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%; - } + >.user-thumb__picture { + @extend %user-thumb__picture; } >[name='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + @extend %user-thumb__grid-sup; - [name$='name'] { - color: #7A7F85; - font-weight: 600; - margin-right: 1rem; + .user-thumb__name { + @extend %user-thumb__name; } - sib-multiple>div { - display: flex; - - [name='groups'] { - @extend %tag-role; - } + .user-thumb__groups { + @extend %user-thumb__groups; } } >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; + @extend %user-thumb__grid-inf; - >[name$='username']:not(:empty) { - align-items: center; - display: flex; + >.user-thumb__username:not(:empty) { + @extend %user-thumb__username; + } - &::before { - content: '@'; - - } + >.user-thumb__city:not(:empty) { + @extend %user-thumb__city; } } } diff --git a/src/styles/base/user-thumb.scss b/src/styles/base/user-thumb.scss new file mode 100644 index 0000000..db3902d --- /dev/null +++ b/src/styles/base/user-thumb.scss @@ -0,0 +1,108 @@ +%user-thumb__grid { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); +} + +%user-thumb__grid-sup { + align-items: center; + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; +} + +%user-thumb__grid-inf { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; +} + +%user-thumb__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%; + } +} + +%user-thumb__name { + color: #7A7F85; + font-weight: 600; + margin-right: 1rem; +} + +%user-thumb__groups { + display: flex; + margin-bottom: 1px; + margin-left: 0.6rem; + + [name='groups'], + [name='user.groups'] { + @extend %tag-role; + } +} + +%user-thumb__admin { + @extend %tag-admin; +} + +%user-thumb__username { + align-items: center; + display: flex; + + &::before { + content: '@'; + } +} + +%user-thumb__city { + @include mdi('atom'); + align-items: center; + display: flex; + margin-right: 1.6rem; + + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; + } +} + +%user-thumb__lead { + @include icon('eyeglass'); + align-items: center; + display: flex; + + &::before { + color: $color-43-100-50; + font-size: 1.9rem; + font-weight: bold; + margin-left: 0; + margin-right: 0.50rem; + } +} diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index eecf780..30de5d0 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -1,5 +1,5 @@ @import 'chat'; -@import 'comment.scss'; +@import 'comment'; @import 'filters'; @import 'howto'; @import 'sidebar'; diff --git a/src/styles/components/howto.scss b/src/styles/components/howto.scss index 391e9ba..12b29e5 100644 --- a/src/styles/components/howto.scss +++ b/src/styles/components/howto.scss @@ -12,6 +12,3 @@ flex-shrink: 0; } } - - - diff --git a/src/styles/components/tags.scss b/src/styles/components/tags.scss index f5435c2..80e0310 100644 --- a/src/styles/components/tags.scss +++ b/src/styles/components/tags.scss @@ -15,6 +15,5 @@ font-size: 1.4rem; font-weight: 400; margin-left: 0.6rem; - margin-top: -2px; - padding: 0.3rem 0.98rem; + padding: 0.35rem 0.98rem; } \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index b2b17ba..912d488 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -18,7 +18,7 @@ div#viewport { @import 'components/index'; @import 'layout/members/index'; @import 'layout/job-offers/index'; - @import 'layout/project-profile/index'; + @import 'layout/project/index'; @import 'layout/circle/index'; @import 'layout/user/index'; @import 'layout/events/index'; diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss index 940c5fc..3de89ec 100644 --- a/src/styles/layout/circle/_index.scss +++ b/src/styles/layout/circle/_index.scss @@ -1,3 +1,2 @@ -@import 'circle'; @import 'circle-profile'; @import 'circle-admin'; diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 64dbf51..4afb54a 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -8,62 +8,22 @@ .block { /* peut-être à mettre dans main.scss */ - 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); + .user-thumb>div { + @extend %user-thumb__grid; - >[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%; - } + >.user-thumb__picture { + @extend %user-thumb__picture; } >[name='sup'] { - align-items: center; - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + @extend %user-thumb__grid-sup; - .user-name { - font-weight: 600; + .user-thumb__name { + @extend %user-thumb__name; } .tag-group { - display: flex; - margin-bottom: 1px; - margin-left: 0.6rem; - - [name='groups'] { - @extend %tag-role; - } + @extend %user-thumb__groups; } .tag-admin:not(:empty) { @@ -72,20 +32,10 @@ } >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; + @extend %user-thumb__grid-inf; - >.city:not(:empty) { - @include mdi('atom'); - align-items: center; - display: flex; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } + >.user-thumb__city:not(:empty) { + @extend %user-thumb__city; } } } diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss deleted file mode 100644 index b6f7d2e..0000000 --- a/src/styles/layout/circle/circle.scss +++ /dev/null @@ -1,191 +0,0 @@ -#circle-information, -#circle-edit, -#admin-circle-list, -#admin-circle-create, -#admin-project-list, -#admin-project-create { - - .content-box__info { - @extend %padding-block; - display: flex; - flex-direction: column; - - .backlink { - text-align: right; - display: block; - } - } - - .table { - - .table-header { - display: flex; - flex: 1; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - text-align: center; - - &.grey-color { - background: $color-228-25-79; - color: white; - } - - >* { - border-right: 1px solid white; - flex: 1; - padding: 2.1rem 0; - text-align: center; - } - - >*:last-of-type { - border-right: 1px solid $color-228-25-79; - } - } - - .table-body { - - >div:first-of-type>sib-display>div, - team-template-edit[name='members'] { - display: flex; - border-left: 1px solid $color-228-25-79; - } - - .border { - border-bottom: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - } - - .cell { - text-align: center; - word-wrap: break-word; - } - - .w25 { - width: 25%; - } - - .w33 { - width: 33.3333%; - } - - .w50 { - width: 50%; - } - - .hashtag::before { - content: '#'; - } - } - - .cell-with-name { - color: $color-233-18-29; - font-weight: 600; - padding-top: 2.5rem; - } - - .cell-with-id-card>div, /* for the table in circle-edit */ - .cell-with-id-card>sib-display>div, - project-captain[name='user']>sib-display>div { /* for the captain's cell in project-admin */ - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - padding: 0 2.2rem; - - >[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'] { - color: #7A7F85; - font-weight: 600; - margin-right: 1rem; - } - - sib-multiple>div { - display: flex; - - [name='groups'] { - @extend %tag-role; - } - } - } - - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; - - >[name$='username']:not(:empty) { - align-items: center; - display: flex; - - &::before { - content: '@'; - - } - } - } - } - - .cell-with-buttons { - align-items: center; - display: flex; - justify-content: center; - - [name='button'] { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-blue, - .bordered, - .btn-margin-left; - } - } - } - - sib-ac-checker { - align-items: center; - display: flex; - justify-content: center; - } - } -} \ No newline at end of file diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss index 172e863..64c41fe 100644 --- a/src/styles/layout/job-offers/job-offers.scss +++ b/src/styles/layout/job-offers/job-offers.scss @@ -75,7 +75,7 @@ sib-job-board { margin: 0.25em; } - [name='author.firstName'] { + [name='author.first_name'] { color: $color-0-0-29; font-weight: 600; } diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss deleted file mode 100644 index f212645..0000000 --- a/src/styles/layout/project-profile/project-profile.scss +++ /dev/null @@ -1,177 +0,0 @@ -#project-profile { - - .button-question__position { - position: relative; - bottom: 5px; - } - - .button-question__color { - color: $color-216-4-22; - } - - .customer-box { - display: flex; - margin: 1.6rem 0; - - >* { - border: 1px solid $color-221-51-90; - flex: 0 1 50%; - padding: 1.7rem 2rem; - - &:first-child { - - li:last-child { - margin-top: 3rem; - - p { - margin-top: 0.8rem; - } - } - } - - &:last-child { - border-left: none; - - li { - margin-bottom: 1.5rem; - } - } - } - } - - .customer-logo { - box-sizing: border-box; - display: flex; - height: 8.5vh; - justify-content: flex-end; - margin-top: 20px; - text-align: end; - width: 15vw; - } - - hd-captain>sib-display>div, - hd-project-team>sib-display>div { /* Maybe move it in main.scss. /!\ some fields are different */ - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - - >[name='user.account.picture'], - >[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; - - .user-name { - font-weight: 600; - } - - sib-multiple { - display: flex; - margin-left: 1rem; - - [name='groups'], - [name='user.groups'] { - @extend %tag-role; - } - } - - .tag-admin:not(:empty) { - @extend %tag-admin; - } - } - - >[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; - margin-right: 1.6rem; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } - } - - >[name$='name']:not(:empty), - >[name='is_lead'] { - @include icon('eyeglass'); - align-items: center; - display: flex; - - &::before { - color: $color-43-100-50; - font-size: 1.9rem; - font-weight: bold; - margin-left: 0; - margin-right: 0.50rem; - } - } - } - } - - ul { - list-style: none; - padding-left: 0; - - li { - margin-bottom: 0.5em; - - span::before { - color: $color-43-100-50; - font-size: 2.2rem; - margin: 0 1rem 0 0; - } - - span { - font-weight: bold; - - &.link-color { - color: $color-244-73-62; - } - - &.norm-weight { - font-weight: normal; - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/layout/project-profile/project.scss b/src/styles/layout/project-profile/project.scss deleted file mode 100644 index cd3c9d6..0000000 --- a/src/styles/layout/project-profile/project.scss +++ /dev/null @@ -1,8 +0,0 @@ -#project-profile { - - .content-box__info { - @extend %padding-block; - display: flex; - flex-direction: column; - } -} \ No newline at end of file diff --git a/src/styles/layout/project-profile/_index.scss b/src/styles/layout/project/_index.scss similarity index 58% rename from src/styles/layout/project-profile/_index.scss rename to src/styles/layout/project/_index.scss index 74f68a7..5a93164 100644 --- a/src/styles/layout/project-profile/_index.scss +++ b/src/styles/layout/project/_index.scss @@ -1,2 +1 @@ -@import 'project'; @import 'project-profile'; diff --git a/src/styles/layout/project/project-profile.scss b/src/styles/layout/project/project-profile.scss new file mode 100644 index 0000000..9e8cdd4 --- /dev/null +++ b/src/styles/layout/project/project-profile.scss @@ -0,0 +1,115 @@ +#project-profile { + + .button-question__position { + position: relative; + bottom: 5px; + } + + .button-question__color { + color: $color-216-4-22; + } + + .customer-box { + display: flex; + margin: 1.6rem 0; + + >* { + border: 1px solid $color-221-51-90; + flex: 0 1 50%; + padding: 1.7rem 2rem; + + &:first-child { + + li:last-child { + margin-top: 3rem; + + p { + margin-top: 0.8rem; + } + } + } + + &:last-child { + border-left: none; + + li { + margin-bottom: 1.5rem; + } + } + } + } + + .customer-logo { + box-sizing: border-box; + display: flex; + height: 8.5vh; + justify-content: flex-end; + margin-top: 20px; + text-align: end; + width: 15vw; + } + + .user-thumb>div { + /* Maybe move it in main.scss. /!\ some fields are different */ + @extend %user-thumb__grid; + + >.user-thumb__picture { + @extend %user-thumb__picture; + } + + >[name='sup'] { + @extend %user-thumb__grid-sup; + + .user-thumb__name { + @extend %user-thumb__name; + } + + sib-multiple { + @extend %user-thumb__groups; + } + + .tag-admin:not(:empty) { + @extend %tag-admin; + } + } + + >[name='sub'] { + @extend %user-thumb__grid-inf; + + >.user-thumb__city:not(:empty) { + @extend %user-thumb__city; + } + + >.user-thumb__lead:not(:empty) { + @extend %user-thumb__lead; + } + } + } + + ul { + list-style: none; + padding-left: 0; + + li { + margin-bottom: 0.5em; + + span::before { + color: $color-43-100-50; + font-size: 2.2rem; + margin: 0 1rem 0 0; + } + + span { + font-weight: bold; + + &.link-color { + color: $color-244-73-62; + } + + &.norm-weight { + font-weight: normal; + } + } + } + } +} \ No newline at end of file diff --git a/src/templates/hd-captain.pug b/src/templates/hd-captain.pug index 7119ea2..30a4108 100644 --- a/src/templates/hd-captain.pug +++ b/src/templates/hd-captain.pug @@ -2,12 +2,14 @@ include hd-user-avatar.pug sib-widget(name='hd-captain') template - sib-display( + sib-display.user-thumb( data-src="${await value}" fields='account.picture, sup(name), sub(profile.city, is_lead)' - class-name='user-name' - class-profile.city='city' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-profile.city='user-thumb__city' + class-is_lead='user-thumb__lead' widget-account.picture='hd-user-avatar' widget-is_lead='hd-user-lead' diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index 846f6e9..24539a8 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -2,15 +2,16 @@ include hd-user-avatar.pug sib-widget(name='circle-team-template') template - sib-display( + sib-display.user-thumb( data-src='${await value.user}' fields='account.picture, sup(name, isadmin, groups), sub(profile.city)' value-isadmin='${await value.is_admin}' - class-name='user-name' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' class-isadmin='tag-admin' class-groups='tag-group' - class-profile.city='city' + class-profile.city='user-thumb__city' widget-account.picture='hd-user-avatar' widget-isadmin='hd-circle-user-admin' diff --git a/src/templates/hd-customer.pug b/src/templates/hd-customer.pug index 813aa81..04e891f 100644 --- a/src/templates/hd-customer.pug +++ b/src/templates/hd-customer.pug @@ -10,7 +10,7 @@ sib-widget(name='hd-customer') div h3 Contact: ul - li #[span(class='mdi-account-outline') ${await value.firstName} ${await value.lastName ? await value.lastName : ""}]${await value.role ? `, ${await value.role}` : ""} + li #[span(class='mdi-account-outline') ${await value.first_name} ${await value.last_name ? await value.last_name : ""}]${await value.role ? `, ${await value.role}` : ""} li span(class='link-color norm-weight mdi-email-outline') a(href='mailto:${await value.email}') ${await value.email} diff --git a/src/templates/hd-project-team.pug b/src/templates/hd-project-team.pug index ff0616f..25243f7 100644 --- a/src/templates/hd-project-team.pug +++ b/src/templates/hd-project-team.pug @@ -2,15 +2,18 @@ include hd-user-avatar.pug sib-widget(name='hd-project-team') template - sib-display( + sib-display.user-thumb( data-src='${await value}' fields='user.account.picture, sup(user.name, isadmin, user.groups), sub(user.profile.city, name)' value-isadmin='${await value.is_admin}' - class-user.name='user-name' + class-user.account.picture='user-thumb__picture' + + class-user.name='user-thumb__name' class-isadmin='tag-admin' class-user.groups='tag-group' - class-user.profile.city='city' + class-user.profile.city='user-thumb__city' + class-name='user-thumb__lead' widget-user.account.picture='hd-user-avatar' widget-isadmin='hd-project-user-admin' diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index 500b751..607bb7d 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -1,11 +1,9 @@ div.content-box__info - sib-link(class="backlink", next='admin-circle-list') Back + sib-link(class="backlink right", next='admin-circle-list') Back h1.centered New circle - p.center Here you can create a new circle according to your interests, what you want to share, etc. - - sib-form.block( + sib-form( data-src=`${endpoints.circles || endpoints.post.circles}` fields='name, description' diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index c4428bd..bed9375 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/src/views/admin/page-admin-circles.pug @@ -4,8 +4,8 @@ sib-route(name='admin-circle-create') sib-route(name='circle-left') - div.content-box__header.with-description - h1.title-left.without-margin Administration + div.content-box__header + h1.without-margin Administration #circle-left(hidden) @@ -17,10 +17,14 @@ sib-widget(name='circle-owner') template - sib-display( + sib-display.user-thumb( data-src='${await value}' fields='account.picture, sup(name), sub(username)' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' + widget-account.picture='hd-user-avatar' ) diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug index 6875d11..71dc897 100644 --- a/src/views/admin/page-admin-projects-create.pug +++ b/src/views/admin/page-admin-projects-create.pug @@ -3,7 +3,7 @@ sib-widget(name='hd-template-project-title') p ${value} div.content-box__info - sib-link(class="backlink" next='admin-project-list') Back + sib-link(class="backlink right" next='admin-project-list') Back sib-widget(name="admin-project-add-user") template @@ -18,7 +18,7 @@ div.content-box__info h1.centered New project - sib-form.block( + sib-form( data-src=`${endpoints.projects || endpoints.post.projects}` fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)' diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index d93aa33..51f4b08 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/src/views/admin/page-admin-projects.pug @@ -4,8 +4,8 @@ sib-route(name='admin-project-create') sib-route(name='project-left') - div.content-box__header.with-description - h1.title-left.without-margin Administration + div.content-box__header + h1.without-margin Administration #project-left(hidden) include ../project/page-project-left.pug @@ -38,10 +38,14 @@ sib-widget(name='project-captain') template - sib-display( + sib-display.user-thumb( data-src='${await value}' fields='account.picture, sup(name), sub(username)' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' + widget-account.picture='hd-user-avatar' ) diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug index 031c358..b916ba1 100644 --- a/src/views/admin/page-admin-users.pug +++ b/src/views/admin/page-admin-users.pug @@ -8,7 +8,7 @@ #admin-users-list(hidden) div.content-box__info - sib-display.block( + sib-display( data-src=`${endpoints.users || endpoints.get.users}` fields="account.picture, name, username, email, groups" multiple-groups="" diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index f1ab588..84b46e9 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -7,11 +7,16 @@ div.content-box__info sib-widget(name='team-template-edit') template - sib-display( - class='w50 cell border cell-with-id-card' + sib-display.user-thumb( + class='w50 cell border cell-with-id-card user-thumb' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-groups='user-thumb__groups' + class-profile.city='user-thumb__city' + widget-account.picture='hd-user-avatar' multiple-groups='' @@ -36,12 +41,12 @@ div.content-box__info data-src="${value['@id']}" ) - sib-link(class="backlink", bind-resources, next='circle-profile') Back + sib-link(class="backlink right", bind-resources, next='circle-profile') Back sib-ac-checker(permission='acl:Write', bind-resources) h1 Edit your circle - sib-form.block.form-edit( + sib-form.form-edit( bind-resources fields='block-circle__info(name, owner), description' diff --git a/src/views/job-offer/page-job-offer-create.pug b/src/views/job-offer/page-job-offer-create.pug index c015306..3164807 100644 --- a/src/views/job-offer/page-job-offer-create.pug +++ b/src/views/job-offer/page-job-offer-create.pug @@ -1,32 +1,19 @@ .content-box.with-padding.with-form h1 Post a new job offer - p.center This form allows you to share an offer to all members of the network. - - sib-widget(name='title-text') - template - p Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP". - - sib-widget(name='description-text') - template - p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...' - sib-form.block( + sib-form( data-src=`${endpoints.joboffers || endpoints.post.joboffers}` range-skills=`${endpoints.skills || endpoints.get.skills}` - fields='title, title-text, description, description-text, skills, closingDate' + fields='title, description, skills, closingDate' class-title='field form-label is-light is-expanded' label-title='Title*' - widget-title-text='title-text' - class-description='field form-label is-light is-expanded' label-description='Description*' widget-description='sib-form-textarea' - widget-description-text='description-text' - class-skills='form-label is-dark' label-skills='The required skills for this mission:*' multiple-skills='sib-multiple-select' diff --git a/src/views/job-offer/page-job-offer-edit.pug b/src/views/job-offer/page-job-offer-edit.pug index e13fa5c..95e57b8 100644 --- a/src/views/job-offer/page-job-offer-edit.pug +++ b/src/views/job-offer/page-job-offer-edit.pug @@ -1,7 +1,7 @@ .content-box.with-padding.with-form h1 Edit your job offer - sib-form.block( + sib-form( bind-resources range-skills=`${endpoints.skills || endpoints.get.skills}` diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug index 61e5aa2..b8ab17a 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -6,11 +6,11 @@ div.content-box__info template label ${label} - sib-link(class='backlink', bind-resources, next='project-profile') Back + sib-link(class='backlink right', bind-resources, next='project-profile') Back h1 Edit your project - sib-form.block.form-edit( + sib-form.form-edit( bind-resources fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)' diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug index 62ac1d6..720163f 100644 --- a/src/views/project/page-project-profile.pug +++ b/src/views/project/page-project-profile.pug @@ -55,7 +55,7 @@ sib-router(default-route='project-profile', hidden) h2 Customer informations: - sib-display.block( + sib-display( bind-resources fields='customer' From 23116d81ca8f90168ead6ebb5632eda4d698f2ed Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 8 Apr 2020 10:57:05 +0000 Subject: [PATCH 4/9] feature: user administration --- config.sample.federated.json | 2 + config.sample.json | 1 + src/page-admin.pug | 4 +- src/styles/base/form.scss | 20 +++++- src/styles/base/main.scss | 6 +- src/styles/base/table.scss | 48 ++++++++++---- src/styles/components/sidebar.scss | 11 ++++ src/styles/layout/user/_index.scss | 3 +- src/styles/layout/user/admin-users.scss | 6 ++ src/views/admin/page-admin-circles-create.pug | 3 + src/views/admin/page-admin-users-create.pug | 35 ++++++++++ src/views/admin/page-admin-users-edit.pug | 35 ++++++++++ src/views/admin/page-admin-users.pug | 65 +++++++++++++++++-- src/views/job-offer/page-job-offer-create.pug | 2 +- src/views/job-offer/page-job-offer-edit.pug | 2 +- 15 files changed, 213 insertions(+), 30 deletions(-) create mode 100644 src/styles/layout/user/admin-users.scss create mode 100644 src/views/admin/page-admin-users-create.pug create mode 100644 src/views/admin/page-admin-users-edit.pug diff --git a/config.sample.federated.json b/config.sample.federated.json index 57aa616..eb316c9 100644 --- a/config.sample.federated.json +++ b/config.sample.federated.json @@ -15,6 +15,7 @@ "events": "http://localhost:8000/events/", "typeevents": "http://localhost:8000/typeevents/", "users": "http://localhost:8000/users/", + "groups": "http://localhost:8000/groups/", "uploads": "http://localhost:8000/upload/" }, "post": { @@ -24,6 +25,7 @@ "events": "http://localhost:8000/events/", "typeevents": "http://localhost:8000/typeevents/", "users": "http://localhost:8000/users/", + "groups": "http://localhost:8000/groups/", "uploads": "http://localhost:8000/upload/" } }, diff --git a/config.sample.json b/config.sample.json index 1741c1c..753554f 100644 --- a/config.sample.json +++ b/config.sample.json @@ -12,6 +12,7 @@ "projects": "http://localhost:8000/projects/", "customers": "http://localhost:8000/customers/", "events": "http://localhost:8000/events/", + "groups": "http://localhost:8000/groups/", "typeevents": "http://localhost:8000/typeevents/", "users": "http://localhost:8000/users/", "uploads": "http://localhost:8000/upload/" diff --git a/src/page-admin.pug b/src/page-admin.pug index 4876a37..0dea326 100644 --- a/src/page-admin.pug +++ b/src/page-admin.pug @@ -5,7 +5,7 @@ if endpoints.projects || (endpoints.get && endpoints.get.projects) #admin-projects(hidden) include views/admin/page-admin-projects.pug - if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + if (endpoints.users || (endpoints.get && endpoints.get.users)) #admin-users(hidden) include views/admin/page-admin-users.pug nav.jsRightMenu(role='navigation') @@ -13,7 +13,7 @@ nav.jsRightMenu(role='navigation') ul li.jsOffsiteToggle a Fold menu - if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + if (endpoints.users || (endpoints.get && endpoints.get.users)) sib-route(name='admin-users') li a Users diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 6fc03d4..a36eacb 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -1,5 +1,7 @@ #admin-circle-create, -#admin-project-create { +#admin-project-create, +#admin-users-create, +#admin-users-edit { input[type='submit'] { @extend .button, @@ -42,12 +44,17 @@ margin-bottom: 2.75rem; } + [name$='border-top'] { + border-top: 1px solid $color-221-51-90; + margin-top: 3rem; + } + form { display: flex; flex-direction: column; } - sib-set-default { + sib-set-default:not([name='user-thumb']) { clear: both; display: flex!important; flex-wrap: wrap; @@ -314,6 +321,14 @@ sib-multiple-select { + &.select-groups .ss-values .ss-disabled::before { + content: "Select groups"; + } + + &.select-skills .ss-values .ss-disabled::before { + content: "Select skills"; + } + sib-form-auto-completion > label { display: flex; flex-direction: column; @@ -363,7 +378,6 @@ &::before { color: $color-213-4-50; - content: "Select skills"; font-weight: normal; } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 5c06575..0dd0cb7 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -82,7 +82,8 @@ nav { /* Quick fix. Will be removed later */ #admin-circles, -#admin-projects { +#admin-projects, +#admin-users { display: contents; } @@ -384,7 +385,8 @@ a, &.rounded { border-radius: 50%; - padding: 0.5rem 1rem; + font-size: 1.8rem; + padding: 1rem; } &.button-link { diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index cb5e2a7..dc4931d 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -4,7 +4,8 @@ #admin-circle-create, #project-edit, #admin-project-list, -#admin-project-create { +#admin-project-create, +#admin-users-list { .table { @@ -68,13 +69,39 @@ } } + .cell-with-buttons { + align-items: center; + display: flex; + justify-content: center; + + [name='button'] { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-blue, + .bordered, + .btn-margin-left; + } + } + } + + .cell-with-groups { + align-items: center; + display: flex; + justify-content: center; + } + .cell-with-name { color: $color-233-18-29; font-weight: 600; padding-top: 2.5rem; } - .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */ { + .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */, + [name='user-thumb'] { @extend %user-thumb__grid; padding: 0 2.2rem; @@ -107,22 +134,15 @@ } } - .cell-with-buttons { + .cell-with-groups { align-items: center; display: flex; justify-content: center; - [name='button'] { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-blue, - .bordered, - .btn-margin-left; - } + >div { + display: flex; + justify-content: space-evenly; + width: 100%; } } diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 8b90344..49bdc9c 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -82,6 +82,13 @@ } } + &[name*='users'] { + + >li::before { + font-size: 5rem; + } + } + &[name$='chat']>li { @include ci('chat'); } @@ -102,6 +109,10 @@ @include ci('file'); } + &[name='admin-users']>li { + @include ci('drawing'); + } + &[name='admin-circles']>li { @include ci('bubble-add'); } diff --git a/src/styles/layout/user/_index.scss b/src/styles/layout/user/_index.scss index 1174ebd..f15713e 100644 --- a/src/styles/layout/user/_index.scss +++ b/src/styles/layout/user/_index.scss @@ -1 +1,2 @@ -@import 'user-profile'; \ No newline at end of file +@import 'user-profile'; +@import 'admin-users'; diff --git a/src/styles/layout/user/admin-users.scss b/src/styles/layout/user/admin-users.scss new file mode 100644 index 0000000..61f0e46 --- /dev/null +++ b/src/styles/layout/user/admin-users.scss @@ -0,0 +1,6 @@ +/* Fix. Could disappear when we can add .class on set fields */ +sib-set-default[name='cell-1'] { + @extend .w33; + @extend .cell; + @extend .border; +} \ No newline at end of file diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index 607bb7d..f45bf6d 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -8,6 +8,9 @@ div.content-box__info fields='name, description' + label-name='Name *' + label-description='Description *' + class-name='form-label is-light is-full-width' class-description='form-label is-light is-full-width' diff --git a/src/views/admin/page-admin-users-create.pug b/src/views/admin/page-admin-users-create.pug new file mode 100644 index 0000000..635bd77 --- /dev/null +++ b/src/views/admin/page-admin-users-create.pug @@ -0,0 +1,35 @@ +div.content-box__info + sib-link(class='backlink right', next='admin-users-list') Back + + h1.centered Add a new user to the platform + + sib-form( + data-src=`${endpoints.users || endpoints.post.users}` + range-groups=`${endpoints.groups || endpoints.get.groups}` + + fields='line-1(first_name, last_name), line-2(username, email), line-3(password), line-4-border-top(groups)' + + class-first_name='form-label is-light is-half-width' + class-last_name='form-label is-light is-half-width' + class-username='form-label is-light is-half-width' + class-email='form-label is-light is-half-width' + class-groups='form-label is-light is-half-width select-groups' + + label-first_name='First Name *' + label-last_name='Last Name *' + label-username='Username *' + label-email='Email *' + label-groups='Groups' + + multiple-groups='sib-multiple-select' + widget-groups='sib-form-auto-completion' + + value-password='' + widget-password='sib-form-hidden' + + next='admin-user-list' + + submit-button='Create' + ) + + p Administrators of your platform can create new Groups on the Django Administration. diff --git a/src/views/admin/page-admin-users-edit.pug b/src/views/admin/page-admin-users-edit.pug new file mode 100644 index 0000000..4e2a8cb --- /dev/null +++ b/src/views/admin/page-admin-users-edit.pug @@ -0,0 +1,35 @@ +div.content-box__info + sib-link(class='backlink right', next='admin-users-list') Back + + h1.centered + span Edit user + sib-display( + bind-resources='' + fields='name' + ) + + sib-form( + bind-resources='' + range-groups=`${endpoints.groups || endpoints.get.groups}` + + fields='line-1(first_name, last_name), line-2(username, email), line-4-border-top(groups)' + + class-first_name='form-label is-light is-half-width' + class-last_name='form-label is-light is-half-width' + class-username='form-label is-light is-half-width' + class-email='form-label is-light is-half-width' + class-groups='form-label is-light is-half-width select-groups' + + label-first_name='First Name *' + label-last_name='Last Name *' + label-username='Username *' + label-email='Email *' + label-groups='Groups' + + multiple-groups='sib-multiple-select' + widget-groups='sib-form-auto-completion' + + next='admin-user-list' + + submit-button='Save user' + ) diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug index b916ba1..1617d38 100644 --- a/src/views/admin/page-admin-users.pug +++ b/src/views/admin/page-admin-users.pug @@ -2,17 +2,70 @@ sib-router(default-route='admin-users-list', hidden) sib-route(name='admin-users-list') sib-route(name='admin-users-create') + sib-route(name='admin-users-edit') div.content-box__header - h2 Administration + h1.without-margin Administration + + sib-widget(name='sib-action-hd-custom') + template + sib-ac-checker(data-src="${src}", permission='acl:Write') + sib-link( + class='button rounded reversed button-blue bordered icon-pencil' + data-src="${src}" + next="${value}" + ) - #admin-users-list(hidden) - div.content-box__info + sib-widget(name='hd-user-admin-groups-display') + template sib-display( - data-src=`${endpoints.users || endpoints.get.users}` - fields="account.picture, name, username, email, groups" - multiple-groups="" + data-src="${value}" + fields="name" ) + #admin-users-list(hidden) + div.content-box__info + div.admin-header + div.admin-header__title Users + sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append') + sib-link( + class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus' + next='admin-users-create' + ) Create a new user + + .table + div.table-header.grey-color + div Name + div Groups + div + + sib-display( + class='table-body' + data-src=`${endpoints.users || endpoints.get.users}` + fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), groups, actions' + + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' + class-profile.city='user-thumb__city' + widget-account.picture='hd-user-avatar' + + class-groups='w33 cell border cell-with-groups' + multiple-groups='' + widget-groups='hd-user-admin-groups-display' + + label-actions='Edit' + action-actions='admin-users-edit' + class-actions='w33 cell border cell-with-buttons' + widget-actions='sib-action-hd-custom' + + order-by='username' + ) + + #admin-users-create(hidden) + include page-admin-users-create.pug + + #admin-users-edit(hidden) + include page-admin-users-edit.pug diff --git a/src/views/job-offer/page-job-offer-create.pug b/src/views/job-offer/page-job-offer-create.pug index 3164807..bc9c1d6 100644 --- a/src/views/job-offer/page-job-offer-create.pug +++ b/src/views/job-offer/page-job-offer-create.pug @@ -14,7 +14,7 @@ label-description='Description*' widget-description='sib-form-textarea' - class-skills='form-label is-dark' + class-skills='form-label is-dark select-skills' label-skills='The required skills for this mission:*' multiple-skills='sib-multiple-select' widget-skills='sib-form-auto-completion' diff --git a/src/views/job-offer/page-job-offer-edit.pug b/src/views/job-offer/page-job-offer-edit.pug index 95e57b8..7fde4ff 100644 --- a/src/views/job-offer/page-job-offer-edit.pug +++ b/src/views/job-offer/page-job-offer-edit.pug @@ -14,7 +14,7 @@ label-description='Description*' widget-description='sib-form-textarea' - class-skills='form-label is-dark' + class-skills='form-label is-dark select-skills' label-skills='The required skills for this mission:*' multiple-skills='sib-multiple-select' widget-skills='sib-form-auto-completion' From 105b8bea547e52a3359ab18bf26c06a377e3395a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 13 Apr 2020 17:02:51 +0000 Subject: [PATCH 5/9] update: fix user admin icon --- src/fonts/custom-icons.svg | 2 +- src/images/add-user.svg | 136 ++++++++++++++++++ src/page-admin.pug | 2 +- src/styles/base/table.scss | 24 +--- src/styles/components/icons/custom-icons.scss | 2 +- src/styles/components/sidebar.scss | 32 +++-- src/views/admin/page-admin-circles-create.pug | 3 - 7 files changed, 168 insertions(+), 33 deletions(-) create mode 100644 src/images/add-user.svg diff --git a/src/fonts/custom-icons.svg b/src/fonts/custom-icons.svg index e24b0c4..0d1e0e9 100644 --- a/src/fonts/custom-icons.svg +++ b/src/fonts/custom-icons.svg @@ -38,7 +38,7 @@ - + diff --git a/src/images/add-user.svg b/src/images/add-user.svg new file mode 100644 index 0000000..5186eb9 --- /dev/null +++ b/src/images/add-user.svg @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/page-admin.pug b/src/page-admin.pug index 0dea326..6043e25 100644 --- a/src/page-admin.pug +++ b/src/page-admin.pug @@ -14,7 +14,7 @@ nav.jsRightMenu(role='navigation') li.jsOffsiteToggle a Fold menu if (endpoints.users || (endpoints.get && endpoints.get.users)) - sib-route(name='admin-users') + sib-route.active-color(name='admin-users') li a Users if endpoints.circles || (endpoints.get && endpoints.get.circles) diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index dc4931d..1d2cb80 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -88,18 +88,18 @@ } } - .cell-with-groups { - align-items: center; - display: flex; - justify-content: center; - } - .cell-with-name { color: $color-233-18-29; font-weight: 600; padding-top: 2.5rem; } + sib-multiple { + display: flex; + align-items: center; + justify-content: center; + } + .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */, [name='user-thumb'] { @extend %user-thumb__grid; @@ -134,18 +134,6 @@ } } - .cell-with-groups { - align-items: center; - display: flex; - justify-content: center; - - >div { - display: flex; - justify-content: space-evenly; - width: 100%; - } - } - sib-ac-checker { align-items: center; display: flex; diff --git a/src/styles/components/icons/custom-icons.scss b/src/styles/components/icons/custom-icons.scss index 2848ce4..b8c030c 100644 --- a/src/styles/components/icons/custom-icons.scss +++ b/src/styles/components/icons/custom-icons.scss @@ -51,7 +51,7 @@ $ci-icons: ( hat: '\e91c', beer1: '\e91d', alien: '\e91e', - drawing: '\e91f', + add-user: '\e91f', feedback: '\e920', globe: '\e921', bubble-add: '\e922' diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 49bdc9c..d7933be 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -53,7 +53,7 @@ padding: 2.15rem 2.55rem; position: relative; /*width: 12em;*/ - + &::before { float: left; font-size: 4rem; @@ -68,12 +68,6 @@ >sib-route { - &[active] { - background-color: $color-233-18-29; - color: $color-46-100-67; - display: inline-block; - } - &[name*='circle'], &[name*='project'] { @@ -109,8 +103,16 @@ @include ci('file'); } - &[name='admin-users']>li { - @include ci('drawing'); + &[name='admin-users']>li::before { + background-color: $color-233-18-29; + content: ''; + display: inline-block; + height: 40px; + mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat; + mask-size: cover; + -webkit-mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat; + -webkit-mask-size: cover; + width: 40px; } &[name='admin-circles']>li { @@ -120,6 +122,18 @@ &[name='admin-projects']>li { @include ci('add'); } + + &[active] { + background-color: $color-233-18-29; + color: $color-46-100-67; + display: inline-block; + } + + &.active-color[active] { + >li::before { + background-color: #ffd857; + } + } } } } diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index f45bf6d..607bb7d 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -8,9 +8,6 @@ div.content-box__info fields='name, description' - label-name='Name *' - label-description='Description *' - class-name='form-label is-light is-full-width' class-description='form-label is-light is-full-width' From 6c8224c0f23534b3767a75f007cd3d2e722e186e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 2 Apr 2020 16:09:23 +0000 Subject: [PATCH 6/9] update: clear unused and fixes CSS --- src/dependencies.pug | 2 - src/header.pug | 2 +- src/page-circle.pug | 2 +- src/page-project.pug | 2 +- src/styles/base/form.scss | 48 ++--- src/styles/base/header.scss | 7 +- src/styles/base/main.scss | 58 +++--- src/styles/base/table.scss | 89 ++------ src/styles/base/user-thumb.scss | 108 ++++++++++ src/styles/components/_index.scss | 2 +- src/styles/components/howto.scss | 3 - src/styles/components/tags.scss | 3 +- src/styles/index.scss | 2 +- src/styles/layout/circle/_index.scss | 1 - src/styles/layout/circle/circle-profile.scss | 72 +------ src/styles/layout/circle/circle.scss | 191 ------------------ src/styles/layout/job-offers/job-offers.scss | 2 +- .../project-profile/project-profile.scss | 177 ---------------- .../layout/project-profile/project.scss | 8 - .../{project-profile => project}/_index.scss | 1 - .../layout/project/project-profile.scss | 115 +++++++++++ src/templates/hd-captain.pug | 8 +- src/templates/hd-circle-team.pug | 7 +- src/templates/hd-customer.pug | 2 +- src/templates/hd-project-team.pug | 9 +- src/views/admin/page-admin-circles-create.pug | 6 +- src/views/admin/page-admin-circles.pug | 10 +- .../admin/page-admin-projects-create.pug | 4 +- src/views/admin/page-admin-projects.pug | 10 +- src/views/admin/page-admin-users.pug | 2 +- src/views/circle/page-circle-edit.pug | 13 +- src/views/job-offer/page-job-offer-create.pug | 17 +- src/views/job-offer/page-job-offer-edit.pug | 2 +- src/views/project/page-project-edit.pug | 4 +- src/views/project/page-project-profile.pug | 2 +- 35 files changed, 358 insertions(+), 633 deletions(-) create mode 100644 src/styles/base/user-thumb.scss delete mode 100644 src/styles/layout/circle/circle.scss delete mode 100644 src/styles/layout/project-profile/project-profile.scss delete mode 100644 src/styles/layout/project-profile/project.scss rename src/styles/layout/{project-profile => project}/_index.scss (58%) create mode 100644 src/styles/layout/project/project-profile.scss diff --git a/src/dependencies.pug b/src/dependencies.pug index ec43d24..4f7189a 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -43,7 +43,5 @@ script(data-default-context, type="application/ld+json") | "account": "http://happy-dev.fr/owl/#account", | "jabberID": "foaf:jabberID", | "picture": "foaf:depiction", - | "firstName": "http://happy-dev.fr/owl/#first_name", - | "lastName": "http://happy-dev.fr/owl/#last_name", | "isAdmin": "http://happy-dev.fr/owl/#is_admin" | } diff --git a/src/header.pug b/src/header.pug index ef56755..83e9cfb 100644 --- a/src/header.pug +++ b/src/header.pug @@ -17,7 +17,7 @@ include templates/hd-user-avatar.pug details#user-controls.notLoggedIn summary(tabindex='0' role='button') sib-display#user-controls__profile( - fields='firstName, account.picture' + fields='first_name, account.picture' widget-account.picture='hd-user-avatar' bind-user ) diff --git a/src/page-circle.pug b/src/page-circle.pug index 9f84093..8aad774 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -10,7 +10,7 @@ class-description='h1-aside description' ) button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU - div.content-box__info + div sib-ac-checker(permission='acl:Read', bind-resources) #circle-chat(hidden) include views/circle/page-circle-chat.pug diff --git a/src/page-project.pug b/src/page-project.pug index ffb9269..66fbfca 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -16,7 +16,7 @@ .mobile-sidebar-button.jsMobileSidebarOpenButton button.icon-arrow-left-circle span MENU - div.content-box__info + div sib-ac-checker(permission='acl:Read', bind-resources) #project-chat(hidden) include views/project/page-project-chat.pug diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 388f197..6fc03d4 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -1,3 +1,18 @@ +#admin-circle-create, +#admin-project-create { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; + } +} + .content-box { &.with-form { @@ -23,16 +38,6 @@ padding-bottom: 0.8rem; } - p.center { - margin: 0; - text-align: center; - } - - [name$='-text'] { - font-size: 1.5rem; - margin-bottom: 2rem; - } - [name^='block-'] { margin-bottom: 2.75rem; } @@ -153,20 +158,17 @@ margin-top: 2.7rem; } - .form-edit { + .form-edit>form { - >form { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-dark, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; } } diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index b330266..291b92e 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -65,6 +65,7 @@ details { margin-right: 2.5rem; + position: relative; @include breakpoint(sm) { margin-right: 0; @@ -82,7 +83,7 @@ } } - details { + .sib-notifications__container { position: relative; .sib-notifications__button { @@ -169,7 +170,7 @@ width: 45%; } - sib-display-value[name='firstName'] { + sib-display-value[name='first_name'] { @include icon('arrow-down'); align-items: center; display: flex; @@ -241,7 +242,7 @@ div { - sib-display-value[name='firstName'] { + sib-display-value[name='first_name'] { @include icon('close'); &::before { diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 32b1174..5c06575 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -1,12 +1,3 @@ -$breakpoints: (phone: 480px, - tablet: 768px, - desktop: 1024px) !default; - -[hidden], -.hidden { - display: none !important; -} - * { outline: none; } @@ -95,6 +86,10 @@ nav { display: contents; } +[hidden], +.hidden { + display: none !important; +} img { max-height: 100%; @@ -121,12 +116,6 @@ h6 { }*/ } -.h2-like { - display: block; - margin: 14.94px 0; - width: 100%; -} - h1, .h1-like { color: $color-233-18-29; font-size: 2rem; @@ -143,6 +132,12 @@ h2, .h2-like { text-transform: uppercase; } +.h2-like { + display: block; + margin: 14.94px 0; + width: 100%; +} + h3 { color: $color-216-4-22; font-size: 1.7rem; @@ -164,21 +159,6 @@ h5 { padding: 3.2rem; } -#admin-circle-create, -#admin-project-create { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-dark, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } -} - .content-box { @include window-style-modal(); display: flex; @@ -199,6 +179,7 @@ h5 { } } +/* Header inside circle, project view */ .content-box__header { border-bottom: 1px solid $color-221-51-90; padding: 3rem; @@ -257,6 +238,12 @@ h5 { } } +.content-box__info { + @extend %padding-block; + display: flex; + flex-direction: column; +} + .modal { color: white; margin: 75px; @@ -280,11 +267,6 @@ h5 { } } -.drive { - width: 100%; - border: 0; -} - .backlink { @include icon('arrow-left-circle'); color: $color-233-18-29; @@ -297,6 +279,11 @@ h5 { margin-right: 1rem; text-decoration: none; } + + &.right { + display: block; + text-align: right; + } } .name { @@ -342,6 +329,7 @@ h5 { @import 'table'; @import 'header'; @import 'menu-left'; +@import 'user-thumb'; // Button global CSS sib-delete, diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index af42ed7..cb5e2a7 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -6,17 +6,6 @@ #admin-project-list, #admin-project-create { - .content-box__info { - @extend %padding-block; - display: flex; - flex-direction: column; - - .backlink { - text-align: right; - display: block; - } - } - .table { .table-header { @@ -85,83 +74,35 @@ padding-top: 2.5rem; } - .cell-with-id-card>div, - /* for the table in circle-edit */ - .cell-with-id-card>sib-display>div, - project-captain[name='user']>sib-display>div { - /* for the captain's cell in project-admin */ - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); + .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */ { + @extend %user-thumb__grid; padding: 0 2.2rem; - >[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%; - } + >.user-thumb__picture { + @extend %user-thumb__picture; } >[name='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + @extend %user-thumb__grid-sup; - [name$='name'] { - color: #7A7F85; - font-weight: 600; - margin-right: 1rem; + .user-thumb__name { + @extend %user-thumb__name; } - sib-multiple>div { - display: flex; - - [name='groups'] { - @extend %tag-role; - } + .user-thumb__groups { + @extend %user-thumb__groups; } } >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; + @extend %user-thumb__grid-inf; - >[name$='username']:not(:empty) { - align-items: center; - display: flex; + >.user-thumb__username:not(:empty) { + @extend %user-thumb__username; + } - &::before { - content: '@'; - - } + >.user-thumb__city:not(:empty) { + @extend %user-thumb__city; } } } diff --git a/src/styles/base/user-thumb.scss b/src/styles/base/user-thumb.scss new file mode 100644 index 0000000..db3902d --- /dev/null +++ b/src/styles/base/user-thumb.scss @@ -0,0 +1,108 @@ +%user-thumb__grid { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); +} + +%user-thumb__grid-sup { + align-items: center; + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; +} + +%user-thumb__grid-inf { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; +} + +%user-thumb__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%; + } +} + +%user-thumb__name { + color: #7A7F85; + font-weight: 600; + margin-right: 1rem; +} + +%user-thumb__groups { + display: flex; + margin-bottom: 1px; + margin-left: 0.6rem; + + [name='groups'], + [name='user.groups'] { + @extend %tag-role; + } +} + +%user-thumb__admin { + @extend %tag-admin; +} + +%user-thumb__username { + align-items: center; + display: flex; + + &::before { + content: '@'; + } +} + +%user-thumb__city { + @include mdi('atom'); + align-items: center; + display: flex; + margin-right: 1.6rem; + + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; + } +} + +%user-thumb__lead { + @include icon('eyeglass'); + align-items: center; + display: flex; + + &::before { + color: $color-43-100-50; + font-size: 1.9rem; + font-weight: bold; + margin-left: 0; + margin-right: 0.50rem; + } +} diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index eecf780..30de5d0 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -1,5 +1,5 @@ @import 'chat'; -@import 'comment.scss'; +@import 'comment'; @import 'filters'; @import 'howto'; @import 'sidebar'; diff --git a/src/styles/components/howto.scss b/src/styles/components/howto.scss index 391e9ba..12b29e5 100644 --- a/src/styles/components/howto.scss +++ b/src/styles/components/howto.scss @@ -12,6 +12,3 @@ flex-shrink: 0; } } - - - diff --git a/src/styles/components/tags.scss b/src/styles/components/tags.scss index f5435c2..80e0310 100644 --- a/src/styles/components/tags.scss +++ b/src/styles/components/tags.scss @@ -15,6 +15,5 @@ font-size: 1.4rem; font-weight: 400; margin-left: 0.6rem; - margin-top: -2px; - padding: 0.3rem 0.98rem; + padding: 0.35rem 0.98rem; } \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index b2b17ba..912d488 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -18,7 +18,7 @@ div#viewport { @import 'components/index'; @import 'layout/members/index'; @import 'layout/job-offers/index'; - @import 'layout/project-profile/index'; + @import 'layout/project/index'; @import 'layout/circle/index'; @import 'layout/user/index'; @import 'layout/events/index'; diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss index 940c5fc..3de89ec 100644 --- a/src/styles/layout/circle/_index.scss +++ b/src/styles/layout/circle/_index.scss @@ -1,3 +1,2 @@ -@import 'circle'; @import 'circle-profile'; @import 'circle-admin'; diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 64dbf51..4afb54a 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -8,62 +8,22 @@ .block { /* peut-être à mettre dans main.scss */ - 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); + .user-thumb>div { + @extend %user-thumb__grid; - >[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%; - } + >.user-thumb__picture { + @extend %user-thumb__picture; } >[name='sup'] { - align-items: center; - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + @extend %user-thumb__grid-sup; - .user-name { - font-weight: 600; + .user-thumb__name { + @extend %user-thumb__name; } .tag-group { - display: flex; - margin-bottom: 1px; - margin-left: 0.6rem; - - [name='groups'] { - @extend %tag-role; - } + @extend %user-thumb__groups; } .tag-admin:not(:empty) { @@ -72,20 +32,10 @@ } >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; + @extend %user-thumb__grid-inf; - >.city:not(:empty) { - @include mdi('atom'); - align-items: center; - display: flex; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } + >.user-thumb__city:not(:empty) { + @extend %user-thumb__city; } } } diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss deleted file mode 100644 index b6f7d2e..0000000 --- a/src/styles/layout/circle/circle.scss +++ /dev/null @@ -1,191 +0,0 @@ -#circle-information, -#circle-edit, -#admin-circle-list, -#admin-circle-create, -#admin-project-list, -#admin-project-create { - - .content-box__info { - @extend %padding-block; - display: flex; - flex-direction: column; - - .backlink { - text-align: right; - display: block; - } - } - - .table { - - .table-header { - display: flex; - flex: 1; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - text-align: center; - - &.grey-color { - background: $color-228-25-79; - color: white; - } - - >* { - border-right: 1px solid white; - flex: 1; - padding: 2.1rem 0; - text-align: center; - } - - >*:last-of-type { - border-right: 1px solid $color-228-25-79; - } - } - - .table-body { - - >div:first-of-type>sib-display>div, - team-template-edit[name='members'] { - display: flex; - border-left: 1px solid $color-228-25-79; - } - - .border { - border-bottom: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - } - - .cell { - text-align: center; - word-wrap: break-word; - } - - .w25 { - width: 25%; - } - - .w33 { - width: 33.3333%; - } - - .w50 { - width: 50%; - } - - .hashtag::before { - content: '#'; - } - } - - .cell-with-name { - color: $color-233-18-29; - font-weight: 600; - padding-top: 2.5rem; - } - - .cell-with-id-card>div, /* for the table in circle-edit */ - .cell-with-id-card>sib-display>div, - project-captain[name='user']>sib-display>div { /* for the captain's cell in project-admin */ - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - padding: 0 2.2rem; - - >[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'] { - color: #7A7F85; - font-weight: 600; - margin-right: 1rem; - } - - sib-multiple>div { - display: flex; - - [name='groups'] { - @extend %tag-role; - } - } - } - - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; - - >[name$='username']:not(:empty) { - align-items: center; - display: flex; - - &::before { - content: '@'; - - } - } - } - } - - .cell-with-buttons { - align-items: center; - display: flex; - justify-content: center; - - [name='button'] { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-blue, - .bordered, - .btn-margin-left; - } - } - } - - sib-ac-checker { - align-items: center; - display: flex; - justify-content: center; - } - } -} \ No newline at end of file diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss index 172e863..64c41fe 100644 --- a/src/styles/layout/job-offers/job-offers.scss +++ b/src/styles/layout/job-offers/job-offers.scss @@ -75,7 +75,7 @@ sib-job-board { margin: 0.25em; } - [name='author.firstName'] { + [name='author.first_name'] { color: $color-0-0-29; font-weight: 600; } diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss deleted file mode 100644 index f212645..0000000 --- a/src/styles/layout/project-profile/project-profile.scss +++ /dev/null @@ -1,177 +0,0 @@ -#project-profile { - - .button-question__position { - position: relative; - bottom: 5px; - } - - .button-question__color { - color: $color-216-4-22; - } - - .customer-box { - display: flex; - margin: 1.6rem 0; - - >* { - border: 1px solid $color-221-51-90; - flex: 0 1 50%; - padding: 1.7rem 2rem; - - &:first-child { - - li:last-child { - margin-top: 3rem; - - p { - margin-top: 0.8rem; - } - } - } - - &:last-child { - border-left: none; - - li { - margin-bottom: 1.5rem; - } - } - } - } - - .customer-logo { - box-sizing: border-box; - display: flex; - height: 8.5vh; - justify-content: flex-end; - margin-top: 20px; - text-align: end; - width: 15vw; - } - - hd-captain>sib-display>div, - hd-project-team>sib-display>div { /* Maybe move it in main.scss. /!\ some fields are different */ - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - - >[name='user.account.picture'], - >[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; - - .user-name { - font-weight: 600; - } - - sib-multiple { - display: flex; - margin-left: 1rem; - - [name='groups'], - [name='user.groups'] { - @extend %tag-role; - } - } - - .tag-admin:not(:empty) { - @extend %tag-admin; - } - } - - >[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; - margin-right: 1.6rem; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } - } - - >[name$='name']:not(:empty), - >[name='is_lead'] { - @include icon('eyeglass'); - align-items: center; - display: flex; - - &::before { - color: $color-43-100-50; - font-size: 1.9rem; - font-weight: bold; - margin-left: 0; - margin-right: 0.50rem; - } - } - } - } - - ul { - list-style: none; - padding-left: 0; - - li { - margin-bottom: 0.5em; - - span::before { - color: $color-43-100-50; - font-size: 2.2rem; - margin: 0 1rem 0 0; - } - - span { - font-weight: bold; - - &.link-color { - color: $color-244-73-62; - } - - &.norm-weight { - font-weight: normal; - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/layout/project-profile/project.scss b/src/styles/layout/project-profile/project.scss deleted file mode 100644 index cd3c9d6..0000000 --- a/src/styles/layout/project-profile/project.scss +++ /dev/null @@ -1,8 +0,0 @@ -#project-profile { - - .content-box__info { - @extend %padding-block; - display: flex; - flex-direction: column; - } -} \ No newline at end of file diff --git a/src/styles/layout/project-profile/_index.scss b/src/styles/layout/project/_index.scss similarity index 58% rename from src/styles/layout/project-profile/_index.scss rename to src/styles/layout/project/_index.scss index 74f68a7..5a93164 100644 --- a/src/styles/layout/project-profile/_index.scss +++ b/src/styles/layout/project/_index.scss @@ -1,2 +1 @@ -@import 'project'; @import 'project-profile'; diff --git a/src/styles/layout/project/project-profile.scss b/src/styles/layout/project/project-profile.scss new file mode 100644 index 0000000..9e8cdd4 --- /dev/null +++ b/src/styles/layout/project/project-profile.scss @@ -0,0 +1,115 @@ +#project-profile { + + .button-question__position { + position: relative; + bottom: 5px; + } + + .button-question__color { + color: $color-216-4-22; + } + + .customer-box { + display: flex; + margin: 1.6rem 0; + + >* { + border: 1px solid $color-221-51-90; + flex: 0 1 50%; + padding: 1.7rem 2rem; + + &:first-child { + + li:last-child { + margin-top: 3rem; + + p { + margin-top: 0.8rem; + } + } + } + + &:last-child { + border-left: none; + + li { + margin-bottom: 1.5rem; + } + } + } + } + + .customer-logo { + box-sizing: border-box; + display: flex; + height: 8.5vh; + justify-content: flex-end; + margin-top: 20px; + text-align: end; + width: 15vw; + } + + .user-thumb>div { + /* Maybe move it in main.scss. /!\ some fields are different */ + @extend %user-thumb__grid; + + >.user-thumb__picture { + @extend %user-thumb__picture; + } + + >[name='sup'] { + @extend %user-thumb__grid-sup; + + .user-thumb__name { + @extend %user-thumb__name; + } + + sib-multiple { + @extend %user-thumb__groups; + } + + .tag-admin:not(:empty) { + @extend %tag-admin; + } + } + + >[name='sub'] { + @extend %user-thumb__grid-inf; + + >.user-thumb__city:not(:empty) { + @extend %user-thumb__city; + } + + >.user-thumb__lead:not(:empty) { + @extend %user-thumb__lead; + } + } + } + + ul { + list-style: none; + padding-left: 0; + + li { + margin-bottom: 0.5em; + + span::before { + color: $color-43-100-50; + font-size: 2.2rem; + margin: 0 1rem 0 0; + } + + span { + font-weight: bold; + + &.link-color { + color: $color-244-73-62; + } + + &.norm-weight { + font-weight: normal; + } + } + } + } +} \ No newline at end of file diff --git a/src/templates/hd-captain.pug b/src/templates/hd-captain.pug index 7119ea2..30a4108 100644 --- a/src/templates/hd-captain.pug +++ b/src/templates/hd-captain.pug @@ -2,12 +2,14 @@ include hd-user-avatar.pug sib-widget(name='hd-captain') template - sib-display( + sib-display.user-thumb( data-src="${await value}" fields='account.picture, sup(name), sub(profile.city, is_lead)' - class-name='user-name' - class-profile.city='city' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-profile.city='user-thumb__city' + class-is_lead='user-thumb__lead' widget-account.picture='hd-user-avatar' widget-is_lead='hd-user-lead' diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index 846f6e9..24539a8 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -2,15 +2,16 @@ include hd-user-avatar.pug sib-widget(name='circle-team-template') template - sib-display( + sib-display.user-thumb( data-src='${await value.user}' fields='account.picture, sup(name, isadmin, groups), sub(profile.city)' value-isadmin='${await value.is_admin}' - class-name='user-name' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' class-isadmin='tag-admin' class-groups='tag-group' - class-profile.city='city' + class-profile.city='user-thumb__city' widget-account.picture='hd-user-avatar' widget-isadmin='hd-circle-user-admin' diff --git a/src/templates/hd-customer.pug b/src/templates/hd-customer.pug index 813aa81..04e891f 100644 --- a/src/templates/hd-customer.pug +++ b/src/templates/hd-customer.pug @@ -10,7 +10,7 @@ sib-widget(name='hd-customer') div h3 Contact: ul - li #[span(class='mdi-account-outline') ${await value.firstName} ${await value.lastName ? await value.lastName : ""}]${await value.role ? `, ${await value.role}` : ""} + li #[span(class='mdi-account-outline') ${await value.first_name} ${await value.last_name ? await value.last_name : ""}]${await value.role ? `, ${await value.role}` : ""} li span(class='link-color norm-weight mdi-email-outline') a(href='mailto:${await value.email}') ${await value.email} diff --git a/src/templates/hd-project-team.pug b/src/templates/hd-project-team.pug index ff0616f..25243f7 100644 --- a/src/templates/hd-project-team.pug +++ b/src/templates/hd-project-team.pug @@ -2,15 +2,18 @@ include hd-user-avatar.pug sib-widget(name='hd-project-team') template - sib-display( + sib-display.user-thumb( data-src='${await value}' fields='user.account.picture, sup(user.name, isadmin, user.groups), sub(user.profile.city, name)' value-isadmin='${await value.is_admin}' - class-user.name='user-name' + class-user.account.picture='user-thumb__picture' + + class-user.name='user-thumb__name' class-isadmin='tag-admin' class-user.groups='tag-group' - class-user.profile.city='city' + class-user.profile.city='user-thumb__city' + class-name='user-thumb__lead' widget-user.account.picture='hd-user-avatar' widget-isadmin='hd-project-user-admin' diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index 500b751..607bb7d 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -1,11 +1,9 @@ div.content-box__info - sib-link(class="backlink", next='admin-circle-list') Back + sib-link(class="backlink right", next='admin-circle-list') Back h1.centered New circle - p.center Here you can create a new circle according to your interests, what you want to share, etc. - - sib-form.block( + sib-form( data-src=`${endpoints.circles || endpoints.post.circles}` fields='name, description' diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index c4428bd..bed9375 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/src/views/admin/page-admin-circles.pug @@ -4,8 +4,8 @@ sib-route(name='admin-circle-create') sib-route(name='circle-left') - div.content-box__header.with-description - h1.title-left.without-margin Administration + div.content-box__header + h1.without-margin Administration #circle-left(hidden) @@ -17,10 +17,14 @@ sib-widget(name='circle-owner') template - sib-display( + sib-display.user-thumb( data-src='${await value}' fields='account.picture, sup(name), sub(username)' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' + widget-account.picture='hd-user-avatar' ) diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug index 6875d11..71dc897 100644 --- a/src/views/admin/page-admin-projects-create.pug +++ b/src/views/admin/page-admin-projects-create.pug @@ -3,7 +3,7 @@ sib-widget(name='hd-template-project-title') p ${value} div.content-box__info - sib-link(class="backlink" next='admin-project-list') Back + sib-link(class="backlink right" next='admin-project-list') Back sib-widget(name="admin-project-add-user") template @@ -18,7 +18,7 @@ div.content-box__info h1.centered New project - sib-form.block( + sib-form( data-src=`${endpoints.projects || endpoints.post.projects}` fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)' diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index d93aa33..51f4b08 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/src/views/admin/page-admin-projects.pug @@ -4,8 +4,8 @@ sib-route(name='admin-project-create') sib-route(name='project-left') - div.content-box__header.with-description - h1.title-left.without-margin Administration + div.content-box__header + h1.without-margin Administration #project-left(hidden) include ../project/page-project-left.pug @@ -38,10 +38,14 @@ sib-widget(name='project-captain') template - sib-display( + sib-display.user-thumb( data-src='${await value}' fields='account.picture, sup(name), sub(username)' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' + widget-account.picture='hd-user-avatar' ) diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug index 031c358..b916ba1 100644 --- a/src/views/admin/page-admin-users.pug +++ b/src/views/admin/page-admin-users.pug @@ -8,7 +8,7 @@ #admin-users-list(hidden) div.content-box__info - sib-display.block( + sib-display( data-src=`${endpoints.users || endpoints.get.users}` fields="account.picture, name, username, email, groups" multiple-groups="" diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index f1ab588..84b46e9 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -7,11 +7,16 @@ div.content-box__info sib-widget(name='team-template-edit') template - sib-display( - class='w50 cell border cell-with-id-card' + sib-display.user-thumb( + class='w50 cell border cell-with-id-card user-thumb' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-groups='user-thumb__groups' + class-profile.city='user-thumb__city' + widget-account.picture='hd-user-avatar' multiple-groups='' @@ -36,12 +41,12 @@ div.content-box__info data-src="${value['@id']}" ) - sib-link(class="backlink", bind-resources, next='circle-profile') Back + sib-link(class="backlink right", bind-resources, next='circle-profile') Back sib-ac-checker(permission='acl:Write', bind-resources) h1 Edit your circle - sib-form.block.form-edit( + sib-form.form-edit( bind-resources fields='block-circle__info(name, owner), description' diff --git a/src/views/job-offer/page-job-offer-create.pug b/src/views/job-offer/page-job-offer-create.pug index c015306..3164807 100644 --- a/src/views/job-offer/page-job-offer-create.pug +++ b/src/views/job-offer/page-job-offer-create.pug @@ -1,32 +1,19 @@ .content-box.with-padding.with-form h1 Post a new job offer - p.center This form allows you to share an offer to all members of the network. - - sib-widget(name='title-text') - template - p Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP". - - sib-widget(name='description-text') - template - p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...' - sib-form.block( + sib-form( data-src=`${endpoints.joboffers || endpoints.post.joboffers}` range-skills=`${endpoints.skills || endpoints.get.skills}` - fields='title, title-text, description, description-text, skills, closingDate' + fields='title, description, skills, closingDate' class-title='field form-label is-light is-expanded' label-title='Title*' - widget-title-text='title-text' - class-description='field form-label is-light is-expanded' label-description='Description*' widget-description='sib-form-textarea' - widget-description-text='description-text' - class-skills='form-label is-dark' label-skills='The required skills for this mission:*' multiple-skills='sib-multiple-select' diff --git a/src/views/job-offer/page-job-offer-edit.pug b/src/views/job-offer/page-job-offer-edit.pug index e13fa5c..95e57b8 100644 --- a/src/views/job-offer/page-job-offer-edit.pug +++ b/src/views/job-offer/page-job-offer-edit.pug @@ -1,7 +1,7 @@ .content-box.with-padding.with-form h1 Edit your job offer - sib-form.block( + sib-form( bind-resources range-skills=`${endpoints.skills || endpoints.get.skills}` diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug index 61e5aa2..b8ab17a 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -6,11 +6,11 @@ div.content-box__info template label ${label} - sib-link(class='backlink', bind-resources, next='project-profile') Back + sib-link(class='backlink right', bind-resources, next='project-profile') Back h1 Edit your project - sib-form.block.form-edit( + sib-form.form-edit( bind-resources fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)' diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug index 62ac1d6..720163f 100644 --- a/src/views/project/page-project-profile.pug +++ b/src/views/project/page-project-profile.pug @@ -55,7 +55,7 @@ sib-router(default-route='project-profile', hidden) h2 Customer informations: - sib-display.block( + sib-display( bind-resources fields='customer' From 019e8b99a6731ff26aa99d188f93747b12f675a1 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 8 Apr 2020 10:57:05 +0000 Subject: [PATCH 7/9] feature: user administration --- config.sample.federated.json | 2 + config.sample.json | 1 + src/page-admin.pug | 4 +- src/styles/base/form.scss | 20 +++++- src/styles/base/main.scss | 6 +- src/styles/base/table.scss | 48 ++++++++++---- src/styles/components/sidebar.scss | 11 ++++ src/styles/layout/user/_index.scss | 3 +- src/styles/layout/user/admin-users.scss | 6 ++ src/views/admin/page-admin-circles-create.pug | 3 + src/views/admin/page-admin-users-create.pug | 35 ++++++++++ src/views/admin/page-admin-users-edit.pug | 35 ++++++++++ src/views/admin/page-admin-users.pug | 65 +++++++++++++++++-- src/views/job-offer/page-job-offer-create.pug | 2 +- src/views/job-offer/page-job-offer-edit.pug | 2 +- 15 files changed, 213 insertions(+), 30 deletions(-) create mode 100644 src/styles/layout/user/admin-users.scss create mode 100644 src/views/admin/page-admin-users-create.pug create mode 100644 src/views/admin/page-admin-users-edit.pug diff --git a/config.sample.federated.json b/config.sample.federated.json index 57aa616..eb316c9 100644 --- a/config.sample.federated.json +++ b/config.sample.federated.json @@ -15,6 +15,7 @@ "events": "http://localhost:8000/events/", "typeevents": "http://localhost:8000/typeevents/", "users": "http://localhost:8000/users/", + "groups": "http://localhost:8000/groups/", "uploads": "http://localhost:8000/upload/" }, "post": { @@ -24,6 +25,7 @@ "events": "http://localhost:8000/events/", "typeevents": "http://localhost:8000/typeevents/", "users": "http://localhost:8000/users/", + "groups": "http://localhost:8000/groups/", "uploads": "http://localhost:8000/upload/" } }, diff --git a/config.sample.json b/config.sample.json index 1741c1c..753554f 100644 --- a/config.sample.json +++ b/config.sample.json @@ -12,6 +12,7 @@ "projects": "http://localhost:8000/projects/", "customers": "http://localhost:8000/customers/", "events": "http://localhost:8000/events/", + "groups": "http://localhost:8000/groups/", "typeevents": "http://localhost:8000/typeevents/", "users": "http://localhost:8000/users/", "uploads": "http://localhost:8000/upload/" diff --git a/src/page-admin.pug b/src/page-admin.pug index 4876a37..0dea326 100644 --- a/src/page-admin.pug +++ b/src/page-admin.pug @@ -5,7 +5,7 @@ if endpoints.projects || (endpoints.get && endpoints.get.projects) #admin-projects(hidden) include views/admin/page-admin-projects.pug - if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + if (endpoints.users || (endpoints.get && endpoints.get.users)) #admin-users(hidden) include views/admin/page-admin-users.pug nav.jsRightMenu(role='navigation') @@ -13,7 +13,7 @@ nav.jsRightMenu(role='navigation') ul li.jsOffsiteToggle a Fold menu - if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + if (endpoints.users || (endpoints.get && endpoints.get.users)) sib-route(name='admin-users') li a Users diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 6fc03d4..a36eacb 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -1,5 +1,7 @@ #admin-circle-create, -#admin-project-create { +#admin-project-create, +#admin-users-create, +#admin-users-edit { input[type='submit'] { @extend .button, @@ -42,12 +44,17 @@ margin-bottom: 2.75rem; } + [name$='border-top'] { + border-top: 1px solid $color-221-51-90; + margin-top: 3rem; + } + form { display: flex; flex-direction: column; } - sib-set-default { + sib-set-default:not([name='user-thumb']) { clear: both; display: flex!important; flex-wrap: wrap; @@ -314,6 +321,14 @@ sib-multiple-select { + &.select-groups .ss-values .ss-disabled::before { + content: "Select groups"; + } + + &.select-skills .ss-values .ss-disabled::before { + content: "Select skills"; + } + sib-form-auto-completion > label { display: flex; flex-direction: column; @@ -363,7 +378,6 @@ &::before { color: $color-213-4-50; - content: "Select skills"; font-weight: normal; } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 5c06575..0dd0cb7 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -82,7 +82,8 @@ nav { /* Quick fix. Will be removed later */ #admin-circles, -#admin-projects { +#admin-projects, +#admin-users { display: contents; } @@ -384,7 +385,8 @@ a, &.rounded { border-radius: 50%; - padding: 0.5rem 1rem; + font-size: 1.8rem; + padding: 1rem; } &.button-link { diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index cb5e2a7..dc4931d 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -4,7 +4,8 @@ #admin-circle-create, #project-edit, #admin-project-list, -#admin-project-create { +#admin-project-create, +#admin-users-list { .table { @@ -68,13 +69,39 @@ } } + .cell-with-buttons { + align-items: center; + display: flex; + justify-content: center; + + [name='button'] { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-blue, + .bordered, + .btn-margin-left; + } + } + } + + .cell-with-groups { + align-items: center; + display: flex; + justify-content: center; + } + .cell-with-name { color: $color-233-18-29; font-weight: 600; padding-top: 2.5rem; } - .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */ { + .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */, + [name='user-thumb'] { @extend %user-thumb__grid; padding: 0 2.2rem; @@ -107,22 +134,15 @@ } } - .cell-with-buttons { + .cell-with-groups { align-items: center; display: flex; justify-content: center; - [name='button'] { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-blue, - .bordered, - .btn-margin-left; - } + >div { + display: flex; + justify-content: space-evenly; + width: 100%; } } diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 8b90344..49bdc9c 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -82,6 +82,13 @@ } } + &[name*='users'] { + + >li::before { + font-size: 5rem; + } + } + &[name$='chat']>li { @include ci('chat'); } @@ -102,6 +109,10 @@ @include ci('file'); } + &[name='admin-users']>li { + @include ci('drawing'); + } + &[name='admin-circles']>li { @include ci('bubble-add'); } diff --git a/src/styles/layout/user/_index.scss b/src/styles/layout/user/_index.scss index 1174ebd..f15713e 100644 --- a/src/styles/layout/user/_index.scss +++ b/src/styles/layout/user/_index.scss @@ -1 +1,2 @@ -@import 'user-profile'; \ No newline at end of file +@import 'user-profile'; +@import 'admin-users'; diff --git a/src/styles/layout/user/admin-users.scss b/src/styles/layout/user/admin-users.scss new file mode 100644 index 0000000..61f0e46 --- /dev/null +++ b/src/styles/layout/user/admin-users.scss @@ -0,0 +1,6 @@ +/* Fix. Could disappear when we can add .class on set fields */ +sib-set-default[name='cell-1'] { + @extend .w33; + @extend .cell; + @extend .border; +} \ No newline at end of file diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index 607bb7d..f45bf6d 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -8,6 +8,9 @@ div.content-box__info fields='name, description' + label-name='Name *' + label-description='Description *' + class-name='form-label is-light is-full-width' class-description='form-label is-light is-full-width' diff --git a/src/views/admin/page-admin-users-create.pug b/src/views/admin/page-admin-users-create.pug new file mode 100644 index 0000000..635bd77 --- /dev/null +++ b/src/views/admin/page-admin-users-create.pug @@ -0,0 +1,35 @@ +div.content-box__info + sib-link(class='backlink right', next='admin-users-list') Back + + h1.centered Add a new user to the platform + + sib-form( + data-src=`${endpoints.users || endpoints.post.users}` + range-groups=`${endpoints.groups || endpoints.get.groups}` + + fields='line-1(first_name, last_name), line-2(username, email), line-3(password), line-4-border-top(groups)' + + class-first_name='form-label is-light is-half-width' + class-last_name='form-label is-light is-half-width' + class-username='form-label is-light is-half-width' + class-email='form-label is-light is-half-width' + class-groups='form-label is-light is-half-width select-groups' + + label-first_name='First Name *' + label-last_name='Last Name *' + label-username='Username *' + label-email='Email *' + label-groups='Groups' + + multiple-groups='sib-multiple-select' + widget-groups='sib-form-auto-completion' + + value-password='' + widget-password='sib-form-hidden' + + next='admin-user-list' + + submit-button='Create' + ) + + p Administrators of your platform can create new Groups on the Django Administration. diff --git a/src/views/admin/page-admin-users-edit.pug b/src/views/admin/page-admin-users-edit.pug new file mode 100644 index 0000000..4e2a8cb --- /dev/null +++ b/src/views/admin/page-admin-users-edit.pug @@ -0,0 +1,35 @@ +div.content-box__info + sib-link(class='backlink right', next='admin-users-list') Back + + h1.centered + span Edit user + sib-display( + bind-resources='' + fields='name' + ) + + sib-form( + bind-resources='' + range-groups=`${endpoints.groups || endpoints.get.groups}` + + fields='line-1(first_name, last_name), line-2(username, email), line-4-border-top(groups)' + + class-first_name='form-label is-light is-half-width' + class-last_name='form-label is-light is-half-width' + class-username='form-label is-light is-half-width' + class-email='form-label is-light is-half-width' + class-groups='form-label is-light is-half-width select-groups' + + label-first_name='First Name *' + label-last_name='Last Name *' + label-username='Username *' + label-email='Email *' + label-groups='Groups' + + multiple-groups='sib-multiple-select' + widget-groups='sib-form-auto-completion' + + next='admin-user-list' + + submit-button='Save user' + ) diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug index b916ba1..1617d38 100644 --- a/src/views/admin/page-admin-users.pug +++ b/src/views/admin/page-admin-users.pug @@ -2,17 +2,70 @@ sib-router(default-route='admin-users-list', hidden) sib-route(name='admin-users-list') sib-route(name='admin-users-create') + sib-route(name='admin-users-edit') div.content-box__header - h2 Administration + h1.without-margin Administration + + sib-widget(name='sib-action-hd-custom') + template + sib-ac-checker(data-src="${src}", permission='acl:Write') + sib-link( + class='button rounded reversed button-blue bordered icon-pencil' + data-src="${src}" + next="${value}" + ) - #admin-users-list(hidden) - div.content-box__info + sib-widget(name='hd-user-admin-groups-display') + template sib-display( - data-src=`${endpoints.users || endpoints.get.users}` - fields="account.picture, name, username, email, groups" - multiple-groups="" + data-src="${value}" + fields="name" ) + #admin-users-list(hidden) + div.content-box__info + div.admin-header + div.admin-header__title Users + sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append') + sib-link( + class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus' + next='admin-users-create' + ) Create a new user + + .table + div.table-header.grey-color + div Name + div Groups + div + + sib-display( + class='table-body' + data-src=`${endpoints.users || endpoints.get.users}` + fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), groups, actions' + + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' + class-profile.city='user-thumb__city' + widget-account.picture='hd-user-avatar' + + class-groups='w33 cell border cell-with-groups' + multiple-groups='' + widget-groups='hd-user-admin-groups-display' + + label-actions='Edit' + action-actions='admin-users-edit' + class-actions='w33 cell border cell-with-buttons' + widget-actions='sib-action-hd-custom' + + order-by='username' + ) + + #admin-users-create(hidden) + include page-admin-users-create.pug + + #admin-users-edit(hidden) + include page-admin-users-edit.pug diff --git a/src/views/job-offer/page-job-offer-create.pug b/src/views/job-offer/page-job-offer-create.pug index 3164807..bc9c1d6 100644 --- a/src/views/job-offer/page-job-offer-create.pug +++ b/src/views/job-offer/page-job-offer-create.pug @@ -14,7 +14,7 @@ label-description='Description*' widget-description='sib-form-textarea' - class-skills='form-label is-dark' + class-skills='form-label is-dark select-skills' label-skills='The required skills for this mission:*' multiple-skills='sib-multiple-select' widget-skills='sib-form-auto-completion' diff --git a/src/views/job-offer/page-job-offer-edit.pug b/src/views/job-offer/page-job-offer-edit.pug index 95e57b8..7fde4ff 100644 --- a/src/views/job-offer/page-job-offer-edit.pug +++ b/src/views/job-offer/page-job-offer-edit.pug @@ -14,7 +14,7 @@ label-description='Description*' widget-description='sib-form-textarea' - class-skills='form-label is-dark' + class-skills='form-label is-dark select-skills' label-skills='The required skills for this mission:*' multiple-skills='sib-multiple-select' widget-skills='sib-form-auto-completion' From 92c8ace547a78f5674f4de155e51c8911f35ef61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 13 Apr 2020 17:02:51 +0000 Subject: [PATCH 8/9] update: fix user admin icon --- src/fonts/custom-icons.svg | 2 +- src/images/add-user.svg | 136 ++++++++++++++++++ src/page-admin.pug | 2 +- src/styles/base/table.scss | 24 +--- src/styles/components/icons/custom-icons.scss | 2 +- src/styles/components/sidebar.scss | 32 +++-- src/views/admin/page-admin-circles-create.pug | 3 - 7 files changed, 168 insertions(+), 33 deletions(-) create mode 100644 src/images/add-user.svg diff --git a/src/fonts/custom-icons.svg b/src/fonts/custom-icons.svg index e24b0c4..0d1e0e9 100644 --- a/src/fonts/custom-icons.svg +++ b/src/fonts/custom-icons.svg @@ -38,7 +38,7 @@ - + diff --git a/src/images/add-user.svg b/src/images/add-user.svg new file mode 100644 index 0000000..5186eb9 --- /dev/null +++ b/src/images/add-user.svg @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/page-admin.pug b/src/page-admin.pug index 0dea326..6043e25 100644 --- a/src/page-admin.pug +++ b/src/page-admin.pug @@ -14,7 +14,7 @@ nav.jsRightMenu(role='navigation') li.jsOffsiteToggle a Fold menu if (endpoints.users || (endpoints.get && endpoints.get.users)) - sib-route(name='admin-users') + sib-route.active-color(name='admin-users') li a Users if endpoints.circles || (endpoints.get && endpoints.get.circles) diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index dc4931d..1d2cb80 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -88,18 +88,18 @@ } } - .cell-with-groups { - align-items: center; - display: flex; - justify-content: center; - } - .cell-with-name { color: $color-233-18-29; font-weight: 600; padding-top: 2.5rem; } + sib-multiple { + display: flex; + align-items: center; + justify-content: center; + } + .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */, [name='user-thumb'] { @extend %user-thumb__grid; @@ -134,18 +134,6 @@ } } - .cell-with-groups { - align-items: center; - display: flex; - justify-content: center; - - >div { - display: flex; - justify-content: space-evenly; - width: 100%; - } - } - sib-ac-checker { align-items: center; display: flex; diff --git a/src/styles/components/icons/custom-icons.scss b/src/styles/components/icons/custom-icons.scss index 2848ce4..b8c030c 100644 --- a/src/styles/components/icons/custom-icons.scss +++ b/src/styles/components/icons/custom-icons.scss @@ -51,7 +51,7 @@ $ci-icons: ( hat: '\e91c', beer1: '\e91d', alien: '\e91e', - drawing: '\e91f', + add-user: '\e91f', feedback: '\e920', globe: '\e921', bubble-add: '\e922' diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 49bdc9c..d7933be 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -53,7 +53,7 @@ padding: 2.15rem 2.55rem; position: relative; /*width: 12em;*/ - + &::before { float: left; font-size: 4rem; @@ -68,12 +68,6 @@ >sib-route { - &[active] { - background-color: $color-233-18-29; - color: $color-46-100-67; - display: inline-block; - } - &[name*='circle'], &[name*='project'] { @@ -109,8 +103,16 @@ @include ci('file'); } - &[name='admin-users']>li { - @include ci('drawing'); + &[name='admin-users']>li::before { + background-color: $color-233-18-29; + content: ''; + display: inline-block; + height: 40px; + mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat; + mask-size: cover; + -webkit-mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat; + -webkit-mask-size: cover; + width: 40px; } &[name='admin-circles']>li { @@ -120,6 +122,18 @@ &[name='admin-projects']>li { @include ci('add'); } + + &[active] { + background-color: $color-233-18-29; + color: $color-46-100-67; + display: inline-block; + } + + &.active-color[active] { + >li::before { + background-color: #ffd857; + } + } } } } diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index f45bf6d..607bb7d 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -8,9 +8,6 @@ div.content-box__info fields='name, description' - label-name='Name *' - label-description='Description *' - class-name='form-label is-light is-full-width' class-description='form-label is-light is-full-width' From 4f051b345d7c5e2d5893e1a03e8f54ea1b7a2e9d Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 20 Apr 2020 13:56:46 +0200 Subject: [PATCH 9/9] fix: redirection and cache --- src/scripts/index.js | 15 ++++++++++++++- src/views/admin/page-admin-users-create.pug | 2 +- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/scripts/index.js b/src/scripts/index.js index 9bd9d14..983ae7b 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -91,6 +91,17 @@ function refreshSibDisplays(resourceId, clearCache = true) { }); // and update them } +async function updateSources(resource) { + let res = resource.split('/'); + res.splice(3, 0, 'sources'); + let cacheCleared = false; + if (event.target.component.resource != null) { + event.target.component.resource.clearCache(); + cacheCleared = true; + } + refreshSibDisplays(res.join('/'),cacheCleared); +} + //auxiliary function updates displays using a given resource //NOTE: this is a temporary workaround and should be replaced by a reactive storage //https://git.happy-dev.fr/startinblox/framework/sib-core/issues/524 @@ -98,6 +109,7 @@ async function refreshResource(event) { // if of the edited resource || id of the container of the created resource const resourceId = event.detail.resource["@id"] || event.target.dataset.src; + updateSources(resourceId, event); let resource = document .querySelector('[data-src="' + resourceId + '"]') .component.resource.getResourceData(); @@ -106,8 +118,9 @@ async function refreshResource(event) { let partnerId = null; if (resourceId.includes("circle-members")) { partnerId = resource["http://happy-dev.fr/owl/#circle"]["@id"]; - } else if (resourceId.includes("project-members")) + } else if (resourceId.includes("project-members")) { partnerId = resource["http://happy-dev.fr/owl/#project"]["@id"]; + } //refresh all resources using the partner ID if (partnerId != null) { diff --git a/src/views/admin/page-admin-users-create.pug b/src/views/admin/page-admin-users-create.pug index 635bd77..7bd4e62 100644 --- a/src/views/admin/page-admin-users-create.pug +++ b/src/views/admin/page-admin-users-create.pug @@ -27,7 +27,7 @@ div.content-box__info value-password='' widget-password='sib-form-hidden' - next='admin-user-list' + next='admin-users-list' submit-button='Create' )