feature: admin-circle-list

This commit is contained in:
gaelle morin 2020-12-05 19:26:52 +01:00
parent 1f7dbe8bca
commit c8f393d652
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
9 changed files with 220 additions and 37 deletions

View File

@ -20,16 +20,80 @@ html(lang="en")
include header.pug include header.pug
nav#main__menu.segment.bg-color-heading.lg-quarter.float-left 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 //-nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
include menu-left.pug include menu-left.pug

View File

@ -8,10 +8,13 @@ a {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
form {
display: inline-block;
}
&.button { &.button {
padding: 8px 20px; padding: 7.5px 20px;
border-radius: 16.5px; border-radius: 16.5px;
height: 33px;
&.rounded { &.rounded {
border-radius: 50%; border-radius: 50%;
@ -25,7 +28,7 @@ a {
} }
&.icon::before { &.icon::before {
font-size: 15px; font-size: 15px;
margin-right: 10px; margin-right: 6px;
} }
&.color-primary { &.color-primary {
background-color: white; background-color: white;

View File

@ -1,4 +1,5 @@
@import 'colors'; @import 'colors';
@import 'loaders';
@import 'texts'; @import 'texts';
@import 'borders'; @import 'borders';
@import 'shadows'; @import 'shadows';

View File

@ -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);
}
}

View File

@ -19,17 +19,29 @@
font-size: 18px; font-size: 18px;
} }
&-normal { &-normal {
*,
& {
font-weight: 400; font-weight: 400;
} }
}
&-semibold { &-semibold {
*,
& {
font-weight: 600; font-weight: 600;
} }
}
&-bold { &-bold {
*,
& {
font-weight: 700; font-weight: 700;
} }
}
&-uppercase { &-uppercase {
*,
& {
text-transform: uppercase; text-transform: uppercase;
} }
}
&-underline { &-underline {
text-decoration: underline; text-decoration: underline;
} }

View File

@ -15,7 +15,7 @@
flex: 0 0 auto; flex: 0 0 auto;
height: 50px; height: 50px;
width: 50px; width: 50px;
margin-right: 16px; margin-right: 15px;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
@ -34,6 +34,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
border-radius: 50%;
} }
>object { >object {
max-height: 40%; max-height: 40%;
@ -65,8 +66,13 @@
} }
} }
.user-thumb__sub-text { .user-thumb-content__sub-text {
color: red; display: flex;
font-size: 12px;
&::before {
content: "@";
}
} }
} }
} }

View File

@ -1,8 +1,29 @@
.table-wrapper { .table-wrapper {
overflow: auto;
position: relative; position: relative;
width: 100%; 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 { .table {
border-collapse: collapse; border-collapse: collapse;
display: table; display: table;

View File

@ -5,6 +5,7 @@
:root { :root {
color: #636363;
font-size: 14px; font-size: 14px;
} }
@import 'hubl-framework/_index'; @import 'hubl-framework/_index';

View File

@ -11,38 +11,41 @@
solid-widget(name='hubl-circle-owner') solid-widget(name='hubl-circle-owner')
template template
solid-display.user-thumb.block.is-spaced( solid-display.segment.margin-left-xlarge.user-thumb(
data-src='${await value}' 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-account.picture='user-thumb-avatar'
class-name='user-thumb__name' class-content='user-thumb-content'
class-username='user-thumb__username' 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' 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 div
h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title') h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
div.segment.lg-hidden div.segment.lg-hidden
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile') button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')
div.segment.padding-xlarge div.segment.padding-large
div.segment.padding-y-small.margin-bottom.clearfix div.segment.margin-bottom-medium.clearfix
div.segment.lg-half.float-left div.segment.lg-half.float-left
h3.text-large.text-bold.text-letter-spacing-large(data-trans='circle.list.subTitle') h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
div.segment.lg-half.float-left.text-right 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-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
solid-link( 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' next='admin-circle-create' data-trans='circle.list.buttonCreate'
) )
.table-wrapper .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.tableHeader1')
div.table-cell.w280(data-trans='circle.list.tableHeader2') div.table-cell.w280(data-trans='circle.list.tableHeader2')
div.table-cell.w280(data-trans='circle.list.tableHeader3') div.table-cell.w280(data-trans='circle.list.tableHeader3')
@ -50,7 +53,7 @@
solid-widget(name='hubl-admin-circle-leave-button') solid-widget(name='hubl-admin-circle-leave-button')
template template
solid-delete( 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-src="${src}"
data-label='' data-label=''
data-trans='data-label=circle.list.buttonQuit' data-trans='data-label=circle.list.buttonQuit'
@ -70,8 +73,8 @@
fields='circle.name, circle.owner, leaveButton' fields='circle.name, circle.owner, leaveButton'
loader-id='loader-admin-circles' loader-id='loader-admin-circles'
class-circle.name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline' 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 cell-with-id-card' class-circle.owner='table-cell w280'
class-leaveButton='table-cell w280' class-leaveButton='table-cell w280'
action-leaveButton="joinButton" action-leaveButton="joinButton"
@ -84,7 +87,7 @@
solid-widget(name='hubl-admin-circle-join-button') solid-widget(name='hubl-admin-circle-join-button')
template template
solid-form( 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}' data-src='${value}'
fields='user.username' fields='user.username'
@ -108,8 +111,8 @@
fields='name, owner, members' fields='name, owner, members'
loader-id='loader-admin-circles' loader-id='loader-admin-circles'
class-name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline' class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
class-owner='table-cell w280 border cell-with-id-card' class-owner='table-cell w280'
widget-owner='hubl-circle-owner' widget-owner='hubl-circle-owner'
class-members='table-cell w280' class-members='table-cell w280'