From c8f393d65276b6ee9f7fec1ab19ec44d09a40230 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Sat, 5 Dec 2020 19:26:52 +0100 Subject: [PATCH] feature: admin-circle-list --- src/index.pug | 78 +++++++++++++++++-- src/styles/hubl-framework/buttons/_index.scss | 9 ++- src/styles/hubl-framework/commons/_index.scss | 1 + .../hubl-framework/commons/loaders.scss | 72 +++++++++++++++++ src/styles/hubl-framework/commons/texts.scss | 20 ++++- .../hubl-framework/commons/user-thumb.scss | 12 ++- src/styles/hubl-framework/tables/tables.scss | 23 +++++- src/styles/index.scss | 1 + src/views/admin/page-admin-circles.pug | 41 +++++----- 9 files changed, 220 insertions(+), 37 deletions(-) create mode 100644 src/styles/hubl-framework/commons/loaders.scss diff --git a/src/index.pug b/src/index.pug index 6719d1f..2f6a640 100644 --- a/src/index.pug +++ b/src/index.pug @@ -20,16 +20,80 @@ html(lang="en") include header.pug nav#main__menu.segment.bg-color-heading.lg-quarter.float-left - p Hi! + include menu-left.pug + + main#content.segment.bg-color-third.lg-three-quarter.float-left.notLoggedIn + if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) + #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding + include page-dashboard.pug + + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + #members(hidden, data-view="members").no-sidebar.with-padding + include page-directory.pug + + if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) + #job-offers(hidden, data-view="job-offers").no-sidebar.with-padding + if (endpoints.post && endpoints.post.joboffers) && (endpoints.get && endpoints.get.joboffers) + hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) + hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) + hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`) + include page-job-offers.pug + + if endpoints.projects || (endpoints.get && endpoints.get.projects) + #project(hidden, data-view="project").segment.lg-full.with-sidebar + if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects) + hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`) + hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`) + hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`) + include page-project.pug + + if endpoints.circles || (endpoints.get && endpoints.get.circles) + #circle(hidden, data-view="circle").with-sidebar + if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles) + hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`) + hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`) + hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`) + include page-circle.pug + if endpoints.users || (endpoints.get && endpoints.get.users) + #messages(hidden, data-view="messages").with-sidebar + include page-messages.pug + + if endpoints.polls || (endpoints.get && endpoints.get.polls) + #polls(hidden, data-view="polls").with-sidebar + include page-polls.pug + + if endpoints.events || (endpoints.get && endpoints.get.events) + #events(hidden, data-view="events") + include page-events.pug + + if endpoints.resources || (endpoints.get && endpoints.get.resources) + #resources(hidden, data-view="resources") + include page-resources.pug + + #admin(hidden, data-view="admin").segment.lg-full.with-sidebar + include page-admin.pug + + #about(data-view="about").no-sidebar.with-padding + include page-about.pug + + if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users)) - main#content.segment.bg-color-third.lg-three-quarter.float-left - p Hello - //- header#header.header.is-spaced(role='banner') - include header.pug - //-header#header.segment.bg-color-white.shadow - include header.pug //-nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu include menu-left.pug diff --git a/src/styles/hubl-framework/buttons/_index.scss b/src/styles/hubl-framework/buttons/_index.scss index 9487109..524cfaf 100644 --- a/src/styles/hubl-framework/buttons/_index.scss +++ b/src/styles/hubl-framework/buttons/_index.scss @@ -8,10 +8,13 @@ a { display: inline-block; padding: 0; + form { + display: inline-block; + } + &.button { - padding: 8px 20px; + padding: 7.5px 20px; border-radius: 16.5px; - height: 33px; &.rounded { border-radius: 50%; @@ -25,7 +28,7 @@ a { } &.icon::before { font-size: 15px; - margin-right: 10px; + margin-right: 6px; } &.color-primary { background-color: white; diff --git a/src/styles/hubl-framework/commons/_index.scss b/src/styles/hubl-framework/commons/_index.scss index 33ac785..5880cf9 100644 --- a/src/styles/hubl-framework/commons/_index.scss +++ b/src/styles/hubl-framework/commons/_index.scss @@ -1,4 +1,5 @@ @import 'colors'; +@import 'loaders'; @import 'texts'; @import 'borders'; @import 'shadows'; diff --git a/src/styles/hubl-framework/commons/loaders.scss b/src/styles/hubl-framework/commons/loaders.scss new file mode 100644 index 0000000..e6276d4 --- /dev/null +++ b/src/styles/hubl-framework/commons/loaders.scss @@ -0,0 +1,72 @@ +.loader { + margin: 0 auto; + position: relative; + width: 80px; + height: 20px; + + &.loader-top { + top: 30px; + } + + div { + position: absolute; + width: 13px; + height: 13px; + border-radius: 50%; + background: var(--color-menu-background); + animation-timing-function: cubic-bezier(0, 1, 1, 0); + } + + &.loader-menu div { + width: 8px; + height: 8px; + background: var(--color-menu-text); + } + + div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; + } + + div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; + } + + div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; + } + + div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; + } +} + +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} + +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} + +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} diff --git a/src/styles/hubl-framework/commons/texts.scss b/src/styles/hubl-framework/commons/texts.scss index 1b2e856..cebd3ee 100644 --- a/src/styles/hubl-framework/commons/texts.scss +++ b/src/styles/hubl-framework/commons/texts.scss @@ -19,16 +19,28 @@ font-size: 18px; } &-normal { - font-weight: 400; + *, + & { + font-weight: 400; + } } &-semibold { - font-weight: 600; + *, + & { + font-weight: 600; + } } &-bold { - font-weight: 700; + *, + & { + font-weight: 700; + } } &-uppercase { - text-transform: uppercase; + *, + & { + text-transform: uppercase; + } } &-underline { text-decoration: underline; diff --git a/src/styles/hubl-framework/commons/user-thumb.scss b/src/styles/hubl-framework/commons/user-thumb.scss index c4cbead..70f515d 100644 --- a/src/styles/hubl-framework/commons/user-thumb.scss +++ b/src/styles/hubl-framework/commons/user-thumb.scss @@ -15,7 +15,7 @@ flex: 0 0 auto; height: 50px; width: 50px; - margin-right: 16px; + margin-right: 15px; border-radius: 50%; overflow: hidden; @@ -34,6 +34,7 @@ position: absolute; top: 0; left: 0; + border-radius: 50%; } >object { max-height: 40%; @@ -65,8 +66,13 @@ } } - .user-thumb__sub-text { - color: red; + .user-thumb-content__sub-text { + display: flex; + font-size: 12px; + + &::before { + content: "@"; + } } } } diff --git a/src/styles/hubl-framework/tables/tables.scss b/src/styles/hubl-framework/tables/tables.scss index 71aeaa4..37e0253 100644 --- a/src/styles/hubl-framework/tables/tables.scss +++ b/src/styles/hubl-framework/tables/tables.scss @@ -1,7 +1,28 @@ .table-wrapper { - overflow: auto; position: relative; width: 100%; + + /* Bottom scrollbar */ + overflow: auto; + height: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: none; + scrollbar-width: thin; + scrollbar-color: var(--color-heading) var(--color-grey); + + &::-webkit-scrollbar-track { + background-color: var(--color-grey); + border-radius: 10px; + } + + &::-webkit-scrollbar { + height: 5px; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--color-heading); + border-radius: 10px; + } .table { border-collapse: collapse; diff --git a/src/styles/index.scss b/src/styles/index.scss index e9b9435..6b6673d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -5,6 +5,7 @@ :root { + color: #636363; font-size: 14px; } @import 'hubl-framework/_index'; diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index 4001bb4..01ee2e2 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/src/views/admin/page-admin-circles.pug @@ -11,38 +11,41 @@ solid-widget(name='hubl-circle-owner') template - solid-display.user-thumb.block.is-spaced( + solid-display.segment.margin-left-xlarge.user-thumb( data-src='${await value}' - fields='account.picture, sup(name), sub(username)' + fields='account.picture, content(name-and-icon(name), sub(username))' - class-account.picture='avatar user-thumb__picture' - class-name='user-thumb__name' - class-username='user-thumb__username' + class-account.picture='user-thumb-avatar' + class-content='user-thumb-content' + class-name-and-icon='user-thumb-content__name-and-icon' + class-name='name' + class-sub='user-thumb-content__sub-text' + class-username='' widget-account.picture='hubl-user-avatar' ) - div.segment.padding-xlarge.border-bottom + div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading div h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title') div.segment.lg-hidden button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile') - div.segment.padding-xlarge - div.segment.padding-y-small.margin-bottom.clearfix + div.segment.padding-large + div.segment.margin-bottom-medium.clearfix div.segment.lg-half.float-left - h3.text-large.text-bold.text-letter-spacing-large(data-trans='circle.list.subTitle') - div.segment.lg-half.float-left.text-right + h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle') + div.segment.lg-half.float-left.text-right.padding-top-xxsmall solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append') solid-link( - class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-plus' + class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus' next='admin-circle-create' data-trans='circle.list.buttonCreate' ) .table-wrapper - .table.segment.margin-bottom + .table - div.table-header + div.table-header.bg-color-third.text-color-heading div.table-cell.w280(data-trans='circle.list.tableHeader1') div.table-cell.w280(data-trans='circle.list.tableHeader2') div.table-cell.w280(data-trans='circle.list.tableHeader3') @@ -50,7 +53,7 @@ solid-widget(name='hubl-admin-circle-leave-button') template solid-delete( - class='button text-bolder text-uppercase button-secondary bordered icon icon-close' + class='button text-xsmall text-bold text-uppercase color-secondary bordered' data-src="${src}" data-label='' data-trans='data-label=circle.list.buttonQuit' @@ -70,8 +73,8 @@ fields='circle.name, circle.owner, leaveButton' loader-id='loader-admin-circles' - class-circle.name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline' - class-circle.owner='table-cell w280 cell-with-id-card' + class-circle.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline' + class-circle.owner='table-cell w280' class-leaveButton='table-cell w280' action-leaveButton="joinButton" @@ -84,7 +87,7 @@ solid-widget(name='hubl-admin-circle-join-button') template solid-form( - class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-arrow-right-circle' + class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle' data-src='${value}' fields='user.username' @@ -108,8 +111,8 @@ fields='name, owner, members' loader-id='loader-admin-circles' - class-name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline' - class-owner='table-cell w280 border cell-with-id-card' + class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline' + class-owner='table-cell w280' widget-owner='hubl-circle-owner' class-members='table-cell w280'